Change Github action button (#106)

fix minor ui issues
Fixes #105

Author: doroudi

src/App.vue

@@ -42,6 +42,7 @@ watch(() => layout.activeLanguage, () => {
       <n-message-provider placement="bottom-right">
         <n-dialog-provider>
           <router-view />
+          <GithubButton />
         </n-dialog-provider>
       </n-message-provider>
     </n-notification-provider>

src/components.d.ts

@@ -22,6 +22,7 @@ declare module 'vue' {
     DashboardPage: typeof import('./components/Dahboard/DashboardPage.vue')['default']
     DonutChart: typeof import('./components/DonutChart.vue')['default']
     Editor: typeof import('./components/Editor.vue')['default']
+    GithubButton: typeof import('./components/GithubButton.vue')['default']
     LanguageSelect: typeof import('./components/LanguageSelect.vue')['default']
     LineChart: typeof import('./components/LineChart.vue')['default']
     Navbar: typeof import('./components/Navbar.vue')['default']
@@ -30,7 +31,12 @@ declare module 'vue' {
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
     NDataTable: typeof import('naive-ui')['NDataTable']
     NDialogProvider: typeof import('naive-ui')['NDialogProvider']
+    NDrawer: typeof import('naive-ui')['NDrawer']
+    NDrawerContent: typeof import('naive-ui')['NDrawerContent']
     NDropdown: typeof import('naive-ui')['NDropdown']
+    NFloatButton: typeof import('naive-ui')['NFloatButton']
+    NForm: typeof import('naive-ui')['NForm']
+    NFormItem: typeof import('naive-ui')['NFormItem']
     NIcon: typeof import('naive-ui')['NIcon']
     NInput: typeof import('naive-ui')['NInput']
     NLayout: typeof import('naive-ui')['NLayout']
@@ -41,7 +47,9 @@ declare module 'vue' {
     NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
     NPageHeader: typeof import('naive-ui')['NPageHeader']
     NPopselect: typeof import('naive-ui')['NPopselect']
+    NSpace: typeof import('naive-ui')['NSpace']
     NTooltip: typeof import('naive-ui')['NTooltip']
+    NTreeSelect: typeof import('naive-ui')['NTreeSelect']
     OrderManagement: typeof import('./components/Orders/OrderManagement.vue')['default']
     ProductsManagement: typeof import('./components/Products/ProductsManagement.vue')['default']
     ReviewManagement: typeof import('./components/Review/ReviewManagement.vue')['default']

src/components/Category/CategoryStatics.vue

@@ -9,8 +9,8 @@ import {
     <h2 class="card-title">
       Statics
     </h2>
-    <DashboardCard :icon="UserIcon" title="Registers" :progress="10" :value="250" />
-    <DashboardCard :icon="UserIcon" title="Registers" :progress="10" :value="250" />
+    <DashboardCard class="w-full sm:w-full md:w-full" :icon="UserIcon" title="Registers" :progress="10" :value="250" />
+    <DashboardCard class="w-full sm:w-full md:w-full" :icon="UserIcon" title="Registers" :progress="10" :value="250" />
     <DonutChart />
   </div>
 </template>

src/components/GithubButton.vue

@@ -0,0 +1,59 @@
+<script setup>
+
+</script>
+
+<template>
+  <div class="float-button">
+    <n-tooltip placement="top" trigger="hover">
+      <template #trigger>
+        <a href="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/doroudi/yummyadmin" block target="_blank">
+          <n-button strong round type="primary" class="pulse-animated" flex space-between py-5 px-3>
+            <NIcon size="1.6rem" class="mr-2">
+              <svg
+                xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+                viewBox="0 0 32 32"
+              >
+                <path
+                  d="M16 2a14 14 0 0 0-4.43 27.28c.7.13 1-.3 1-.67v-2.38c-3.89.84-4.71-1.88-4.71-1.88a3.71 3.71 0 0 0-1.62-2.05c-1.27-.86.1-.85.1-.85a2.94 2.94 0 0 1 2.14 1.45a3 3 0 0 0 4.08 1.16a2.93 2.93 0 0 1 .88-1.87c-3.1-.36-6.37-1.56-6.37-6.92a5.4 5.4 0 0 1 1.44-3.76a5 5 0 0 1 .14-3.7s1.17-.38 3.85 1.43a13.3 13.3 0 0 1 7 0c2.67-1.81 3.84-1.43 3.84-1.43a5 5 0 0 1 .14 3.7a5.4 5.4 0 0 1 1.44 3.76c0 5.38-3.27 6.56-6.39 6.91a3.33 3.33 0 0 1 .95 2.59v3.84c0 .46.25.81 1 .67A14 14 0 0 0 16 2z"
+                  fill-rule="evenodd" fill="currentColor"
+                />
+              </svg>
+            </NIcon>
+
+            <span>GitHub</span>
+          </n-button>
+        </a>
+      </template>
+      <span> Support Project with giving star in Github </span>
+    </n-tooltip>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.float-button {
+    position: absolute;
+    right: 40px;
+    bottom: 30px;
+    z-index: 100;
+}
+
+.pulse-animated {
+    -webkit-animation: pulse 4s infinite;
+    -moz-animation: pulse 4s infinite;
+    animation: pulse 4s infinite;
+}
+
+@keyframes pulse {
+    0% {
+        box-shadow: 0 0 0 0 rgba(#36ad6a, 0.5);
+    }
+
+    70% {
+        box-shadow: 0 0 0 14px rgba(#36ad6a, 0);
+    }
+
+    100% {
+        box-shadow: 0 0 0 0 rgba(#36ad6a, 0);
+    }
+}
+</style>

src/components/Navbar.vue

@@ -9,27 +9,6 @@ const { isRtl } = storeToRefs(layoutStore)
   <n-page-header class="p-2 navbar">
     <template #extra>
       <div class="flex items-center">
-        <n-tooltip placement="bottom" trigger="hover">
-          <template #trigger>
-            <a href="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/doroudi/yummyadmin" target="_blank">
-              <n-button text class="m-1">
-                <NIcon size="1.4rem">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-                    viewBox="0 0 32 32"
-                  >
-                    <path
-                      d="M16 2a14 14 0 0 0-4.43 27.28c.7.13 1-.3 1-.67v-2.38c-3.89.84-4.71-1.88-4.71-1.88a3.71 3.71 0 0 0-1.62-2.05c-1.27-.86.1-.85.1-.85a2.94 2.94 0 0 1 2.14 1.45a3 3 0 0 0 4.08 1.16a2.93 2.93 0 0 1 .88-1.87c-3.1-.36-6.37-1.56-6.37-6.92a5.4 5.4 0 0 1 1.44-3.76a5 5 0 0 1 .14-3.7s1.17-.38 3.85 1.43a13.3 13.3 0 0 1 7 0c2.67-1.81 3.84-1.43 3.84-1.43a5 5 0 0 1 .14 3.7a5.4 5.4 0 0 1 1.44 3.76c0 5.38-3.27 6.56-6.39 6.91a3.33 3.33 0 0 1 .95 2.59v3.84c0 .46.25.81 1 .67A14 14 0 0 0 16 2z"
-                      fill-rule="evenodd" fill="currentColor"
-                    />
-                  </svg>
-                </NIcon>
-              </n-button>
-            </a>
-          </template>
-          <span> Find project in github </span>
-        </n-tooltip>
-
         <ThemeSwitch class="mx-4" />
         <LanguageSelect class="mx-4" />
         <UserProfile class="mx-4" />

src/layouts/default.vue

@@ -9,7 +9,7 @@
     <n-layout :native-scrollbar="false" position="static">
       <div class="main-content flex-1 bg-slate-100 dark:bg-slate-800 dark:text-white my-2 mr-2">
         <Navbar />
-        <div class="p-0 md:p-3 relative">
+        <div class="px-0 py-1 md:p-3 md:pb-15 relative">
           <router-view v-slot="{ Component, route }">
             <transition name="route" mode="out-in">
               <div :key="route">

src/layouts/home.vue

@@ -5,12 +5,12 @@ const collapsed = ref(false)
 <template>
   <n-layout has-sider>
     <n-layout-sider
-      bordered collapse-mode="width" :collapsed-width="64" :width="300" :collapsed="collapsed" show-trigger
-      @collapse="collapsed = true" @expand="collapsed = false"
+      bordered collapse-mode="width" :collapsed-width="64" :width="300" :collapsed="collapsed"
+      show-trigger @collapse="collapsed = true" @expand="collapsed = false"
     >
       <Sidebar />
     </n-layout-sider>
-    <n-layout-content>
+    <n-layout-content pb-5>
       <div class="main-content dark:text-white">
         <Navbar />
         <RouterView />

src/styles/utils/_animations.scss

@@ -65,4 +65,4 @@
 
 .route-leave-active {
     transition: all 0.3s ease-in;
-}
+}