From f177a3bad34a79db24f5c7a1549a6d96990ee051 Mon Sep 17 00:00:00 2001 From: pietervdvn Date: Mon, 12 Apr 2021 13:05:30 +0200 Subject: [PATCH] Various styling tweaks, fix #243 --- AllTranslationAssets.ts | 2 +- InitUiElements.ts | 1 - UI/BigComponents/AttributionPanel.ts | 4 +-- UI/BigComponents/FullWelcomePaneWithTabs.ts | 4 +-- UI/BigComponents/ShareScreen.ts | 2 +- UI/BigComponents/ThemeIntroductionPanel.ts | 1 + UI/Popup/TagRenderingAnswer.ts | 2 +- assets/translations.json | 4 +-- index.css | 40 +++++++++++++++++++++ 9 files changed, 50 insertions(+), 10 deletions(-) diff --git a/AllTranslationAssets.ts b/AllTranslationAssets.ts index 661082eb9..a39c7c156 100644 --- a/AllTranslationAssets.ts +++ b/AllTranslationAssets.ts @@ -102,7 +102,7 @@ export default class AllTranslationAssets { getStartedNewAccount: new Translation( {"en":" or create a new account","nl":" of maak een nieuwe account aan ","fr":" ou enregistrez-vous","es":" o crea una nueva cuenta","ca":" o crea un nou compte","gl":" ou crea unha nova conta","de":" oder ein neues Konto anlegen"} ), noTagsSelected: new Translation( {"en":"No tags selected","es":"No se han seleccionado etiquetas","ca":"No s'han seleccionat etiquetes","gl":"Non se seleccionaron etiquetas","nl":"Geen tags geselecteerd","fr":"Aucune balise sélectionnée","de":"Keine Tags ausgewählt"} ), customThemeIntro: new Translation( {"en":"

Custom themes

These are previously visited user-generated themes.","nl":"

Onofficiële thema's

De onderstaande thema's heb je eerder bezocht en zijn gemaakt door andere OpenStreetMappers.","fr":"

Thèmes personnalisés

Vous avez déjà visité ces thèmes personnalisés.","gl":"

Temas personalizados

Estes son temas xerados por usuarios previamente visitados.","de":"

Kundenspezifische Themen

Dies sind zuvor besuchte benutzergenerierte Themen"} ), - aboutMapcomplete: new Translation( {"en":"

About MapComplete

With MapComplete you can enrich OpenStreetMap with information on a single theme. Answer a few questions, and within minutes your contributions will be available around the globe! The theme maintainer defines elements, questions and languages for the theme.

Find out more
MapComplete always offers the next step to learn more about OpenStreetMap.


Did you notice an issue? Do you have a feature request? Want to help translate? Head over to the source code or issue tracker.

Want to see your progress? Follow the edit count on OsmCha.

","nl":"

Over MapComplete

Met MapComplete kun je OpenStreetMap verrijken met informatie over een bepaald thema. Beantwoord enkele vragen, en binnen een paar minuten is jouw bijdrage wereldwijd beschikbaar! De maker van het thema bepaalt de elementen, vragen en taalversies voor het thema.

Ontdek meer
MapComplete biedt altijd de volgende stap naar meer OpenStreetMap:

Merk je een bug of wil je een extra feature? Wil je helpen vertalen? Bezoek dan de broncode en issue tracker.

Wil je je vorderingen zien? Volg de edits op OsmCha.

","de":"

Über MapComplete

MapComplete ist ein OpenStreetMap-Editor, der jedem helfen soll, auf einfache Weise Informationen zu einem Einzelthema hinzuzufügen.

Nur Merkmale, die für ein einzelnes Thema relevant sind, werden mit einigen vordefinierten Fragen gezeigt, um die Dinge einfach und extrem benutzerfreundlich 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.

Ein weiterer wichtiger Teil von MapComplete ist jedoch, immer den nächsten Schritt anzubietenum mehr über OpenStreetMap zu erfahren:

Fällt Ihnen ein Problem mit MapComplete auf? Haben Sie einen Feature-Wunsch? Wollen Sie beim Übersetzen helfen? Gehen Sie zum Quellcode oder zur Problemverfolgung.

"} ), + aboutMapcomplete: new Translation( {"en":"

About MapComplete

With MapComplete you can enrich OpenStreetMap with information on a single theme. Answer a few questions, and within minutes your contributions will be available around the globe! The theme maintainer defines elements, questions and languages for the theme.

Find out more

MapComplete always offers the next step to learn more about OpenStreetMap.


Did you notice an issue? Do you have a feature request? Want to help translate? Head over to the source code or issue tracker.

Want to see your progress? Follow the edit count on OsmCha.

","nl":"

Over MapComplete

Met MapComplete kun je OpenStreetMap verrijken met informatie over een bepaald thema. Beantwoord enkele vragen, en binnen een paar minuten is jouw bijdrage wereldwijd beschikbaar! De maker van het thema bepaalt de elementen, vragen en taalversies voor het thema.

