From 85848ae4df4b09992edc9c6b94ceaa25a597ac17 Mon Sep 17 00:00:00 2001
From: Pieter Fiers <pieter@pfiers.net>
Date: Mon, 27 Jul 2020 15:40:55 +0200
Subject: [PATCH] @5123c38 regression

---
 .../Questions/bike/ParkingCovered.ts          |   0
 index.css                                     | 260 ++++++++++++------
 2 files changed, 170 insertions(+), 90 deletions(-)
 create mode 100644 Customizations/Questions/bike/ParkingCovered.ts

diff --git a/Customizations/Questions/bike/ParkingCovered.ts b/Customizations/Questions/bike/ParkingCovered.ts
new file mode 100644
index 0000000..e69de29
diff --git a/index.css b/index.css
index 11c2f5a..f3aba3c 100644
--- a/index.css
+++ b/index.css
@@ -16,24 +16,35 @@ form {
     box-shadow: 0 0 10px #ff5353;
 }
 
+.shadow {
+    box-shadow: 0 0 10px #00000066;
+}
+
+
+
+
 #leafletDiv {
     height: 100%;
 }
 
 #geolocate-button {
     position: absolute;
-    bottom: 27px;
-    right: 65px;
+    bottom: 25px;
+    right: 50px;
     z-index: 999; /*Just below leaflets zoom*/
     background-color: white;
     border-radius: 5px;
-    border: solid 2px rgba(0, 0, 0, 0.2);
+    border: solid 2px #0005;
     cursor: pointer;
     width: 43px;
     height: 43px;
     display: none; /*Hidden by default, only visible on mobile*/
 }
 
+#help-button-mobile {
+    display: none;
+}
+
 #geolocate-button img{
     width: 31px;
     height:31px;
@@ -158,7 +169,7 @@ form {
     pointer-events: all;
     border-radius: 1.3em;
     margin: 0;
-    margin-bottom: 1em;
+    margin-bottom: 0.5em;
     width: 100%;
 }
 
@@ -211,30 +222,15 @@ form {
     padding-bottom: 0.2em;
 }
 
-@media only screen and (max-width: 600px) {
-    /* Portrait */
-    #userbadge-and-search {
-        display: inline-block;
-        width: auto;
-        max-width: 100vw;
-    }
 
+@media only screen and (max-height: 600px) and (not (max-width:700px)) {
+
+    /* Landscape and portrait */
     #topleft-tools {
-        margin: 0.5em;
+        padding: 0.1em;
+        padding-left: unset;
     }
 
-    #userbadge {
-        margin-bottom: 0.3em;
-    }
-
-}
-
-@media only screen and (max-height: 600px) {
-    /* Landscape */
-    #topleft-tools {
-        margin: 0.3em !important;
-    }
-    
     #userbadge-and-search {
         position: relative;
         display: inline-block;
@@ -252,12 +248,25 @@ form {
         padding: 0;
     }
 
-    #topleft-tools {
-        margin: 0.5em;
+
+}
+
+
+@media only screen and (max-width: 600px) {
+    /* Portrait */
+    #userbadge-and-search {
+        display: inline-block;
+        width: auto;
+        max-width: 100vw;
     }
-    
-    .collapse-button {
-        height: calc(100% - 3.5em) !important;
+
+    #topleft-tools {
+        padding: 0.2em !important;
+        padding-top: 0.3em !important;
+    }
+
+    #userbadge {
+        margin-bottom: 0.3em;
     }
 
 }
@@ -269,13 +278,14 @@ form {
 #topleft-tools {
     display: block;
     position: absolute;
-    margin: 1em;
-    margin-bottom: 0;
     padding: 0;
+    padding-top: 0.5em;
+    padding-left:0.5em;
     z-index: 5000;
     transition: all 500ms linear;
     overflow: hidden;
     pointer-events: none;
+    padding-right: 10px; /* Shadow offset */
 }
 
 #messagesboxmobilewrapper {
@@ -289,7 +299,8 @@ form {
     border-top-left-radius: 2em;
     border-bottom-left-radius: 2em;
     display: inline-block;
-    height:calc(100% - 8em);
+    height:100%;
+    box-shadow: -10px 0 10px -10px #0006;
 }
 
 .collapse-button .collapse-button-img{
@@ -300,6 +311,16 @@ form {
     width: 2em;
     border-top-left-radius: 2em;
     border-bottom-left-radius: 2em;
+    margin-bottom: 10px;
+}
+
+.open-button .collapse-button-img {
+    border-radius: 50%;
+    box-sizing: border-box;
+    display: inline-block;
+    padding: 1em;
+    background-color: white; 
+    box-shadow: 0 0 10px #0006;
 }
 
 .collapse-button-img {
@@ -307,7 +328,10 @@ form {
     box-sizing: border-box;
     display: inline-block;
     padding: 1em;
-    background-color: white; 
+    background-color: white;
+    box-shadow: none;
+    margin: 0;
+    
 }
 
 .collapse-button-img img{
@@ -327,12 +351,15 @@ form {
     border-radius: 2em;
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
-    width: 100%;
-    max-width: 35vw;
+    max-width: calc(max(35vw, 30em));
+    max-height: calc(100vh - 15em);
+    overflow-y: auto;
+    box-shadow: 0 0 10px #00000066;
 }
 
 #messagesbox {
     /*Only shown on big screens*/
+    position: relative;
     padding: 0;
     pointer-events: all;
 }
@@ -386,6 +413,7 @@ form {
     font-weight: 600;
 }
 
+
 #filter__selection select {
     outline: none;
     background-color: #F0EFEF;
@@ -404,6 +432,8 @@ form {
     margin: 0;
     font-weight: 600;
     transform: translateY(75px);
+    max-height: calc(50vh - 10em);
+    overflow-y: auto;
 }
 
 #filter__selection ul li span > span {
@@ -433,7 +463,34 @@ form {
     border-radius: 15px 15px 0 0;
 }
 
-@media only screen and (max-width: 600px), only screen and (max-height: 300px) {
+
+#centermessage {
+    position: absolute;
+    top: 30%;
+    
+    left: 25%;
+    width: 50%;
+
+    font-size: large;
+
+    padding: 2em;
+    border-radius: 2em;
+    z-index: 4000;
+    pointer-events: none;
+
+    opacity: 1;
+    background-color: white;
+
+    transition: opacity 500ms linear;
+
+
+    text-align: center;
+    horiz-align: center;
+    font-weight: bold;
+}
+
+
+@media only screen and (max-width: 600px), only screen and (max-height: 600px) {
     #messagesbox-wrapper {
         display: none;
     }
@@ -441,6 +498,15 @@ form {
     #messagesbox {
         display: none;
     }
+    
+    #help-button-mobile{
+        display: unset;
+    }
+    
+    #help-button-mobile div {
+        box-shadow: 0 0 10px #0006;
+        margin-bottom: 10px;
+    }
 
     #geolocate-button {
         display: block;
