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

11
index.html
View File

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

19
index.js
View File

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