midgard/mapcomplete
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

@5123c38 regression

Browse source
This commit is contained in:
Pieter Fiers 2020-07-27 15:40:55 +02:00
parent 5123c3836e
commit 85848ae4df
2 changed files with 170 additions and 90 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

0
Customizations/Questions/bike/ParkingCovered.ts Normal file
View file

254
index.css
View file

@ -16,24 +16,35 @@ form {
box-shadow: 0 0 10px #ff5353; box-shadow: 0 0 10px #ff5353;
} }
.shadow {
box-shadow: 0 0 10px #00000066;
}
#leafletDiv { #leafletDiv {
height: 100%; height: 100%;
} }
#geolocate-button { #geolocate-button {
position: absolute; position: absolute;
bottom: 27px; bottom: 25px;
right: 65px; right: 50px;
z-index: 999; /*Just below leaflets zoom*/ z-index: 999; /*Just below leaflets zoom*/
background-color: white; background-color: white;
border-radius: 5px; border-radius: 5px;
border: solid 2px rgba(0, 0, 0, 0.2); border: solid 2px #0005;
cursor: pointer; cursor: pointer;
width: 43px; width: 43px;
height: 43px; height: 43px;
display: none; /*Hidden by default, only visible on mobile*/ display: none; /*Hidden by default, only visible on mobile*/
} }
#help-button-mobile {
display: none;
}
#geolocate-button img{ #geolocate-button img{
width: 31px; width: 31px;
height:31px; height:31px;
@ -158,7 +169,7 @@ form {
pointer-events: all; pointer-events: all;
border-radius: 1.3em; border-radius: 1.3em;
margin: 0; margin: 0;
margin-bottom: 1em; margin-bottom: 0.5em;
width: 100%; width: 100%;
} }
@ -211,28 +222,13 @@ form {
padding-bottom: 0.2em; 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 { #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 { #userbadge-and-search {
@ -252,12 +248,25 @@ form {
padding: 0; padding: 0;
} }
#topleft-tools {
margin: 0.5em;
} }
.collapse-button {
height: calc(100% - 3.5em) !important; @media only screen and (max-width: 600px) {
/* Portrait */
#userbadge-and-search {
display: inline-block;
width: auto;
max-width: 100vw;
}
#topleft-tools {
padding: 0.2em !important;
padding-top: 0.3em !important;
}
#userbadge {
margin-bottom: 0.3em;
} }
} }
@ -269,13 +278,14 @@ form {
#topleft-tools { #topleft-tools {
display: block; display: block;
position: absolute; position: absolute;
margin: 1em;
margin-bottom: 0;
padding: 0; padding: 0;
padding-top: 0.5em;
padding-left:0.5em;
z-index: 5000; z-index: 5000;
transition: all 500ms linear; transition: all 500ms linear;
overflow: hidden; overflow: hidden;
pointer-events: none; pointer-events: none;
padding-right: 10px; /* Shadow offset */
} }
#messagesboxmobilewrapper { #messagesboxmobilewrapper {
@ -289,7 +299,8 @@ form {
border-top-left-radius: 2em; border-top-left-radius: 2em;
border-bottom-left-radius: 2em; border-bottom-left-radius: 2em;
display: inline-block; display: inline-block;
height:calc(100% - 8em); height:100%;
box-shadow: -10px 0 10px -10px #0006;
} }
.collapse-button .collapse-button-img{ .collapse-button .collapse-button-img{
@ -300,6 +311,16 @@ form {
width: 2em; width: 2em;
border-top-left-radius: 2em; border-top-left-radius: 2em;
border-bottom-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 { .collapse-button-img {
@ -308,6 +329,9 @@ form {
display: inline-block; display: inline-block;
padding: 1em; padding: 1em;
background-color: white; background-color: white;
box-shadow: none;
margin: 0;
} }
.collapse-button-img img{ .collapse-button-img img{
@ -327,12 +351,15 @@ form {
border-radius: 2em; border-radius: 2em;
border-top-left-radius: 0; border-top-left-radius: 0;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
width: 100%; max-width: calc(max(35vw, 30em));
max-width: 35vw; max-height: calc(100vh - 15em);
overflow-y: auto;
box-shadow: 0 0 10px #00000066;
} }
#messagesbox { #messagesbox {
/*Only shown on big screens*/ /*Only shown on big screens*/
position: relative;
padding: 0; padding: 0;
pointer-events: all; pointer-events: all;
} }
@ -386,6 +413,7 @@ form {
font-weight: 600; font-weight: 600;
} }
#filter__selection select { #filter__selection select {
outline: none; outline: none;
background-color: #F0EFEF; background-color: #F0EFEF;
@ -404,6 +432,8 @@ form {
margin: 0; margin: 0;
font-weight: 600; font-weight: 600;
transform: translateY(75px); transform: translateY(75px);
max-height: calc(50vh - 10em);
overflow-y: auto;
} }
#filter__selection ul li span > span { #filter__selection ul li span > span {
@ -433,7 +463,34 @@ form {
border-radius: 15px 15px 0 0; 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 { #messagesbox-wrapper {
display: none; display: none;
} }
@ -442,6 +499,15 @@ form {
display: none; display: none;
} }
#help-button-mobile{
display: unset;
}
#help-button-mobile div {
box-shadow: 0 0 10px #0006;
margin-bottom: 10px;
}
#geolocate-button { #geolocate-button {
display: block; display: block;
} }
@ -451,6 +517,13 @@ form {
display: none; display: none;
} }
#centermessage {
top: 30%;
left: 15%;
width: 60%;
}
#messagesboxmobilewrapper { #messagesboxmobilewrapper {
position: absolute; position: absolute;
padding: 0; padding: 0;
@ -467,11 +540,11 @@ form {
#messagesboxmobile-scroll { #messagesboxmobile-scroll {
display: block; display: block;
overflow-y: auto;
width: 100vw; width: 100vw;
overflow-y: auto;
padding: 0; padding: 0;
margin: 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 { #messagesboxmobile {
@ -480,6 +553,23 @@ form {
border-radius: 1em; border-radius: 1em;
background-color: white; 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; position: relative;
} }
#to-the-map h2{ #to-the-map > span{
position: absolute; position: absolute;
height: 4em; box-sizing: border-box;
height: 3em;
padding: 0.5em; padding: 0.5em;
margin: 0; margin: 0;
padding-right: 2em; padding-top: 0.75em;
padding-top: 1em;
text-align: center; text-align: center;
width: 100%; width: 100%;
color: white; color: white;
background-color: #7ebc6f; background-color: #7ebc6f;
cursor: pointer; cursor: pointer;
font-size: xx-large;
font-weight: bold;
} }
@media only screen and (max-height: 400px) { @media only screen and (max-height: 400px) {
/* Landscape */ /* Landscape: small 'to the map' */
#to-the-map { #to-the-map {
position: relative; position: relative;
height: 100%; height: 100%;
width: 100% width: 100%
} }
#to-the-map h2 { #to-the-map span {
width: auto; width: auto;
border-top-left-radius: 1.5em; border-top-left-radius: 1.5em;
position: absolute; position: absolute;
@ -525,65 +617,34 @@ form {
margin:0; margin:0;
padding: 1em; padding: 1em;
padding-bottom: 0.75em; padding-bottom: 0.75em;
} height: 3em;
font-size: x-large;
#to-the-map h2 span{
height: 100%;
} }
#messagesboxmobile { #messagesboxmobile {
padding-bottom: 4em; padding-bottom: 5em;
} }
#messagesboxmobile-scroll { #messagesboxmobile-scroll {
position: absolute; position: absolute;
z-index: 2; z-index: 2;
width: 100vw;
height: 100vh; height: 100vh;
overflow-y: auto; box-sizing: border-box;
}
#welcomeMessage{
box-shadow: unset;
max-height: 100vh;
} }
} }
#logo { .logo {
position: relative;
display: flex;
float:right; float:right;
margin: 1em; margin: 1em;
margin-top: 0; width: 10em;
margin-right: -0.5em; height: auto;
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;
} }
#bottomRight { #bottomRight {
@ -798,9 +859,28 @@ form {
width: 40em !important; 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 { .featureinfoboxtitle {
position: relative; position: relative;
} }