Ontdek meer

MapComplete biedt altijd de volgende stap naar meer OpenStreetMap:

Merk je een bug of wil je een extra feature? Wil je helpen vertalen? Bezoek dan de broncode en issue tracker.

Wil je je vorderingen zien? Volg de edits op OsmCha.

","de":"

Über MapComplete

MapComplete ist ein OpenStreetMap-Editor, der jedem helfen soll, auf einfache Weise Informationen zu einem Einzelthema hinzuzufügen.

Nur Merkmale, die für ein einzelnes Thema relevant sind, werden mit einigen vordefinierten Fragen gezeigt, um die Dinge einfach und extrem benutzerfreundlich 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.

Ein weiterer wichtiger Teil von MapComplete ist jedoch, immer den nächsten Schritt anzubietenum mehr über OpenStreetMap zu erfahren:

Fällt Ihnen ein Problem mit MapComplete auf? Haben Sie einen Feature-Wunsch? Wollen Sie beim Übersetzen helfen? Gehen Sie zum Quellcode oder zur Problemverfolgung.

"} ), backgroundMap: new Translation( {"en":"Background map","ca":"Mapa de fons","es":"Mapa de fondo","nl":"Achtergrondkaart","fr":"Carte de fonds","de":"Hintergrundkarte"} ), 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"} ), diff --git a/InitUiElements.ts b/InitUiElements.ts index 8593398c2..d2e4b9e53 100644 --- a/InitUiElements.ts +++ b/InitUiElements.ts @@ -247,7 +247,6 @@ export class InitUiElements { // ?-Button on Desktop, opens panel with close-X. const help = new MapControlButton(Svg.help_svg()); - // .SetClass("open-welcome-button block"); new CheckBox( fullOptions .SetClass("welcomeMessage") diff --git a/UI/BigComponents/AttributionPanel.ts b/UI/BigComponents/AttributionPanel.ts index 343425e1b..b3843c649 100644 --- a/UI/BigComponents/AttributionPanel.ts +++ b/UI/BigComponents/AttributionPanel.ts @@ -28,11 +28,11 @@ export default class AttributionPanel extends Combine { "
", new Attribution(undefined, undefined, State.state.layoutToUse, undefined), "
", - Translations.t.general.attribution.iconAttribution.title.Clone().SetClass("font-bold pt-12 pb-3"), + "

",Translations.t.general.attribution.iconAttribution.title.Clone().SetClass("pt-6 pb-3"),"

", ...Utils.NoNull(Array.from(layoutToUse.data.ExtractImages())) .map(AttributionPanel.IconAttribution) ]); - this.SetClass("flex flex-col") + this.SetClass("flex flex-col link-underline") } private static IconAttribution(iconPath: string) { diff --git a/UI/BigComponents/FullWelcomePaneWithTabs.ts b/UI/BigComponents/FullWelcomePaneWithTabs.ts index 8738cfb9e..4622167bd 100644 --- a/UI/BigComponents/FullWelcomePaneWithTabs.ts +++ b/UI/BigComponents/FullWelcomePaneWithTabs.ts @@ -47,7 +47,7 @@ export default class FullWelcomePaneWithTabs extends UIElement { {header: ``, content: welcome}, { header: Svg.osm_logo_img, - content: Translations.t.general.openStreetMapIntro as UIElement + content: Translations.t.general.openStreetMapIntro.Clone().SetClass("link-underline") as UIElement }, ] @@ -71,7 +71,7 @@ export default class FullWelcomePaneWithTabs extends UIElement { if (userdetails.csCount < Constants.userJourney.mapCompleteHelpUnlock) { return "" } - return new Combine([Translations.t.general.aboutMapcomplete, "
Version " + Constants.vNumber]).Render(); + return new Combine([Translations.t.general.aboutMapcomplete, "
Version " + Constants.vNumber]).SetClass("link-underline").Render(); }, [Locale.language])) } ); diff --git a/UI/BigComponents/ShareScreen.ts b/UI/BigComponents/ShareScreen.ts index 440817863..dcf087482 100644 --- a/UI/BigComponents/ShareScreen.ts +++ b/UI/BigComponents/ShareScreen.ts @@ -31,7 +31,7 @@ export default class ShareScreen extends UIElement { const optionCheckboxes: UIElement[] = [] const optionParts: (UIEventSource)[] = []; - + this.SetClass("link-underline") function check() { return Svg.checkmark_svg().SetStyle("width: 1.5em; display:inline-block;"); } diff --git a/UI/BigComponents/ThemeIntroductionPanel.ts b/UI/BigComponents/ThemeIntroductionPanel.ts index 32839b038..3b9a8b2b1 100644 --- a/UI/BigComponents/ThemeIntroductionPanel.ts +++ b/UI/BigComponents/ThemeIntroductionPanel.ts @@ -41,6 +41,7 @@ export default class ThemeIntroductionPanel extends UIElement { } ) ) + this.SetClass("link-underline") } InnerRender(): string { diff --git a/UI/Popup/TagRenderingAnswer.ts b/UI/Popup/TagRenderingAnswer.ts index 863f0c0a2..ebf4064d5 100644 --- a/UI/Popup/TagRenderingAnswer.ts +++ b/UI/Popup/TagRenderingAnswer.ts @@ -26,7 +26,7 @@ export default class TagRenderingAnswer extends UIElement { if (configuration === undefined) { throw "Trying to generate a tagRenderingAnswer without configuration..." } - this.SetClass("flex items-center flex-row text-lg") + this.SetClass("flex items-center flex-row text-lg link-underline") this.SetStyle("word-wrap: anywhere;"); } diff --git a/assets/translations.json b/assets/translations.json index e98ff103f..dbd7541bc 100644 --- a/assets/translations.json +++ b/assets/translations.json @@ -782,8 +782,8 @@ "de": "

Kundenspezifische Themen

Dies sind zuvor besuchte benutzergenerierte Themen" }, "aboutMapcomplete": { - "en": "

About MapComplete

With MapComplete you can enrich OpenStreetMap with information on a single theme. Answer a few questions, and within minutes your contributions will be available around the globe! The theme maintainer defines elements, questions and languages for the theme.

Find out more
MapComplete always offers the next step to learn more about OpenStreetMap.


Did you notice an issue? Do you have a feature request? Want to help translate? Head over to the source code or issue tracker.

Want to see your progress? Follow the edit count on OsmCha.

", - "nl": "

Over MapComplete

Met MapComplete kun je OpenStreetMap verrijken met informatie over een bepaald thema. Beantwoord enkele vragen, en binnen een paar minuten is jouw bijdrage wereldwijd beschikbaar! De maker van het thema bepaalt de elementen, vragen en taalversies voor het thema.

Ontdek meer
MapComplete biedt altijd de volgende stap naar meer OpenStreetMap:

Merk je een bug of wil je een extra feature? Wil je helpen vertalen? Bezoek dan de broncode en issue tracker.

Wil je je vorderingen zien? Volg de edits op OsmCha.

", + "en": "

About MapComplete

With MapComplete you can enrich OpenStreetMap with information on a single theme. Answer a few questions, and within minutes your contributions will be available around the globe! The theme maintainer defines elements, questions and languages for the theme.

Find out more

MapComplete always offers the next step to learn more about OpenStreetMap.


Did you notice an issue? Do you have a feature request? Want to help translate? Head over to the source code or issue tracker.

Want to see your progress? Follow the edit count on OsmCha.

", + "nl": "

Over MapComplete

Met MapComplete kun je OpenStreetMap verrijken met informatie over een bepaald thema. Beantwoord enkele vragen, en binnen een paar minuten is jouw bijdrage wereldwijd beschikbaar! De maker van het thema bepaalt de elementen, vragen en taalversies voor het thema.

Ontdek meer

MapComplete biedt altijd de volgende stap naar meer OpenStreetMap:

Merk je een bug of wil je een extra feature? Wil je helpen vertalen? Bezoek dan de broncode en issue tracker.

Wil je je vorderingen zien? Volg de edits op OsmCha.

", "de": "

Über MapComplete

MapComplete ist ein OpenStreetMap-Editor, der jedem helfen soll, auf einfache Weise Informationen zu einem Einzelthema hinzuzufügen.

Nur Merkmale, die für ein einzelnes Thema relevant sind, werden mit einigen vordefinierten Fragen gezeigt, um die Dinge einfach und extrem benutzerfreundlich 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.

Ein weiterer wichtiger Teil von MapComplete ist jedoch, immer den nächsten Schritt anzubietenum mehr über OpenStreetMap zu erfahren:

Fällt Ihnen ein Problem mit MapComplete auf? Haben Sie einen Feature-Wunsch? Wollen Sie beim Übersetzen helfen? Gehen Sie zum Quellcode oder zur Problemverfolgung.

" }, "backgroundMap": { diff --git a/index.css b/index.css index 440512fa9..cca5fe6e4 100644 --- a/index.css +++ b/index.css @@ -108,6 +108,46 @@ a { color: var(--foreground-color); } +.link-underline a { + text-decoration: underline 1px #0078a855;; + color: #0078A8; +} + +li { + margin-left: 0.5em; + padding-left: 0.2em; + margin-top: 0.1em; +} + +h2 { + font-size: large; + margin-top: 0.5em; + margin-bottom: 0.3em; + font-weight: bold; +} + +h3 { + font-size: larger; + margin-top: 0.6em; + margin-bottom: 0; + font-weight: bold; +} + +h3 { + font-size: larger; + margin-top: 0.6em; + margin-bottom: 0; + font-weight: bolder; +} + +p { + padding-top: 0.1em; +} + +li::marker { + content: "•" +} + .subtle-background { background: var(--subtle-detail-color); color: var(--subtle-detail-color-contrast);