Skip to content

Commit 2748442

Browse files
AllanKoderAllanKoder
authored
Small nits (#58)
* tag changes * navbar * format
1 parent 651c242 commit 2748442

3 files changed

Lines changed: 102 additions & 40 deletions

File tree

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

Lines changed: 67 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -31,22 +31,30 @@ const { isDark, toggleDark } = useDarkMode();
3131
<!-- Logo -->
3232
<div class="shrink-0 flex items-center">
3333
<Link :href="route('home')">
34-
<ApplicationHeaderLogo/>
34+
<ApplicationHeaderLogo />
3535
</Link>
3636
</div>
3737

3838
<!-- Navigation Links -->
39-
<div class="hidden space-x-8 lg:-my-px lg:ms-10 lg:flex">
39+
<div class="hidden space-x-8 xl:-my-px xl:ms-10 xl:flex">
4040
<NavLinkDropdown
4141
label="About"
42-
:active="route().current('about') || route().current('rules')"
42+
:active="
43+
route().current('about') ||
44+
route().current('rules')
45+
"
4346
>
4447
<DropdownLink :href="route('about')">
45-
<Icon icon="mdi:information-outline" class="mr-2" />
48+
<Icon
49+
icon="mdi:information-outline"
50+
class="mr-2"
51+
/>
4652
About Us
4753
</DropdownLink>
4854

49-
<div class="border-t border-gray-200 dark:border-gray-600" />
55+
<div
56+
class="border-t border-gray-200 dark:border-gray-600"
57+
/>
5058

5159
<DropdownLink :href="route('rules')">
5260
<Icon icon="mdi:gavel" class="mr-2" />
@@ -56,25 +64,43 @@ const { isDark, toggleDark } = useDarkMode();
5664

5765
<NavLinkDropdown
5866
label="Resources"
59-
:active="route().current('resources.index') || route().current('resource_edits.index')"
67+
:active="
68+
route().current('resources.index') ||
69+
route().current('resource_edits.index')
70+
"
6071
>
6172
<DropdownLink :href="route('resources.index')">
6273
<Icon icon="mdi:magnify" class="mr-2" />
6374
Browse Resources
6475
</DropdownLink>
6576

66-
<div class="border-t border-gray-200 dark:border-gray-600" />
77+
<div
78+
class="border-t border-gray-200 dark:border-gray-600"
79+
/>
6780

6881
<DropdownLink :href="route('resource_edits.index')">
69-
<Icon icon="mdi:pencil-box-multiple" class="mr-2" />
82+
<Icon
83+
icon="mdi:pencil-box-multiple"
84+
class="mr-2"
85+
/>
7086
Resource Edits
7187
</DropdownLink>
7288
</NavLinkDropdown>
7389
</div>
7490
</div>
7591

7692
<!-- Authenticated -->
77-
<div class="hidden lg:flex lg:items-center lg:ms-6">
93+
<div class="hidden xl:flex xl:items-center xl:ms-6">
94+
<!-- GitHub link button -->
95+
<a
96+
href="https://github.com/AllanKoder/ComputerScienceResources.com"
97+
target="_blank"
98+
rel="noopener noreferrer"
99+
class="mx-2 p-2 rounded-full hover:bg-accent/30 dark:hover:bg-primaryDark/30 focus:outline-none text-primaryDark dark:text-primary"
100+
>
101+
<Icon icon="mdi:github" class="size-6" />
102+
</a>
103+
78104
<!-- Dark mode icon button -->
79105
<button
80106
@click="toggleDark"
@@ -111,7 +137,7 @@ const { isDark, toggleDark } = useDarkMode();
111137
</template>
112138
<!-- Guest -->
113139
<template v-else>
114-
<div class="hidden lg:flex lg:items-center lg:ms-6">
140+
<div class="hidden xl:flex xl:items-center xl:ms-6">
115141
<Link :href="route('login')">
116142
<SecondaryButton
117143
class="dark:bg-primary dark:text-white dark:hover:bg-primary"
@@ -125,7 +151,7 @@ const { isDark, toggleDark } = useDarkMode();
125151
</div>
126152

127153
<!-- Hamburger -->
128-
<div class="-me-2 flex items-center lg:hidden">
154+
<div class="-me-2 flex items-center xl:hidden">
129155
<button
130156
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"
131157
@click="
@@ -171,26 +197,39 @@ const { isDark, toggleDark } = useDarkMode();
171197
block: showingNavigationDropdown,
172198
hidden: !showingNavigationDropdown,
173199
}"
174-
class="lg:hidden bg-white dark:bg-gray-900 border-t border-accent dark:border-accent-dark"
200+
class="xl:hidden bg-white dark:bg-gray-900 border-t border-accent dark:border-accent-dark"
175201
>
176202
<div class="pt-2 pb-3 space-y-2">
177-
<!-- Dark mode icon button -->
178-
<button
179-
@click="toggleDark"
180-
type="button"
181-
class="mx-2 p-2 rounded-full hover:bg-accent/30 dark:hover:bg-primaryDark/30 focus:outline-none text-primaryDark dark:text-primary"
203+
<div class="flex items-center gap-2 px-2">
204+
<!-- Dark mode icon button -->
205+
<button
206+
@click="toggleDark"
207+
type="button"
208+
class="p-2 rounded-full hover:bg-accent/30 dark:hover:bg-primaryDark/30 focus:outline-none text-primaryDark dark:text-primary"
209+
>
210+
<Icon
211+
v-if="!isDark"
212+
icon="mdi:weather-night"
213+
class="size-6"
214+
/>
215+
<Icon
216+
v-else
217+
icon="mdi:white-balance-sunny"
218+
class="size-6"
219+
/>
220+
</button>
221+
</div>
222+
223+
<ResponsiveNavLink
224+
href="https://github.com/AllanKoder/ComputerScienceResources.com"
225+
class="text-primaryDark dark:text-primary hover:text-primary dark:hover:text-primaryLight"
226+
as="a"
227+
target="_blank"
228+
rel="noopener noreferrer"
182229
>
183-
<Icon
184-
v-if="!isDark"
185-
icon="mdi:weather-night"
186-
class="size-6"
187-
/>
188-
<Icon
189-
v-else
190-
icon="mdi:white-balance-sunny"
191-
class="size-6"
192-
/>
193-
</button>
230+
<Icon icon="mdi:github" class="mr-2" />
231+
GitHub
232+
</ResponsiveNavLink>
194233

