Add usable portrait layout

This commit is contained in:
Pieter Vander Vennet 2020-07-23 23:33:17 +02:00
parent 6a055247c8
commit dd91e11bd0
2 changed files with 97 additions and 11 deletions

View file

@ -40,7 +40,6 @@ export class QueryParameters {
} }
parts.push(encodeURIComponent(key) + "=" + encodeURIComponent(QueryParameters.knownSources[key].data)) parts.push(encodeURIComponent(key) + "=" + encodeURIComponent(QueryParameters.knownSources[key].data))
} }
parts.sort();
history.replaceState(null, "", "?" + parts.join("&")); history.replaceState(null, "", "?" + parts.join("&"));
} }

107
index.css
View file

@ -142,6 +142,7 @@ form {
#userbadge-and-search { #userbadge-and-search {
display: inline-block; display: inline-block;
width: min-content;
} }
@ -164,17 +165,24 @@ form {
margin-right: 0.5em; margin-right: 0.5em;
} }
#searchbox {
width: 100%
}
#searchbox .form-text-field { #searchbox .form-text-field {
position: relative; position: relative;
float: left; float: left;
margin-top: 0.2em; margin-top: 0.2em;
margin-left: 1em; margin-left: 1em;
width: calc(100% - 4em)
} }
#searchbox input[type="text"] { #searchbox input[type="text"] {
background: transparent; background: transparent;
border: none; border: none;
font-size: large; font-size: large;
width: 100%;
box-sizing: border-box;
} }
.search-go { .search-go {
@ -189,6 +197,9 @@ form {
} }
#userbadge {
width: 100%
}
#userbadge p { #userbadge p {
margin: 0; margin: 0;
@ -196,6 +207,46 @@ 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;
}
#topleft-tools {
margin: 0.5em;
}
#userbadge {
margin-bottom: 0.3em;
}
}
@media only screen and (max-height: 600px) {
/* Landscape */
#userbadge-and-search {
display: inline-block;
width: auto;
max-width: 50vw;
}
#userbadge {
display: none;
}
#topleft-tools {
margin: 0.5em;
}
#userbadge {
margin-bottom: 0.3em;
}
}
/**************************************/ /**************************************/
@ -204,7 +255,6 @@ form {
display: block; display: block;
position: absolute; position: absolute;
margin: 1em; margin: 1em;
margin-right: 0;
margin-bottom: 0; margin-bottom: 0;
padding: 0; padding: 0;
z-index: 5000; z-index: 5000;
@ -355,11 +405,7 @@ e
border-radius: 15px 15px 0 0; border-radius: 15px 15px 0 0;
} }
. @media only screen and (max-width: 600px), only screen and (max-height: 600px) {
@media only screen and (max-width: 600px) {
#messagesbox-wrapper { #messagesbox-wrapper {
display: none; display: none;
} }
@ -396,17 +442,19 @@ e
overflow-y: auto; overflow-y: auto;
width: 100vw; width: 100vw;
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 2em, padding is 2 * 0.5em*/
} }
#messagesboxmobile { #messagesboxmobile {
padding: 1em; padding: 1em;
padding-bottom: 2em; padding-bottom: 2em;
border-radius:1em; border-radius: 1em;
background-color: white; background-color: white;
} }
} }
#to-the-map { #to-the-map {
position: relative; position: relative;
} }
@ -418,7 +466,7 @@ e
padding: 0.5em; padding: 0.5em;
margin: 0; margin: 0;
padding-right: 2em; padding-right: 2em;
padding-top: 1em; padding-top: 1em;
text-align: center; text-align: center;
@ -426,10 +474,49 @@ e
color: white; color: white;
background-color: #7ebc6f; background-color: #7ebc6f;
cursor: pointer; cursor: pointer;
} }
@media only screen and (max-height: 400px) {
/* Landscape */
#to-the-map {
position: relative;
height: 100%;
width: 100%
}
#to-the-map h2 {
width: auto;
border-top-left-radius: 1.5em;
position: absolute;
z-index: 5;
right: 0;
bottom: 0;
height: auto;
margin:0;
padding: 1em;
padding-bottom: 0.75em;
}
#to-the-map h2 span{
height: 100%;
}
#messagesboxmobile {
padding-bottom: 4em;
}
#messagesboxmobile-scroll {
position: absolute;
z-index: 2;
height: 100vh;
overflow-y: auto;
}
}
#logo { #logo {
position: relative; position: relative;
display: flex; display: flex;