Merge pull request #27 from Yaprof/dev

Dev
Yaprof · Apr 19, 2023 · ba3b786 · ba3b786
2 parents 2fabcc3 + d572e4f
commit ba3b786
Show file tree

Hide file tree

Showing 10 changed files with 79 additions and 18 deletions.
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -12,6 +12,10 @@ body {
     -webkit-touch-callout: none;
 }
 
+h1 {
+    font-family: 'Clash Display', sans-serif;
+}
+
 html, body {
     overscroll-behavior-y: contain;
     overscroll-behavior-x: none;
@@ -26,12 +30,12 @@ html, body {
 }
 
 .router-link-exact-active  {
-    background-color: #12d4a781;
+    background-color: #4AFF9381;
 }
 
 @media (prefers-color-scheme: dark) {
     .router-link-exact-active  {
-        background-color: #12d4a721;
+        background-color: #4AFF9321;
     }
 }
 
@@ -71,4 +75,15 @@ html, body {
 .layout-leave-to {
   transform: translateY(-20px);
   opacity: 0;
-} */
+} */
+
+.opacity-enter-active {
+  transition: all 0.1s ease-out;
+}
+.opacity-leave-active {
+ /*  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1); */
+}
+.opacity-enter-from,
+.opacity-leave-to {
+  opacity: 0;
+}
diff --git a/components/Creator.vue b/components/Creator.vue
@@ -2,7 +2,7 @@
     <div>
         <Toast v-for="error in errors" :key="error.message" :data="{message:error.message, color: error.color}" ></Toast>
         <div id="popup_creator_toggler" class="fixed bottom-0 right-0 p-5 pb-10 z-50">
-            <div class="rounded-full w-14 h-14 flex items-center justify-center drop-shadow-lg bg-primaryhover dark:bg-primary text-dark dark:text-white active:scale-95 active:brightness-105 transition-all cursor-pointer">
+            <div class="rounded-full w-14 h-14 flex items-center justify-center drop-shadow-lg bg-primary dark:bg-primary text-dark active:scale-95 active:brightness-105 transition-all cursor-pointer">
                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                     <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                 </svg>

diff --git a/components/NavBar.vue b/components/NavBar.vue
@@ -6,6 +6,9 @@
                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8 sidebar-toggle">
                     <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" class="sidebar-toggle" />
                 </svg>
+                <Transition name="opacity" mode="out-in">
+                    <h1 v-if="!isHiddenTitle" class="text-2xl text-dark dark:text-white font-semibold">{{ pages[this?.$route?.name] }}</h1>
+                </Transition>
             </div>
             <div class="flex text-dark dark:text-white items-center gap-3 p-5">
                 <NuxtLink to="/shop" class="flex bg-primary bg-opacity-10 rounded-full py-2 pl-4 pr-2 items-center gap-1">
@@ -29,25 +32,34 @@ export default {
             config: {api: this.$config.API_URL, pronote: this.$config.PRONOTE_API_URL},
             errors: [],
             isSidebarOpen: false,
-            isShadowed: false
+            isShadowed: false,
+            pages: {
+                'index': "Asbences",
+                'cantine': "Cantine",
+                'shop': "Boutique",
+                'params': "Paramètres",
+                'user-profile': 'Profile',
+                'admin-users': "Users"
+            },
+            isHiddenTitle: true
         }
     },
     methods: {
         toggleSidebar() {
             this.$emit('toggle-sidebar');
         },
         onScroll() {
-            // Get the current scroll position
             const scrollPosition = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
-            // Set isShadowed to true if scroll position is greater than 0, otherwise set it to false
             this.isShadowed = scrollPosition > 0;
+            if (scrollPosition > 28) this.isHiddenTitle = false
+            else this.isHiddenTitle = true
         }
     },
     beforeUnmount() {
-        window.removeEventListener('scroll', this.onScroll); // Remove scroll event listener before component unmount
+        window.removeEventListener('scroll', this.onScroll)
     },
     async mounted() {
-        window.addEventListener('scroll', this.onScroll); // Add scroll event listener on component mount
+        window.addEventListener('scroll', this.onScroll)
         this.userInfos = JSON.parse(window.localStorage.getItem("user"))
         let user = await getUser(this.config.api, this.userInfos.id)
         if (!user) return this.errors.push({message: "Impossible de charger l'utilisateur", color: "danger"})

diff --git a/components/SideBar.vue b/components/SideBar.vue
@@ -1,5 +1,5 @@
 <template>
-    <div v-click-outside="closeSidebar" id="sidebar" :class="(isOpen  ? 'translate-x-0 shadow-xl' : '-translate-x-full') + ' h-screen bg-white dark:bg-secondary fixed top-0 left-0 w-72 flex flex-col justify-between items-center z-[99] pb-5 transform-gpu transition-all'">
+    <div v-click-outside="closeSidebar" id="sidebar" :class="(isOpen  ? 'translate-x-0 shadow-xl' : '-translate-x-full') + ' h-screen bg-white dark:bg-secondary fixed top-0 left-0 w-72 flex flex-col justify-between items-center z-[99] pb-5 transform-gpu transition-all duration-200'">
         <Toast v-for="error in errors" :key="error.message" :data="{message:error.message, color: error.color}" ></Toast>
         <div class="w-full h-fit min-h-[9rem] backdrop-blur-xl overflow-hidden bg-dark dark:bg-light relative">
             <img class="absolute top-0 left-0 h-full w-full object-cover blur-lg scale-150 brightness-110 dark:brightness-90" :src="userInfos.profile?.pp" />

diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -28,6 +28,7 @@ export default defineNuxtConfig({
             link: [
                 { rel: "icon", type: "image/png", href: "/favicon.ico" },
                 { rel: "stylesheet", href: "https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.css" },
+                { rel: "stylesheet", href: "https://api.fontshare.com/v2/css?f[]=clash-display@200,400,700,500,600,300&display=swap" },
                 { rel: "apple-touch-icon", sizes: "96x96", href: "/icons/icon_96x96.png" },
                 { rel: "apple-touch-startup-image", href: "/splash/iPhone_14_Pro_Max_portrait.png", media: "screen and (device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" },
                 { rel: "apple-touch-startup-image", href: "/splash/iPhone_14_Pro_portrait.png", media: "screen and (device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" },

diff --git a/pages/auth/login.vue b/pages/auth/login.vue
@@ -40,8 +40,8 @@
 
 
                 </div>
-                <button @click="connect($event.target)" class="mt-5 w-full rounded-xl bg-primary py-3.5 px-5 text-white font-medium text-lg text-center flex items-center justify-center active:bg-opacity-90 transition-all">Se connecter</button>
-                <button id="loading-button" class="mt-5 w-full rounded-xl bg-neutral-300 dark:bg-neutral-700 brightness-90 py-3.5 px-5 text-dark dark:text-white font-medium text-lg text-center flex items-center justify-center hidden">Chargement...</button>
+                <button @click="connect($event.target)" class="mt-5 w-full rounded-xl bg-primary py-3.5 px-5 text-dark font-medium text-lg text-center flex items-center justify-center active:bg-opacity-90 transition-all">Se connecter</button>
+                <button id="loading-button" class="mt-5 w-full rounded-xl bg-primaryhover brightness-90 py-3.5 px-5 text-dark font-medium text-lg text-center flex items-center justify-center hidden">Chargement...</button>
             </div>
         </div>
         <div class="text-lg text-dark dark:text-white">Pas de compte ? <a href="mail:yaprof@gmail.com" class="text-primary">Contactez-nous</a></div>

diff --git a/pages/index.vue b/pages/index.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-    <NuxtLayout>
+        <NuxtLayout>
             <Creator :user="user" />
             <div id="container_div"  class="transition-all">
                 <Toast v-for="error in errors" :key="error.message" :data="{message:error.message, color: error.color}" ></Toast>

diff --git a/pages/params.vue b/pages/params.vue
@@ -5,7 +5,24 @@
                 <div class="flex flex-col pb-5">
                     <h1 class="text-dark dark:text-white text-3xl font-bold">Paramètres</h1>
                 </div>
-                <button @click="logout()" class="text-white text-lg py-3 px-6 rounded-2xl w-full bg-red-500 active:bg-red-400">Se déconnecter</button>
+
+                <button @click="logout()" class="group text-dark dark:text-white text-lg py-3.5 px-6 rounded-2xl w-full bg-light dark:bg-secondary dark:active:bg-gray-800 active:bg-gray-50 cursor-pointer flex items-center gap-2 justify-between transition-all">
+                    <div class="w-fit h-fit p-2 bg-">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-6 h-6">
+                            <path fill-rule="evenodd" d="M3 4.25A2.25 2.25 0 015.25 2h5.5A2.25 2.25 0 0113 4.25v2a.75.75 0 01-1.5 0v-2a.75.75 0 00-.75-.75h-5.5a.75.75 0 00-.75.75v11.5c0 .414.336.75.75.75h5.5a.75.75 0 00.75-.75v-2a.75.75 0 011.5 0v2A2.25 2.25 0 0110.75 18h-5.5A2.25 2.25 0 013 15.75V4.25z" clip-rule="evenodd" />
+                            <path fill-rule="evenodd" d="M6 10a.75.75 0 01.75-.75h9.546l-1.048-.943a.75.75 0 111.004-1.114l2.5 2.25a.75.75 0 010 1.114l-2.5 2.25a.75.75 0 11-1.004-1.114l1.048-.943H6.75A.75.75 0 016 10z" clip-rule="evenodd" />
+                        </svg>
+                    </div>
+
+                    <div class="flex flex-col justify-start">
+                        <p class="text-lg font-bold text-left">Se déconnecter</p>
+                        <p class="text-sm truncate text-left -mt-1">Retournez à la page de connexion</p>
+                    </div>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-6 h-6 text-neutral-400 dark:text-neutral-300 group-active:translate-x-1 transition-all">
+                        <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
+                    </svg>
+
+                </button>
             </div>
         </NuxtLayout>
     </div>
@@ -24,7 +41,7 @@ export default {
     methods: {
         logout: function () {
             window.localStorage.clear();
-            window.location.reload();
+            window.location.replace('/auth/login')
         }
     }
 }

diff --git a/pages/user/profile.vue b/pages/user/profile.vue
@@ -6,7 +6,22 @@
                 <h1 class="text-dark dark:text-white text-3xl font-bold">Profile</h1>
             </div>
             <div>
-                <button id="avatar-upload-button" class="text-dark text-lg py-3 px-6 rounded-2xl w-full bg-light active:bg-gray-50 cursor-pointer">Changer sa photo</button>
+                <button id="avatar-upload-button" class="group text-dark dark:text-white text-lg py-3.5 px-6 rounded-2xl w-full bg-light dark:bg-secondary dark:active:bg-gray-800 active:bg-gray-50 cursor-pointer flex items-center gap-2 justify-between transition-all">
+                    <div class="w-fit h-fit p-2 bg-">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-6 h-6">
+                            <path fill-rule="evenodd" d="M9.664 1.319a.75.75 0 01.672 0 41.059 41.059 0 018.198 5.424.75.75 0 01-.254 1.285 31.372 31.372 0 00-7.86 3.83.75.75 0 01-.84 0 31.508 31.508 0 00-2.08-1.287V9.394c0-.244.116-.463.302-.592a35.504 35.504 0 013.305-2.033.75.75 0 00-.714-1.319 37 37 0 00-3.446 2.12A2.216 2.216 0 006 9.393v.38a31.293 31.293 0 00-4.28-1.746.75.75 0 01-.254-1.285 41.059 41.059 0 018.198-5.424zM6 11.459a29.848 29.848 0 00-2.455-1.158 41.029 41.029 0 00-.39 3.114.75.75 0 00.419.74c.528.256 1.046.53 1.554.82-.21.324-.455.63-.739.914a.75.75 0 101.06 1.06c.37-.369.69-.77.96-1.193a26.61 26.61 0 013.095 2.348.75.75 0 00.992 0 26.547 26.547 0 015.93-3.95.75.75 0 00.42-.739 41.053 41.053 0 00-.39-3.114 29.925 29.925 0 00-5.199 2.801 2.25 2.25 0 01-2.514 0c-.41-.275-.826-.541-1.25-.797a6.985 6.985 0 01-1.084 3.45 26.503 26.503 0 00-1.281-.78A5.487 5.487 0 006 12v-.54z" clip-rule="evenodd" />
+                        </svg>
+                    </div>
+
+                    <div class="flex flex-col justify-start">
+                        <p class="text-lg font-bold text-left">Changer sa photo</p>
+                        <p class="text-sm truncate text-left -mt-1">Utilise une photo de profil différente</p>
+                    </div>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-6 h-6 text-neutral-400 dark:text-neutral-300 group-active:translate-x-1 transition-all">
+                        <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
+                    </svg>
+
+                </button>
                 <input type="file" name="avatar_input" class="hidden" id="avatar_image" accept="image/*" />
             </div>
         </NuxtLayout>
@@ -24,6 +39,7 @@
 <script>
 import { updateUser } from '../../mixins/user.js'
 export default {
+    name: "profile",
     data() {
         return {
             config: { api: this.$config.API_URL, pronote: this.$config.PRONOTE_API_URL },

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -12,8 +12,8 @@ module.exports = {
   theme: {
       extend: {
           colors: {
-              'primary': '#12d4a6',
-              'primaryhover': '#5BE7C7',
+              'primary': '#4AFF93',
+              'primaryhover': '#D3FFB7',
               'secondary': '#1A232E',
               'dark': '#1f2937',
               'light': '#f3f4f6',