195234
<ResponsiveNavLink
196235
:href="route('about')"

‎resources/js/Components/Resources/ResourceCard.vue‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { platformIcons, pricingIcons, difficultyIcons } from "@/Helpers/icons";
1212
import ResourceThumbnail from "@/Components/Resources/ResourceThumbnail.vue";
1313
import StarRating from "@/Components/StarRating/StarRating.vue";
1414
import Tag from "@/Components/Tag.vue";
15+
import TagList from "@/Components/TagList.vue";
1516
1617
const props = defineProps({
1718
resource: {
@@ -81,7 +82,7 @@ const emit = defineEmits(["upvote", "downvote"]);
8182
<!-- Content section -->
8283
<div class="flex-1 min-w-0">
8384
<!-- Primary info row -->
84-
<div class="flex items-center gap-2 mb-1">
85+
<div class="flex items-center gap-1 mb-1">
8586
<Icon
8687
icon="mdi:label-outline"
8788
width="14"
@@ -90,19 +91,18 @@ const emit = defineEmits(["upvote", "downvote"]);
9091
/>
9192
<div class="flex items-center gap-3 flex-wrap">
9293
<!-- Top topics -->
93-
<div class="flex items-center gap-1">
94-
<Tag
95-
v-for="topic in resource.topics_tags?.slice(
96-
0,
97-
4
98-
)"
99-
:key="topic"
100-
:tag="topic"
101-
icon="mdi:lightbulb-outline"
102-
:icon-size="12"
94+
<div class="flex items-center gap-2">
95+
<TagList
96+
v-if="resource.topics_tags?.length"
97+
:tags="resource.topics_tags"
98+
:max-visible="4"
99+
tag-icon="mdi:lightbulb-outline"
100+
:tag-icon-size="12"
103101
/>
104102
</div>
105103

104+
<span class="text-gray-400 dark:text-gray-500 -mx-1">-</span>
105+
106106
<!-- Difficulty -->
107107
<div
108108
v-if="resource.difficulties?.length"
@@ -117,6 +117,8 @@ const emit = defineEmits(["upvote", "downvote"]);
117117
/>
118118
</div>
119119

120+
<span class="text-gray-400 dark:text-gray-500 -mx-1">-</span>
121+
120122
<!-- Pricing -->
121123
<Tag
122124
:tag="pricingLabels[resource.pricing]"

‎resources/js/Components/TagList.vue‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<script setup>
22
import { Icon } from "@iconify/vue";
33
import Tag from "@/Components/Tag.vue";
4+
import { computed } from "vue";
45
56
const props = defineProps({
67
tags: {
@@ -33,7 +34,21 @@ const props = defineProps({
3334
},
3435
});
3536
36-
const visibleTags = props.maxVisible ? props.tags.slice(0, props.maxVisible) : props.tags;
37+
const sortedTags = computed(() => {
38+
const tagsCopy = [...props.tags];
39+
return tagsCopy.sort((a, b) => {
40+
const aLower = a.toLowerCase();
41+
const bLower = b.toLowerCase();
42+
43+
if (aLower === 'everything') return -1;
44+
if (bLower === 'everything') return 1;
45+
return 0;
46+
});
47+
});
48+
49+
const visibleTags = computed(() =>
50+
props.maxVisible ? sortedTags.value.slice(0, props.maxVisible) : sortedTags.value
51+
);
3752
</script>
3853

3954
<template>
@@ -59,5 +74,11 @@ const visibleTags = props.maxVisible ? props.tags.slice(0, props.maxVisible) : p
5974
:icon="tagIcon"
6075
:icon-size="tagIconSize"
6176
/>
77+
<span
78+
v-if="maxVisible && sortedTags.length > maxVisible"
79+
class="text-xs text-gray-500 dark:text-gray-400"
80+
>
81+
...
82+
</span>
6283
</div>
6384
</template>

0 commit comments

Comments
 (0)