@@ -450,6 +516,13 @@ form {
         /* Popups are hidden on mobile */
         display: none;
     }
+    
+    #centermessage {
+        top: 30%;
+        left: 15%;
+        width: 60%;
+
+    }
 
     #messagesboxmobilewrapper {
         position: absolute;
@@ -467,11 +540,11 @@ form {
 
     #messagesboxmobile-scroll {
         display: block;
-        overflow-y: auto;
         width: 100vw;
+        overflow-y: auto;
         padding: 0;
         margin: 0;
-        height: calc(100% - 5em); /*Height of to-the-map is 2em, padding is 2 * 0.5em*/
+        height: calc(100% - 5em); /*Height of to-the-map is 5em*/
     }
 
     #messagesboxmobile {
@@ -480,6 +553,23 @@ form {
         border-radius: 1em;
         background-color: white;
     }
+
+    #welcomeMessage {
+        display: inline-block;
+        background-color: white;
+        padding: 1em;
+        border-radius: 0;
+        width: 100%;
+        max-width: 100%;
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+        max-height: max-content;
+        box-shadow: unset;
+        overflow-y: unset;
+    }
+    
+
 }
 
 
@@ -487,34 +577,36 @@ form {
     position: relative;
 }
 
-#to-the-map h2{
+#to-the-map > span{
     
     position: absolute;
-    height: 4em;
+    box-sizing: border-box;
+    height: 3em;
     
     padding: 0.5em;
     margin: 0;
 
-    padding-right: 2em;
-    padding-top: 1em;
+    padding-top: 0.75em;
     text-align: center;
     width: 100%;
     color: white;
     background-color: #7ebc6f;
     cursor: pointer;
+    font-size: xx-large;
+    font-weight: bold;
 
 }
 
 
 @media only screen and (max-height: 400px) {
-    /* Landscape */
+    /* Landscape: small 'to the map' */
     #to-the-map {
         position: relative;
         height: 100%;
         width: 100%
     }
 
-    #to-the-map h2 {
+    #to-the-map span {
         width: auto;
         border-top-left-radius: 1.5em;
         position: absolute;
@@ -525,65 +617,34 @@ form {
         margin:0;
         padding: 1em;
         padding-bottom: 0.75em;
-    }
-
-    #to-the-map h2 span{
-        height: 100%;
-        
+        height: 3em;
+        font-size: x-large;
     }
 
     #messagesboxmobile {
-        padding-bottom: 4em;
+        padding-bottom: 5em;
     }
 
     #messagesboxmobile-scroll {
         position: absolute;
         z-index: 2;
+        width: 100vw;
         height: 100vh;
-        overflow-y: auto;
+        box-sizing: border-box;
+    }
+    
+    #welcomeMessage{
+        box-shadow: unset;
+        max-height: 100vh;
     }
 
 }
 
-#logo {
-    position: relative;
-    display: flex;
-    float: right;
+.logo {
+    float:right;
     margin: 1em;
-    margin-top: 0;
-    margin-right: -0.5em;
-    padding: 0;
-    right: 1em;
-    top: 1em;
-    border-radius: 0;
-}
-
-#centermessage {
-    position: absolute;
-    display: block ruby;
-
-    margin: auto;
-    top: 30%;
-    left: 50%;
-    margin-left: -15%;
-    width: 30%;
-
-    font-size: large;
-
-    padding: 2em;
-    border-radius: 2em;
-    z-index: 5000;
-    pointer-events: none;
-
-    opacity: 1;
-    background-color: white;
-
-    transition: opacity 500ms linear;
-
-
-    text-align: center;
-    horiz-align: center;
-    font-weight: bold;
+    width: 10em;
+    height: auto;
 }
 
 #bottomRight {
@@ -798,9 +859,28 @@ form {
     width: 40em !important;
 }
 
-.featureinfobox {
+#messagesboxmobile .featureinfobox {
+    max-height: unset;
+    overflow-y: unset;
 }
 
+#messagesboxmobile .featureinfobox > div {
+    width: 100%;
+    max-width: unset;
+    padding-left: unset;
+}
+
+.featureinfobox {
+    max-height: 80vh;
+    overflow-y: auto;
+}
+
+.featureinfobox > div {
+    width: calc(100% - 2em);
+    padding-left: 1em;
+}
+
+
 .featureinfoboxtitle {
     position: relative;
 }