forked from MapComplete/MapComplete
More CSS improvements and cleanups
This commit is contained in:
Pieter Vander Vennet
parent
6d5f4ade25
commit
257194c063
7 changed files with 128 additions and 287 deletions
|
|
@ -32,11 +32,9 @@ export class WikipediaLink extends TagRenderingOptions {
|
|||
key: "wikipedia",
|
||||
template: "$$$",
|
||||
renderTemplate:
|
||||
"<span style='position: absolute;right: 24px;width: 24px;height: 24px;padding-right: 12px;'>" +
|
||||
"<a href='{wikipedia}' target='_blank'>" +
|
||||
"<img style='width: 24px;height: 24px;' src='./assets/wikipedia.svg' alt='wikipedia'>" +
|
||||
"</a></span>",
|
||||
|
||||
"</a>",
|
||||
|
||||
placeholder: ""
|
||||
|
||||
|
|
|
|||
|
|
@ -24,8 +24,6 @@ export class FeatureInfoBox extends UIElement {
|
|||
private readonly _tagsES: UIEventSource<any>;
|
||||
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 "<div class='featureinfobox'>" +
|
||||
new Combine([
|
||||
"<div class='featureinfoboxtitle'>",
|
||||
title,
|
||||
"</div>",
|
||||
"<div class='infoboxcontents'>",
|
||||
infoboxcontents,
|
||||
"</div>"]).Render() + "</div>";
|
||||
return new Combine([
|
||||
this._title,
|
||||
"<div class='infoboxcontents'>",
|
||||
infoboxcontents,
|
||||
"</div>"]).SetClass("featureinfobox")
|
||||
.Render();
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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<UIElement[]>;
|
||||
|
||||
private readonly _deleteButton: UIElement;
|
||||
private readonly _confirmation: UIElement;
|
||||
|
||||
constructor(tags: UIEventSource<any>, osmConnection: OsmConnection = undefined) {
|
||||
constructor(tags: UIEventSource<any>) {
|
||||
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<boolean> = 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("<img style='width:1.5em' src='./assets/delete.svg'>")
|
||||
.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 {
|
||||
|
|
|
|||
|
|
@ -7,17 +7,14 @@ export class SlideShow extends UIElement {
|
|||
private readonly _embeddedElements: UIEventSource<UIElement[]>
|
||||
|
||||
public readonly _currentSlide: UIEventSource<number> = new UIEventSource<number>(0);
|
||||
private readonly _noimages: UIElement;
|
||||
private _prev: UIElement;
|
||||
private _next: UIElement;
|
||||
|
||||
constructor(
|
||||
embeddedElements: UIEventSource<UIElement[]>,
|
||||
noImages: UIElement) {
|
||||
embeddedElements: UIEventSource<UIElement[]>) {
|
||||
super(embeddedElements);
|
||||
this._embeddedElements = embeddedElements;
|
||||
this.ListenTo(this._currentSlide);
|
||||
this._noimages = noImages;
|
||||
|
||||
const self = this;
|
||||
this._prev = new FixedUiElement("<div class='prev-button'>" +
|
||||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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(
|
||||
"<img style='width: 1.3em;height: 1.3em;padding: 0.5em;border-radius: 0.65em;border: solid black 1px;font-size: medium;float: right;' " +
|
||||
"src='./assets/pencil.svg' alt='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([
|
||||
"<span class='answer'>",
|
||||
"<span class='answer-text'>",
|
||||
answer,
|
||||
"</span>",
|
||||
editButton ?? "",
|
||||
"</span>"]).Render();
|
||||
return answer.SetStyle(answerStyle).Render();
|
||||
}
|
||||
|
||||
return "";
|
||||
|
|
|
|||
|
|
@ -158,9 +158,9 @@ export abstract class UIElement extends UIEventSource<string> {
|
|||
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 `<span ${clss}${style}id='${this.id}'>${this.lastInnerRender}</span>`
|
||||
}
|
||||
|
|
@ -184,14 +184,14 @@ export abstract class UIElement extends UIEventSource<string> {
|
|||
|
||||
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;
|
||||
}
|
||||
|
||||
|
|
|
|||
209
index.css
209
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;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue