diff --git a/UI/Base/Ornament.ts b/UI/Base/Ornament.ts
index 3de8733..252014d 100644
--- a/UI/Base/Ornament.ts
+++ b/UI/Base/Ornament.ts
@@ -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);
diff --git a/UI/Base/ScrollableFullScreen.ts b/UI/Base/ScrollableFullScreen.ts
index e51b86d..a77816e 100644
--- a/UI/Base/ScrollableFullScreen.ts
+++ b/UI/Base/ScrollableFullScreen.ts
@@ -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(["", content, "", 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;
}
diff --git a/UI/BigComponents/SearchAndGo.ts b/UI/BigComponents/SearchAndGo.ts
index 6f073d6..e6df029 100644
--- a/UI/BigComponents/SearchAndGo.ts
+++ b/UI/BigComponents/SearchAndGo.ts
@@ -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);
},
diff --git a/UI/Popup/FeatureInfoBox.ts b/UI/Popup/FeatureInfoBox.ts
index b99b4f0..d365ca2 100644
--- a/UI/Popup/FeatureInfoBox.ts
+++ b/UI/Popup/FeatureInfoBox.ts
@@ -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")
}
diff --git a/css/mobile.css b/css/mobile.css
index 6ebf9e1..c361bb7 100644
--- a/css/mobile.css
+++ b/css/mobile.css
@@ -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) {
diff --git a/css/tagrendering.css b/css/tagrendering.css
index c0ff153..5c73f84 100644
--- a/css/tagrendering.css
+++ b/css/tagrendering.css
@@ -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%;
diff --git a/index.css b/index.css
index 6d11fd0..787fee0 100644
--- a/index.css
+++ b/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);
-}
diff --git a/index.html b/index.html
index 3f61e84..ceb9d24 100644
--- a/index.html
+++ b/index.html
@@ -50,7 +50,6 @@
-
diff --git a/tailwind.config.js b/tailwind.config.js
index a69e6c8..7d9320c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -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`
+ })
+ })
+ })
+
+ ]
}