Responsive modal!

krasch · Jan 29, 2025 · 023efe4 · 023efe4
1 parent 8061016
commit 023efe4
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 74 deletions.
diff --git a/index.html b/index.html
@@ -229,24 +229,22 @@ <h3><label for="date-picker-input">Abreisedatum: </label></h3>
     <a class="logo" href="/">
         <img src="images/logo.svg" alt="logo for the trans-europe-planner">
     </a>
-    <div class="header">
-        <h1>Willkommen beim Trans Europa Planer</h1>
+    <div>
+       <h1>Willkommen beim Trans Europa Planer</h1>
         <h3><em>Einfacher mit dem Zug quer durch Europa</em></h3>
     </div>
-    <div class="content">
-        <img src="images/markers/marker_home.svg" alt="map marker depicting a house">
-        <div id="choose-home">
-            <h1>Wo soll die Reise starten?</h1>
-            <div>
-                <a href="?start=Berlin">Berlin</a>
-                <a href="?start=Hamburg">Hamburg</a>
-                <a href="?start=Köln">Köln</a>
-                <a href="?start=München">München</a>
-            </div>
-            <em>(Weitere Startpunkte bald verfügbar)</em>
+
+    <img class="marker" src="images/markers/marker_home.svg" alt="map marker depicting a house">
+    <div id="choose-home">
+        <h1>Wo soll die Reise starten?</h1>
+        <div>
+            <a href="?start=Berlin">Berlin</a>
+            <a href="?start=Hamburg">Hamburg</a>
+            <a href="?start=Köln">Köln</a>
+            <a href="?start=München">München</a>
         </div>
+        <em>(Weitere Startpunkte bald verfügbar)</em>
     </div>
-    <div class="bottom"></div>
 </div>
 
 <script type="module">
@@ -294,11 +292,10 @@ <h1>Wo soll die Reise starten?</h1>
                 }
 
                 // todo did not manage to do this via CSS selectors
-                if (tab.id === "tab-calendar" || tab.id === "tab-summary"){
+                if (tab.id === "tab-calendar" || tab.id === "tab-summary") {
                     warning.classList.add("active");
                     shareBook.classList.add("active");
-                }
-                else {
+                } else {
                     warning.classList.remove("active");
                     shareBook.classList.remove("active");
                 }

diff --git a/style/components/modal.css b/style/components/modal.css
@@ -13,99 +13,97 @@
 
   min-height: 50%;
   min-width: 50%;
-}
-
-
-#modal {
-  --logo-height: 6rem;
-  --padding: 0.5rem;
 
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
+    overflow: hidden;
 
-  border-radius: 1rem;
-  overflow: hidden; /* this is necessary to really get the round corners */
+  --logo-size: 6rem;
 }
 
-#modal > * {
-  padding: var(--padding);
-}
+@media only screen and (max-width: 1000px) {
+    #modal {
+      min-width: 80%;
+      min-height: 80%;
+    }
+
+  #modal h1 {
+    font-size: 1.5rem;
+  }
 
-#modal > .header,
-#modal > .bottom {
-  height: calc(var(--logo-height) + 2 * var(--padding));
+  #modal h3 {
+    font-size: 1rem;
+  }
 }
 
-#modal > .logo {
-  position: absolute;
-  top: var(--padding);
-  left: var(--padding);
-  height: var(--logo-height);
+#modal {
+  display: grid;
+  grid-auto-flow: row;
+  grid-template-columns: calc(var(--logo-size) * 2) 1fr;
+  grid-template-rows: min(min-content, calc(var(--logo-size) * 2)) 1fr;
 }
 
-#modal > .logo > img {
+#modal > * {
   height: 100%;
-}
+  width: 100%;
+
+  padding-right: 1rem;
 
-#modal .header {
   display: flex;
   flex-direction: column;
 
   justify-content: center;
-  align-items: center;
+  align-content: center;
 }
 
-#modal .content {
-  display: flex;
-  flex-direction: row;
-
-  justify-content: center;
-  align-items: center;
 
-  gap: 2rem;
+#modal .logo img,
+#modal .marker {
+  align-self: center;
+  height: var(--logo-size);
 }
 
 #modal #choose-home {
   display: flex;
   flex-direction: column;
-  align-items: center;
-  gap: calc(2 * var(--padding));
+  gap: 1rem;
+}
+
+#modal #choose-home div {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 0.5rem;
 }
 
+
 /***********************************************
  style
 ************************************************/
 
-#modal {
-  --color-modal-light: white;
-  --filter-modal-light: var(--filter-white);
-
-  --color-modal-dark: var(--color-dark);
-  --filter-modal-dark: var(--filter-dark);
 
-  color: var(--color-modal-dark);
-  background-color: var(--color-modal-light);
+#modal {
+  color: var(--color-dark);
+  background-color: var(--color-light);
 
-  border: 1px solid var(--color-modal-dark);
+  border: 1px solid var(--color-dark);
+  border-radius: 1rem;
 }
 
-#modal .logo {
-  filter: var(--filter-modal-light);
+#modal > *:first-child,
+#modal > *:nth-child(2) {
+  background-color: var(--color-dark);
+  color: var(--color-light);
 }
 
-#modal > .header,
-#modal > .bottom {
-  color: var(--color-modal-light);
-  background-color: var(--color-modal-dark);
+#modal .logo img {
+  filter: var(--filter-white)
 }
 
-#modal > .content img {
-  filter: var(--filter-modal-dark);
+#modal .marker {
+  filter: var(--filter-dark);
 }
 
-#modal > .content a {
-  border: 1px solid var(--color-modal-dark);
+#modal #choose-home a {
+  border: 1px solid var(--color-dark);
   border-radius: 0.25rem;
   box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
 
@@ -115,10 +113,11 @@
   text-decoration: none;
 
   background: white;
-  color: var(--color-modal-dark);
+  color: var(--color-dark);
 }
 
-#modal > .content a:hover {
-  background: var(--color-modal-dark);
+#modal #choose-home a:hover {
+  background: var(--color-dark);
   color: white;
 }
+