Merge pull request #84 from openzim/donate_button

Add donate button

locales/en.json

@@ -25,6 +25,9 @@
     "link1": "Webrecorder",
     "link2": "Mozilla Open-Source Support"
   },
+  "header": {
+    "donate": "Keep this free. Donate"
+  },
   "newRequest": {
     "headingParagraph": "Want an offline version of a website? Just {0}!",
     "headingBold": "ZIM it",

locales/qqq.json

@@ -25,6 +25,9 @@
     "link1": "This is the word(s) inside the second link of footer paragraph",
     "link2": "This is the word(s) inside the third link of footer paragraph"
   },
+  "header": {
+    "donate": "This is the text of a button to call for donations"
+  },
   "newRequest": {
     "headingParagraph": "This is the heading on home page allowing to create a new task.",
     "headingBold": "This is the call to action displayed in bold.",

ui/src/App.vue

@@ -6,10 +6,13 @@ import constants from './constants'
 import { supportedLanguages, getCurrentLocale, setCurrentLocale } from './i18n'
 const { t } = useI18n()
 const config = inject<Config>(constants.config)
+import { useDisplay } from 'vuetify'
 
 import { useMainStore } from './stores/main'
 const mainStore = useMainStore()
 
+const { smAndDown } = useDisplay()
+
 // compute items for language combobox
 const languageItems = computed(() => {
   return supportedLanguages.map((lang) => {
@@ -41,19 +44,31 @@ watch(
 <template>
   <!-- Force LTR/RTL on whole app, we do not use vuetify locales at all -->
   <v-locale-provider :rtl="selectedLanguage.rtl">
-    <div class="text-center logo-div">
+    <div class="text-center" :class="smAndDown ? 'logo-div-sm' : 'logo-div'">
       <a :href="config?.home_page" target="_blank">
         <img src="./assets/ZIMIT_LOGO_RGB.svg" class="logo-img vue" alt="Vue logo" />
       </a>
     </div>
-    <v-select
-      v-model="selectedLanguageItem"
-      class="language-select"
-      :items="languageItems"
-      density="compact"
-      return-object
-    >
-    </v-select>
+    <div class="top-corner">
+      <v-btn
+        class="donate-btn btn-green-rev"
+        append-icon="fa-gift"
+        variant="outlined"
+        size="large"
+        href="https://kiwix.org/en/get-involved/#donate"
+        target="_blank"
+      >
+        {{ t('header.donate') }}
+      </v-btn>
+      <v-select
+        v-model="selectedLanguageItem"
+        class="language-select pt-2"
+        :items="languageItems"
+        density="compact"
+        return-object
+      >
+      </v-select>
+    </div>
     <RouterView />
     <i18n-t keypath="footer.poweredByThankTo" tag="footer" class="text-center">
       <a target="_blank" href="https://kiwix.org">{{ t('footer.link0') }}</a>
@@ -87,11 +102,26 @@ footer {
   padding-bottom: 2em;
 }
 
-.language-select {
-  position: fixed;
+.logo-div-sm {
+  padding-top: 8em;
+  padding-bottom: 2em;
+}
+
+.top-corner {
+  position: absolute;
   top: 10px;
   inset-inline-end: 10px;
   z-index: 999;
   min-width: 10rem;
+  display: flex;
+  flex-direction: column;
+  align-items: end;
+}
+
+.donate-btn {
+  text-transform: none;
+  border-color: black;
+  border-width: 2px;
+  color: #82ca2a;
 }
 </style>

ui/src/style.css

@@ -46,6 +46,7 @@ a:hover {
   color: white;
   background-color: #82ca2a;
 }
+
 .btn-green:hover {
   color: white;
   background-color: #54821c;