More styling tweaks
This commit is contained in:
pietervdvn
parent
9a412c6b74
commit
77ffdc093a
8 changed files with 85 additions and 58 deletions
|
|
@ -92,7 +92,9 @@ export default class AllTranslationAssets {
|
|||
customThemeIntro: new Translation( {"en":"<h3>Custom themes</h3>These are previously visited user-generated themes.","nl":"<h3>Onofficiële thema's</h3>De onderstaande thema's heb je eerder bezocht en zijn gemaakt door andere OpenStreetMappers.","fr":"<h3>Thèmes personnalisés</h3>Vous avez déjà visité ces thèmes personnalisés.","gl":"<h3>Temas personalizados</h3>Estes son temas xerados por usuarios previamente visitados.","de":"<h3>Kundenspezifische Themen</h3>Dies sind zuvor besuchte benutzergenerierte Themen"} ),
|
||||
aboutMapcomplete: new Translation( {"en":"<h3>About MapComplete</h3><p>MapComplete is an OpenStreetMap editor that is meant to help everyone to easily add information on a <b>single theme.</b></p><p>Only features relevant to a single theme are shown with a few predefined questions, in order to keep things <b>simple and extremly user-friendly</b>.The theme maintainer can also choose a language for the interface, choose to disable elements or even to embed it into a different website without any UI-element at all.</p><p>However, another important part of MapComplete is to always <b>offer the next step</b> to learn more about OpenStreetMap:<ul><li>An iframe without UI-elements will link to a full-screen version</li><li>The fullscreen version offers information about OpenStreetMap</li><li>If you're not logged in, you're asked to log in</li><li>If you answered a single question, you are allowed to add points</li><li>At a certain point, the actual added tags appear which later get linked to the wiki...</li></ul></p><p>Do you notice an issue with MapComplete? Do you have a feature request? Do you want to help translating? Head over to <a href='https://github.com/pietervdvn/MapComplete' target='_blank'>the source code</a> or <a href='https://github.com/pietervdvn/MapComplete/issues' target='_blank'>issue tracker.</a> Follow the edit count on <a href='https://osmcha.org/?filters=%7B%22date__gte%22%3A%5B%7B%22label%22%3A%222020-07-05%22%2C%22value%22%3A%222020-07-05%22%7D%5D%2C%22editor%22%3A%5B%7B%22label%22%3A%22mapcomplete%22%2C%22value%22%3A%22mapcomplete%22%7D%5D%7D' target='_blank' >OsmCha</a></p>","nl":"<h3>Over MapComplete</h3><p>MapComplete is een OpenStreetMap-editor om eenvoudig informatie toe te voegen over <b>één enkel onderwerp</b>.</p><p>Om de editor zo <b>simpel en gebruiksvriendelijk mogelijk</b> te houden, worden enkel objecten relevant voor het thema getoond.Voor deze objecten kunnen dan vragen beantwoord worden, of men kan een nieuw punt van dit thema toevoegen.De maker van het thema kan er ook voor opteren om een aantal elementen van de gebruikersinterface uit te schakelen of de taal ervan in te stellen.</p><p>Een ander belangrijk aspect is om bezoekers stap voor stap meer te leren over OpenStreetMap:<ul><li>Een iframe zonder verdere uitleg linkt naar de volledige versie van MapComplete</li><li>De volledige versie heeft uitleg over OpenStreetMap</li><li>Als je niet aangemeld bent, wordt er je gevraagd dit te doen</li><li>Als je minstens één vraag hebt beantwoord, kan je punten gaan toevoegen.</li><li>Heb je genoeg changesets, dan verschijnen de tags die wat later doorlinken naar de wiki</li></ul></p><p>Merk je een bug of wil je een extra feature? Wil je helpen vertalen? Bezoek dan de <a href='https://github.com/pietervdvn/MapComplete' target='_blank'>broncode</a> en <a href='https://github.com/pietervdvn/MapComplete/issues' target='_blank'>issue tracker</a>. Volg de edits <a href='https://osmcha.org/?filters=%7B%22date__gte%22%3A%5B%7B%22label%22%3A%222020-07-05%22%2C%22value%22%3A%222020-07-05%22%7D%5D%2C%22editor%22%3A%5B%7B%22label%22%3A%22mapcomplete%22%2C%22value%22%3A%22mapcomplete%22%7D%5D%7D' target='_blank' >op OsmCha</a></p>","de":"<h3>Über MapComplete</h3><p>MapComplete ist ein OpenStreetMap-Editor, der jedem helfen soll, auf einfache Weise Informationen zu einem <b>Einzelthema hinzuzufügen.</b></p><p>Nur Merkmale, die für ein einzelnes Thema relevant sind, werden mit einigen vordefinierten Fragen gezeigt, um die Dinge <b>einfach und extrem benutzerfreundlich</b> zu halten.Der Themen-Betreuer kann auch eine Sprache für die Schnittstelle wählen, Elemente deaktivieren oder sogar in eine andere Website ohne jegliches UI-Element einbetten.</p><p>Ein weiterer wichtiger Teil von MapComplete ist jedoch, immer <b>den nächsten Schritt anzubieten</b>um mehr über OpenStreetMap zu erfahren:<ul><li>Ein iframe ohne UI-Elemente verlinkt zu einer Vollbildversion</li><li>Die Vollbildversion bietet Informationen über OpenStreetMap</li><li>Wenn Sie nicht eingeloggt sind, werden Sie gebeten, sich einzuloggen</li><li>Wenn Sie eine einzige Frage beantwortet haben, dürfen Sie Punkte hinzufügen</li><li>An einem bestimmten Punkt erscheinen die tatsächlich hinzugefügten Tags, die später mit dem Wiki verlinkt werden...</li></ul></p><p>Fällt Ihnen ein Problem mit MapComplete auf? Haben Sie einen Feature-Wunsch? Wollen Sie beim Übersetzen helfen? Gehen Sie <a href='https://github.com/pietervdvn/MapComplete' target='_blank'>zum Quellcode</a> oder <a href='https://github.com/pietervdvn/MapComplete/issues' target='_blank'>zur Problemverfolgung</a>.</p>"} ),
|
||||
backgroundMap: new Translation( {"en":"Background map","ca":"Mapa de fons","es":"Mapa de fondo","nl":"Achtergrondkaart","fr":"Carte de fonds","de":"Hintergrundkarte"} ),
|
||||
zoomInToSeeThisLayer: new Translation( {"en":"Zoom in to see this layer","ca":"Amplia per veure aquesta capa","es":"Amplía para ver esta capa","nl":"Vergroot de kaart om deze laag te zien","fr":"Aggrandissez la carte pour voir cette couche","de":"Vergrößern, um diese Ebene zu sehen"} ),
|
||||
layerSelection: { zoomInToSeeThisLayer: new Translation( {"en":"Zoom in to see this layer","ca":"Amplia per veure aquesta capa","es":"Amplía para ver esta capa","nl":"Vergroot de kaart om deze laag te zien","fr":"Aggrandissez la carte pour voir cette couche","de":"Vergrößern, um diese Ebene zu sehen"} ),
|
||||
title: new Translation( {"en":"Select layers","nl":"Selecteer lagen"} ),
|
||||
},
|
||||
weekdays: { abbreviations: { monday: new Translation( {"en":"Mon","ca":"Dil","es":"Lun","nl":"Maan","fr":"Lun"} ),
|
||||
tuesday: new Translation( {"en":"Tue","ca":"Dim","es":"Mar","nl":"Din","fr":"Mar"} ),
|
||||
wednesday: new Translation( {"en":"Wed","ca":"Dic","es":"Mie","nl":"Woe","fr":"Mer"} ),
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { Utils } from "../Utils";
|
||||
|
||||
export default class Constants {
|
||||
public static vNumber = "0.4.2";
|
||||
public static vNumber = "0.4.3";
|
||||
|
||||
// The user journey states thresholds when a new feature gets unlocked
|
||||
public static userJourney = {
|
||||
|
|
|
|||
34
UI/Base/ScrollableFullScreen.ts
Normal file
34
UI/Base/ScrollableFullScreen.ts
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
import {UIElement} from "../UIElement";
|
||||
import Svg from "../../Svg";
|
||||
import State from "../../State";
|
||||
import Combine from "./Combine";
|
||||
|
||||
/**
|
||||
* Wraps some contents into a panel that scrolls the content _under_ the title
|
||||
*/
|
||||
export default class ScrollableFullScreen extends UIElement{
|
||||
private _component: Combine;
|
||||
|
||||
|
||||
constructor(title: UIElement, content: UIElement) {
|
||||
super();
|
||||
const 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._component = new Combine([
|
||||
new Combine([returnToTheMap, title]).SetClass("featureinfobox-titlebar"),
|
||||
new Combine([content]).SetClass("featureinfobox-content")
|
||||
])
|
||||
this.SetClass("featureinfobox");
|
||||
|
||||
}
|
||||
|
||||
InnerRender(): string {
|
||||
return this._component.Render();
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -3,6 +3,8 @@ import State from "../../State";
|
|||
import BackgroundSelector from "./BackgroundSelector";
|
||||
import LayerSelection from "./LayerSelection";
|
||||
import Combine from "../Base/Combine";
|
||||
import {FixedUiElement} from "../Base/FixedUiElement";
|
||||
import ScrollableFullScreen from "../Base/ScrollableFullScreen";
|
||||
import Translations from "../i18n/Translations";
|
||||
|
||||
export default class LayerControlPanel extends UIElement {
|
||||
|
|
@ -11,7 +13,7 @@ export default class LayerControlPanel extends UIElement {
|
|||
|
||||
constructor() {
|
||||
super();
|
||||
let layerControlPanel: UIElement = undefined;
|
||||
let layerControlPanel: UIElement = new FixedUiElement("");
|
||||
if (State.state.layoutToUse.data.enableBackgroundLayerSelection) {
|
||||
layerControlPanel = new BackgroundSelector();
|
||||
layerControlPanel.SetStyle("margin:1em");
|
||||
|
|
@ -27,16 +29,9 @@ export default class LayerControlPanel extends UIElement {
|
|||
}
|
||||
|
||||
|
||||
const backButton = new Combine([
|
||||
new Combine([Translations.t.general.returnToTheMap.Clone().SetClass("to-the-map")])
|
||||
.SetClass("to-the-map-inner")
|
||||
const title =Translations.t.general.layerSelection.title.SetClass("featureinfobox-title")
|
||||
|
||||
]).SetClass("only-on-mobile")
|
||||
.onClick(() => State.state.fullScreenMessage.setData(undefined));
|
||||
|
||||
layerControlPanel = new Combine([layerControlPanel , backButton]);
|
||||
|
||||
this._panel = layerControlPanel;
|
||||
this._panel = new ScrollableFullScreen(title, layerControlPanel);
|
||||
}
|
||||
|
||||
InnerRender(): string {
|
||||
|
|
|
|||
|
|
@ -36,14 +36,14 @@ export default class LayerSelection extends UIElement {
|
|||
|
||||
const zoomStatus = new VariableUiElement(State.state.locationControl.map(location => {
|
||||
if (location.zoom < layer.layerDef.minzoom) {
|
||||
return Translations.t.general.zoomInToSeeThisLayer
|
||||
return Translations.t.general.layerSelection.zoomInToSeeThisLayer
|
||||
.SetClass("alert")
|
||||
.SetStyle("display: block ruby;width:min-content;")
|
||||
.Render();
|
||||
}
|
||||
return ""
|
||||
}))
|
||||
const style = "display:flex;align-items:center;"
|
||||
const style = "display:flex;align-items:center;flex-wrap:wrap;"
|
||||
this._checkboxes.push(new CheckBox(
|
||||
new Combine([icon, name, zoomStatus]).SetStyle(style),
|
||||
new Combine([iconUnselected, "<del>", name, "</del>", zoomStatus]).SetStyle(style),
|
||||
|
|
|
|||
|
|
@ -10,17 +10,10 @@ import {FixedUiElement} from "../Base/FixedUiElement";
|
|||
import TagRenderingConfig from "../../Customizations/JSON/TagRenderingConfig";
|
||||
import Svg from "../../Svg";
|
||||
import Ornament from "../Base/Ornament";
|
||||
import ScrollableFullScreen from "../Base/ScrollableFullScreen";
|
||||
|
||||
export default class FeatureInfoBox extends UIElement {
|
||||
private _tags: UIEventSource<any>;
|
||||
private _layerConfig: LayerConfig;
|
||||
|
||||
private _title: UIElement;
|
||||
private _titleIcons: UIElement;
|
||||
private _renderings: UIElement[];
|
||||
private _questionBox: UIElement;
|
||||
private _returnToTheMap: UIElement;
|
||||
private _tail: UIElement;
|
||||
private _component: UIElement;
|
||||
|
||||
constructor(
|
||||
tags: UIEventSource<any>,
|
||||
|
|
@ -30,18 +23,11 @@ export default class FeatureInfoBox extends UIElement {
|
|||
if (layerConfig === undefined) {
|
||||
throw "Undefined layerconfig"
|
||||
}
|
||||
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 = new TagRenderingAnswer(tags, layerConfig.title ?? new TagRenderingConfig("POI"))
|
||||
const title = new TagRenderingAnswer(tags, layerConfig.title ?? new TagRenderingConfig("POI"))
|
||||
.SetClass("featureinfobox-title");
|
||||
this._titleIcons = new Combine(
|
||||
const titleIcons = new Combine(
|
||||
layerConfig.titleIcons.map(icon => new TagRenderingAnswer(tags, icon)))
|
||||
.SetClass("featureinfobox-icons");
|
||||
|
||||
|
|
@ -51,7 +37,7 @@ export default class FeatureInfoBox extends UIElement {
|
|||
}
|
||||
|
||||
let questionBoxIsUsed = false;
|
||||
this._renderings = layerConfig.tagRenderings.map(tr => {
|
||||
const renderings = layerConfig.tagRenderings.map(tr => {
|
||||
if (tr.question === null) {
|
||||
questionBoxIsUsed = true;
|
||||
// This is the question box!
|
||||
|
|
@ -59,27 +45,27 @@ export default class FeatureInfoBox extends UIElement {
|
|||
}
|
||||
return new EditableTagRendering(tags, tr);
|
||||
});
|
||||
this._renderings[0]?.SetClass("first-rendering");
|
||||
renderings[0]?.SetClass("first-rendering");
|
||||
if (!questionBoxIsUsed) {
|
||||
this._renderings.push(questionBox);
|
||||
renderings.push(questionBox);
|
||||
}
|
||||
this._tail = new Combine([new Ornament()]).SetClass("only-on-mobile");
|
||||
const tail = new Combine([new Ornament()]).SetClass("only-on-mobile");
|
||||
|
||||
const content = new Combine([
|
||||
...renderings,
|
||||
questionBox,
|
||||
tail.SetClass("featureinfobox-tail")
|
||||
]
|
||||
)
|
||||
const titleBar = new Combine([
|
||||
new Combine([title, titleIcons]).SetClass("featureinfobox-titlebar-title")
|
||||
])
|
||||
|
||||
this._component = new ScrollableFullScreen(titleBar, content)
|
||||
}
|
||||
|
||||
InnerRender(): string {
|
||||
return new Combine([
|
||||
new Combine([
|
||||
this._returnToTheMap, new Combine([this._title, this._titleIcons]).SetClass("featureinfobox-titlebar-title")
|
||||
]).SetClass("featureinfobox-titlebar"),
|
||||
new Combine([
|
||||
...this._renderings,
|
||||
this._questionBox,
|
||||
this._tail.SetClass("featureinfobox-tail")
|
||||
]
|
||||
).SetClass("featureinfobox-content"),
|
||||
]).SetClass("featureinfobox")
|
||||
.Render();
|
||||
return this._component.Render();
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -744,14 +744,21 @@
|
|||
"fr": "Carte de fonds",
|
||||
"de": "Hintergrundkarte"
|
||||
},
|
||||
"zoomInToSeeThisLayer": {
|
||||
"en": "Zoom in to see this layer",
|
||||
"ca": "Amplia per veure aquesta capa",
|
||||
"es": "Amplía para ver esta capa",
|
||||
"nl": "Vergroot de kaart om deze laag te zien",
|
||||
"fr": "Aggrandissez la carte pour voir cette couche",
|
||||
"de": "Vergrößern, um diese Ebene zu sehen"
|
||||
"layerSelection": {
|
||||
"zoomInToSeeThisLayer": {
|
||||
"en": "Zoom in to see this layer",
|
||||
"ca": "Amplia per veure aquesta capa",
|
||||
"es": "Amplía para ver esta capa",
|
||||
"nl": "Vergroot de kaart om deze laag te zien",
|
||||
"fr": "Aggrandissez la carte pour voir cette couche",
|
||||
"de": "Vergrößern, um diese Ebene zu sehen"
|
||||
},
|
||||
"title": {
|
||||
"en": "Select layers",
|
||||
"nl": "Selecteer lagen"
|
||||
}
|
||||
},
|
||||
|
||||
"weekdays": {
|
||||
"abbreviations": {
|
||||
"monday": {
|
||||
|
|
|
|||
|
|
@ -25,9 +25,11 @@
|
|||
|
||||
.featureinfobox-titlebar {
|
||||
border-bottom: 2px solid var(--foreground-color);
|
||||
box-shadow: 0 10px 10px -10px lightgray;
|
||||
box-shadow: 0 10px 10px -10px var(--shadow-color);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
max-width: 95vw;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.featureinfobox-titlebar-title {
|
||||
|
|
@ -65,8 +67,9 @@
|
|||
display: block;
|
||||
max-height: 75vh;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding-top: 1em;
|
||||
max-width: 95vw;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px), only screen and (max-height: 600px) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue