Rockingcool/india-translator
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Font resizing stuff; looks better on desktop and mobile now

Browse Source
This commit is contained in:
Aadhavan Srinivasan
2025-04-16 16:03:38 -05:00
parent 12d53370fb
commit 4e4570ed03
2 changed files with 20 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
index.html
View File

@@ -58,7 +58,8 @@
visibility: hidden;
font-family: "Noto Sans";
/* font-size:1.2em; */
font-size: max(0.8vmax, 16px);
/* font-size: max(0.8vmax, 16px);*/
font-size: 1.2em;
}
.romanizationText {
@@ -201,14 +202,14 @@
.district {
stroke-width: 0.1;
}
/* .translationText, .romanizationText {
font-size: 1em;
.translationText, .romanizationText {
font-size: 0.8em;
}
.languageText {
font-size: 0.8em;
} */
font-size: 0.6em;
}
}
}
/* @media only screen and (max-width: 768px) {
.translationText, .romanizationText {

19
index.js
View File

@@ -4,7 +4,7 @@ const languages = {
tamil: {name: "Tamil", color: "#75d795", code: "ta", text_align: "start", districts: []},
malayalam: {name: "Malayalam", color: "#ff7c7c", code: "ml", text_align: "end", districts: []},
kannada: {name: "Kannada", color: "#ffe77c", code: "kn", text_align: "middle", districts: []},
telugu: {name: "Telugu", color: "#7c9dff", code: "te", text_align: "middle", districts: []},
telugu: {name: "Telugu", color: "#7c9dff", code: "te", text_align: "start", districts: []},
marathi: {name: "Marathi", color: "#e0ff7c", code: "mr", text_align: "middle", districts: []},
konkani: {name: "Konkani", color: "#9b7cff", code: "gom", text_align: "end", districts: []},
hindi: {name: "Hindi", color: "#d17cff", code: "hi", text_align: "middle", districts: []},
@@ -232,7 +232,12 @@ const svg = d3.select("#svgContainer")
// .call(responsivefy);
function drawMap(world) {
const projection = d3.geoMercator().fitSize([mapWidth, mapHeight], world)
let projection = null;
if (window.innerWidth > 1366) {
projection = d3.geoMercator().fitSize([mapWidth, mapHeight], world)
} else {
projection = d3.geoMercator().fitWidth(mapWidth, world)
}
const path = d3.geoPath().projection(projection);
requestAnimationFrame(() => {
@@ -240,9 +245,9 @@ function drawMap(world) {
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("viewBox", `${bbox.x} ${bbox.y} ${bbox.width} ${bbox.height}`)
// .attr("viewBox", `0 ${bbox.y} ${originalWidth} ${bbox.height}`)
.attr("width", bbox.width)
.attr("height", bbox.height)
// .style("display", "block")
// .style("max-height", "100%"); // optional: keep it scalable in a flexbox
@@ -335,7 +340,9 @@ function drawMap(world) {
rtv += 25;
}
if (d.properties.lang_name == "Hindi") {
rtv += 5 * parseFloat(getComputedStyle(document.documentElement).fontSize); // 5rem
if (window.innerWidth > 768) {
rtv += 3 * parseFloat(getComputedStyle(document.documentElement).fontSize); // rem
}
}
return rtv