Merge pull request #284 from ozgurg/dev

release: v6.71.0
ozgurg · Jan 9, 2024 · a2eb64e · a2eb64e
2 parents ff81c31 + b7d4241
commit a2eb64e
Show file tree

Hide file tree

Showing 32 changed files with 279 additions and 287 deletions.
diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss
@@ -14,7 +14,7 @@ $vh-app-bar-height: 72px;
 $vh-app-drawer-width: 256px;
 
 // z-index
-$vh-app-drawer-zindex: 6;
+$vh-app-drawer-zindex: 7;
 $vh-app-drawer-overlay-zindex: $vh-app-drawer-zindex - 1;
 
 // class

diff --git a/assets/scss/plugins/vuetify.scss b/assets/scss/plugins/vuetify.scss
@@ -75,23 +75,6 @@
     }
 }
 
-.v-app-bar {
-    background: transparentize($vh-color-app-bar, .18) !important;
-    backdrop-filter: blur(1rem);
-    box-shadow: none !important;
-    height: $vh-app-bar-height !important;
-    border-block-end: 1px solid rgba(#fff, .12) !important;
-    @media #{map-get($display-breakpoints, "md-and-up")} {
-        display: none !important
-    }
-    .v-toolbar__content {
-        height: 100% !important
-    }
-    .vh-app-logo {
-        margin-inline-start: -48px
-    }
-}
-
 .v-main {
     transition: none !important;
     padding: $vh-app-bar-height 0 0 0 !important;

diff --git a/components/App/AppBar.vue b/components/App/AppBar.vue
@@ -4,18 +4,31 @@
             aria-label="Menüyü aç"
             @click="openDrawer()" />
 
-        <div class="d-flex justify-center flex-grow-1 h-100 py-2">
+        <div class="d-flex align-center justify-center flex-1">
             <AppLogo />
         </div>
     </v-app-bar>
 </template>
 
-<script>
+<script setup>
 import { openDrawer } from "@/utils/drawer.js";
+</script>
 
-export default {
-    methods: {
-        openDrawer
+<style lang="scss">
+.v-app-bar {
+    background: transparentize($vh-color-app-bar, .18) !important;
+    backdrop-filter: blur(1rem);
+    box-shadow: none !important;
+    height: $vh-app-bar-height !important;
+    border-block-end: 1px solid rgba(#fff, .12) !important;
+    @media #{map-get($display-breakpoints, "md-and-up")} {
+        display: none !important
     }
-};
-</script>
+    .v-toolbar__content {
+        height: 100% !important
+    }
+    .vh-app-logo {
+        margin-inline-start: -48px // Width of <v-app-bar-nav-icon />
+    }
+}
+</style>
diff --git a/components/App/AppDrawer.vue b/components/App/AppDrawer.vue
@@ -3,46 +3,40 @@
         <v-navigation-drawer
             app=""
             touchless="">
-            <template #prepend>
-                <div class="px-4 py-4">
-                    <AppLogo class="py-4" />
-                </div>
-                <v-divider class="mx-4 mb-2" />
-            </template>
+            <div class="pa-4">
+                <AppLogo />
+            </div>
+            <v-divider class="mx-4 mb-4" />
 
-            <div class="d-flex flex-column h-100">
-                <CalculatorList />
+            <CalculatorList />
 
-                <v-list
-                    class="mb-auto"
-                    subheader="">
-                    <v-subheader class="d-flex flex-row justify-space-between">
-                        <span>Döviz kurları</span>
-                        <v-btn
-                            href="https://www.exchangerate-api.com"
-                            target="_blank"
-                            plain=""
-                            small=""
-                            rel="nofollow noopener noreferrer"
-                            class="mx-n2">
-                            Exchange Rate API
-                            <v-icon
-                                size="12"
-                                right="">
-                                {{ icons.mdiOpenInNew }}
-                            </v-icon>
-                        </v-btn>
-                    </v-subheader>
-                    <v-list-item>
-                        <ExchangeRateGrid />
-                    </v-list-item>
-                </v-list>
-            </div>
+            <v-list
+                class="mb-auto"
+                subheader="">
+                <v-subheader class="d-flex flex-row justify-space-between">
+                    <span>Döviz kurları</span>
+                    <v-btn
+                        href="https://www.exchangerate-api.com"
+                        target="_blank"
+                        plain=""
+                        small=""
+                        rel="nofollow noopener noreferrer"
+                        class="mx-n2">
+                        Exchange Rate API
+                        <v-icon
+                            size="12"
+                            right="">
+                            {{ icons.mdiOpenInNew }}
+                        </v-icon>
+                    </v-btn>
+                </v-subheader>
+                <v-list-item>
+                    <ExchangeRateGrid />
+                </v-list-item>
+            </v-list>
 
             <template #append>
-                <div class="d-none d-md-block pa-4">
-                    <AppFooter />
-                </div>
+                <app-footer class="d-none d-md-block pa-4" />
             </template>
         </v-navigation-drawer>
         <v-overlay

diff --git a/components/App/AppFooter.vue b/components/App/AppFooter.vue
diff --git a/components/App/AppLogo.vue b/components/App/AppLogo.vue
@@ -2,28 +2,22 @@
     <!-- eslint-disable vue/no-v-text-v-html-on-component vue/no-v-html -->
     <nuxt-link
         v-ripple=""
-        class="vh-app-logo d-flex align-center justify-center px-3 rounded-pill text--primary"
+        class="vh-app-logo d-flex align-center justify-center px-4 rounded-pill"
         aria-label="Ana sayfaya git"
         :to="AnaSayfa.url"
         v-html="logo" />
 </template>
 
-<script>
+<script setup>
 import AnaSayfa from "@/data/pages/ana-sayfa.page.js";
 import logo from "@/assets/img/logo.svg?raw";
-
-export default {
-    data: () => ({
-        AnaSayfa,
-        logo
-    })
-};
 </script>
 
 <!-- DO NOT make scoped -->
 <style lang="scss">
 .vh-app-logo {
     background: rgba($vh-color-primary, $vh-card-hover-opacity);
+    height: 48px;
     svg {
         width: 192px;
         height: 25px

diff --git a/components/App/app-footer.vue b/components/App/app-footer.vue
@@ -0,0 +1,28 @@
+<template>
+    <!--
+    To enhance readability, formatter:on and formatter:off comments have been added to disable the WebStorm formatter for the sentence.
+    -->
+    <footer class="text-center text-body-2 text--secondary">
+        <!-- @formatter:off -->
+        <a :href="authorUrl" rel="nofollow noopener noreferrer" target="_blank">@{{ authorUsername }}</a> tarafından <a :href="repositoryUrl" rel="nofollow noopener noreferrer" target="_blank">açık kaynaklı</a> olarak geliştirilmektedir
+        <!-- @formatter:on -->
+
+        <span class="font-weight-bold mt-2 d-block">
+            v{{ version }}
+        </span>
+    </footer>
+</template>
+
+<script setup>
+// FIXME:
+// Importing with object destructuring in "script setup" without using "as" causes WebStorm to not detect their usage within the template.
+// This can be refactored when it's fixed.
+import packageJson from "@/package.json";
+
+const authorUrl = packageJson.author.url;
+const authorUsername = packageJson.author.url.split("/")[3];
+
+const repositoryUrl = packageJson.repository.url;
+
+const version = packageJson.version;
+</script>
diff --git a/components/ArticleDisclaimerAlert.vue b/components/ArticleDisclaimerAlert.vue
@@ -1,11 +1,8 @@
 <template>
-    <v-alert
-        :icon="false"
-        text=""
-        type="warning">
+    <vh-alert type="warning">
         Bu web sitesinde yer alan <b>doğruluğu ve güncelliği teyit edilmemiş</b> yazılar siteyi dolu gösterme amaçlıdır
         ve herhangi bir
         <b>niteliği yoktur</b>. Bu yazılara bakarak herhangi bir <b>karar almayın</b> veya yazıları <b>referans olarak
         göstermeyin</b>.
-    </v-alert>
+    </vh-alert>
 </template>
diff --git a/components/Calculation/CalculationPresetBrandCardItem.vue b/components/Calculation/CalculationPresetBrandCardItem.vue
@@ -5,7 +5,7 @@
         <v-avatar
             size="32"
             color="white">
-            <Icon
+            <vh-icon
                 :icon="brand.icon"
                 :color="brand.color" />
         </v-avatar>

diff --git a/components/Calculator/CalculatorResultFormRow.vue b/components/Calculator/CalculatorResultFormRow.vue
@@ -14,7 +14,7 @@
                 <v-divider
                     class="my-2 me-3"
                     vertical="" />
-                <CopyButton :value-to-copy="value" />
+                <copy-icon-button :value-to-copy="value" />
             </template>
         </v-text-field>
     </FormRow>

diff --git a/components/Calculator/CalculatorShareDialogUrl.vue b/components/Calculator/CalculatorShareDialogUrl.vue
@@ -62,7 +62,7 @@
                     <v-divider
                         class="my-2 me-3"
                         vertical="" />
-                    <LazyCopyButton
+                    <lazy-copy-icon-button
                         :value-to-copy="url"
                         container-selector="#calculatorShareDialogCopyUrlContainer" />
                 </template>

diff --git a/components/CalculatorListItem.vue b/components/CalculatorListItem.vue
@@ -1,5 +1,7 @@
 <template>
-    <v-list-item :to="calculator.url">
+    <v-list-item
+        :to="calculator.url"
+        color="primary">
         <v-list-item-icon>
             <v-icon>
                 {{ calculator.icon }}

diff --git a/components/CopyButton.vue b/components/CopyButton.vue