From 257194c0633c4e63c77d03a943474adb64bb7ad2 Mon Sep 17 00:00:00 2001 From: Pieter Vander Vennet Date: Sun, 13 Sep 2020 00:53:24 +0200 Subject: [PATCH] More CSS improvements and cleanups --- Customizations/Questions/WikipediaLink.ts | 4 +- UI/FeatureInfoBox.ts | 47 ++--- UI/Image/ImageCarousel.ts | 112 +----------- UI/SlideShow.ts | 7 +- UI/TagRendering.ts | 26 +-- UI/UIElement.ts | 10 +- index.css | 209 ++++++++-------------- 7 files changed, 128 insertions(+), 287 deletions(-) diff --git a/Customizations/Questions/WikipediaLink.ts b/Customizations/Questions/WikipediaLink.ts index a357069..8342afa 100644 --- a/Customizations/Questions/WikipediaLink.ts +++ b/Customizations/Questions/WikipediaLink.ts @@ -32,11 +32,9 @@ export class WikipediaLink extends TagRenderingOptions { key: "wikipedia", template: "$$$", renderTemplate: - "" + "" + "wikipedia" + - "", - + "", placeholder: "" diff --git a/UI/FeatureInfoBox.ts b/UI/FeatureInfoBox.ts index cfcd7be..b5ab38c 100644 --- a/UI/FeatureInfoBox.ts +++ b/UI/FeatureInfoBox.ts @@ -24,8 +24,6 @@ export class FeatureInfoBox extends UIElement { private readonly _tagsES: UIEventSource; private readonly _changes: Changes; private readonly _title: UIElement; - private readonly _osmLink: UIElement; - private readonly _wikipedialink: UIElement; private readonly _infoboxes: TagDependantUIElement[]; private readonly _oneSkipped = Translations.t.general.oneSkippedQuestion.Clone(); @@ -65,22 +63,36 @@ export class FeatureInfoBox extends UIElement { this._oneSkipped.onClick(initTags) + let renderedTitle: UIElement; title = title ?? new TagRenderingOptions( { mappings: [{k: new And([]), txt: ""}] } ) if (typeof (title) == "string") { - this._title = new FixedUiElement(title); + renderedTitle = new FixedUiElement(title); } else if (title instanceof UIElement) { - this._title = title; + renderedTitle = title; } else { - this._title = title.construct(deps); + renderedTitle = title.construct(deps); } - this._osmLink = new OsmLink().construct(deps); - this._wikipedialink = new WikipediaLink().construct(deps); + + renderedTitle + .SetStyle("width: calc(100% - 50px - 0.2em);") + .SetClass("title-font") + const osmLink = new OsmLink() + .construct(deps) + .SetStyle("width: 24px; display:block;") + const wikipedialink = new WikipediaLink() + .construct(deps) + .SetStyle("width: 24px; display:block;") + + this._title = new Combine([ + renderedTitle, + wikipedialink, + osmLink]).SetStyle("display:flex;"); } InnerRender(): string { @@ -134,22 +146,15 @@ export class FeatureInfoBox extends UIElement { questionElement = this._someSkipped; } - const title = new Combine([ - this._title, - this._wikipedialink, - this._osmLink]); - const infoboxcontents = new Combine( - [ new VerticalCombine(info, "infobox-information "), questionElement ?? ""]); + [new VerticalCombine(info, "infobox-information "), questionElement ?? ""]); - return "
" + - new Combine([ - "
", - title, - "
", - "
", - infoboxcontents, - "
"]).Render() + "
"; + return new Combine([ + this._title, + "
", + infoboxcontents, + "
"]).SetClass("featureinfobox") + .Render(); } diff --git a/UI/Image/ImageCarousel.ts b/UI/Image/ImageCarousel.ts index 6c80557..3714ab1 100644 --- a/UI/Image/ImageCarousel.ts +++ b/UI/Image/ImageCarousel.ts @@ -1,20 +1,13 @@ import {UIElement} from "../UIElement"; import {ImageSearcher} from "../../Logic/ImageSearcher"; import {SlideShow} from "../SlideShow"; -import {FixedUiElement} from "../Base/FixedUiElement"; -import {VariableUiElement} from "../Base/VariableUIElement"; import {UIEventSource} from "../../Logic/UIEventSource"; import { Dependencies, TagDependantUIElement, TagDependantUIElementConstructor } from "../../Customizations/UIElementConstructor"; -import {State} from "../../State"; import Translation from "../i18n/Translation"; -import {CheckBox} from "../Input/CheckBox"; -import Combine from "../Base/Combine"; -import {OsmConnection} from "../../Logic/Osm/OsmConnection"; -import Translations from "../i18n/Translations"; export class ImageCarouselConstructor implements TagDependantUIElementConstructor { IsKnown(properties: any): boolean { @@ -41,24 +34,13 @@ export class ImageCarouselConstructor implements TagDependantUIElementConstructo export class ImageCarousel extends TagDependantUIElement { - - private readonly searcher: ImageSearcher; - + public readonly searcher: ImageSearcher; public readonly slideshow: SlideShow; - private readonly _uiElements: UIEventSource; - - private readonly _deleteButton: UIElement; - private readonly _confirmation: UIElement; - - constructor(tags: UIEventSource, osmConnection: OsmConnection = undefined) { + constructor(tags: UIEventSource) { super(tags); - - const self = this; - osmConnection = osmConnection ?? State.state?.osmConnection; this.searcher = new ImageSearcher(tags); - - this._uiElements = this.searcher.map((imageURLS: string[]) => { + const uiElements = this.searcher.map((imageURLS: string[]) => { const uiElements: UIElement[] = []; for (const url of imageURLS) { const image = ImageSearcher.CreateImageElement(url); @@ -67,96 +49,12 @@ export class ImageCarousel extends TagDependantUIElement { return uiElements; }); - this.slideshow = new SlideShow( - this._uiElements, - new FixedUiElement("")).HideOnEmpty(true); - - - const showDeleteButton = this.slideshow._currentSlide.map((i: number) => { - if (!osmConnection?.userDetails?.data?.loggedIn) { - return false; - } - return self.searcher.IsDeletable(self.searcher.data[i]); - }, [this.searcher, osmConnection?.userDetails, this.slideshow._currentSlide]); - - const isDeleted: UIEventSource = this.slideshow._currentSlide.map((i: number) => { - const isDeleted = self.searcher._deletedImages.data.indexOf(self.searcher.data[i]) >= 0; - console.log("Now deleted: ", i, isDeleted); - return isDeleted; - }, [this.searcher, this.searcher._deletedImages, this.slideshow._currentSlide]); - - const style = ";padding:0.4em;height:2em;padding: 0.4em; font-weight:bold;"; - const backButton = Translations.t.image.dontDelete - .SetStyle("background:black;border-radius:0.4em 0.4em 0 0" + style) - - const deleteButton = - Translations.t.image.doDelete - .SetStyle("background:#ff8c8c;border-radius:0 0 0.4em 0.4em" + style); - this._confirmation = deleteButton; - - const isDeletedBadge = Translations.t.image.isDeleted - .SetStyle("display:block;" + - "background-color: black;color:white;padding:0.4em;border-radius:0.4em"); - - const confirmDialog = new Combine([ - backButton, - deleteButton] - ).SetStyle("display:flex;" + - "flex-direction:column;" + - "background:black;" + - "color:white;" + - "border-radius:0.5em;" + - "width:max-content;" + - "height:min-content;"); - - const smallDeleteButton = new FixedUiElement("") - .SetStyle("display:block;" + - "width: 1.5em;" + - "height: 1.5em;" + - "padding: 0.5em;" + - "border-radius: 3em;" + - "background-color: black;") - - const deleteButtonCheckbox = new CheckBox( - confirmDialog, - new VariableUiElement( - showDeleteButton.map(showDelete => { - - if (isDeleted.data) { - return isDeletedBadge.Render() - } - if (!showDelete) { - return ""; - } - return smallDeleteButton.Render(); - }, [this.searcher._deletedImages, isDeleted] - ))); - - deleteButton.onClick(() => { - console.log("Deleting image..."); - deleteButtonCheckbox.isEnabled.setData(false); - deleteButtonCheckbox.Update(); - self.searcher.Delete(self.searcher.data[self.slideshow._currentSlide.data]); - }); - - isDeleted.addCallback(isD => { - if(isD){ - deleteButtonCheckbox.isEnabled.setData(false); - } - }) - - this._deleteButton = deleteButtonCheckbox; - this._deleteButton.SetStyle( - "position:absolute;display:block;top:1em;left:5em;z-index: 7000;width:min-content;height:min-content;" - ) + this.slideshow = new SlideShow(uiElements).HideOnEmpty(true); } InnerRender(): string { - return new Combine([ - this._deleteButton, - this.slideshow - ]).SetStyle("position:relative").Render(); + return this.slideshow.Render(); } IsKnown(): boolean { diff --git a/UI/SlideShow.ts b/UI/SlideShow.ts index 3abd0b2..6852717 100644 --- a/UI/SlideShow.ts +++ b/UI/SlideShow.ts @@ -7,17 +7,14 @@ export class SlideShow extends UIElement { private readonly _embeddedElements: UIEventSource public readonly _currentSlide: UIEventSource = new UIEventSource(0); - private readonly _noimages: UIElement; private _prev: UIElement; private _next: UIElement; constructor( - embeddedElements: UIEventSource, - noImages: UIElement) { + embeddedElements: UIEventSource) { super(embeddedElements); this._embeddedElements = embeddedElements; this.ListenTo(this._currentSlide); - this._noimages = noImages; const self = this; this._prev = new FixedUiElement("
" + @@ -41,7 +38,7 @@ export class SlideShow extends UIElement { InnerRender(): string { if (this._embeddedElements.data.length == 0) { - return this._noimages.Render(); + return ""; } if (this._embeddedElements.data.length == 1) { diff --git a/UI/TagRendering.ts b/UI/TagRendering.ts index ab6a02e..114596e 100644 --- a/UI/TagRendering.ts +++ b/UI/TagRendering.ts @@ -169,6 +169,7 @@ export class TagRendering extends UIElement implements TagDependantUIElement { this._editButton = new FixedUiElement(""); if (this._question !== undefined) { + // 2.3em total width this._editButton = new FixedUiElement( "edit") @@ -498,22 +499,27 @@ export class TagRendering extends UIElement implements TagDependantUIElement { if (this.IsKnown()) { const answer = this.RenderAnswer(); - if(answer.IsEmpty()){ + if (answer.IsEmpty()) { return ""; } - let editButton; + + + const answerStyle = " display: inline-block;" + + " margin: 0.1em;" + + " width: 100%;" + + " font-size: large;" + if (State.state === undefined || // state undefined -> we are custom testing State.state?.osmConnection?.userDetails?.data?.loggedIn && this._question !== undefined) { - editButton = this._editButton; + answer.SetStyle("display:inline-block;width:calc(100% - 2.3em);") + return new Combine([ + answer, + this._editButton]) + .SetStyle(answerStyle) + .Render(); } - return new Combine([ - "", - "", - answer, - "", - editButton ?? "", - ""]).Render(); + return answer.SetStyle(answerStyle).Render(); } return ""; diff --git a/UI/UIElement.ts b/UI/UIElement.ts index dea9000..11c9861 100644 --- a/UI/UIElement.ts +++ b/UI/UIElement.ts @@ -158,9 +158,9 @@ export abstract class UIElement extends UIEventSource { if (this.style !== undefined && this.style !== "") { style = `style="${this.style}" `; } - const clss = ""; + let clss = ""; if (this.clss.length > 0) { - `class='${this.clss.join(" ")}' `; + clss = `class='${this.clss.join(" ")}' `; } return `${this.lastInnerRender}` } @@ -184,14 +184,14 @@ export abstract class UIElement extends UIEventSource { public SetClass(clss: string): UIElement { this.dumbMode = false; - if(clss === "" && this.clss.length > 0){ + if (clss === "" && this.clss.length > 0) { this.clss = []; this.Update(); - } - if (this.clss.indexOf(clss) < 0) { + } else if (this.clss.indexOf(clss) < 0) { this.clss.push(clss); this.Update(); } + console.log(this.clss) return this; } diff --git a/index.css b/index.css index f48f34b..56b78c6 100644 --- a/index.css +++ b/index.css @@ -51,10 +51,10 @@ border-radius: 1em; padding: 0.3em; margin: 0.25em; - text-align: center; - padding-top: 0.15em; - padding-bottom: 0.15em; -} + text-align: center; + padding-top: 0.15em; + padding-bottom: 0.15em; + } form { display: inline; @@ -68,36 +68,41 @@ box-shadow: 0 0 10px #00000066; } -.soft { - background-color: #e5f5ff; - font-weight: bold; - border-radius: 1em; - padding: 0.3em; - margin: 0.25em; - text-align: center; - padding-top: 0.15em; - padding-bottom: 0.15em; -} + .title-font span { + font-size: xx-large !important; + font-weight: bold; + } + + .soft { + background-color: #e5f5ff; + font-weight: bold; + border-radius: 1em; + padding: 0.3em; + margin: 0.25em; + text-align: center; + padding-top: 0.15em; + padding-bottom: 0.15em; + } -.subtle { - color: #999; -} + .subtle { + color: #999; + } -.bold { - font-weight: bold; -} + .bold { + font-weight: bold; + } -.thanks { - background-color: #43d904; - font-weight: bold; - border-radius: 1em; - padding: 0.3em; - margin: 0.25em; - text-align: center; - padding-top: 0.15em; - padding-bottom: 0.15em; -} + .thanks { + background-color: #43d904; + font-weight: bold; + border-radius: 1em; + padding: 0.3em; + margin: 0.25em; + text-align: center; + padding-top: 0.15em; + padding-bottom: 0.15em; + } .clickable { pointer-events: all; @@ -562,11 +567,6 @@ } -.wikimedia-link { - /*The actual wikimedia logo*/ - width: 1.5em !important; -} - .attribution { background-color: rgba(0, 0, 0, 0.5); color: white; @@ -600,25 +600,13 @@ .leaflet-popup-content { width: 40em !important; - } - - #messagesboxmobile .featureinfobox { - max-height: unset; - overflow-y: unset; - } - - #messagesboxmobile .featureinfobox > div { - max-width: unset; - padding-left: unset; - } - - .featureinfobox { max-height: 80vh; overflow-y: auto; } - .featureinfoboxtitle { - position: relative; + + .featureinfoboxtitle span { + width: unset !important; } .question .form-text-field > input { @@ -626,49 +614,10 @@ box-sizing: border-box; } - .osmlink { - position: absolute; - right: 0; - } - .osm-logo path { fill: #7ebc6f; } - .featureinfoboxtitle .answer { - display: inline; - margin-right: 3em; - } - - .featureinfoboxtitle .answer-text { - display: inline; - } - - .featureinfoboxtitle .editbutton { - float: none; - width: 0.8em; - height: 0.8em; - padding: 0.3em; - border-radius: 0.35em; - border: solid black 1px; - margin-left: 0.5em; - top: 0.2em; - vertical-align: middle; - - } - - - - - .featureinfoboxtitle span { - font-weight: bold; - font-size: x-large; - } - - .featureinfoboxtitle a { - float: right; - margin-left: 1em; -} .infoboxcontents { @@ -706,17 +655,6 @@ font-weight: normal; } -.answer { - display: inline-block; - margin: 0.1em; - width: 100%; - font-size: large; -} - -.answer-text { - width: 90%; - display: inline-block -} /**** The save button *****/ @@ -756,48 +694,47 @@ border-radius: 1.5em; } + /****** ShareScreen *****/ -/****** ShareScreen *****/ - -.literal-code { - display: inline-block; - background-color: lightgray; - padding: 0.5em; - word-break: break-all; - color: black; - box-sizing: border-box; -} + .literal-code { + display: inline-block; + background-color: lightgray; + padding: 0.5em; + word-break: break-all; + color: black; + box-sizing: border-box; + } -.iframe-escape { - background-color: white; - border-radius: 2em; - display: block; - width: min-content; -} + .iframe-escape { + background-color: white; + border-radius: 2em; + display: block; + width: min-content; + } -.iframe-escape img{ - padding: 1em; - width: 2em; - height: 2em; -} + .iframe-escape img { + padding: 1em; + width: 2em; + height: 2em; + } + + /** Switch layout **/ + + .subtle-button { + display: flex; + flex-wrap: nowrap; + flex-direction: row; + font-size: large; + margin: 0.5em; + background-color: #e5f5ff; + border-radius: 1em; + align-items: center; + text-decoration: none; + color: black; + } -/** Switch layout **/ -.subtle-button{ - display: flex; - flex-wrap: nowrap; - flex-direction: row; - font-size: large; - margin: 0.5em; - background-color: #e5f5ff; - border-radius: 1em; - align-items: center; - text-decoration: none; - color: black; -} - - .subtle-button a { text-decoration: unset !important; color: unset !important;