From 2a2bfd257c1785f9f132c31d7499fdfb89112a6b Mon Sep 17 00:00:00 2001 From: Tor Andersson Date: Sun, 22 Oct 2023 22:01:20 +0200 Subject: Improve zooming layout. --- play.css | 77 +++++++++++++++---------- play.html | 192 +++++++++++++++++++++++++++++++------------------------------- play.js | 11 ---- 3 files changed, 144 insertions(+), 136 deletions(-) diff --git a/play.css b/play.css index 805e94b..19ae7d5 100644 --- a/play.css +++ b/play.css @@ -41,6 +41,52 @@ main { background-color: #777; } top: 60px; } +#card_panel { + display: flex; + flex-wrap: wrap; + align-content: start; + justify-content: center; + gap: 16px; + padding: 16px; +} + +@media (max-width: 800px) { + #card_panel { + justify-content: start; + } +} + +#table { + display: grid; + width: 100%; + grid-template-columns: 1fr min-content min-content 1fr; + grid-template-rows: min-content max-content; +} + +#mapwrap { + grid-column: 2; + grid-row: 2; +} + +#card_panel { + grid-column: 2; + grid-row: 1; +} + +#mapwrap[data-fit="both"] + #card_panel { + max-width: 250px; + grid-column: 3; + grid-row: 2; +} + +@media (min-width: 2000px) { + #card_panel { + max-width: 250px; + grid-column: 3; + grid-row: 2; + } +} + /* MAP */ #mapwrap { @@ -50,8 +96,8 @@ main { background-color: #777; } margin-bottom: 24px; } -#mapwrap.fit { - margin-bottom: 0 +#mapwrap[data-fit="width"], #mapwrap[data-fit="both"] { + margin-bottom: 0; } #map { @@ -332,33 +378,6 @@ path.tip { stroke: white; stroke-dasharray: 4 4; } /* CARDS */ -#card_panel { - display: flex; - flex-wrap: wrap; - align-content: start; - justify-content: center; - gap: 18px; - padding: 18px; -} - -#card_panel { width: 800px; margin: 0 auto; } -@media (max-width: 800px) { - #card_panel { width: 1614px; justify-content: start; } -} - -/* Put cards on right of map when zoomed to fit, or very wide screen */ -#mapwrap { grid-row: 1; grid-column: 2 } -#card_panel { grid-row: 1; grid-column: 3 } -#grid { grid-template-columns: 1fr min-content min-content 1fr; } - -@media (min-width: 2200px) { - #grid { display: grid; } - #card_panel { width: 250px; } -} - -#grid.fit { display: grid; } -#grid.fit #card_panel { width: 250px; } - .card { width: 248px; height: 348px; diff --git a/play.html b/play.html index 6a8d7bd..628d59c 100644 --- a/play.html +++ b/play.html @@ -98,114 +98,114 @@
-
+
-
- -
-
-
-
-
+
-
- - - - - - - - - - - - - - - - - - - - - -
- -
-
-
-
-
-
-
-
-
-
-
+
+ + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
-
+
+ +
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
-
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
+
+
+
+
+
-
+
diff --git a/play.js b/play.js index dbe4c19..b3fa4e4 100644 --- a/play.js +++ b/play.js @@ -1584,14 +1584,3 @@ function map_get(map, key, missing) { } return missing } - -// TODO: clean up this mess... -var orig_toggle_zoom = toggle_zoom -toggle_zoom = function () { - orig_toggle_zoom() - if (document.getElementById("mapwrap").classList.contains("fit")) - document.getElementById("grid").classList.add("fit") - else - document.getElementById("grid").classList.remove("fit") -} - -- cgit v1.2.3