Fix landscape mode
This commit is contained in:
pietervdvn
parent
593ac5381a
commit
1b73f0a43a
9 changed files with 43 additions and 98 deletions
|
|
@ -10,9 +10,11 @@ export default class Ornament extends UIElement {
|
|||
constructor(index = undefined) {
|
||||
super();
|
||||
index = index ?? State.state.osmConnection.GetPreference("ornament");
|
||||
|
||||
this.SetClass("pt-3 pb-3 flex justify-center box-border")
|
||||
|
||||
this.ListenTo(index);
|
||||
this._index = index;
|
||||
this.SetClass("ornament")
|
||||
const self = this;
|
||||
this.onClick(() => {
|
||||
let c = Number(index.data);
|
||||
|
|
|
|||
|
|
@ -17,8 +17,8 @@ export default class ScrollableFullScreen extends UIElement {
|
|||
}
|
||||
const returnToTheMap =
|
||||
new Combine([
|
||||
Svg.back_svg().SetClass("block sm:hidden"),
|
||||
Svg.close_svg().SetClass("hidden sm:block")
|
||||
Svg.back_svg().SetClass("block md:hidden"),
|
||||
Svg.close_svg().SetClass("hidden md:block")
|
||||
])
|
||||
.onClick(() => {
|
||||
ScrollableFullScreen.RestoreLeaflet();
|
||||
|
|
@ -31,19 +31,19 @@ export default class ScrollableFullScreen extends UIElement {
|
|||
|
||||
title.SetClass("block w-full text-2xl font-bold p-2 pl-4")
|
||||
const ornament = new Combine([new Ornament().SetStyle("height:5em;")])
|
||||
.SetClass("block sm:hidden h-5")
|
||||
.SetClass("md:hidden h-5")
|
||||
|
||||
|
||||
this._component =
|
||||
new Combine([
|
||||
new Combine([
|
||||
new Combine([returnToTheMap, title])
|
||||
.SetClass("border-b-2 border-black shadow sm:shadow-none bg-white p-2 pb-0 sm:p-0 flex overflow-x-hidden flex-shrink-0 max-h-20vh"),
|
||||
new Combine(["<span>", content, "</span>", ornament])
|
||||
.SetClass("block p-2 sm:pt-4 w-full h-screen landscape:h-screen sm:h-full sm:w-full overflow-y-auto overflow-x-hidden"),
|
||||
.SetClass("border-b-2 border-black shadow md:shadow-none bg-white p-2 pb-0 md:p-0 flex overflow-x-hidden flex-shrink-0 max-h-20vh"),
|
||||
new Combine([content, ornament])
|
||||
.SetClass("p-2 md:pt-4 w-full h-full overflow-y-auto overflow-x-hidden md:max-h-65vh"),
|
||||
// We add an ornament which takes around 5em. This is in order to make sure the Web UI doesn't hide
|
||||
]).SetClass("block flex flex-col relative bg-white")
|
||||
]).SetClass("fixed top-0 left-0 right-0 h-screen w-screen sm:max-h-65vh sm:w-auto sm:relative");
|
||||
]).SetClass("flex flex-col h-full relative bg-white")
|
||||
]).SetClass("fixed top-0 left-0 right-0 h-screen w-screen md:max-h-65vh md:w-auto md:relative");
|
||||
|
||||
this.dumbMode = false;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@ export default class SearchAndGo extends UIElement {
|
|||
[bb[1], bb[3]]
|
||||
]
|
||||
State.state.selectedElement. setData(undefined);
|
||||
Hash.hash.setData(poi.osm_type+"_"+poi.osm_id);
|
||||
Hash.hash.setData(poi.osm_type+"/"+poi.osm_id);
|
||||
State.state.leafletMap.data.fitBounds(bounds);
|
||||
self._placeholder.setData(Translations.t.general.search.search);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -62,7 +62,6 @@ export default class FeatureInfoBox extends UIElement {
|
|||
}
|
||||
return new EditableTagRendering(tags, tr);
|
||||
});
|
||||
renderings[0]?.SetClass("first-rendering");
|
||||
if (!questionBoxIsUsed) {
|
||||
renderings.push(questionBox);
|
||||
}
|
||||
|
|
@ -72,7 +71,7 @@ export default class FeatureInfoBox extends UIElement {
|
|||
...renderings,
|
||||
tail.SetClass("featureinfobox-tail")
|
||||
]
|
||||
).SetClass("block sm:max-h-65vh")
|
||||
).SetClass("block")
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -49,20 +49,6 @@ Contains tweaks for small screens
|
|||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
#welcomeMessage {
|
||||
display: inline-block;
|
||||
background-color: var(--background-color);
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
|
|
|
|||
|
|
@ -1,31 +1,3 @@
|
|||
@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*/
|
||||
.landscape\:max-h-screen {
|
||||
max-height: 100vh;
|
||||
}
|
||||
|
||||
.landscape\:w-1\/2 {
|
||||
width: 50%
|
||||
}
|
||||
|
||||
.landscape\:p-2 {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.question {
|
||||
max-width: 48% !important;
|
||||
padding-right: 0.3em;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.first-rendering {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
width: 94%;
|
||||
padding-right: 0.3em;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.question .form-text-field > input {
|
||||
width: 100%;
|
||||
|
|
|
|||
23
index.css
23
index.css
|
|
@ -42,7 +42,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 640px) {
|
||||
@media only screen and (max-width: 768px) {
|
||||
.no-transform {
|
||||
/*This is a workaround to let popup contents escape the popup on mobile - see scrollableFullScreen.ts*/
|
||||
transform: none !important;
|
||||
|
|
@ -519,24 +519,3 @@ a {
|
|||
max-width: 1em;
|
||||
}
|
||||
|
||||
|
||||
.ornament {
|
||||
padding-top: 1em;
|
||||
padding-bottom: 1em;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.ornament svg {
|
||||
height: 2.5em;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ornament svg path {
|
||||
stroke: var(--subtle-detail-color-light-contrast);
|
||||
}
|
||||
|
||||
.ornament svg polygon {
|
||||
fill: var(--subtle-detail-color-light-contrast);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -50,7 +50,6 @@
|
|||
<div id="searchbox" class="shadow rounded-3xl overflow-hidden"></div>
|
||||
</div>
|
||||
<div id="messagesbox" class="rounded-3xl overflow-hidden ml-3"></div>
|
||||
<div id="help-button-mobile"></div>
|
||||
</div>
|
||||
|
||||
<div id="layer-selection" class="absolute bottom-3 left-3 rounded-3xl overflow-hidden clutter"></div>
|
||||
|
|
|
|||
|
|
@ -1,24 +1,32 @@
|
|||
const plugin = require('tailwindcss/plugin')
|
||||
|
||||
module.exports = {
|
||||
purge: [
|
||||
// './**/*.html',
|
||||
// './**/*.js',
|
||||
],
|
||||
darkMode: false, // or 'media' or 'class'
|
||||
theme: {
|
||||
extend: {
|
||||
maxHeight: {
|
||||
'65vh': '65vh',
|
||||
'20vh': '20vh',
|
||||
},
|
||||
screens: {
|
||||
'landscape': { 'raw': '(max-height: 600px) and (min-width: 600px)' },
|
||||
},
|
||||
purge: [
|
||||
// './**/*.html',
|
||||
// './**/*.js',
|
||||
],
|
||||
darkMode: false, // or 'media' or 'class'
|
||||
theme: {
|
||||
extend: {
|
||||
maxHeight: {
|
||||
'65vh': '65vh',
|
||||
'20vh': '20vh',
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
extend: {
|
||||
ringColor: ['hover'],
|
||||
}
|
||||
},
|
||||
plugins: [],
|
||||
variants: {
|
||||
extend: {
|
||||
ringColor: ['hover'],
|
||||
}
|
||||
},
|
||||
plugins: [
|
||||
plugin(function ({addVariant, e}) {
|
||||
addVariant('landscape', ({modifySelectors, separator}) => {
|
||||
modifySelectors(({className}) => {
|
||||
return `.${e(`landscape${separator}${className}`)}:landscape`
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
]
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue