Skip to content

Commit ba3b786

Browse files
alexandre-vlalexandre-vl
authored
Merge pull request #27 from Yaprof/dev
Dev
2 parents 2fabcc3 + d572e4f commit ba3b786

File tree

10 files changed

+79
-18
lines changed

10 files changed

+79
-18
lines changed

‎assets/css/main.css‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,10 @@ body {
1212
-webkit-touch-callout: none;
1313
}
1414

15+
h1 {
16+
font-family: 'Clash Display', sans-serif;
17+
}
18+
1519
html, body {
1620
overscroll-behavior-y: contain;
1721
overscroll-behavior-x: none;
@@ -26,12 +30,12 @@ html, body {
2630
}
2731

2832
.router-link-exact-active {
29-
background-color: #12d4a781;
33+
background-color: #4AFF9381;
3034
}
3135

3236
@media (prefers-color-scheme: dark) {
3337
.router-link-exact-active {
34-
background-color: #12d4a721;
38+
background-color: #4AFF9321;
3539
}
3640
}
3741

@@ -71,4 +75,15 @@ html, body {
7175
.layout-leave-to {
7276
transform: translateY(-20px);
7377
opacity: 0;
74-
} */
78+
} */
79+
80+
.opacity-enter-active {
81+
transition: all 0.1s ease-out;
82+
}
83+
.opacity-leave-active {
84+
/* transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1); */
85+
}
86+
.opacity-enter-from,
87+
.opacity-leave-to {
88+
opacity: 0;
89+
}

‎components/Creator.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<div>
33
<Toast v-for="error in errors" :key="error.message" :data="{message:error.message, color: error.color}" ></Toast>
44
<div id="popup_creator_toggler" class="fixed bottom-0 right-0 p-5 pb-10 z-50">
5-
<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">
5+
<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">
66
<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">
77
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
88
</svg>

‎components/NavBar.vue‎

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@
66
<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">
77
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" class="sidebar-toggle" />
88
</svg>
9+
<Transition name="opacity" mode="out-in">
10+
<h1 v-if="!isHiddenTitle" class="text-2xl text-dark dark:text-white font-semibold">{{ pages[this?.$route?.name] }}</h1>
11+
</Transition>
912
</div>
1013
<div class="flex text-dark dark:text-white items-center gap-3 p-5">
1114
<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 {
2932
config: {api: this.$config.API_URL, pronote: this.$config.PRONOTE_API_URL},
3033
errors: [],
3134
isSidebarOpen: false,
32-
isShadowed: false
35+
isShadowed: false,
36+
pages: {
37+
'index': "Asbences",
38+
'cantine': "Cantine",
39+
'shop': "Boutique",
40+
'params': "Paramètres",
41+
'user-profile': 'Profile',
42+
'admin-users': "Users"
43+
},
44+
isHiddenTitle: true
3345
}
3446
},
3547
methods: {
3648
toggleSidebar() {
3749
this.$emit('toggle-sidebar');
3850
},
3951
onScroll() {
40-
// Get the current scroll position
4152
const scrollPosition = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
42-
// Set isShadowed to true if scroll position is greater than 0, otherwise set it to false
4353
this.isShadowed = scrollPosition > 0;
54+
if (scrollPosition > 28) this.isHiddenTitle = false
55+
else this.isHiddenTitle = true
4456
}
4557
},
4658
beforeUnmount() {
47-
window.removeEventListener('scroll', this.onScroll); // Remove scroll event listener before component unmount
59+
window.removeEventListener('scroll', this.onScroll)
4860
},
4961
async mounted() {
50-
window.addEventListener('scroll', this.onScroll); // Add scroll event listener on component mount
62+
window.addEventListener('scroll', this.onScroll)
5163
this.userInfos = JSON.parse(window.localStorage.getItem("user"))
5264
let user = await getUser(this.config.api, this.userInfos.id)
5365
if (!user) return this.errors.push({message: "Impossible de charger l'utilisateur", color: "danger"})

‎components/SideBar.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<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'">
2+
<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'">
33
<Toast v-for="error in errors" :key="error.message" :data="{message:error.message, color: error.color}" ></Toast>
44
<div class="w-full h-fit min-h-[9rem] backdrop-blur-xl overflow-hidden bg-dark dark:bg-light relative">
55
<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" />

‎nuxt.config.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ export default defineNuxtConfig({
2828
link: [
2929
{ rel: "icon", type: "image/png", href: "/favicon.ico" },
3030
{ rel: "stylesheet", href: "https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.css" },
31+
{ rel: "stylesheet", href: "https://api.fontshare.com/v2/css?f[]=clash-display@200,400,700,500,600,300&display=swap" },
3132
{ rel: "apple-touch-icon", sizes: "96x96", href: "/icons/icon_96x96.png" },
3233
{ 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)" },
3334
{ 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)" },

‎pages/auth/login.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,8 +40,8 @@
4040

4141

4242
</div>
43-
<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>
44-
<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>
43+
<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>
44+
<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>
4545
</div>
4646
</div>
4747
<div class="text-lg text-dark dark:text-white">Pas de compte ? <a href="mail:[email protected]" class="text-primary">Contactez-nous</a></div>

‎pages/index.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div>
3-
<NuxtLayout>
3+
<NuxtLayout>
44
<Creator :user="user" />
55
<div id="container_div" class="transition-all">
66
<Toast v-for="error in errors" :key="error.message" :data="{message:error.message, color: error.color}" ></Toast>

‎pages/params.vue‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,24 @@
55
<div class="flex flex-col pb-5">
66
<h1 class="text-dark dark:text-white text-3xl font-bold">Paramètres</h1>
77
</div>
8-
<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>
8+
9+
<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">
10+
<div class="w-fit h-fit p-2 bg-">
11+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-6 h-6">
12+
<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" />
13+
<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" />
14+
</svg>
15+
</div>
16+
17+
<div class="flex flex-col justify-start">
18+
<p class="text-lg font-bold text-left">Se déconnecter</p>
19+
<p class="text-sm truncate text-left -mt-1">Retournez à la page de connexion</p>
20+
</div>
21+
<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">
22+
<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" />
23+
</svg>
24+
25+
</button>
926
</div>
1027
</NuxtLayout>
1128
</div>
@@ -24,7 +41,7 @@ export default {
2441
methods: {
2542
logout: function () {
2643
window.localStorage.clear();
27-
window.location.reload();
44+
window.location.replace('/auth/login')
2845
}
2946
}
3047
}

‎pages/user/profile.vue‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,22 @@
66
<h1 class="text-dark dark:text-white text-3xl font-bold">Profile</h1>
77
</div>
88
<div>
9-
<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>
9+
<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">
10+
<div class="w-fit h-fit p-2 bg-">
11+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-6 h-6">
12+
<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" />
13+
</svg>
14+
</div>
15+
16+
<div class="flex flex-col justify-start">
17+
<p class="text-lg font-bold text-left">Changer sa photo</p>
18+
<p class="text-sm truncate text-left -mt-1">Utilise une photo de profil différente</p>
19+
</div>
20+
<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">
21+
<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" />
22+
</svg>
23+
24+
</button>
1025
<input type="file" name="avatar_input" class="hidden" id="avatar_image" accept="image/*" />
1126
</div>
1227
</NuxtLayout>
@@ -24,6 +39,7 @@
2439
<script>
2540
import { updateUser } from '../../mixins/user.js'
2641
export default {
42+
name: "profile",
2743
data() {
2844
return {
2945
config: { api: this.$config.API_URL, pronote: this.$config.PRONOTE_API_URL },

‎tailwind.config.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@ module.exports = {
1212
theme: {
1313
extend: {
1414
colors: {
15-
'primary': '#12d4a6',
16-
'primaryhover': '#5BE7C7',
15+
'primary': '#4AFF93',
16+
'primaryhover': '#D3FFB7',
1717
'secondary': '#1A232E',
1818
'dark': '#1f2937',
1919
'light': '#f3f4f6',

0 commit comments

Comments
 (0)