Skip to content

Commit c9393de

Browse files
AllanKoderAllanKoder
committed
Good UI progress
1 parent dbb64e4 commit c9393de

15 files changed

Lines changed: 668 additions & 223 deletions

‎database/migrations/2025_01_18_210020_create_personal_access_tokens_table.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ public function up(): void
2323
});
2424
}
2525

26-
/**
26+
/*
2727
* Reverse the migrations.
2828
*/
2929
public function down(): void

‎deploy.yml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
- name: Build Frontend Locally
33
hosts: local
44
tasks:
5+
6+
# Add a task to checkout master and update
57
- name: Build frontend
68
shell: |
79
npm ci && npm run build

‎resources/js/Components/ApplicationHeaderLogo.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
<template>
2-
<img src="/images/LogoTitle.svg" alt="Computer Science Resources" class="h-7 sm:h-12 w-auto block dark:hidden" />
3-
<img src="/images/LogoTitleDark.svg" alt="Computer Science Resources" class="h-7 sm:h-12 w-auto hidden dark:block" />
2+
<img src="/images/LogoTitle.svg" alt="Computer Science Resources" class="h-7 sm:h-12 w-auto block dark:hidden" fetchpriority="high" />
3+
<img src="/images/LogoTitleDark.svg" alt="Computer Science Resources" class="h-7 sm:h-12 w-auto hidden dark:block" fetchpriority="high" />
44
</template>

‎resources/js/Components/ClickableImage.vue‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<script setup>
2+
import { Link } from "@inertiajs/vue3";
3+
4+
const props = defineProps({
5+
href: {
6+
type: String,
7+
required: true,
8+
},
9+
});
10+
</script>
11+
12+
<template>
13+
<Link :href="href" class="block">
14+
<slot />
15+
</Link>
16+
</template>

‎resources/js/Components/Navigation/AboutDropdown.vue‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<script setup>
2+
import { ref } from 'vue';
3+
import { router } from '@inertiajs/vue3';
4+
import { Icon } from '@iconify/vue';
5+
import Menu from 'primevue/menu';
6+
import Button from 'primevue/button';
7+
8+
const menu = ref();
9+
10+
const items = ref([
11+
{
12+
label: 'About Us',
13+
icon: 'mdi:information-outline',
14+
command: () => {
15+
router.visit(route('about'));
16+
}
17+
},
18+
{
19+
label: 'Rules',
20+
icon: 'mdi:gavel',
21+
command: () => {
22+
router.visit(route('rules'));
23+
}
24+
}
25+
]);
26+
27+
const toggle = (event) => {
28+
menu.value.toggle(event);
29+
};
30+
31+
// Check if any about route is active
32+
const isAboutActive = () => {
33+
return route().current('about') || route().current('rules');
34+
};
35+
</script>
36+
37+
<template>
38+
<div class="relative">
39+
<Button
40+
type="button"
41+
@click="toggle"
42+
:class="[
43+
'flex items-center px-1 pt-1 pb-1 h-16 text-sm font-medium border-b-2 transition duration-150 ease-in-out focus:outline-none',
44+
isAboutActive()
45+
? 'border-primary dark:border-primaryLight text-primary dark:text-primaryLight'
46+
: 'border-transparent text-primaryDark dark:text-primary hover:text-primary dark:hover:text-primaryLight hover:border-gray-300 dark:hover:border-gray-700'
47+
]"
48+
severity="secondary"
49+
text
50+
plain
51+
>
52+
About
53+
<Icon icon="mdi:chevron-down" class="ml-1 size-4" />
54+
</Button>
55+
56+
<Menu
57+
ref="menu"
58+
:model="items"
59+
:popup="true"
60+
class="mt-1"
61+
>
62+
<template #item="{ item }">
63+
<div class="flex items-center px-3 py-2 cursor-pointer hover:bg-accent/30 dark:hover:bg-primaryDark/30">
64+
<Icon :icon="item.icon" class="mr-2" />
65+
<span>{{ item.label }}</span>
66+
</div>
67+
</template>
68+
</Menu>
69+
</div>
70+
</template>

‎resources/js/Components/Navigation/Navbar.vue‎

Lines changed: 74 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,12 @@ import { ref } from "vue";
33
import { Link, router } from "@inertiajs/vue3";
44
import { Icon } from "@iconify/vue";
55
import UserDropdown from "@/Components/Navbar/UserDropdown.vue";
6+
import AboutDropdown from "@/Components/Navigation/AboutDropdown.vue";
67
import NavLink from "@/Components/NavLink.vue";
78
import ResponsiveNavLink from "@/Components/ResponsiveNavLink.vue";
89
import SecondaryButton from "@/Components/SecondaryButton.vue";
910
import ApplicationHeaderLogo from "@/Components/ApplicationHeaderLogo.vue";
10-
import { useDarkMode } from '@/Composables/useDarkMode.js';
11+
import { useDarkMode } from "@/Composables/useDarkMode.js";
1112
1213
const showingNavigationDropdown = ref(false);
1314
@@ -19,27 +20,25 @@ const { isDark, toggleDark } = useDarkMode();
1920
</script>
2021

