diff --git a/AllTranslationAssets.ts b/AllTranslationAssets.ts
index 7d3bae0..490c579 100644
--- a/AllTranslationAssets.ts
+++ b/AllTranslationAssets.ts
@@ -85,8 +85,8 @@ export default class AllTranslationAssets {
fsIncludeCurrentLocation: new Translation( {"en":"Include current location","es":"Incluir localización actual","ca":"Incloure localització actual","nl":"Start op de huidige locatie","fr":"Inclure l'emplacement actuel","de":"Aktuelle Position einbeziehen"} ),
},
morescreen: { intro: new Translation( {"en":"More thematic maps?
Do you enjoy collecting geodata?
There are more themes available.","ca":"Més peticions
T'agrada captar dades?
Hi ha més capes disponibles.","es":"Más peticiones
Te gusta captar datos?
Hay más capas disponibles.","fr":"Plus de thèmes
Vous aimez collecter des données?
Il y a plus de thèmes disponibles.","nl":"Meer thematische kaarten
Vind je het leuk om geodata te verzamelen?
Hier vind je meer kaartthemas.","gl":"Máis tarefas
Góstache captar datos?
Hai máis capas dispoñíbeis.","de":"Weitere Quests
Sammeln Sie gerne Geodaten?
Es sind weitere Themen verfügbar."} ),
- requestATheme: new Translation( {"en":"If you want a custom-built quest, request it here","ca":"Si vols que et fem una petició pròpia , demana-la aquí","es":"Si quieres que te hagamos una petición propia , pídela aquí","nl":"Wil je een eigen kaartthema, vraag dit hier aan","fr":"Si vous voulez une autre carte thématique, demande-la ici","gl":"Se queres que che fagamos unha tarefa propia , pídea aquí","de":"Wenn Sie einen speziell angefertigte Quest wünschen, können Sie diesen hier anfragen"} ),
- streetcomplete: new Translation( {"en":"Another, similar application is StreetComplete","ca":"Una altra aplicació similar és StreetComplete","es":"Otra aplicación similar es StreetComplete","fr":"Une autre application similaire est StreetComplete","nl":"Een andere, gelijkaardige Android-applicatie is StreetComplete","gl":"Outra aplicación semellante é StreetComplete","de":"Eine andere, ähnliche Anwendung ist StreetComplete"} ),
+ requestATheme: new Translation( {"en":"If you want a custom-built quest, request it here.","ca":"Si vols que et fem una petició pròpia , demana-la aquí.","es":"Si quieres que te hagamos una petición propia , pídela aquí.","nl":"Wil je een eigen kaartthema, vraag dit hier aan.","fr":"Si vous voulez une autre carte thématique, demande-la ici.","gl":"Se queres que che fagamos unha tarefa propia , pídea aquí.","de":"Wenn Sie einen speziell angefertigte Quest wünschen, können Sie diesen hier anfragen."} ),
+ streetcomplete: new Translation( {"en":"Another, similar application is StreetComplete..","ca":"Una altra aplicació similar és StreetComplete.","es":"Otra aplicación similar es StreetComplete.","fr":"Une autre application similaire est StreetComplete.","nl":"Een andere, gelijkaardige Android-applicatie is StreetComplete.","gl":"Outra aplicación semellante é StreetComplete.","de":"Eine andere, ähnliche Anwendung ist StreetComplete."} ),
createYourOwnTheme: new Translation( {"en":"Create your own MapComplete theme from scratch","ca":"Crea la teva pròpia petició completa de MapComplete des de zero.","es":"Crea tu propia petición completa de MapComplete desde cero.","nl":"Maak je eigen MapComplete-kaart","fr":"Créez votre propre MapComplete carte","gl":"Crea o teu propio tema completo do MapComplete dende cero.","de":"Erstellen Sie Ihr eigenes MapComplete-Thema von Grund auf neu"} ),
},
readYourMessages: new Translation( {"en":"Please, read all your OpenStreetMap-messages before adding a new point.","ca":"Llegeix tots els teus missatges d'OpenStreetMap abans d'afegir nous punts.","es":"Lee todos tus mensajes de OpenStreetMap antes de añadir nuevos puntos.","nl":"Gelieve eerst je berichten op OpenStreetMap te lezen alvorens nieuwe punten toe te voegen.","fr":"Merci de lire tous vos messages sur OpenStreetMap avant d'ajouter un nouveau point.","gl":"Le todos a túas mensaxes do OpenStreetMap antes de engadir novos puntos.","de":"Bitte lesen Sie alle Ihre OpenStreetMap-Nachrichten, bevor Sie einen neuen Punkt hinzufügen"} ),
diff --git a/InitUiElements.ts b/InitUiElements.ts
index 49c4cbd..c34a360 100644
--- a/InitUiElements.ts
+++ b/InitUiElements.ts
@@ -227,7 +227,7 @@ export class InitUiElements {
.onClick(() => {/*Catch the click*/
})]),
help
- , true
+ , isOpened
).AttachTo("messagesbox");
const openedTime = new Date().getTime();
State.state.locationControl.addCallback(() => {
@@ -249,20 +249,21 @@ export class InitUiElements {
private static InitLayerSelection() {
InitUiElements.OnlyIf(State.state.featureSwitchLayers, () => {
- const layerControlPanel = new LayerControlPanel(() => State.state.layerControlIsOpened.setData(false))
- .SetStyle("display:block;padding:0.75em;border-radius:1em;");
- const closeButton = Svg.close_svg().SetClass("layer-selection-toggle").SetStyle(" background: var(--subtle-detail-color);")
+ const layerControlPanel = new LayerControlPanel(
+ () => State.state.layerControlIsOpened.setData(false))
+ .SetClass("block p-1 rounded-full");
+ const closeButton = Svg.close_svg()
+ .SetClass("layer-selection-toggle")
+ .SetStyle(" background: var(--subtle-detail-color);")
const checkbox = new CheckBox(
new Combine([
closeButton,
- layerControlPanel]).SetStyle("display:flex;flex-direction:row;")
- .SetClass("hidden-on-mobile")
+ layerControlPanel])
+ .SetClass("flex flex-row")
,
Svg.layers_svg().SetClass("layer-selection-toggle"),
State.state.layerControlIsOpened
- );
-
- checkbox.AttachTo("layer-selection");
+ ).AttachTo("layer-selection");
State.state.locationControl
diff --git a/Svg.ts b/Svg.ts
index d3f302b..2505dc8 100644
--- a/Svg.ts
+++ b/Svg.ts
@@ -255,7 +255,7 @@ export default class Svg {
public static ring_ui() { return new FixedUiElement(Svg.ring_img);}
public static search = " "
- public static search_img = Img.AsImageElement(Svg.search, 'rounded-3xl')
+ public static search_img = Img.AsImageElement(Svg.search)
public static search_svg() { return new FixedUiElement(Svg.search);}
public static search_ui() { return new FixedUiElement(Svg.search_img);}
diff --git a/UI/Base/LazyElement.ts b/UI/Base/LazyElement.ts
index 9796a6c..2f1bb92 100644
--- a/UI/Base/LazyElement.ts
+++ b/UI/Base/LazyElement.ts
@@ -28,5 +28,4 @@ export default class LazyElement extends UIElement {
return this._content.InnerRender();
}
-
}
\ No newline at end of file
diff --git a/UI/Base/ScrollableFullScreen.ts b/UI/Base/ScrollableFullScreen.ts
index 00c7420..63248de 100644
--- a/UI/Base/ScrollableFullScreen.ts
+++ b/UI/Base/ScrollableFullScreen.ts
@@ -9,33 +9,62 @@ import Ornament from "./Ornament";
*/
export default class ScrollableFullScreen extends UIElement {
private _component: UIElement;
-
+ private elementsToRestore: Set = new Set();
constructor(title: UIElement, content: UIElement, onClose: (() => void)) {
super();
+ this.dumbMode = false;
const returnToTheMap = Svg.back_svg().onClick(() => {
- onClose();
- }) .SetClass("block sm:hidden mb-2 bg-blue-50 rounded-full w-12 h-12 p-1.5")
+ console.log("Clicked back!");
+ this.RestoreLeaflet();
+ if (onClose() !== undefined) {
+ console.error("WARNING: onClose is not defined")
+ onClose();
+ }
+ }).SetClass("block sm:hidden mb-2 bg-blue-50 rounded-full w-12 h-12 p-1.5")
title.SetClass("block w-full")
const ornament = new Combine([new Ornament().SetStyle("height:5em;")])
.SetClass("block sm:hidden h-5")
-
- this._component = new Combine([
+
+ this._component =
+ new Combine([
+ new Combine([
new Combine([returnToTheMap, title])
- .AddClass("border-b-2 border-black shadow sm:shadow-none z-50 bg-white p-2 pb-0 sm:p-0 flex overflow-x-hidden flex-shrink-0 max-h-20vh"),
+ .AddClass("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 max-h-screen landscape:max-h-screen overflow-y-auto overflow-x-hidden"),
+ .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"),
// 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 fixed max-h-screen sm:max-h-65vh sm:relative top-0 left-0 right-0");
+ ]).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");
}
-
InnerRender(): string {
return this._component.Render();
}
+
+ protected InnerUpdate(htmlElement: HTMLElement) {
+
+ do {
+ // A leaflet workaround: in order for fullscreen to work, we need to get the parent element which does a transform3d and remove/read the transform
+ if (htmlElement.style.transform !== "") {
+ this.elementsToRestore.add(htmlElement);
+ htmlElement.classList.add("no-transform")
+ }
+ htmlElement = htmlElement.parentElement;
+ } while (htmlElement != null)
+
+ super.InnerUpdate(htmlElement);
+ }
+
+ private RestoreLeaflet() {
+ this.elementsToRestore.forEach(
+ el => el.classList.remove("no-transform")
+ );
+
+ }
}
\ No newline at end of file
diff --git a/UI/BigComponents/LayerControlPanel.ts b/UI/BigComponents/LayerControlPanel.ts
index 7f25339..a55c291 100644
--- a/UI/BigComponents/LayerControlPanel.ts
+++ b/UI/BigComponents/LayerControlPanel.ts
@@ -31,9 +31,7 @@ export default class LayerControlPanel extends UIElement {
const title = Translations.t.general.layerSelection.title.SetClass("text-2xl break-words font-bold p-2")
- this._panel = new ScrollableFullScreen(title, layerControlPanel, () => {
- onClose
- });
+ this._panel = new ScrollableFullScreen(title, layerControlPanel, onClose);
}
InnerRender(): string {
diff --git a/css/tagrendering.css b/css/tagrendering.css
index fe03c34..8629a25 100644
--- a/css/tagrendering.css
+++ b/css/tagrendering.css
@@ -1,56 +1,4 @@
-<<<<<<< HEAD
-.featureinfobox {
- display: flex;
- flex-direction: column;
-}
-
-.featureinfobox-icons img {
- max-height: 1.5em;
- width: 1.5em;
-}
-
-.featureinfobox-icons {
- margin-left: auto;
-}
-
-.featureinfobox-icons span {
- display: inline-block;
- padding-right: 0.1em;
-}
-
-.featureinfobox-titlebar {
- border-bottom: 2px solid var(--foreground-color);
- box-shadow: 0 10px 10px -10px var(--shadow-color);
- display: flex;
- justify-content: space-between;
- width: 100%;
- overflow-x: hidden;
-}
-
-.featureinfobox-titlebar-title {
- font-size: large;
- font-weight: bold;
- display: flex;
- justify-content: space-between;
- flex-grow: 2;
- word-break: break-all;
-}
-
-.featureinfobox-back-to-the-map {
- padding: 0.5em;
- border-radius: 999em;
- margin-right: 0.4em;
- width: 2em;
- height: 2em;
- background: var(--subtle-detail-color);
- flex-shrink: 0;
-}
-=======
->>>>>>> master
-
-
-
@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 {
@@ -127,7 +75,7 @@
border-radius: 0.5em;
display: block;
width: 100%;
- margin: 5px 0;
+ margin: 5px;
box-sizing: border-box;
padding: 0.5em;
}
diff --git a/index.css b/index.css
index 1087838..bdd1220 100644
--- a/index.css
+++ b/index.css
@@ -3,18 +3,44 @@
@tailwind utilities;
@layer utilities {
- @variants responsive {
- .max-h-65vh {
- max-height: 65vh;
+ @variants responsive {
+ .max-h-65vh {
+ max-height: 65vh;
+ }
+
+ .max-h-20vh {
+ max-height: 20vh;
+ }
+
+ .z-above-map{
+ z-index: 10000
+ }
+
+ .z-above-map-higher {
+ z-index: 10100
+ }
+
+ .z-above-map-high {
+ z-index: 10200 !important;
+ }
+
+ .z-above-map-highest{
+ z-index: 50000
+ }
+
}
-
- .max-h-20vh {
- max-height: 20vh;
- }
- }
}
+@media only screen and (max-width: 640px), only screen and (max-height: 640px) {
+ .no-transform {
+ /*This is a workaround to let popup contents escape the popup on mobile*/
+ transform: none !important;
+ }
+}
+
+
+
:root {
--subtle-detail-color: #e5f5ff;
--subtle-detail-color-contrast: black;
@@ -53,9 +79,6 @@ a {
}
-
-
-
#topleft-tools svg {
fill: var(--foreground-color) !important;
stroke: var(--foreground-color) !important;
@@ -109,8 +132,6 @@ a {
}
-
-
#layer-selection {
z-index: 9000;
background-color: var(--background-color);
diff --git a/index.html b/index.html
index 8450e33..ade7bfd 100644
--- a/index.html
+++ b/index.html
@@ -48,7 +48,7 @@
-