diff --git a/InitUiElements.ts b/InitUiElements.ts
index ad04884..6af20b8 100644
--- a/InitUiElements.ts
+++ b/InitUiElements.ts
@@ -299,7 +299,7 @@ export class InitUiElements {
]
if (State.state.featureSwitchShareScreen.data) {
- tabs.push({header: Svg.share, content: new ShareScreen()});
+ tabs.push({header: Svg.share_img, content: new ShareScreen()});
}
if (State.state.featureSwitchMoreQuests.data) {
diff --git a/State.ts b/State.ts
index 5eb6fd3..d393630 100644
--- a/State.ts
+++ b/State.ts
@@ -23,7 +23,7 @@ export default class State {
// The singleton of the global state
public static state: State;
- public static vNumber = "0.2.1e";
+ public static vNumber = "0.2.2";
// The user journey states thresholds when a new feature gets unlocked
public static userJourney = {
diff --git a/Svg.ts b/Svg.ts
index 4fcddce..1af5428 100644
--- a/Svg.ts
+++ b/Svg.ts
@@ -194,7 +194,7 @@ export default class Svg {
public static search_svg() { return new FixedUiElement(Svg.search);}
public static search_ui() { return new FixedUiElement(Svg.search_img);}
- public static share = " "
+ public static share = " "
public static share_img = Img.AsImageElement(Svg.share)
public static share_svg() { return new FixedUiElement(Svg.share);}
public static share_ui() { return new FixedUiElement(Svg.share_img);}
diff --git a/UI/FullScreenMessageBoxHandler.ts b/UI/FullScreenMessageBoxHandler.ts
index 412d65a..2451495 100644
--- a/UI/FullScreenMessageBoxHandler.ts
+++ b/UI/FullScreenMessageBoxHandler.ts
@@ -16,26 +16,15 @@ export class FullScreenMessageBox extends UIElement {
this.HideOnEmpty(true);
this.returnToTheMap =
- new Combine([Translations.t.general.returnToTheMap.Clone().SetStyle("font-size:xx-large")])
- .SetStyle("background:var(--catch-detail-color);" +
- "position: fixed;" +
- "z-index: 10000;" +
- "bottom: 0;" +
- "left: 0;" +
- `height: var(--return-to-the-map-height);` +
- "width: 100vw;" +
- "color: var(--catch-detail-color-contrast);" +
- "font-weight: bold;" +
- "pointer-events: all;" +
- "cursor: pointer;" +
- "padding-top: 1.2em;" +
- "text-align: center;" +
- "padding-bottom: 1.2em;" +
- "box-sizing:border-box")
- .onClick(() => {
- State.state.fullScreenMessage.setData(undefined);
- onClear();
- });
+ new Combine([
+ // Wrapped another time to prevent the value of 'em' to fluctuate
+ Translations.t.general.returnToTheMap.Clone()
+ ])
+ .onClick(() => {
+ State.state.fullScreenMessage.setData(undefined);
+ onClear();
+ })
+ .SetClass("to-the-map")
}
@@ -45,25 +34,18 @@ export class FullScreenMessageBox extends UIElement {
return "";
}
this._content = State.state.fullScreenMessage.data;
- const innerWrap = new Combine([this._content]).SetStyle(
- "display: block;" +
- "padding: 1em;" +
- "padding-bottom: 6em; "
- );
- const uielement = new Combine([innerWrap]).SetStyle(
- "display:block;" +
- `margin-bottom: var(--return-to-the-map-height);` +
- "box-sizing:border-box;" +
- `height:calc(100vh - var(--return-to-the-map-height));` +
- "overflow-y: auto;" +
- "max-width:100vw;" +
- "overflow-x:hidden;" +
- "background:var(--background-color);" +
- "color: var(--foreground-color);"
- );
- return new Combine([uielement, this.returnToTheMap])
+ const innerWrap = new Combine([this._content]).SetClass("fullscreenmessage-content")
+
+ return new Combine([innerWrap, this.returnToTheMap])
+ .SetStyle("display:block; height: 100%;")
.Render();
}
+ protected InnerUpdate(htmlElement: HTMLElement) {
+ super.InnerUpdate(htmlElement);
+ const height = htmlElement.getElementsByClassName("featureinfobox-titlebar")[0]?.clientHeight ?? 0;
+ htmlElement.style.setProperty("--variable-title-height", height+"px")
+ }
+
}
\ No newline at end of file
diff --git a/UI/Popup/FeatureInfoBox.ts b/UI/Popup/FeatureInfoBox.ts
index 7c1ac0b..a643627 100644
--- a/UI/Popup/FeatureInfoBox.ts
+++ b/UI/Popup/FeatureInfoBox.ts
@@ -53,4 +53,5 @@ export class FeatureInfoBox extends UIElement {
.Render();
}
+
}
diff --git a/UI/SpecialVisualizations.ts b/UI/SpecialVisualizations.ts
index f0815d4..0afad7b 100644
--- a/UI/SpecialVisualizations.ts
+++ b/UI/SpecialVisualizations.ts
@@ -193,8 +193,7 @@ export default class SpecialVisualizations {
args: [
{
name: "url",
- doc: "The url to share",
- defaultValue: "{current_url()}"
+ doc: "The url to share (defualt: current URL)",
}
],
constr: (tagSource: UIEventSource, args) => {
@@ -202,7 +201,7 @@ export default class SpecialVisualizations {
const title = State.state.layoutToUse.data.title.txt;
let name = tagSource.data.name;
if(name){
- name += `${name} (${title})`
+ name = `${name} (${title})`
}else{
name = title;
}
@@ -212,7 +211,7 @@ export default class SpecialVisualizations {
text: State.state.layoutToUse.data.shortDescription.txt
})
} else {
- return new Combine([""])
+ return new FixedUiElement("")
}
}
diff --git a/assets/svg/share.svg b/assets/svg/share.svg
index 83f599f..1347e23 100644
--- a/assets/svg/share.svg
+++ b/assets/svg/share.svg
@@ -1,60 +1,17 @@
-
-
diff --git a/assets/tagRenderings/icons.json b/assets/tagRenderings/icons.json
index db3dd39..cc3fcbf 100644
--- a/assets/tagRenderings/icons.json
+++ b/assets/tagRenderings/icons.json
@@ -13,7 +13,7 @@
"condition": "wikipedia~*"
},
"phonelink": {
- "render": "
",
+ "render": "",
"condition": "phone~*"
},
"sharelink": {
diff --git a/css/fullscreenmessagebox.css b/css/fullscreenmessagebox.css
new file mode 100644
index 0000000..dba3e47
--- /dev/null
+++ b/css/fullscreenmessagebox.css
@@ -0,0 +1,57 @@
+.fullscreenmessage-content {
+ max-height: calc(100vh - var(--return-to-the-map-height));
+ height: 100%;
+ overflow-y: auto;
+ overflow-x: hidden;
+ background-color: var(--background-color);
+ display: block;
+}
+
+.fullscreenmessage-content .featureinfobox {
+ padding: 1em;
+ position: relative;
+}
+
+.fullscreenmessage-content .featureinfobox-content {
+ padding: 1em;
+ top: var(--variable-title-height);
+ /* 2em extra: padding from the title */
+ max-height: calc(100vh - var(--variable-title-height) - var(--return-to-the-map-height) - 2em) !important;
+ display: block;
+ position: absolute;
+ overflow-y: auto;
+}
+
+.fullscreenmessage-content .featureinfobox-titlebar {
+ position: fixed;
+ top: 0;
+ left: 0;
+ z-index: 10001;
+ background-color: var(--background-color);
+ padding: 0.5em;
+ width: 100%;
+ box-sizing: border-box;
+ border-bottom: 2px solid var(--foreground-color);
+}
+
+.to-the-map span {
+ font-size: xx-large;
+}
+
+.to-the-map {
+ background: var(--catch-detail-color);
+ height: var(--return-to-the-map-height);
+ position: fixed;
+ z-index: 10000;
+ bottom: 0;
+ left: 0;
+ width: 100vw;
+ color: var(--catch-detail-color-contrast);
+ font-weight: bold;
+ pointer-events: all;
+ cursor: pointer;
+ padding-top: 1.2em;
+ text-align: center;
+ padding-bottom: 1.2em;
+ box-sizing: border-box;
+}
diff --git a/css/mobile.css b/css/mobile.css
index 8525b13..c607055 100644
--- a/css/mobile.css
+++ b/css/mobile.css
@@ -68,6 +68,7 @@ Contains tweaks for small screens
position: absolute;
z-index: 10000;
width: 100vw;
+ height: 100vh;
}
#welcomeMessage {
diff --git a/css/tagrendering.css b/css/tagrendering.css
index 8026491..c8e0f68 100644
--- a/css/tagrendering.css
+++ b/css/tagrendering.css
@@ -9,13 +9,14 @@
}
.featureinfobox-icons img{
max-height: 1.5em;
- width:1.5em;
+ width: 1.5em;
}
.featureinfobox-icons {
}
.featureinfobox-icons span {
display: inline-block;
+ padding-right: 0.1em;
}
.featureinfobox-titlebar{
@@ -29,6 +30,7 @@
display:block;
max-height: 75vh;
overflow-y: auto;
+ overflow-x: hidden;
}
@media only screen and (max-width: 600px), only screen and (max-height: 600px) {
.featureinfobox-content {
diff --git a/index.css b/index.css
index 83d982a..655a69a 100644
--- a/index.css
+++ b/index.css
@@ -10,6 +10,7 @@
--shadow-color: #00000066;
--return-to-the-map-height: 5em;
+ --variable-title-height: 0px; /*Set by javascript dynamically*/
}
html, body {
@@ -509,15 +510,17 @@ a {
text-decoration: none;
display: inline-block;
border-radius: 3em;
- width: 4em;
- height: 3em;
+ height: 2.5em;
+ width: 2.5em;
box-sizing: border-box;
+ padding:0;
}
.share-button svg {
- max-height: 2.0em;
- width: 2.0em;
+ height: 1.5em;
+ width: 1.5em;
padding: 0.5em;
+ padding-left: 0.4em;
fill: var(--subtle-detail-color-contrast);
stroke: var(--subtle-detail-color-contrast);
}
diff --git a/index.html b/index.html
index d74743a..9692608 100644
--- a/index.html
+++ b/index.html
@@ -14,6 +14,7 @@
+