2122
<template>
22-
<nav class="bg-white dark:bg-gray-900 border-accent dark:border-accent-dark">
23+
<nav
24+
class="bg-white dark:bg-gray-900 border-accent dark:border-accent-dark"
25+
>
2326
<!-- Primary Navigation Menu -->
2427
<div class="w-full max-w-screen-2xl mx-auto px-4 md:px-6 lg:px-8">
2528
<div class="flex justify-between h-16">
2629
<div class="flex">
2730
<!-- Logo -->
2831
<div class="shrink-0 flex items-center">
2932
<Link :href="route('home')">
30-
<ApplicationHeaderLogo class="block h-9 w-auto max-w-[250px] sm:max-w-64 md:max-w-72 lg:max-w-80 xl:max-w-96 mr-2" />
33+
<ApplicationHeaderLogo
34+
class="block h-9 w-auto max-w-[250px] sm:max-w-64 md:max-w-72 lg:max-w-80 xl:max-w-96 mr-2"
35+
/>
3136
</Link>
3237
</div>
3338

3439
<!-- Navigation Links -->
35-
<div class="hidden space-x-8 md:-my-px md:ms-10 md:flex">
36-
<NavLink
37-
:href="route('about')"
38-
:active="route().current('about')"
39-
class="text-primaryDark dark:text-primary hover:text-primary dark:hover:text-primaryLight"
40-
>
41-
About Us
42-
</NavLink>
40+
<div class="hidden space-x-8 lg:-my-px lg:ms-10 lg:flex">
41+
<AboutDropdown />
4342

4443
<NavLink
4544
:href="route('resources.index')"
@@ -51,24 +50,32 @@ const { isDark, toggleDark } = useDarkMode();
5150
</div>
5251
</div>
5352

54-
55-
5653
<!-- Authenticated -->
57-
<div class="hidden md:flex md:items-center md:ms-6">
54+
<div class="hidden lg:flex lg:items-center lg:ms-6">
5855
<!-- Dark mode icon button -->
5956
<button
6057
@click="toggleDark"
6158
type="button"
6259
class="mx-2 p-2 rounded-full hover:bg-accent/30 dark:hover:bg-primaryDark/30 focus:outline-none text-primaryDark dark:text-primary"
6360
>
64-
<Icon v-if="!isDark" icon="mdi:weather-night" class="size-6" />
65-
<Icon v-else icon="mdi:white-balance-sunny" class="size-6" />
61+
<Icon
62+
v-if="!isDark"
63+
icon="mdi:weather-night"
64+
class="size-6"
65+
/>
66+
<Icon
67+
v-else
68+
icon="mdi:white-balance-sunny"
69+
class="size-6"
70+
/>
6671
</button>
6772

6873
<template v-if="$page.props.auth.user">
6974
<!-- Create Resource Button -->
7075
<Link :href="route('resources.create')">
71-
<SecondaryButton class="dark:bg-primary dark:text-white dark:hover:bg-primary">
76+
<SecondaryButton
77+
class="dark:bg-primary dark:text-white dark:hover:bg-primary"
78+
>
7279
<Icon icon="mdi:plus" class="mr-2" />
7380
Post a Resource
7481
</SecondaryButton>
@@ -81,9 +88,11 @@ const { isDark, toggleDark } = useDarkMode();
8188
</template>
8289
<!-- Guest -->
8390
<template v-else>
84-
<div class="hidden md:flex md:items-center md:ms-6">
91+
<div class="hidden lg:flex lg:items-center lg:ms-6">
8592
<Link :href="route('login')">
86-
<SecondaryButton class="dark:bg-primary dark:text-white dark:hover:bg-primary">
93+
<SecondaryButton
94+
class="dark:bg-primary dark:text-white dark:hover:bg-primary"
95+
>
8796
<Icon icon="mdi:login" class="mr-2" />
8897
Sign In
8998
</SecondaryButton>
@@ -92,12 +101,14 @@ const { isDark, toggleDark } = useDarkMode();
92101
</template>
93102
</div>
94103

