Merge branch 'master' into resizeSvg

index.html

@@ -57,7 +57,7 @@
 			.translationText, .romanizationText {
 				visibility: hidden;
 				font-family: "Noto Sans";
-				font-size:1.25em;
+				font-size:1.2em;
 			}
 
          .romanizationText {
@@ -67,7 +67,7 @@
          .languageText {
             pointer-events: none;
             font-weight: bold;
-            font-size: 1.15em;
+            font-size: 1em;
             font-family: sans-serif;
             visibility: hidden;
          }
@@ -180,9 +180,19 @@
 			}
 			@media only screen and (max-width: 768px) {
 					main {
-							flex-direction: column;
+						flex-direction: column;
-                     align-items: stretch;
+                    	align-items: stretch;
 					}
+					.district {
+							stroke-width: 0.1;
+					}
+					.translationText, .romanizationText {
+						font-size: 0.7em;
+					}
+					.languageText {
+						font-size: 0.6em;
+					}
+
 			}
 
 		</style>

index.js

@@ -215,14 +215,14 @@ function stateOrDistrictOrLanguage(d) {
 //	const mapHeight = document.getElementById("indiaMap").getAttribute("height")
 const mapWidth = /*window.innerWidth - */document.querySelector("#svgContainer").offsetWidth * 0.85;
 // const mapHeight = document.querySelector("#svgContainer").offsetHeight;
-const mapHeight = window.innerHeight - document.querySelector("#svgContainer").getBoundingClientRect().top * 0.7;
+const mapHeight = (window.innerHeight - document.querySelector("#svgContainer").getBoundingClientRect().top);
 
 const svg = d3.select("#svgContainer")
 			.append('svg')
 		.attr('width', mapWidth.toString())
       .attr('height', (mapHeight).toString())
-//         .attr('viewbox', '0 0 860 500')
+//      .attr('viewbox', '0 0 ' + mapWidth.toString() + ' ' + mapHeight.toString())
-	//		.attr('preserveAspectRatio', "xMidYMid meet")
+//		.attr('preserveAspectRatio', "xMidYMin")
 			.attr('id', 'indiaMap')
       //   .call(responsivefy);
 
@@ -230,6 +230,20 @@ function drawMap(world) {
 	const projection = d3.geoMercator().fitSize([mapWidth, mapHeight], world)
 	const path = d3.geoPath().projection(projection);
 
+   requestAnimationFrame(() => {
+    const newSvg = d3.select('svg');
+    const bbox = newSvg.node().getBBox();
+    const originalWidth = +newSvg.attr("width");
+    newSvg
+//   .attr("viewBox", `${bbox.x} ${bbox.y} ${bbox.width} ${bbox.height}`)
+   .attr("viewBox", `0 ${bbox.y} ${originalWidth} ${bbox.height}`)
+//   .attr("width", mapHeight.toString())
+   .attr("height", bbox.height)
+ //  .style("display", "block")
+ //  .style("max-height", "100%"); // optional: keep it scalable in a flexbox
+   });
+
+
 	const states = svg.selectAll("g")
 	.data(world.features)
 	.enter()