added mobile version

dist/index.html

@@ -23,7 +23,7 @@
         <div class="top-bar-left">
             <ul class="menu align-center-middle vertical responsive-menu hide-for-medium" data-toggle="main-menu">
                 <span class="menu-closer"></span>
-                <li class="active" data-site="home" data-img="1"><a>Home</a></li>
+                <li class="active" data-site="home" data-img-show-always="1"><a>Home</a></li>
                 <li data-site="tagesablauf"><a>Tagesablauf</a></li>
                 <li data-site="unterkunft"><a>Unterkunft</a></li>
                 <li data-site="geschenke"><a>Geschenke</a></li>

dist/main.css

@@ -4864,6 +4864,9 @@ html.is-reveal-open {
 
 #info-image-container {
   position: relative; }
+  @media print, screen and (max-width: 49.99875em) {
+    #info-image-container img:not(.circler) {
+      width: 100%; } }
   #info-image-container img.circler {
     position: absolute;
     height: 12%;
@@ -4871,32 +4874,32 @@ html.is-reveal-open {
     cursor: pointer; }
     #info-image-container img.circler.godi {
       top: 1.5%;
-      left: 46%; }
+      left: 51%; }
     #info-image-container img.circler.fingerfood {
-      left: 9%;
+      left: 5%;
       top: 12.5%;
-      width: 32%;
+      width: 38%;
       height: 20%; }
     #info-image-container img.circler.foto {
-      left: 48%;
+      left: 55%;
       top: 32%;
-      width: 32%; }
+      width: 33%; }
     #info-image-container img.circler.sekt {
-      left: 9%;
+      left: 7%;
       top: 46.5%;
-      width: 32%; }
+      width: 35%; }
     #info-image-container img.circler.essen {
-      left: 48%;
+      left: 55%;
       top: 60%;
       width: 32%; }
     #info-image-container img.circler.spiel {
-      left: 11%;
+      left: 8%;
       top: 72.5%;
-      width: 30%; }
+      width: 34%; }
     #info-image-container img.circler.dance {
-      left: 48%;
+      left: 55%;
       top: 86%;
-      width: 29%; }
+      width: 32%; }
   #info-image-container[data-state='godi'] .godi {
     opacity: 0.7; }
   #info-image-container[data-state='fingerfood'] .fingerfood {
@@ -4919,6 +4922,30 @@ html.is-reveal-open {
     padding-top: 0; }
   .anchor p:last-child {
     margin-bottom: 0; }
