midgard/mapcomplete
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge pull request #202 from tordans/tailwind-buttons

Browse source 
Tailwind buttons
This commit is contained in:
Pieter Vander Vennet 2021-01-25 00:36:38 +01:00 committed by GitHub
commit 67349ee539
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 40 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
AllTranslationAssets.ts
View file

@ -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"} ),

4
UI/Base/ScrollableFullScreen.ts
View file

@ -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([

2
UI/Popup/EditableTagRendering.ts
View file

@ -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)
});

2
UI/Popup/QuestionBox.ts
View file

@ -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();

7
UI/Popup/SaveButton.ts
View file

@ -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();
}
}

2
assets/translations.json
View file

@ -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",

3
css/ReviewElement.css
View file

@ -114,9 +114,6 @@
display: block ruby;
}
.review-form .save-non-active {
display: block ruby;
}
.review-form textarea {
resize: unset;
}

33
css/tagrendering.css
View file

@ -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 {
@ -87,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);
@ -119,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;

29
index.css
View file

@ -3,14 +3,27 @@
@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;
@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;
}
}

16
tailwind.config.js
View file

@ -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: [],
}