From 3e69de3161d345043080250d2d4a23856fd78e56 Mon Sep 17 00:00:00 2001 From: pietervdvn Date: Sun, 24 Jan 2021 19:00:43 +0100 Subject: [PATCH 1/6] Updated translations --- AllTranslationAssets.ts | 4 ++-- Svg.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/AllTranslationAssets.ts b/AllTranslationAssets.ts index 7d3bae079..490c5796d 100644 --- a/AllTranslationAssets.ts +++ b/AllTranslationAssets.ts @@ -85,8 +85,8 @@ export default class AllTranslationAssets { fsIncludeCurrentLocation: new Translation( {"en":"Include current location","es":"Incluir localización actual","ca":"Incloure localització actual","nl":"Start op de huidige locatie","fr":"Inclure l'emplacement actuel","de":"Aktuelle Position einbeziehen"} ), }, morescreen: { intro: new Translation( {"en":"

More thematic maps?

Do you enjoy collecting geodata?
There are more themes available.","ca":"

Més peticions

T'agrada captar dades?
Hi ha més capes disponibles.","es":"

Más peticiones

Te gusta captar datos?
Hay más capas disponibles.","fr":"

Plus de thèmes

Vous aimez collecter des données?
Il y a plus de thèmes disponibles.","nl":"

Meer thematische kaarten

Vind je het leuk om geodata te verzamelen?
Hier vind je meer kaartthemas.","gl":"

Máis tarefas

Góstache captar datos?
Hai máis capas dispoñíbeis.","de":"

Weitere Quests

Sammeln Sie gerne Geodaten?
Es sind weitere Themen verfügbar."} ), - requestATheme: new Translation( {"en":"If you want a custom-built quest, request it here","ca":"Si vols que et fem una petició pròpia , demana-la aquí","es":"Si quieres que te hagamos una petición propia , pídela aquí","nl":"Wil je een eigen kaartthema, vraag dit hier aan","fr":"Si vous voulez une autre carte thématique, demande-la ici","gl":"Se queres que che fagamos unha tarefa propia , pídea aquí","de":"Wenn Sie einen speziell angefertigte Quest wünschen, können Sie diesen hier anfragen"} ), - streetcomplete: new Translation( {"en":"Another, similar application is StreetComplete","ca":"Una altra aplicació similar és StreetComplete","es":"Otra aplicación similar es StreetComplete","fr":"Une autre application similaire est StreetComplete","nl":"Een andere, gelijkaardige Android-applicatie is StreetComplete","gl":"Outra aplicación semellante é StreetComplete","de":"Eine andere, ähnliche Anwendung ist StreetComplete"} ), + requestATheme: new Translation( {"en":"If you want a custom-built quest, request it here.","ca":"Si vols que et fem una petició pròpia , demana-la aquí.","es":"Si quieres que te hagamos una petición propia , pídela aquí.","nl":"Wil je een eigen kaartthema, vraag dit hier aan.","fr":"Si vous voulez une autre carte thématique, demande-la ici.","gl":"Se queres que che fagamos unha tarefa propia , pídea aquí.","de":"Wenn Sie einen speziell angefertigte Quest wünschen, können Sie diesen hier anfragen."} ), + streetcomplete: new Translation( {"en":"Another, similar application is StreetComplete..","ca":"Una altra aplicació similar és StreetComplete.","es":"Otra aplicación similar es StreetComplete.","fr":"Une autre application similaire est StreetComplete.","nl":"Een andere, gelijkaardige Android-applicatie is StreetComplete.","gl":"Outra aplicación semellante é StreetComplete.","de":"Eine andere, ähnliche Anwendung ist StreetComplete."} ), createYourOwnTheme: new Translation( {"en":"Create your own MapComplete theme from scratch","ca":"Crea la teva pròpia petició completa de MapComplete des de zero.","es":"Crea tu propia petición completa de MapComplete desde cero.","nl":"Maak je eigen MapComplete-kaart","fr":"Créez votre propre MapComplete carte","gl":"Crea o teu propio tema completo do MapComplete dende cero.","de":"Erstellen Sie Ihr eigenes MapComplete-Thema von Grund auf neu"} ), }, readYourMessages: new Translation( {"en":"Please, read all your OpenStreetMap-messages before adding a new point.","ca":"Llegeix tots els teus missatges d'OpenStreetMap abans d'afegir nous punts.","es":"Lee todos tus mensajes de OpenStreetMap antes de añadir nuevos puntos.","nl":"Gelieve eerst je berichten op OpenStreetMap te lezen alvorens nieuwe punten toe te voegen.","fr":"Merci de lire tous vos messages sur OpenStreetMap avant d'ajouter un nouveau point.","gl":"Le todos a túas mensaxes do OpenStreetMap antes de engadir novos puntos.","de":"Bitte lesen Sie alle Ihre OpenStreetMap-Nachrichten, bevor Sie einen neuen Punkt hinzufügen"} ), diff --git a/Svg.ts b/Svg.ts index d3f302be1..2505dc81c 100644 --- a/Svg.ts +++ b/Svg.ts @@ -255,7 +255,7 @@ export default class Svg { public static ring_ui() { return new FixedUiElement(Svg.ring_img);} public static search = " " - public static search_img = Img.AsImageElement(Svg.search, 'rounded-3xl') + public static search_img = Img.AsImageElement(Svg.search) public static search_svg() { return new FixedUiElement(Svg.search);} public static search_ui() { return new FixedUiElement(Svg.search_img);} From 2342d369d043a9a2d452dedaf39fff3e72bbec2c Mon Sep 17 00:00:00 2001 From: Tobias Date: Sun, 24 Jan 2021 22:17:12 +0100 Subject: [PATCH 2/6] Shorten the "skip question" button text in GER Same meaning, shorter size. --- AllTranslationAssets.ts | 2 +- assets/translations.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/AllTranslationAssets.ts b/AllTranslationAssets.ts index 490c5796d..6fb8faae9 100644 --- a/AllTranslationAssets.ts +++ b/AllTranslationAssets.ts @@ -38,7 +38,7 @@ export default class AllTranslationAssets { returnToTheMap: new Translation( {"en":"Return to the map","ca":"Tornar al mapa","es":"Volver al mapa","nl":"Naar de kaart","fr":"Retourner sur la carte","gl":"Voltar ó mapa","de":"Zurück zur Karte"} ), save: new Translation( {"en":"Save","ca":"Desar","es":"Guardar","nl":"Opslaan","fr":"Sauvegarder","gl":"Gardar","de":"Speichern"} ), cancel: new Translation( {"en":"Cancel","ca":"Cancel·lar","es":"Cancelar","nl":"Annuleren","fr":"Annuler","gl":"Desbotar","de":"Abbrechen"} ), - skip: new Translation( {"en":"Skip this question","ca":"Saltar aquesta pregunta","es":"Saltar esta pregunta","nl":"Vraag overslaan","fr":"Passer la question","gl":"Ignorar esta pregunta","de":"Diese Frage überspringen"} ), + skip: new Translation( {"en":"Skip this question","ca":"Saltar aquesta pregunta","es":"Saltar esta pregunta","nl":"Vraag overslaan","fr":"Passer la question","gl":"Ignorar esta pregunta","de":"Frage überspringen"} ), oneSkippedQuestion: new Translation( {"en":"One question is skipped","ca":"Has ignorat una pregunta","es":"Has ignorado una pregunta","nl":"Een vraag is overgeslaan","fr":"Une question a été passée","gl":"Ignoraches unha pregunta","de":"Eine Frage wurde übersprungen"} ), skippedQuestions: new Translation( {"en":"Some questions are skipped","ca":"Has ignorat algunes preguntes","es":"Has ignorado algunas preguntas","nl":"Sommige vragen zijn overgeslaan","fr":"Questions passées","gl":"Ignoraches algunhas preguntas","de":"Einige Fragen wurden übersprungen"} ), number: new Translation( {"en":"number","ca":"nombre","es":"número","nl":"getal","fr":"nombre","gl":"número","de":"Zahl"} ), diff --git a/assets/translations.json b/assets/translations.json index ff3e417fb..24e84458c 100644 --- a/assets/translations.json +++ b/assets/translations.json @@ -283,7 +283,7 @@ "nl": "Vraag overslaan", "fr": "Passer la question", "gl": "Ignorar esta pregunta", - "de": "Diese Frage überspringen" + "de": "Frage überspringen" }, "oneSkippedQuestion": { "en": "One question is skipped", From 4068931bbaba0d85560d42847d5d2c5f4c0fdb1b Mon Sep 17 00:00:00 2001 From: Tobias Date: Sun, 24 Jan 2021 22:20:40 +0100 Subject: [PATCH 3/6] Add Tailwind button for save+cancel - remove custom styles - add new button styles based on Tailwind classes using @apply - extend config to allow hover:ring-blue-200 and such - update the js-files to use new classes - Only unsure about the `.review-form .save-non-active`, this might need additional Tailwind helper classes in this specific situation. Don't know where it shows up, so could not test. --- UI/Popup/EditableTagRendering.ts | 2 +- UI/Popup/QuestionBox.ts | 2 +- UI/Popup/SaveButton.ts | 7 +++---- css/ReviewElement.css | 3 --- css/tagrendering.css | 29 ----------------------------- index.css | 21 +++++++++++++++++++++ tailwind.config.js | 4 +++- 7 files changed, 29 insertions(+), 39 deletions(-) diff --git a/UI/Popup/EditableTagRendering.ts b/UI/Popup/EditableTagRendering.ts index 6c85f823e..90cc17d72 100644 --- a/UI/Popup/EditableTagRendering.ts +++ b/UI/Popup/EditableTagRendering.ts @@ -74,7 +74,7 @@ export default class EditableTagRendering extends UIElement { // And at last, set up the skip button const cancelbutton = Translations.t.general.cancel.Clone() - .SetClass("cancel") + .SetClass("btn btn-secondary mr-3") .onClick(() => { self._editMode.setData(false) }); diff --git a/UI/Popup/QuestionBox.ts b/UI/Popup/QuestionBox.ts index 362d8bf11..7fa94c56f 100644 --- a/UI/Popup/QuestionBox.ts +++ b/UI/Popup/QuestionBox.ts @@ -33,7 +33,7 @@ export default class QuestionBox extends UIElement { self._skippedQuestions.ping(); }, Translations.t.general.skip.Clone() - .SetClass("cancel") + .SetClass("btn btn-secondary mr-3") .onClick(() => { self._skippedQuestions.data.push(i); self._skippedQuestions.ping(); diff --git a/UI/Popup/SaveButton.ts b/UI/Popup/SaveButton.ts index 3b741a40b..2c277c7fc 100644 --- a/UI/Popup/SaveButton.ts +++ b/UI/Popup/SaveButton.ts @@ -22,15 +22,14 @@ export class SaveButton extends UIElement { } InnerRender(): string { - let clss = "save"; - if(this._userDetails != undefined && !this._userDetails.data.loggedIn){ return this._friendlyLogin.Render(); } + let inactive_class = '' if (this._value.data === false || (this._value.data ?? "") === "") { - clss = "save-non-active"; + inactive_class = "btn-disabled"; } - return Translations.t.general.save.Clone().SetClass(clss).Render(); + return Translations.t.general.save.Clone().SetClass(`btn ${inactive_class}`).Render(); } } \ No newline at end of file diff --git a/css/ReviewElement.css b/css/ReviewElement.css index 3dfd2aa65..4219c094d 100644 --- a/css/ReviewElement.css +++ b/css/ReviewElement.css @@ -114,9 +114,6 @@ display: block ruby; } -.review-form .save-non-active { - display: block ruby; -} .review-form textarea { resize: unset; } diff --git a/css/tagrendering.css b/css/tagrendering.css index 878579e9a..015eaa139 100644 --- a/css/tagrendering.css +++ b/css/tagrendering.css @@ -87,25 +87,6 @@ input:checked + label .question-option-with-border { border: 2px solid var(--subtle-detail-color-contrast); } - -.save { - display: inline-block; - border: solid var(--catch-detail-color-contrast) 2px; - background-color: var(--catch-detail-color); - color: var(--catch-detail-color-contrast); - padding: 0.2em 0.6em; - font-size: x-large; - font-weight: bold; - border-radius: 1.5em; -} - -.cancel { - display: inline-block; - border: solid black 0.5px; - padding: 0.2em 0.3em; - border-radius: 1.5em; -} - .login-button-friendly { display: inline-block; background-color: var(--catch-detail-color); @@ -119,16 +100,6 @@ input:checked + label .question-option-with-border { width: 100%; } -.save-non-active { - display: inline-block; - border: solid lightgrey 2px; - color: grey; - padding: 0.2em 0.3em; - font-size: x-large; - font-weight: bold; - border-radius: 1.5em; -} - .edit-button img { width: 1.3em; height: 1.3em; diff --git a/index.css b/index.css index bae4121f6..2e917c2d3 100644 --- a/index.css +++ b/index.css @@ -11,6 +11,27 @@ .max-h-20vh { max-height: 20vh; } + .btn { + @apply inline-flex justify-center; + @apply py-2 px-4; + @apply border border-transparent shadow-sm; + @apply shadow-sm rounded-3xl; + @apply ring-2 ring-blue-200 hover:ring-blue-300; + @apply mt-1 mr-1; + @apply text-sm font-medium text-white; + @apply bg-blue-600 hover:bg-blue-700; + @apply focus:outline-none focus:ring-blue-700; + } + + .btn-secondary { + @apply bg-gray-600 hover:bg-gray-700; + } + + .btn-disabled { + @apply bg-gray-500 hover:bg-gray-500; + @apply text-gray-300; + @apply ring-gray-200 hover:ring-gray-200 focus:ring-gray-200; + @apply cursor-default; } } diff --git a/tailwind.config.js b/tailwind.config.js index d9eca07a8..d4c4df096 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -14,7 +14,9 @@ module.exports = { }, }, variants: { - extend: {}, + extend: { + ringColor: ['hover'], + } }, plugins: [], } From e1daade9615b2d4726cd6e792077d0726517abd8 Mon Sep 17 00:00:00 2001 From: Tobias Date: Sun, 24 Jan 2021 22:20:54 +0100 Subject: [PATCH 4/6] Remove a few new lines and spaces --- UI/Base/ScrollableFullScreen.ts | 4 ++-- css/tagrendering.css | 4 ---- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/UI/Base/ScrollableFullScreen.ts b/UI/Base/ScrollableFullScreen.ts index bf966adef..ef13c6c95 100644 --- a/UI/Base/ScrollableFullScreen.ts +++ b/UI/Base/ScrollableFullScreen.ts @@ -17,9 +17,9 @@ export default class ScrollableFullScreen extends UIElement { State.state.fullScreenMessage.setData(undefined); State.state.selectedElement.setData(undefined); }).SetClass("block sm:hidden mb-2 bg-blue-50 rounded-full w-12 h-12 p-1.5") - + title.SetClass("block w-full") - + const ornament = new Combine([new Ornament().SetStyle("height:5em;")]).SetClass("sm:hidden") this._component = new Combine([ diff --git a/css/tagrendering.css b/css/tagrendering.css index 015eaa139..53a770433 100644 --- a/css/tagrendering.css +++ b/css/tagrendering.css @@ -1,7 +1,3 @@ - - - - @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*/ .landscape\:max-h-screen { From 397a4414f314076199a0142e1bc6f01abda0675a Mon Sep 17 00:00:00 2001 From: Tobias Date: Sun, 24 Jan 2021 22:21:28 +0100 Subject: [PATCH 5/6] Move custom max-height-version to Config MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit As it turns out, the config does work once you restart the server … :facepalm: --- index.css | 8 -------- tailwind.config.js | 9 ++++----- 2 files changed, 4 insertions(+), 13 deletions(-) diff --git a/index.css b/index.css index 2e917c2d3..23438b87a 100644 --- a/index.css +++ b/index.css @@ -3,14 +3,6 @@ @tailwind utilities; @layer utilities { - @variants responsive { - .max-h-65vh { - max-height: 65vh; - } - - .max-h-20vh { - max-height: 20vh; - } .btn { @apply inline-flex justify-center; @apply py-2 px-4; diff --git a/tailwind.config.js b/tailwind.config.js index d4c4df096..d11a3cceb 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -6,11 +6,10 @@ module.exports = { darkMode: false, // or 'media' or 'class' theme: { extend: { - // This does not work and I don't know why. - // Luckily index.css "@layer utilities" has the same effekt. - // maxHeight: { - // '65vh': '65vh', - // }, + maxHeight: { + '65vh': '65vh', + '20vh': '20vh', + }, }, }, variants: { From 2eecdfb9de342afdcfbf2b45094e5c403addc5dc Mon Sep 17 00:00:00 2001 From: Tobias Date: Sun, 24 Jan 2021 22:22:03 +0100 Subject: [PATCH 6/6] Trying to add the landscape media query to the config But this seems to be non-working, see https://github.com/pietervdvn/MapComplete/issues/200 --- tailwind.config.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/tailwind.config.js b/tailwind.config.js index d11a3cceb..a69e6c819 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -10,6 +10,9 @@ module.exports = { '65vh': '65vh', '20vh': '20vh', }, + screens: { + 'landscape': { 'raw': '(max-height: 600px) and (min-width: 600px)' }, + }, }, }, variants: {