diff --git a/AllTranslationAssets.ts b/AllTranslationAssets.ts index 490c579..6fb8faa 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/UI/Base/ScrollableFullScreen.ts b/UI/Base/ScrollableFullScreen.ts index 7879da9..e4f50fb 100644 --- a/UI/Base/ScrollableFullScreen.ts +++ b/UI/Base/ScrollableFullScreen.ts @@ -97,7 +97,7 @@ export default class ScrollableFullScreen extends UIElement { } private static PatchLeaflet(htmlElement) { - if(htmlElement === null){ + if(htmlElement === undefined || htmlElement === null){ return; } do { @@ -141,8 +141,9 @@ export default class ScrollableFullScreen extends UIElement { } public PrepFullscreen(htmlElement = undefined) { - htmlElement = htmlElement ?? document.getElementById(this.id); ScrollableFullScreen.PatchLeaflet(htmlElement); + + htmlElement = htmlElement ?? document.getElementById(this.id); ScrollableFullScreen.HideClutter(htmlElement); } diff --git a/UI/Popup/EditableTagRendering.ts b/UI/Popup/EditableTagRendering.ts index 6c85f82..90cc17d 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 362d8bf..7fa94c5 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 3b741a4..2c277c7 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/UI/ShowDataLayer.ts b/UI/ShowDataLayer.ts index 3130d18..8a36331 100644 --- a/UI/ShowDataLayer.ts +++ b/UI/ShowDataLayer.ts @@ -148,7 +148,7 @@ export default class ShowDataLayer { leafletLayer.on("click", () => { // We set the element as selected... - uiElement.Activate(e => e.PrepFullscreen()); + uiElement.Activate(); State.state.selectedElement.setData(feature); }); diff --git a/assets/translations.json b/assets/translations.json index ff3e417..24e8445 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", diff --git a/css/ReviewElement.css b/css/ReviewElement.css index 3dfd2aa..4219c09 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 8629a25..c0ff153 100644 --- a/css/tagrendering.css +++ b/css/tagrendering.css @@ -1,4 +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 { @@ -84,25 +83,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); @@ -116,16 +96,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 b197ab3..6d11fd0 100644 --- a/index.css +++ b/index.css @@ -15,22 +15,32 @@ .z-above-map{ z-index: 10000 } - - .z-above-map-higher { - z-index: 10100 - } - - .z-above-map-high { - z-index: 10200 !important; - } - - .z-above-map-highest{ - z-index: 50000 - } } -} + .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; + } +} @media only screen and (max-width: 640px) { .no-transform { diff --git a/tailwind.config.js b/tailwind.config.js index d9eca07..a69e6c8 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -6,15 +6,19 @@ 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', + }, + screens: { + 'landscape': { 'raw': '(max-height: 600px) and (min-width: 600px)' }, + }, }, }, variants: { - extend: {}, + extend: { + ringColor: ['hover'], + } }, plugins: [], }