95-
96104
<!-- Hamburger -->
97-
<div class="-me-2 flex items-center md:hidden">
105+
<div class="-me-2 flex items-center lg:hidden">
98106
<button
99107
class="inline-flex items-center justify-center p-2 rounded-md text-primaryDark dark:text-primary hover:text-primary dark:hover:text-primaryLight hover:bg-accent/30 dark:hover:bg-primaryDark/30 focus:outline-none focus:bg-accent/30 dark:focus:bg-primaryDark/30 focus:text-primary dark:focus:text-primaryLight transition duration-150 ease-in-out"
100-
@click="showingNavigationDropdown = !showingNavigationDropdown"
108+
@click="
109+
showingNavigationDropdown =
110+
!showingNavigationDropdown
111+
"
101112
>
102113
<svg
103114
class="size-6"
@@ -137,7 +148,7 @@ const { isDark, toggleDark } = useDarkMode();
137148
block: showingNavigationDropdown,
138149
hidden: !showingNavigationDropdown,
139150
}"
140-
class="md:hidden bg-white dark:bg-gray-900 border-t border-accent dark:border-accent-dark"
151+
class="lg:hidden bg-white dark:bg-gray-900 border-t border-accent dark:border-accent-dark"
141152
>
142153
<div class="pt-2 pb-3 space-y-2">
143154
<!-- Dark mode icon button -->
@@ -146,17 +157,39 @@ const { isDark, toggleDark } = useDarkMode();
146157
type="button"
147158
class="mx-2 p-2 rounded-full hover:bg-accent/30 dark:hover:bg-primaryDark/30 focus:outline-none text-primaryDark dark:text-primary"
148159
>
149-
<Icon v-if="!isDark" icon="mdi:weather-night" class="size-6" />
150-
<Icon v-else icon="mdi:white-balance-sunny" class="size-6" />
160+
<Icon
161+
v-if="!isDark"
162+
icon="mdi:weather-night"
163+
class="size-6"
164+
/>
165+
<Icon
166+
v-else
167+
icon="mdi:white-balance-sunny"
168+
class="size-6"
169+
/>
151170
</button>
152171

153-
<ResponsiveNavLink
154-
:href="route('about')"
155-
:active="route().current('about')"
156-
class="text-primaryDark dark:text-primary hover:text-primary dark:hover:text-primaryLight"
157-
>
158-
About Us
159-
</ResponsiveNavLink>
172+
<!-- About Section -->
173+
<div class="pl-4">
174+
<div class="text-sm font-semibold text-gray-600 dark:text-gray-400 mb-2">About</div>
175+
<ResponsiveNavLink
176+
:href="route('about')"
177+
:active="route().current('about')"
178+
class="text-primaryDark dark:text-primary hover:text-primary dark:hover:text-primaryLight ml-4"
179+
>
180+
<Icon icon="mdi:information-outline" class="inline mr-2" />
181+
About Us
182+
</ResponsiveNavLink>
183+
184+
<ResponsiveNavLink
185+
:href="route('rules')"
186+
:active="route().current('rules')"
187+
class="text-primaryDark dark:text-primary hover:text-primary dark:hover:text-primaryLight ml-4"
188+
>
189+
<Icon icon="mdi:gavel" class="inline mr-2" />
190+
Rules
191+
</ResponsiveNavLink>
192+
</div>
160193

161194
<ResponsiveNavLink
162195
:href="route('resources.index')"
@@ -192,7 +225,9 @@ const { isDark, toggleDark } = useDarkMode();
192225

193226
<!-- Responsive Settings Options -->
194227
<template v-if="$page.props.auth.user">
195-
<div class="pt-4 pb-1 border-t border-gray-200 dark:border-gray-700">
228+
<div
229+
class="pt-4 pb-1 border-t border-gray-200 dark:border-gray-700"
230+
>
196231
<div class="flex items-center px-4">
197232
<div
198233
v-if="$page.props.jetstream.managesProfilePhotos"
@@ -207,10 +242,14 @@ const { isDark, toggleDark } = useDarkMode();
207242
</div>
208243

209244
<div>
210-
<div class="font-medium text-base text-gray-800 dark:text-gray-200">
245+
<div
246+
class="font-medium text-base text-gray-800 dark:text-gray-200"
247+
>
211248
{{ $page.props.auth.user.name }}
212249
</div>
213-
<div class="font-medium text-sm text-gray-500 dark:text-gray-400">
250+
<div
251+
class="font-medium text-sm text-gray-500 dark:text-gray-400"
252+
>
214253
{{ $page.props.auth.user.email }}
215254
</div>
216255
</div>

‎resources/js/Components/Profile/UserProfile.vue‎

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<script setup>
22
import ProfilePhoto from "@/Components/Profile/ProfilePhoto.vue";
3+
import { formatDate } from "@/Helpers/dates";
34
45
defineProps({
56
user: {
@@ -11,15 +12,6 @@ defineProps({
1112
required: true,
1213
},
1314
});
14-
15-
const formatDate = (dateString) => {
16-
const date = new Date(dateString);
17-
return date.toLocaleDateString("en-US", {
18-
year: "numeric",
19-
month: "long",
20-
day: "numeric",
21-
});
22-
};
2315
</script>
2416

2517
<template>

0 commit comments

Comments
 (0)