From 701ce3e89a921b7cdc1a793a49a3d45a9fc9198b Mon Sep 17 00:00:00 2001 From: pietervdvn Date: Thu, 7 Jan 2021 04:50:12 +0100 Subject: [PATCH] Css tweaks --- InitUiElements.ts | 4 +- Logic/Web/MangroveReviews.ts | 8 +- Models/Constants.ts | 2 +- Svg.ts | 42 ++- UI/Base/Ornament.ts | 34 ++ UI/BigComponents/FullWelcomePaneWithTabs.ts | 18 +- ...meMessage.ts => ThemeIntroductionPanel.ts} | 25 +- UI/FullScreenMessageBoxHandler.ts | 25 +- UI/OpeningHours/OhVisualization.ts | 2 +- UI/Popup/FeatureInfoBox.ts | 23 +- UI/ShowDataLayer.ts | 1 - assets/svg/Ornament-Horiz-0.svg | 91 ++++++ assets/svg/Ornament-Horiz-1.svg | 159 +++++++++ assets/svg/Ornament-Horiz-2.svg | 96 ++++++ assets/svg/Ornament-Horiz-3.svg | 91 ++++++ assets/svg/Ornament-Horiz-4.svg | 66 ++++ assets/svg/Ornament-Horiz-5.svg | 81 +++++ assets/svg/Ornament-Horiz-6.svg | 301 ++++++++++++++++++ assets/svg/back.svg | 77 +++++ css/fullscreenmessagebox.css | 30 +- css/mobile.css | 4 +- css/tagrendering.css | 88 ++++- index.css | 66 ++-- 23 files changed, 1220 insertions(+), 114 deletions(-) create mode 100644 UI/Base/Ornament.ts rename UI/BigComponents/{WelcomeMessage.ts => ThemeIntroductionPanel.ts} (69%) create mode 100644 assets/svg/Ornament-Horiz-0.svg create mode 100644 assets/svg/Ornament-Horiz-1.svg create mode 100644 assets/svg/Ornament-Horiz-2.svg create mode 100644 assets/svg/Ornament-Horiz-3.svg create mode 100644 assets/svg/Ornament-Horiz-4.svg create mode 100644 assets/svg/Ornament-Horiz-5.svg create mode 100644 assets/svg/Ornament-Horiz-6.svg create mode 100644 assets/svg/back.svg diff --git a/InitUiElements.ts b/InitUiElements.ts index de9fe3f88..6c7811716 100644 --- a/InitUiElements.ts +++ b/InitUiElements.ts @@ -174,9 +174,7 @@ export class InitUiElements { }); - new FullScreenMessageBox(() => { - State.state.selectedElement.setData(undefined) - }).AttachTo("messagesboxmobile"); + new FullScreenMessageBox().AttachTo("messagesboxmobile"); InitUiElements.OnlyIf(State.state.featureSwitchWelcomeMessage, () => { diff --git a/Logic/Web/MangroveReviews.ts b/Logic/Web/MangroveReviews.ts index 453aa7148..12c0247e8 100644 --- a/Logic/Web/MangroveReviews.ts +++ b/Logic/Web/MangroveReviews.ts @@ -22,8 +22,12 @@ export class MangroveIdentity { }) }) }) - if ((mangroveIdentity.data ?? "") === "") { - this.CreateIdentity(); + try { + if ((mangroveIdentity.data ?? "") === "") { + this.CreateIdentity(); + } + }catch(e){ + console.error("Could not create identity: ", e) } } diff --git a/Models/Constants.ts b/Models/Constants.ts index 2262323c9..ae7cd4431 100644 --- a/Models/Constants.ts +++ b/Models/Constants.ts @@ -1,7 +1,7 @@ import { Utils } from "../Utils"; export default class Constants { - public static vNumber = "0.3.1 "; + public static vNumber = "0.3.2"; // The user journey states thresholds when a new feature gets unlocked public static userJourney = { diff --git a/Svg.ts b/Svg.ts index e37eccb0b..3809edf38 100644 --- a/Svg.ts +++ b/Svg.ts @@ -4,6 +4,41 @@ import {FixedUiElement} from "./UI/Base/FixedUiElement"; export default class Svg { + public static Ornament_Horiz_0 = " image/svg+xml " + public static Ornament_Horiz_0_img = Img.AsImageElement(Svg.Ornament_Horiz_0) + public static Ornament_Horiz_0_svg() { return new FixedUiElement(Svg.Ornament_Horiz_0);} + public static Ornament_Horiz_0_ui() { return new FixedUiElement(Svg.Ornament_Horiz_0_img);} + + public static Ornament_Horiz_1 = " image/svg+xml " + public static Ornament_Horiz_1_img = Img.AsImageElement(Svg.Ornament_Horiz_1) + public static Ornament_Horiz_1_svg() { return new FixedUiElement(Svg.Ornament_Horiz_1);} + public static Ornament_Horiz_1_ui() { return new FixedUiElement(Svg.Ornament_Horiz_1_img);} + + public static Ornament_Horiz_2 = " image/svg+xml " + public static Ornament_Horiz_2_img = Img.AsImageElement(Svg.Ornament_Horiz_2) + public static Ornament_Horiz_2_svg() { return new FixedUiElement(Svg.Ornament_Horiz_2);} + public static Ornament_Horiz_2_ui() { return new FixedUiElement(Svg.Ornament_Horiz_2_img);} + + public static Ornament_Horiz_3 = " image/svg+xml " + public static Ornament_Horiz_3_img = Img.AsImageElement(Svg.Ornament_Horiz_3) + public static Ornament_Horiz_3_svg() { return new FixedUiElement(Svg.Ornament_Horiz_3);} + public static Ornament_Horiz_3_ui() { return new FixedUiElement(Svg.Ornament_Horiz_3_img);} + + public static Ornament_Horiz_4 = " image/svg+xml " + public static Ornament_Horiz_4_img = Img.AsImageElement(Svg.Ornament_Horiz_4) + public static Ornament_Horiz_4_svg() { return new FixedUiElement(Svg.Ornament_Horiz_4);} + public static Ornament_Horiz_4_ui() { return new FixedUiElement(Svg.Ornament_Horiz_4_img);} + + public static Ornament_Horiz_5 = " image/svg+xml " + public static Ornament_Horiz_5_img = Img.AsImageElement(Svg.Ornament_Horiz_5) + public static Ornament_Horiz_5_svg() { return new FixedUiElement(Svg.Ornament_Horiz_5);} + public static Ornament_Horiz_5_ui() { return new FixedUiElement(Svg.Ornament_Horiz_5_img);} + + public static Ornament_Horiz_6 = " image/svg+xml " + public static Ornament_Horiz_6_img = Img.AsImageElement(Svg.Ornament_Horiz_6) + public static Ornament_Horiz_6_svg() { return new FixedUiElement(Svg.Ornament_Horiz_6);} + public static Ornament_Horiz_6_ui() { return new FixedUiElement(Svg.Ornament_Horiz_6_img);} + public static add = " image/svg+xml " public static add_img = Img.AsImageElement(Svg.add) public static add_svg() { return new FixedUiElement(Svg.add);} @@ -29,6 +64,11 @@ export default class Svg { public static arrow_right_smooth_svg() { return new FixedUiElement(Svg.arrow_right_smooth);} public static arrow_right_smooth_ui() { return new FixedUiElement(Svg.arrow_right_smooth_img);} + public static back = " image/svg+xml " + public static back_img = Img.AsImageElement(Svg.back) + public static back_svg() { return new FixedUiElement(Svg.back);} + public static back_ui() { return new FixedUiElement(Svg.back_img);} + public static bug = " " public static bug_img = Img.AsImageElement(Svg.bug) public static bug_svg() { return new FixedUiElement(Svg.bug);} @@ -279,4 +319,4 @@ export default class Svg { public static wikipedia_svg() { return new FixedUiElement(Svg.wikipedia);} public static wikipedia_ui() { return new FixedUiElement(Svg.wikipedia_img);} -public static All = {"add.svg": Svg.add,"addSmall.svg": Svg.addSmall,"ampersand.svg": Svg.ampersand,"arrow-left-smooth.svg": Svg.arrow_left_smooth,"arrow-right-smooth.svg": Svg.arrow_right_smooth,"bug.svg": Svg.bug,"camera-plus.svg": Svg.camera_plus,"checkmark.svg": Svg.checkmark,"circle.svg": Svg.circle,"clock.svg": Svg.clock,"close.svg": Svg.close,"compass.svg": Svg.compass,"cross_bottom_right.svg": Svg.cross_bottom_right,"crosshair-blue-center.svg": Svg.crosshair_blue_center,"crosshair-blue.svg": Svg.crosshair_blue,"crosshair.svg": Svg.crosshair,"delete_icon.svg": Svg.delete_icon,"direction.svg": Svg.direction,"direction_gradient.svg": Svg.direction_gradient,"down.svg": Svg.down,"envelope.svg": Svg.envelope,"floppy.svg": Svg.floppy,"gear.svg": Svg.gear,"help.svg": Svg.help,"home.svg": Svg.home,"home_white_bg.svg": Svg.home_white_bg,"josm_logo.svg": Svg.josm_logo,"layers.svg": Svg.layers,"layersAdd.svg": Svg.layersAdd,"logo.svg": Svg.logo,"logout.svg": Svg.logout,"mapillary.svg": Svg.mapillary,"no_checkmark.svg": Svg.no_checkmark,"or.svg": Svg.or,"osm-logo-us.svg": Svg.osm_logo_us,"osm-logo.svg": Svg.osm_logo,"pencil.svg": Svg.pencil,"phone.svg": Svg.phone,"pin.svg": Svg.pin,"pop-out.svg": Svg.pop_out,"reload.svg": Svg.reload,"ring.svg": Svg.ring,"search.svg": Svg.search,"send_email.svg": Svg.send_email,"share.svg": Svg.share,"square.svg": Svg.square,"star.svg": Svg.star,"star_half.svg": Svg.star_half,"star_outline.svg": Svg.star_outline,"star_outline_half.svg": Svg.star_outline_half,"statistics.svg": Svg.statistics,"up.svg": Svg.up,"wikidata.svg": Svg.wikidata,"wikimedia-commons-white.svg": Svg.wikimedia_commons_white,"wikipedia.svg": Svg.wikipedia};} +public static All = {"Ornament-Horiz-0.svg": Svg.Ornament_Horiz_0,"Ornament-Horiz-1.svg": Svg.Ornament_Horiz_1,"Ornament-Horiz-2.svg": Svg.Ornament_Horiz_2,"Ornament-Horiz-3.svg": Svg.Ornament_Horiz_3,"Ornament-Horiz-4.svg": Svg.Ornament_Horiz_4,"Ornament-Horiz-5.svg": Svg.Ornament_Horiz_5,"Ornament-Horiz-6.svg": Svg.Ornament_Horiz_6,"add.svg": Svg.add,"addSmall.svg": Svg.addSmall,"ampersand.svg": Svg.ampersand,"arrow-left-smooth.svg": Svg.arrow_left_smooth,"arrow-right-smooth.svg": Svg.arrow_right_smooth,"back.svg": Svg.back,"bug.svg": Svg.bug,"camera-plus.svg": Svg.camera_plus,"checkmark.svg": Svg.checkmark,"circle.svg": Svg.circle,"clock.svg": Svg.clock,"close.svg": Svg.close,"compass.svg": Svg.compass,"cross_bottom_right.svg": Svg.cross_bottom_right,"crosshair-blue-center.svg": Svg.crosshair_blue_center,"crosshair-blue.svg": Svg.crosshair_blue,"crosshair.svg": Svg.crosshair,"delete_icon.svg": Svg.delete_icon,"direction.svg": Svg.direction,"direction_gradient.svg": Svg.direction_gradient,"down.svg": Svg.down,"envelope.svg": Svg.envelope,"floppy.svg": Svg.floppy,"gear.svg": Svg.gear,"help.svg": Svg.help,"home.svg": Svg.home,"home_white_bg.svg": Svg.home_white_bg,"josm_logo.svg": Svg.josm_logo,"layers.svg": Svg.layers,"layersAdd.svg": Svg.layersAdd,"logo.svg": Svg.logo,"logout.svg": Svg.logout,"mapillary.svg": Svg.mapillary,"no_checkmark.svg": Svg.no_checkmark,"or.svg": Svg.or,"osm-logo-us.svg": Svg.osm_logo_us,"osm-logo.svg": Svg.osm_logo,"pencil.svg": Svg.pencil,"phone.svg": Svg.phone,"pin.svg": Svg.pin,"pop-out.svg": Svg.pop_out,"reload.svg": Svg.reload,"ring.svg": Svg.ring,"search.svg": Svg.search,"send_email.svg": Svg.send_email,"share.svg": Svg.share,"square.svg": Svg.square,"star.svg": Svg.star,"star_half.svg": Svg.star_half,"star_outline.svg": Svg.star_outline,"star_outline_half.svg": Svg.star_outline_half,"statistics.svg": Svg.statistics,"up.svg": Svg.up,"wikidata.svg": Svg.wikidata,"wikimedia-commons-white.svg": Svg.wikimedia_commons_white,"wikipedia.svg": Svg.wikipedia};} diff --git a/UI/Base/Ornament.ts b/UI/Base/Ornament.ts new file mode 100644 index 000000000..e4057bf81 --- /dev/null +++ b/UI/Base/Ornament.ts @@ -0,0 +1,34 @@ +import {UIElement} from "../UIElement"; +import {UIEventSource} from "../../Logic/UIEventSource"; +import Svg from "../../Svg"; + +export default class Ornament extends UIElement { + private static readonly ornamentsCount = Ornament.countOrnaments(); + private readonly _index = new UIEventSource(0) + + constructor(index = new UIEventSource(0)) { + super(index); + this._index = index; + this.SetClass("ornament") + const self = this; + this.onClick(() => { + self._index.setData((self._index.data + 1) % Ornament.ornamentsCount); + + }) + } + + private static countOrnaments() { + let ornamentCount = 0; + for (const key in Svg.All) { + if (key.startsWith("Ornament-Horiz-")) { + ornamentCount++; + } + } + return ornamentCount; + } + + InnerRender(): string { + return Svg.All[`Ornament-Horiz-${this._index.data}.svg`] + } + +} \ No newline at end of file diff --git a/UI/BigComponents/FullWelcomePaneWithTabs.ts b/UI/BigComponents/FullWelcomePaneWithTabs.ts index 8dd0d806a..b53a59e79 100644 --- a/UI/BigComponents/FullWelcomePaneWithTabs.ts +++ b/UI/BigComponents/FullWelcomePaneWithTabs.ts @@ -1,6 +1,6 @@ import {UIElement} from "../UIElement"; import State from "../../State"; -import WelcomeMessage from "./WelcomeMessage"; +import ThemeIntroductionPanel from "./ThemeIntroductionPanel"; import * as personal from "../../assets/themes/personalLayout/personalLayout.json"; import PersonalLayersPanel from "./PersonalLayersPanel"; import Svg from "../../Svg"; @@ -15,6 +15,8 @@ import {TabbedComponent} from "../Base/TabbedComponent"; import {UIEventSource} from "../../Logic/UIEventSource"; import LayoutConfig from "../../Customizations/JSON/LayoutConfig"; import UserDetails from "../../Logic/Osm/OsmConnection"; +import {FixedUiElement} from "../Base/FixedUiElement"; +import CombinedInputElement from "../Input/CombinedInputElement"; export default class FullWelcomePaneWithTabs extends UIElement { private readonly _layoutToUse: UIEventSource; @@ -27,9 +29,9 @@ export default class FullWelcomePaneWithTabs extends UIElement { this._layoutToUse = State.state.layoutToUse; this._userDetails = State.state.osmConnection.userDetails; - + const layoutToUse = this._layoutToUse.data; - let welcome: UIElement = new WelcomeMessage(); + let welcome: UIElement = new ThemeIntroductionPanel(); if (layoutToUse.id === personal.id) { welcome = new PersonalLayersPanel(); } @@ -66,10 +68,18 @@ export default class FullWelcomePaneWithTabs extends UIElement { } ); - this._component = new TabbedComponent(tabs, State.state.welcomeMessageOpenedTab) + const tabbedPart = new TabbedComponent(tabs, State.state.welcomeMessageOpenedTab) .ListenTo(this._userDetails); + const backButton = new Combine([ + new Combine([Translations.t.general.returnToTheMap.Clone().SetClass("to-the-map")]) + .SetClass("to-the-map-inner") + + ]).SetClass("only-on-mobile") + .onClick(() => State.state.fullScreenMessage.setData(undefined)); + tabbedPart.SetStyle("overflow-y: auto; max-height: calc( 100vh - 4em);display:block;") + this._component = new Combine([tabbedPart, backButton]).SetStyle("width:100%;"); } InnerRender(): string { diff --git a/UI/BigComponents/WelcomeMessage.ts b/UI/BigComponents/ThemeIntroductionPanel.ts similarity index 69% rename from UI/BigComponents/WelcomeMessage.ts rename to UI/BigComponents/ThemeIntroductionPanel.ts index de1179c4b..3c68816ec 100644 --- a/UI/BigComponents/WelcomeMessage.ts +++ b/UI/BigComponents/ThemeIntroductionPanel.ts @@ -4,15 +4,16 @@ import State from "../../State"; import Combine from "../Base/Combine"; import LanguagePicker from "../LanguagePicker"; import Translations from "../i18n/Translations"; +import {VariableUiElement} from "../Base/VariableUIElement"; - -export default class WelcomeMessage extends UIElement { +export default class ThemeIntroductionPanel extends UIElement { private languagePicker: UIElement; private readonly description: UIElement; private readonly plzLogIn: UIElement; private readonly welcomeBack: UIElement; private readonly tail: UIElement; + private readonly loginStatus: UIElement; constructor() { @@ -32,20 +33,24 @@ export default class WelcomeMessage extends UIElement { }); this.welcomeBack = Translations.t.general.welcomeBack; this.tail = layout.descriptionTail; + this.loginStatus = new VariableUiElement( + State.state.osmConnection.userDetails.map( + userdetails => { + if (State.state.featureSwitchUserbadge.data) { + return ""; + } + return (userdetails.loggedIn ? this.welcomeBack : this.plzLogIn).Render(); + } + ) + + ) } InnerRender(): string { - - let loginStatus = undefined; - if (State.state.featureSwitchUserbadge.data) { - loginStatus = (State.state.osmConnection.userDetails.data.loggedIn ? this.welcomeBack : - this.plzLogIn); - } - return new Combine([ this.description, "

", - loginStatus, + this.loginStatus, this.tail, "
", this.languagePicker diff --git a/UI/FullScreenMessageBoxHandler.ts b/UI/FullScreenMessageBoxHandler.ts index 4b1950852..0a67765a3 100644 --- a/UI/FullScreenMessageBoxHandler.ts +++ b/UI/FullScreenMessageBoxHandler.ts @@ -1,5 +1,4 @@ import {UIElement} from "./UIElement"; -import Translations from "./i18n/Translations"; import State from "../State"; import Combine from "./Base/Combine"; @@ -8,24 +7,11 @@ import Combine from "./Base/Combine"; */ export default class FullScreenMessageBox extends UIElement { - private readonly returnToTheMap: UIElement; private _content: UIElement; - constructor(onClear: (() => void)) { + constructor() { super(State.state.fullScreenMessage); this.HideOnEmpty(true); - - this.returnToTheMap = - 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") - } @@ -34,17 +20,14 @@ export default class FullScreenMessageBox extends UIElement { return ""; } this._content = State.state.fullScreenMessage.data; - const innerWrap = new Combine([this._content]).SetClass("fullscreenmessage-content") - - return new Combine([innerWrap, this.returnToTheMap]) - .SetStyle("display:block; height: 100%;") - .Render(); + return new Combine([this._content]).SetClass("fullscreenmessage-content").Render(); } protected InnerUpdate(htmlElement: HTMLElement) { super.InnerUpdate(htmlElement); + // This is a bit out of place, and it is a fix specifically for the featureinfobox-titlebar const height = htmlElement.getElementsByClassName("featureinfobox-titlebar")[0]?.clientHeight ?? 0; - htmlElement.style.setProperty("--variable-title-height", height+"px") + htmlElement.style.setProperty("--variable-title-height", height + "px") } diff --git a/UI/OpeningHours/OhVisualization.ts b/UI/OpeningHours/OhVisualization.ts index 8f49b9c11..8b3638c8c 100644 --- a/UI/OpeningHours/OhVisualization.ts +++ b/UI/OpeningHours/OhVisualization.ts @@ -197,7 +197,7 @@ export default class OpeningHoursVisualization extends UIElement { const opensAtDate = oh.getNextChange(); if(opensAtDate === undefined){ const comm = oh.getComment() ?? oh.getUnknown(); - if(comm !== undefined){ + if(!!comm){ return new FixedUiElement(comm).SetClass("ohviz-closed").Render(); } diff --git a/UI/Popup/FeatureInfoBox.ts b/UI/Popup/FeatureInfoBox.ts index 7a58c9393..f97e97a27 100644 --- a/UI/Popup/FeatureInfoBox.ts +++ b/UI/Popup/FeatureInfoBox.ts @@ -7,6 +7,9 @@ import Combine from "../Base/Combine"; import TagRenderingAnswer from "./TagRenderingAnswer"; import State from "../../State"; import {FixedUiElement} from "../Base/FixedUiElement"; +import TagRenderingConfig from "../../Customizations/JSON/TagRenderingConfig"; +import Svg from "../../Svg"; +import Ornament from "../Base/Ornament"; export default class FeatureInfoBox extends UIElement { private _tags: UIEventSource; @@ -16,6 +19,8 @@ export default class FeatureInfoBox extends UIElement { private _titleIcons: UIElement; private _renderings: UIElement[]; private _questionBox: UIElement; + private _returnToTheMap: UIElement; + private _tail: UIElement; constructor( tags: UIEventSource, @@ -28,10 +33,14 @@ export default class FeatureInfoBox extends UIElement { this._tags = tags; this._layerConfig = layerConfig; + this._returnToTheMap = Svg.back_svg().onClick(() => { + State.state.fullScreenMessage.setData(undefined); + State.state.selectedElement.setData(undefined); + }).SetClass("only-on-mobile") + .SetClass("featureinfobox-back-to-the-map") - this._title = layerConfig.title === undefined ? undefined : - new TagRenderingAnswer(tags, layerConfig.title) - .SetClass("featureinfobox-title"); + this._title = new TagRenderingAnswer(tags, layerConfig.title ?? new TagRenderingConfig("POI")) + .SetClass("featureinfobox-title"); this._titleIcons = new Combine( layerConfig.titleIcons.map(icon => new TagRenderingAnswer(tags, icon))) .SetClass("featureinfobox-icons"); @@ -54,16 +63,18 @@ export default class FeatureInfoBox extends UIElement { if (!questionBoxIsUsed) { this._renderings.push(questionBox); } + this._tail = new Combine([new Ornament()]).SetClass("only-on-mobile"); } InnerRender(): string { return new Combine([ - new Combine([this._title, this._titleIcons]) - .SetClass("featureinfobox-titlebar"), + new Combine([ + this._returnToTheMap, new Combine([this._title, this._titleIcons]).SetClass("featureinfobox-titlebar-title") + ]).SetClass("featureinfobox-titlebar"), new Combine([ ...this._renderings, this._questionBox, - new FixedUiElement("").SetClass("featureinfobox-tail") + this._tail.SetClass("featureinfobox-tail") ] ).SetClass("featureinfobox-content"), ]).SetClass("featureinfobox") diff --git a/UI/ShowDataLayer.ts b/UI/ShowDataLayer.ts index b700f3785..ea0571e3f 100644 --- a/UI/ShowDataLayer.ts +++ b/UI/ShowDataLayer.ts @@ -151,7 +151,6 @@ export default class ShowDataLayer { State.state.selectedElement.setData(feature); } this._onSelectedTrigger[feature.properties.id.replace("/","_")] = this._onSelectedTrigger[id]; - if (feature.properties.id.replace(/\//g, "_") === Hash.hash.data) { // This element is in the URL, so this is a share link // We already open it diff --git a/assets/svg/Ornament-Horiz-0.svg b/assets/svg/Ornament-Horiz-0.svg new file mode 100644 index 000000000..83fabd389 --- /dev/null +++ b/assets/svg/Ornament-Horiz-0.svg @@ -0,0 +1,91 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + diff --git a/assets/svg/Ornament-Horiz-1.svg b/assets/svg/Ornament-Horiz-1.svg new file mode 100644 index 000000000..1475dd7b8 --- /dev/null +++ b/assets/svg/Ornament-Horiz-1.svg @@ -0,0 +1,159 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/svg/Ornament-Horiz-2.svg b/assets/svg/Ornament-Horiz-2.svg new file mode 100644 index 000000000..a5f18fec2 --- /dev/null +++ b/assets/svg/Ornament-Horiz-2.svg @@ -0,0 +1,96 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + diff --git a/assets/svg/Ornament-Horiz-3.svg b/assets/svg/Ornament-Horiz-3.svg new file mode 100644 index 000000000..c9a335625 --- /dev/null +++ b/assets/svg/Ornament-Horiz-3.svg @@ -0,0 +1,91 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + diff --git a/assets/svg/Ornament-Horiz-4.svg b/assets/svg/Ornament-Horiz-4.svg new file mode 100644 index 000000000..ade8558e6 --- /dev/null +++ b/assets/svg/Ornament-Horiz-4.svg @@ -0,0 +1,66 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + diff --git a/assets/svg/Ornament-Horiz-5.svg b/assets/svg/Ornament-Horiz-5.svg new file mode 100644 index 000000000..9367c3e59 --- /dev/null +++ b/assets/svg/Ornament-Horiz-5.svg @@ -0,0 +1,81 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + diff --git a/assets/svg/Ornament-Horiz-6.svg b/assets/svg/Ornament-Horiz-6.svg new file mode 100644 index 000000000..b2f2e4e96 --- /dev/null +++ b/assets/svg/Ornament-Horiz-6.svg @@ -0,0 +1,301 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/svg/back.svg b/assets/svg/back.svg new file mode 100644 index 000000000..ce2f36fe4 --- /dev/null +++ b/assets/svg/back.svg @@ -0,0 +1,77 @@ + + + + + + + + + + + + + image/svg+xml + + + + + + + + diff --git a/css/fullscreenmessagebox.css b/css/fullscreenmessagebox.css index 4f67377a6..e6d558bdd 100644 --- a/css/fullscreenmessagebox.css +++ b/css/fullscreenmessagebox.css @@ -1,5 +1,5 @@ .fullscreenmessage-content { - max-height: calc(100vh - var(--return-to-the-map-height)); + max-height: calc(100vh); height: 100%; overflow-y: auto; overflow-x: hidden; @@ -16,10 +16,11 @@ 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; + max-height: calc(100vh - var(--variable-title-height)) !important; display: block; position: absolute; overflow-y: auto; + box-sizing: border-box; } .fullscreenmessage-content .featureinfobox-titlebar { @@ -35,29 +36,6 @@ } .fullscreenmessage-content .featureinfobox-tail { - display: block; - height: 1em; + /*THe ornament to give the URL bar some room...*/ } - -.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 148f22779..f2986b7bb 100644 --- a/css/mobile.css +++ b/css/mobile.css @@ -3,7 +3,7 @@ Contains tweaks for small screens */ .only-on-mobile { - display: none; + display: none !important; background-color: var(--background-color); color: var(--foreground-color); } @@ -11,7 +11,7 @@ Contains tweaks for small screens @media only screen and (max-width: 600px), only screen and (max-height: 600px) { .only-on-mobile { - display: unset; + display: unset !important; background-color: var(--background-color); color: var(--foreground-color); } diff --git a/css/tagrendering.css b/css/tagrendering.css index acba2ae98..5a83eb010 100644 --- a/css/tagrendering.css +++ b/css/tagrendering.css @@ -1,17 +1,21 @@ .featureinfobox { display: flex; - flex-direction: column; + flex-direction: column; } .featureinfobox-title { - font-size: xx-large; + font-size: xx-large; + word-break: break-word; } -.featureinfobox-icons img{ + +.featureinfobox-icons img { max-height: 1.5em; width: 1.5em; } + .featureinfobox-icons { + margin-left: auto; } .featureinfobox-icons span { @@ -19,14 +23,45 @@ padding-right: 0.1em; } -.featureinfobox-titlebar{ +.featureinfobox-titlebar { + border-bottom: 2px solid var(--foreground-color); + box-shadow: 0 10px 10px -10px lightgray; + display: flex; + justify-content: space-between; +} + +.featureinfobox-titlebar-title { font-size: large; font-weight: bold; display: flex; justify-content: space-between; - border-bottom: 2px solid var(--foreground-color); + flex-wrap: wrap; + 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; +} + +.featureinfobox-back-to-the-map svg { + width: 1.75em; + height: 1.75em; + margin-left: 0.15em; + margin-top: 0.15em +} + +.featureinfobox-back-to-the-map svg path{ + stroke: var(--subtle-detail-color-contrast) !important; +} + + .featureinfobox-content { display: block; max-height: 75vh; @@ -34,15 +69,16 @@ overflow-x: hidden; padding-top: 1em; } + @media only screen and (max-width: 600px), only screen and (max-height: 600px) { .featureinfobox-content { - display:block; + display: block; max-height: unset !important; overflow-y: auto; } } -@media only screen and (max-height: 600px) and (min-width: 600px){ +@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; @@ -51,7 +87,7 @@ max-height: unset !important; height: 100vh; } - + .answer { max-width: 48% !important; padding-right: 0.3em; @@ -63,8 +99,8 @@ padding-right: 0.3em; box-sizing: border-box; } - - .first-rendering{ + + .first-rendering { position: absolute; left: 50%; width: 94%; @@ -129,7 +165,7 @@ border-radius: 0.5em; display: inline-block; width: 100%; - margin:0; + margin: 0; margin-left: -2em; box-sizing: border-box; padding: 0.5em; @@ -161,7 +197,7 @@ input:checked + label .question-option-with-border { .login-button-friendly { display: inline-block; - background-color:var(--catch-detail-color); + background-color: var(--catch-detail-color); color: var(--catch-detail-color-contrast); border: solid var(--catch-detail-color-contrast) 2px; padding: 0.2em 0.6em; @@ -204,7 +240,31 @@ input:checked + label .question-option-with-border { float: right; } -.edit-button svg path{ +.edit-button svg path { stroke: var(--foreground-color) !important; fill: var(--foreground-color) !important; -} \ No newline at end of file +} + + + +.to-the-map span { + font-size: xx-large; +} + +.to-the-map { + background: var(--catch-detail-color); + height: var(--return-to-the-map-height); + color: var(--catch-detail-color-contrast); + font-weight: bold; + pointer-events: all; + cursor: pointer; + padding-top: 0.4em; + text-align: center; + box-sizing: border-box; + display: block; + max-height: 2em; +} + +.to-the-map-inner{ + font-size: xx-large; +} diff --git a/index.css b/index.css index b7b7406c7..c82e5ea1e 100644 --- a/index.css +++ b/index.css @@ -2,7 +2,7 @@ --subtle-detail-color: #e5f5ff; --subtle-detail-color-contrast: black; --subtle-detail-color-light-contrast: lightgrey; - + --catch-detail-color: #3a3aeb; --catch-detail-color-contrast: white; --alert-color: #fee4d1; @@ -10,9 +10,8 @@ --foreground-color: black; --popup-border: white; --shadow-color: #00000066; - + --variable-title-height: 0px; /* Set by javascript */ --return-to-the-map-height: 5em; - --variable-title-height: 0px; /*Set by javascript dynamically*/ } html, body { @@ -40,8 +39,8 @@ a { stroke: var(--foreground-color) !important; } -.direction-svg svg path{ - fill: var(--catch-detail-color) !important; +.direction-svg svg path { + fill: var(--catch-detail-color) !important; } @@ -100,37 +99,38 @@ a { box-shadow: 0 0 10px var(--shadow-color); } -.single-layer-selection-toggle{ +.single-layer-selection-toggle { position: relative; - width: 2em; + width: 2em; height: 2em; } -.single-layer-selection-toggle img{ - max-height: 2em !important; - max-width: 2em !important; -} -.single-layer-selection-toggle svg{ - max-height:2em !important; +.single-layer-selection-toggle img { + max-height: 2em !important; max-width: 2em !important; } -.simple-add-ui-icon{ +.single-layer-selection-toggle svg { + max-height: 2em !important; + max-width: 2em !important; +} + +.simple-add-ui-icon { position: relative; display: block; - width: 3.5em; + width: 3.5em; height: 3.5em; padding-right: 0.3em; padding-left: 0.3em; } -.simple-add-ui-icon img{ - max-height:3.5em !important; +.simple-add-ui-icon img { + max-height: 3.5em !important; max-width: 3.5em !important; } -.simple-add-ui-icon svg{ - max-height:3.5em !important; +.simple-add-ui-icon svg { + max-height: 3.5em !important; max-width: 3.5em !important; } @@ -551,7 +551,7 @@ a { height: 2.5em; width: 2.5em; box-sizing: border-box; - padding:0; + padding: 0; } .share-button svg { @@ -563,12 +563,34 @@ a { stroke: var(--subtle-detail-color-contrast) !important; } -.share-button svg path{ +.share-button svg path { fill: var(--subtle-detail-color-contrast) !important; stroke: var(--subtle-detail-color-contrast) !important; } -.share-button svg circle{ +.share-button svg circle { fill: var(--subtle-detail-color-contrast) !important; stroke: var(--subtle-detail-color-contrast) !important; } + + +.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); +} \ No newline at end of file