From 0750d242007a64b2d6d4d0c98c5ab477ae7807c3 Mon Sep 17 00:00:00 2001
From: benoit74 <benoit74@users.noreply.github.com>
Date: Tue, 29 Oct 2024 15:08:42 +0000
Subject: [PATCH] Add donate button

---
 locales/en.json  |  3 +++
 locales/qqq.json |  3 +++
 ui/src/App.vue   | 52 ++++++++++++++++++++++++++++++++++++++----------
 ui/src/style.css |  1 +
 4 files changed, 48 insertions(+), 11 deletions(-)

diff --git a/locales/en.json b/locales/en.json
index 66074a6..2210b7d 100644
--- a/locales/en.json
+++ b/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",
diff --git a/locales/qqq.json b/locales/qqq.json
index 0b08f15..25d6e90 100644
--- a/locales/qqq.json
+++ b/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.",
diff --git a/ui/src/App.vue b/ui/src/App.vue
index 2888de6..dfe395a 100644
--- a/ui/src/App.vue
+++ b/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>
diff --git a/ui/src/style.css b/ui/src/style.css
index 4b12ae5..1b09415 100644
--- a/ui/src/style.css
+++ b/ui/src/style.css
@@ -46,6 +46,7 @@ a:hover {
   color: white;
   background-color: #82ca2a;
 }
+
 .btn-green:hover {
   color: white;
   background-color: #54821c;