+  .anchor.show-in-dialog {
+    position: fixed; }
+
+#modal {
+  display: none; }
+  #modal.show {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 10;
+    background: #0a0a0a40; }
+    #modal.show .anchor {
+      margin: 10%;
+      width: 80%;
+      max-height: 80%;
+      overflow: auto;
+      padding: 2rem 3rem;
+      background: #d7c9ac; }
 
 @font-face {
   font-family: "WinterSunrise";
@@ -4974,10 +5001,13 @@ a.hidden-link, a.hidden-link:hover {
 h1 {
   font-family: WinterSunrise, serif;
   font-size: 3rem; }
-  @media print, screen and (min-width: 50em) {
+  @media print, screen and (min-width: 64em) {
     h1 {
       font-size: 4.5rem; } }
 
+#home-img-container.hide-for-medium #start-text-img-overlay {
+  display: none; }
+
 #home-img-container #home-img {
   width: 100%;
   height: 100%;
@@ -5018,7 +5048,22 @@ img.full-screen-width {
 
 .site-content {
   padding: 2rem 0.625rem; }
-  @media print, screen and (min-width: 50em) {
+  @media print, screen and (min-width: 64em) {
     .site-content {
       padding: 3rem 2rem; } }
 
+.fill-height {
+  height: calc(100vh - 5rem); }
+  @media print, screen and (max-width: 49.99875em) {
+    .fill-height {
+      height: calc(100vh - 3rem); } }
+
+@media print, screen and (min-width: 50em) {
+  .fill-height-medium-up {
+    height: calc(100vh - 5rem); } }
+
+.img-column {
+  max-width: 40%; }
+  .img-column img {
+    object-fit: cover; }
+

src/client/html/geschenke.html

@@ -1,4 +1,4 @@
-<div class="flex-container height-100">
+<div class="flex-container fill-height-medium-up">
     <div class="grow height-100 overflow-auto site-content">
         <h1>Gechenkliste</h1>
         <p>
@@ -21,7 +21,7 @@
         </div>
 
     </div>
-    <div class="height-100">
+    <div class="height-100 hide-for-small-only img-column fill-height">
         <img src="../img/geschenke.jpg" class="height-100">
     </div>
 </div>

src/client/html/tagesablauf.html

@@ -1,4 +1,4 @@
-<div class="flex-container height-100">
+<div class="flex-container fill-height-medium-up">
     <div class="height-100" id="info-image-container" data-state="godi">
         <img src="../img/tagesablauf.jpg" class="height-100">
         <img src="../img/einkreiser.png" class="circler godi" data-state="godi">
@@ -9,7 +9,7 @@
         <img src="../img/einkreiser.png" class="circler spiel" data-state="spiel">
         <img src="../img/einkreiser.png" class="circler dance" data-state="dance">
     </div>
-    <div class="grow height-100 overflow-auto site-content">
+    <div class="grow height-100 overflow-auto site-content hide-for-small-only">
         <div class="anchor" data-state="godi">
             <h1>Traugottesdienst</h1>
             <p>
@@ -64,4 +64,5 @@
             </p>
         </div>
     </div>
-</div>
+</div>
+<div id = "modal"></div>

src/client/html/unterkunft.html

@@ -1,4 +1,4 @@
-<div class="flex-container height-100">
+<div class="flex-container fill-height-medium-up">
 <!--    <div class="height-100 show-for-small-only">-->
 <!--        <img src="../img/unterkunft.jpg">-->
 <!--    </div>-->
@@ -32,9 +32,8 @@
                         src="https://maps.google.com/maps?width=520&amp;height=395&amp;hl=de&amp;q=IBIS%20budget%20Hotel+Schumacherstr%2012%20Aachen&amp;t=&amp;z=14&amp;ie=UTF8&amp;iwloc=B&amp;output=embed"></iframe>
             </div>
         </div>
-
     </div>
-    <div class="height-100 hide-for-small-only">
+    <div class="height-100 hide-for-small-only img-column">
         <img src="../img/unterkunft.jpg" class="height-100">
     </div>
 </div>

src/client/index.html

@@ -23,7 +23,7 @@
         <div class="top-bar-left">
             <ul class="menu align-center-middle vertical responsive-menu hide-for-medium" data-toggle="main-menu">
                 <span class="menu-closer"></span>
-                <li class="active" data-site="home" data-img="1"><a>Home</a></li>
+                <li class="active" data-site="home" data-img-show-always="1"><a>Home</a></li>
                 <li data-site="tagesablauf"><a>Tagesablauf</a></li>
                 <li data-site="unterkunft"><a>Unterkunft</a></li>
                 <li data-site="geschenke"><a>Geschenke</a></li>

src/client/js/index.ts

@@ -9,6 +9,13 @@ const templates = {
     geschenke: require("../html/geschenke.html"),
 }
 
+const images = {
+    home: require("../img/home.jpg").default,
+    unterkunft: require("../img/unterkunft.jpg").default,
+    tagesablauf: null,
+    geschenke: require("../img/geschenke.jpg").default,
+}
+
 
 const callbacks = {
     home: () => {
@@ -19,6 +26,10 @@ const callbacks = {
         let state = "godi";
         let scrollTimeout = null;
         let scrollToView = false;
+        const modal = document.getElementById("modal");
+        modal.onclick = () => {
+            modal.classList.remove("show");
+        }
 
         const infoImageContainer = document.getElementById("info-image-container");
         infoImageContainer.querySelectorAll(".circler").forEach(circle => {
@@ -26,10 +37,18 @@ const callbacks = {
                 state = (<HTMLElement>circle).dataset["state"];
                 infoImageContainer.dataset["state"] = state;
                 scrollToView = true;
-                document.querySelector(".anchor[data-state='" + state + "']").scrollIntoView({
+                const elemToShow = document.querySelector(".anchor[data-state='" + state + "']");
+                elemToShow.scrollIntoView({
                     "behavior": "smooth",
                     "block": "start"
                 });
+
+                // @ts-ignore
+                if (Foundation.MediaQuery.only("small")) {
+                    modal.innerText = "";
+                    modal.appendChild(elemToShow.cloneNode(true));
+                    modal.classList.add("show")
+                }
             });
         });
 
@@ -90,14 +109,21 @@ $(function () {
             const nowActive = document.querySelectorAll(".menu li[data-site='" + elem.dataset["site"] + "']");
             nowActive.forEach(elem => elem.classList.add("active"));
 
-            container.innerHTML = templates[elem.dataset["site"]];
-            if (elem.dataset["img"] === "1") {
+            currentSite = elem.dataset["site"];
+            container.innerHTML = templates[currentSite];
+            if (images[currentSite]) {
+                img.querySelector("img").src = images[currentSite];
                 img.classList.remove("hidden");
+                if (elem.dataset["imgShowAlways"] === "1") {
+                    img.classList.remove("hide-for-medium")
+                } else {
+                    img.classList.add("hide-for-medium")
+                }
+
             } else {
                 img.classList.add("hidden");
             }
 
-            currentSite = elem.dataset["site"];
 
             if (typeof callbacks[currentSite] === "function") {
                 callbacks[currentSite]();

src/client/sass/_tagesablauf.scss

@@ -1,9 +1,17 @@
+@import "settings";
+
 $opacityVisible: 0.7;
 $states: godi fingerfood foto sekt essen spiel dance;
 
 #info-image-container {
   position: relative;
 
+  @include breakpoint(small down) {
+    img:not(.circler) {
+      width: 100%;
+    }
+  }
+
   img.circler {
     position: absolute;
     height: 12%;
@@ -14,44 +22,44 @@ $states: godi fingerfood foto sekt essen spiel dance;
     //left: 0;
     &.godi {
       top: 1.5%;
-      left: 46%;
+      left: 51%;
     }
 
     &.fingerfood {
-      left: 9%;
+      left: 5%;
       top: 12.5%;
-      width: 32%;
+      width: 38%;
       height: 20%;
     }
 
     &.foto {
-      left: 48%;
+      left: 55%;
       top: 32%;
-      width: 32%;
+      width: 33%;
     }
 
     &.sekt {
-      left: 9%;
+      left: 7%;
       top: 46.5%;
-      width: 32%;
+      width: 35%;
     }
 
     &.essen {
-      left: 48%;
+      left: 55%;
       top: 60%;
       width: 32%;
     }
 
     &.spiel {
-      left: 11%;
+      left: 8%;
       top: 72.5%;
-      width: 30%;
+      width: 34%;
     }
 
     &.dance {
-      left: 48%;
+      left: 55%;
       top: 86%;
-      width: 29%;
+      width: 32%;
     }
   }
 
@@ -62,14 +70,49 @@ $states: godi fingerfood foto sekt essen spiel dance;
   }
 }
 
-.anchor{
+.anchor {
   display: block;
   //margin-bottom: 2rem;
   padding-top: 1rem;
-  &:first-child{
+
+  &:first-child {
     padding-top: 0;
-  };
+  }
+
   p:last-child {
     margin-bottom: 0;
   }
+
+  &.show-in-dialog {
+    position: fixed;
+
+  }
+}
+
+#modal {
+  display: none;
+
+  &.show {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 10;
+    background: #0a0a0a40;
+
+    .anchor {
+      margin: 10%;
+      width: 80%;
+      max-height: 80%;
+      overflow: auto;
+      padding: 2rem 3rem;
+      background: $background-color;
+    }
+  }
 }

src/client/sass/index.scss

@@ -83,12 +83,17 @@ a.hidden-link, a.hidden-link:hover {
 h1 {
   font-family: WinterSunrise, serif;
   font-size: 3rem;
-  @include breakpoint(medium) {
+  @include breakpoint(large) {
     font-size: 4.5rem;
   }
 }
 
 #home-img-container {
+
+  &.hide-for-medium #start-text-img-overlay {
+    display: none;
+  }
+
   #home-img {
     width: 100%;
     height: 100%;
@@ -140,7 +145,28 @@ img.full-screen-width {
 
 .site-content {
   padding: 2rem 0.625rem;
-  @include breakpoint(medium) {
+  @include breakpoint(large) {
     padding: 3rem 2rem;
   }
+}
+
+.fill-height {
+  height: calc(100vh - 5rem);
+  @include breakpoint(small only) {
+    height: calc(100vh - 3rem);
+  }
+}
+
+.fill-height-medium-up {
+  @include breakpoint(medium) {
+    height: calc(100vh - 5rem);
+  }
+}
+
+.img-column {
+  max-width: 40%;
+
+  img {
+    object-fit: cover;
+  }
 }