Skip to content

Commit ed80d8e

Browse files
at-wrqwerzl
at-wr
and
qwerzl
authored
feat: minor improvements (#576)
* feat: add info icon to club-card button * feat: use `localStorage` to store `selectedTab` feat: add function `iconName()` to return icon * feat: add search icon before Input box * chore: `iconName` renamed to `categoryIcon` in order to make it more straightforward * feat: add page title for profile * feat: add page title for Sign In and Sign Up * feat: add icons and new menu items to user dropdown * feat: add links to dropdown menu * feat: set out-site link target as `_blank` * Redirect to discussions instead of issues --------- Co-authored-by: Tom Tang <[email protected]>
1 parent 9242f3b commit ed80d8e

File tree

6 files changed

+92
-39
lines changed

6 files changed

+92
-39
lines changed

‎components/custom/Nav/user/User.vue

Lines changed: 27 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -47,20 +47,42 @@ function signOutHandler() {
4747
<DropdownMenuSeparator />
4848
<DropdownMenuGroup>
4949
<DropdownMenuItem>
50-
Profile
50+
<NuxtLink to="/profile">
51+
<Icon class="mr-1" name="material-symbols:person-outline" />
52+
<span>Profile</span>
53+
</NuxtLink>
5154
</DropdownMenuItem>
5255
<DropdownMenuItem>
53-
Billing
56+
<Icon class="mr-1" name="material-symbols:tune" />
57+
<span>Settings</span>
5458
</DropdownMenuItem>
59+
</DropdownMenuGroup>
60+
<DropdownMenuSeparator />
61+
<DropdownMenuGroup>
5562
<DropdownMenuItem>
56-
Settings
63+
<NuxtLink to="https://github.com/Computerization/Enspire" target="_blank">
64+
<Icon class="mr-1" name="material-symbols:open-in-new" />
65+
<span>GitHub</span>
66+
</NuxtLink>
67+
</DropdownMenuItem>
68+
<DropdownMenuItem>
69+
<NuxtLink to="https://github.com/Computerization/Enspire/discussions" target="_blank">
70+
<Icon class="mr-1" name="material-symbols:help-outline" />
71+
<span>Discussions</span>
72+
</NuxtLink>
5773
</DropdownMenuItem>
58-
<DropdownMenuItem>New Team</DropdownMenuItem>
5974
</DropdownMenuGroup>
6075
<DropdownMenuSeparator />
6176
<DropdownMenuItem @click="signOutHandler">
62-
退出登录
77+
<Icon class="mr-1" name="material-symbols:logout" />
78+
<span>退出登录</span>
6379
</DropdownMenuItem>
6480
</DropdownMenuContent>
6581
</DropdownMenu>
6682
</template>
83+
84+
<style>
85+
a {
86+
cursor: default;
87+
}
88+
</style>

‎components/custom/club-card.vue

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,8 @@ const Description_C = cleanHTML(props.club.groups[0].C_DescriptionC)
6161
<CardFooter>
6262
<NuxtLink :to="`/cas/clubs/${props.club.groups[0].C_GroupsID}`" class="w-full">
6363
<Button class="w-full">
64-
详细信息
64+
<Icon name="material-symbols:info-outline" />
65+
<span class="ml-1.5">详细信息</span>
6566
</Button>
6667
</NuxtLink>
6768
</CardFooter>

‎pages/cas/clubs/index.vue

Lines changed: 51 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<script setup lang="ts">
2+
import { onMounted, ref, watch } from 'vue'
23
import { Input } from '@/components/ui/input'
34
import TabsList from '@/components/ui/tabs/TabsList.vue'
45
import Tabs from '@/components/ui/tabs/Tabs.vue'
@@ -20,6 +21,7 @@ useHead({
2021
const categories = (['Sports', 'Service', 'Arts', 'Life', 'Academic'] as const).map(c => c as ClubCategoryKey)
2122
2223
const searchTerm = ref('')
24+
const selectedTab = ref('Sports')
2325
2426
const { data } = await useFetch<Clubs>('/api/club/all_details')
2527
@@ -47,54 +49,70 @@ const filteredClubs = computed(() => {
4749
return acc
4850
}, {} as Clubs)
4951
})
52+
53+
onMounted(() => {
54+
const storedTab = localStorage.getItem('selectedTab')
55+
if (storedTab)
56+
selectedTab.value = storedTab
57+
})
58+
59+
watch(selectedTab, (newTab) => {
60+
if (typeof window !== 'undefined')
61+
localStorage.setItem('selectedTab', newTab)
62+
})
63+
64+
function categoryIcon(category: ClubCategoryKey) {
65+
switch (category) {
66+
case 'Sports':
67+
return 'material-symbols:sports-basketball'
68+
case 'Service':
69+
return 'material-symbols:home-repair-service'
70+
case 'Arts':
71+
return 'material-symbols:format-paint'
72+
case 'Life':
73+
return 'material-symbols:nightlife'
74+
case 'Academic':
75+
return 'material-symbols:book'
76+
default:
77+
return ''
78+
}
79+
}
5080
</script>
5181

5282
<template>
5383
<div>
54-
<Tabs class="h-full space-y-6" :value="isSearchActive ? '' : undefined" :default-value="isSearchActive ? '' : 'Sports'">
84+
<Tabs v-model="selectedTab" class="h-full space-y-6" :default-value="selectedTab">
5585
<div class="flex flex-row items-center justify-between">
5686
<TabsList class="w-min">
57-
<TabsTrigger :value="isSearchActive ? '' : 'Sports'" :disabled="isSearchActive" class="flex items-center">
58-
<Icon name="material-symbols:sports-basketball" />
87+
<TabsTrigger
88+
v-for="category in categories"
89+
:key="category"
90+
:value="category"
91+
:disabled="isSearchActive"
92+
class="flex items-center"
93+
>
94+
<Icon :name="categoryIcon(category)" />
5995
<div class="hidden sm:block ml-1">
60-
Sports
61-
</div>
62-
</TabsTrigger>
63-
<TabsTrigger :value="isSearchActive ? '' : 'Service'" :disabled="isSearchActive" class="flex items-center">
64-
<Icon name="material-symbols:home-repair-service" />
65-
<div class="hidden sm:block ml-1">
66-
Service
67-
</div>
68-
</TabsTrigger>
69-
<TabsTrigger :value="isSearchActive ? '' : 'Arts'" :disabled="isSearchActive" class="flex items-center">
70-
<Icon name="material-symbols:format-paint" />
71-
<div class="hidden sm:block ml-1">
72-
Arts
73-
</div>
74-
</TabsTrigger>
75-
<TabsTrigger :value="isSearchActive ? '' : 'Life'" :disabled="isSearchActive" class="flex items-center">
76-
<Icon name="material-symbols:nightlife" />
77-
<div class="hidden sm:block ml-1">
78-
Life
79-
</div>
80-
</TabsTrigger>
81-
<TabsTrigger :value="isSearchActive ? '' : 'Academic'" :disabled="isSearchActive" class="flex items-center">
82-
<Icon name="material-symbols:book" />
83-
<div class="hidden sm:block ml-1">
84-
Academic
96+
{{ category }}
8597
</div>
8698
</TabsTrigger>
8799
</TabsList>
88-
<Input v-model="searchTerm" type="text" placeholder="Search..." class="float-right w-1/4" />
100+
101+
<div class="relative w-1/3 xl:w-1/4">
102+
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
103+
<Icon name="material-symbols:search" />
104+
</div>
105+
<Input v-model="searchTerm" type="text" placeholder="Search..." class="pl-10" />
106+
</div>
89107
</div>
90108
<TabsContent
91-
v-for="i in categories"
92-
:key="i"
93-
:value="i"
109+
v-for="category in categories"
110+
:key="category"
111+
:value="category"
94112
class="border-none p-0 outline-none"
95113
>
96114
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
97-
<ClubCard v-for="j in filteredClubs[i]" :key="j.groups[0].C_NameE" :club="j" />
115+
<ClubCard v-for="club in filteredClubs[category]" :key="club.groups[0].C_NameE" :club="club" />
98116
</div>
99117
</TabsContent>
100118
</Tabs>

‎pages/profile.vue

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,10 @@ definePageMeta({
55
middleware: ['auth'],
66
})
77
8+
useHead({
9+
title: 'Profile | Enspire',
10+
})
11+
812
const { user } = useUser()
913
</script>
1014

‎pages/sign-in.vue

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,10 @@ definePageMeta({
99
layout: 'sign-in-or-out',
1010
middleware: ['public'],
1111
})
12+
13+
useHead({
14+
title: 'Sign In | Enspire',
15+
})
1216
</script>
1317

1418
<template>

‎pages/sign-up.vue

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,10 @@ definePageMeta({
55
layout: 'sign-in-or-out',
66
middleware: ['public'],
77
})
8+
9+
useHead({
10+
title: 'Sign Up | Enspire',
11+
})
812
</script>
913

1014
<template>

0 commit comments

Comments
 (0)