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.sort();
history.replaceState(null, "", "?" + parts.join("&"));
}

View file

@ -142,6 +142,7 @@ form {
#userbadge-and-search {
display: inline-block;
width: min-content;
}
@ -164,17 +165,24 @@ form {
margin-right: 0.5em;
}
#searchbox {
width: 100%
}
#searchbox .form-text-field {
position: relative;
float: left;
margin-top: 0.2em;
margin-left: 1em;
width: calc(100% - 4em)
}
#searchbox input[type="text"] {
background: transparent;
border: none;
font-size: large;
width: 100%;
box-sizing: border-box;
}
.search-go {
@ -189,6 +197,9 @@ form {
}
#userbadge {
width: 100%
}
#userbadge p {
margin: 0;
@ -196,6 +207,46 @@ form {
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;
position: absolute;
margin: 1em;
margin-right: 0;
margin-bottom: 0;
padding: 0;
z-index: 5000;
@ -355,11 +405,7 @@ e
border-radius: 15px 15px 0 0;
}
.
@media only screen and (max-width: 600px) {
@media only screen and (max-width: 600px), only screen and (max-height: 600px) {
#messagesbox-wrapper {
display: none;
}
@ -399,6 +445,7 @@ e
margin: 0;
height: calc(100% - 5em); /*Height of to-the-map is 2em, padding is 2 * 0.5em*/
}
#messagesboxmobile {
padding: 1em;
padding-bottom: 2em;
@ -407,6 +454,7 @@ e
}
}
#to-the-map {
position: relative;
}
@ -430,6 +478,45 @@ e
}
@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 {
position: relative;
display: flex;