Bastian-Greshake-Tzovaras/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Migrate featureinfobox to Tailwind

Browse source 
- migrate featureinfobox to Tailwind
- migrate featureinfobox-content to Tailwind
- migrate fullscreenmessage-content to Tailwind so we can delete css/fullscreenmessagebox.css

The landscape-mode is somethign that Tailwind does not support AFAIK. Instead, I migrated the one css-definition that was left over but required to a tailwind-like class name `.landscape\:max-h-screen`. Note the escaped colon with is required so css supports colon based class names.
This commit is contained in:
Tobias 2021-01-21 05:05:10 +01:00
parent 3f34e288db
commit 7a2f4fa44a
6 changed files with 10 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

32
css/fullscreenmessagebox.css
View file

@ -1,32 +0,0 @@
.fullscreenmessage-content {
max-height: calc(100vh);
height: 100%;
overflow-y: auto;
overflow-x: hidden;
background-color: var(--background-color);
display: block;
}
.fullscreenmessage-content .featureinfobox {
padding-top: 1em;
position: relative;
}
.fullscreenmessage-content .featureinfobox-content {
padding: 1em;
top: var(--variable-title-height);
max-height: calc(100vh - var(--variable-title-height)) !important;
min-height: calc(100vh - var(--variable-title-height)) !important;
position: absolute;
overflow-y: auto;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between
}
.fullscreenmessage-content .featureinfobox-tail {
/*THe ornament to give the URL bar some room...*/
}

30
css/tagrendering.css
View file

@ -1,9 +1,4 @@
.featureinfobox {
display: flex;
flex-direction: column;
}
.featureinfobox-back-to-the-map {
padding: 0.5em;
border-radius: 999em;
@ -25,31 +20,10 @@
stroke: var(--subtle-detail-color-contrast) !important;
}
.featureinfobox-content {
display: block;
max-height: 75vh;
overflow-y: auto;
padding-top: 1em;
width:100%;
overflow-x: hidden;
}
@media only screen and (max-width: 600px), only screen and (max-height: 600px) {
.featureinfobox-content {
display: block;
max-height: unset !important;
overflow-y: auto;
}
}
@media only screen and (max-height: 600px) and (min-width: 600px) {
/* landscape mode: the first tagrendering of the infobox gets a special treatment and is placed on the right*/
.featureinfobox-content {
position: relative;
width: 100% !important;
max-width: unset !important;
max-height: unset !important;
height: 100vh;
.landscape\:max-h-screen {
max-height: 100vh;
}
.answer {