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

260
index.css
View file

@ -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;
}