Merge pull request #202 from tordans/tailwind-buttons

Tailwind buttons

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

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

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

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

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

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

css/ReviewElement.css

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

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 {
@@ -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;

index.css

@@ -3,14 +3,27 @@
 @tailwind utilities;
 
 @layer utilities {
-  @variants responsive {
+  .btn {
-    .max-h-65vh {
+      @apply inline-flex justify-center;
-      max-height: 65vh;
+      @apply py-2 px-4;
-    }
+      @apply border border-transparent shadow-sm;
-      
+      @apply shadow-sm rounded-3xl;
-      .max-h-20vh {
+      @apply ring-2 ring-blue-200 hover:ring-blue-300;
-          max-height: 20vh;
+      @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;
   }
 }
 

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.
+      maxHeight: {
-      // Luckily index.css "@layer utilities" has the same effekt.
+        '65vh': '65vh',
-      // maxHeight: {
+        '20vh': '20vh',
-      //   '65vh': '65vh',
+      },
-      // },
+      screens: {
+        'landscape': { 'raw': '(max-height: 600px) and (min-width: 600px)' },
+      },
     },
   },
   variants: {
-    extend: {},
+    extend: {
+      ringColor: ['hover'],
+    }
   },
   plugins: [],
 }