Skip to content

Commit f9300c1

Browse files
AllanKoderAllanKoder
committed
UI Fixes
1 parent f3e1402 commit f9300c1

File tree

8 files changed

+152
-130
lines changed

8 files changed

+152
-130
lines changed

‎resources/js/Components/EmptyState.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@ defineProps({
1212
},
1313
message: {
1414
type: String,
15-
required: true,
15+
required: false,
16+
default: "",
1617
},
1718
});
1819
</script>

‎resources/js/Components/Form/TagSelector.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ const filterSuggestions = () => {
8383
</script>
8484

8585
<template>
86-
<div>
86+
<div class="mb-2">
8787
<!-- List of tags -->
8888
<div class="mb-2 flex flex-wrap">
8989
<Tag v-for="tag in selectedTags"

‎resources/js/Components/News/NewsSection.vue‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,31 +3,40 @@ import { ref } from "vue";
33
import NewsItem from "@/Components/NewsItem.vue";
44
import NewsDialog from "@/Components/News/NewsDialog.vue";
55
import { Icon } from "@iconify/vue";
6+
import EmptyState from "../EmptyState.vue";
67
78
const props = defineProps({
89
newsPosts: {
910
type: Array,
10-
required: true
11-
}
11+
required: true,
12+
},
1213
});
1314
1415
const showNewsDialog = ref(false);
1516
</script>
1617

1718
<template>
1819
<!-- News Section - Desktop -->
19-
<aside class="hidden lg:block w-1/4 bg-white dark:bg-gray-800 overflow-hidden shadow-xl sm:rounded-lg p-6">
20-
<div class="bg-secondary dark:bg-gray-700 -m-6 p-4 mb-0 flex items-center gap-2">
21-
<Icon icon="mdi:newspaper" class="w-6 h-6 text-primary dark:text-white" />
20+
<aside
21+
class="hidden h-fit lg:block w-1/4 bg-white dark:bg-gray-800 overflow-hidden shadow-xl sm:rounded-lg p-6"
22+
>
23+
<div
24+
class="bg-secondary dark:bg-gray-700 -m-6 p-4 mb-0 flex items-center gap-2"
25+
>
26+
<Icon
27+
icon="mdi:newspaper"
28+
class="w-6 h-6 text-primary dark:text-white"
29+
/>
2230
<h2 class="font-bold text-primary dark:text-white">Latest News</h2>
2331
</div>
24-
<div class="space-y-4">
32+
<div class="space-y-4" v-if="newsPosts.length > 0">
2533
<NewsItem
2634
v-for="(news, index) in newsPosts"
2735
:key="index"
2836
:news="news"
2937
/>
3038
</div>
39+
<EmptyState class="mt-6" v-else icon="mdi-newspaper" title="No Recent News" />
3140
</aside>
3241

3342
<!-- News Button - Mobile -->

‎resources/js/Components/Pagination/PaginateLinks.vue‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,14 @@ const nextLink = props.links[props.links.length - 1]?.url;
3434
<template>
3535
<nav class="flex flex-col items-center justify-center space-y-2">
3636
<span class="text-sm text-gray-700 dark:text-gray-400">
37-
Showing <span class="font-semibold">{{ from ?? 0 }}</span> to <span class="font-semibold">{{ to ?? 0 }}</span> of <span class="font-semibold">{{ total ?? 0 }}</span> {{ modelName }}
37+
<template v-if="total === 0">
38+
No results found for {{ modelName }}.
39+
</template>
40+
<template v-else>
41+
Showing <span class="font-semibold">{{ from ?? 0 }}</span> to <span class="font-semibold">{{ to ?? 0 }}</span> of <span class="font-semibold">{{ total ?? 0 }}</span> {{ modelName }}
42+
</template>
3843
</span>
39-
<div class="flex items-center space-x-1.5">
44+
<div v-if="total > 0" class="flex items-center space-x-1.5">
4045
<!-- Left Button -->
4146
<PaginateLink
4247
v-if="previousLink"

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -351,7 +351,7 @@ function resetFilters() {
351351
</div>
352352

353353
<!-- Advanced Filters Section -->
354-
<div v-if="advancedOpen" class="p-6 bg-secondary/5 space-y-6">
354+
<div v-show="advancedOpen" class="p-6 bg-secondary/5 space-y-6">
355355
<!-- Ratings Section -->
356356
<div class="space-y-3">
357357
<h3 class="flex items-center gap-2 text-sm font-medium text-gray-600">

‎resources/js/Pages/Resources/Create.vue‎

Lines changed: 123 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -79,10 +79,131 @@ const handleFormChange = (newFormData) => {
7979
<template>
8080
<AppLayout title="Computer Science Resources">
8181
<main class="py-12 flex justify-center">
82-
<div class="w-2/3 flex gap-8">
82+
<div class="w-full max-w-[1100px] flex flex-col md:flex-row gap-10">
83+
<!-- Instructions Sidebar (Rules) -->
84+
<div
85+
class="bg-gray-50 border border-gray-200 rounded-lg p-6 w-full md:w-[28vw] min-w-[20rem] h-fit sticky md:top-8 mb-8 md:mb-0"
86+
>
87+
<h3 class="text-lg font-semibold mb-4 text-gray-800">
88+
Submission Guidelines
89+
</h3>
90+
<div class="space-y-4 text-sm text-gray-700">
91+
<div class="space-y-4 text-sm text-gray-700">
92+
<div>
93+
<h4 class="font-bold text-gray-800 mb-2">
94+
Resource Scope
95+
</h4>
96+
<p class="mb-2">
97+
This site features comprehensive learning
98+
resources rather than isolated materials.
99+
Resources should provide ongoing value or
100+
structured learning experiences rather than
101+
a single-use reference.
102+
</p>
103+
<p>
104+
Our goal is to provide ways for developers
105+
to hone their skills. This industry is
106+
filled with passion, so we should make it
107+
easier to find more ways to learn.
108+
</p>
109+
</div>
110+
111+
<div>
112+
<h4 class="font-bold text-gray-800 mb-2">
113+
Types of Content Accepted
114+
</h4>
115+
<ul
116+
class="list-disc list-inside space-y-1 text-xs"
117+
>
118+
<li>
119+
Platforms, websites, and tools that
120+
offer interactive learning
121+
</li>
122+
<li>
123+
Collections of educational content, such
124+
as YouTube channels or book series
125+
</li>
126+
<li>
127+
Guides or repositories that serve as
128+
long-term learning hubs
129+
</li>
130+
<li>
131+
Newsletters that consistently release
132+
content to date
133+
</li>
134+
<li>
135+
Organizations that can provide software
136+
career advising
137+
</li>
138+
</ul>
139+
<p class="mt-2 text-xs">
140+
Anything to help people learn more about
141+
software: from hardware, system design, to
142+
project management. The more specialized the
143+
resources are, the better.
144+
</p>
145+
</div>
146+
147+
<div>
148+
<h4 class="font-bold text-gray-800 mb-2">
149+
Exceptions
150+
</h4>
151+
<ul
152+
class="list-disc list-inside space-y-1 text-xs"
153+
>
154+
<li>
155+
An individual book may be included if it
156+
is exceptionally well-regarded and
157+
widely recommended as a foundational
158+
resource
159+
</li>
160+
<li>
161+
Entertainment streamers and YouTubers
162+
can be included given that they are very
163+
popular whilst still informative
164+
</li>
165+
<li>
166+
Do not post your paid courses unless
167+
they are well received - this is not a
168+
platform to advertise unwanted courses
169+
</li>
170+
</ul>
171+
</div>
172+
173+
<div>
174+
<h4 class="font-bold text-gray-800 mb-2">
175+
What's Not Included
176+
</h4>
177+
<ul
178+
class="list-disc list-inside space-y-1 text-xs"
179+
>
180+
<li>
181+
Standalone videos, single blog posts, or
182+
one-off articles
183+
</li>
184+
<li>
185+
Resources that are too broad and do not
186+
contain a singular focus
187+
</li>
188+
<li>
189+
Things not related to learning about
190+
computer science or software engineering
191+
</li>
192+
<li>
193+
Lifestyle or personal finance content
194+
(beyond reasonable project management)
195+
</li>
196+
</ul>
197+
<p class="mt-2 text-xs italic">
198+
In the end, we trust you to be reasonable.
199+
</p>
200+
</div>
201+
</div>
202+
</div>
203+
</div>
83204
<!-- Main Form Section -->
84205
<div
85-
class="bg-white h-min shadow-lg rounded-lg p-6 flex-1 max-w-2xl relative"
206+
class="bg-white h-min shadow-lg rounded-lg p-6 flex-1 max-w-full md:max-w-3xl min-w-0 md:min-w-[28rem] relative"
86207
>
87208
<!-- Move Reset button to top right -->
88209
<div class="flex justify-end mb-2">
@@ -161,120 +282,6 @@ const handleFormChange = (newFormData) => {
161282
</template>
162283
</ConfirmationModal>
163284
</div>
164-
165-
<!-- Instructions Sidebar -->
166-
<div
167-
class="bg-gray-50 border border-gray-200 rounded-lg p-6 w-1/3 h-fit sticky top-8"
168-
>
169-
<h3 class="text-lg font-semibold mb-4 text-gray-800">
170-
Submission Guidelines
171-
</h3>
172-
173-
<div class="space-y-4 text-sm text-gray-700">
174-
<div>
175-
<h4 class="font-bold text-gray-800 mb-2">
176-
Resource Scope
177-
</h4>
178-
<p class="mb-2">
179-
This site features comprehensive learning
180-
resources rather than isolated materials.
181-
Resources should provide ongoing value or
182-
structured learning experiences rather than a
183-
single-use reference.
184-
</p>
185-
<p>
186-
Our goal is to provide ways for developers to
187-
hone their skills. This industry is filled with
188-
passion, so we should make it easier to find
189-
more ways to learn.
190-
</p>
191-
</div>
192-
193-
<div>
194-
<h4 class="font-bold text-gray-800 mb-2">
195-
Types of Content Accepted
196-
</h4>
197-
<ul class="list-disc list-inside space-y-1 text-xs">
198-
<li>
199-
Platforms, websites, and tools that offer
200-
interactive learning
201-
</li>
202-
<li>
203-
Collections of educational content, such as
204-
YouTube channels or book series
205-
</li>
206-
<li>
207-
Guides or repositories that serve as
208-
long-term learning hubs
209-
</li>
210-
<li>
211-
Newsletters that consistently release
212-
content to date
213-
</li>
214-
<li>
215-
Organizations that can provide software
216-
career advising
217-
</li>
218-
</ul>
219-
<p class="mt-2 text-xs">
220-
Anything to help people learn more about
221-
software: from hardware, system design, to
222-
project management. The more specialized the
223-
resources are, the better.
224-
</p>
225-
</div>
226-
227-
<div>
228-
<h4 class="font-bold text-gray-800 mb-2">
229-
Exceptions
230-
</h4>
231-
<ul class="list-disc list-inside space-y-1 text-xs">
232-
<li>
233-
An individual book may be included if it is
234-
exceptionally well-regarded and widely
235-
recommended as a foundational resource
236-
</li>
237-
<li>
238-
Entertainment streamers and YouTubers can be
239-
included given that they are very popular
240-
whilst still informative
241-
</li>
242-
<li>
243-
Do not post your paid courses unless they
244-
are well received - this is not a platform
245-
to advertise unwanted courses
246-
</li>
247-
</ul>
248-
</div>
249-
250-
<div>
251-
<h4 class="font-bold text-gray-800 mb-2">
252-
What's Not Included
253-
</h4>
254-
<ul class="list-disc list-inside space-y-1 text-xs">
255-
<li>
256-
Standalone videos, single blog posts, or
257-
one-off articles
258-
</li>
259-
<li>
260-
Resources that are too broad and do not
261-
contain a singular focus
262-
</li>
263-
<li>
264-
Things not related to learning about
265-
computer science or software engineering
266-
</li>
267-
<li>
268-
Lifestyle or personal finance content
269-
(beyond reasonable project management)
270-
</li>
271-
</ul>
272-
<p class="mt-2 text-xs italic">
273-
In the end, we trust you to be reasonable.
274-
</p>
275-
</div>
276-
</div>
277-
</div>
278285
</div>
279286
</main>
280287
</AppLayout>

‎resources/js/Pages/Resources/Form/TagsFields.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,13 +46,13 @@ watch(
4646
>
4747
<div class="flex flex-col gap-1 justify-center items-center">
4848
<!-- Tag Selector for Programming Languages -->
49-
<h2 class="text-2xl font-bold mb-4 text-center">
49+
<h2 class="text-2xl font-bold mb-1 text-center">
5050
What Programming Languages are used (if any)?
5151
</h2>
5252
<TagSelector v-model="props.form.programming_language_tags" />
5353

5454
<!-- Tag Selector for Other tags -->
55-
<h2 class="text-2xl font-bold mb-4 text-center">
55+
<h2 class="text-2xl font-bold mb-1 text-center">
5656
What else is it related to?
5757
</h2>
5858
<TagSelector v-model="props.form.general_tags" />

‎resources/js/Pages/Resources/Index.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const props = defineProps({
1616
<AppLayout title="Computer Science Resources">
1717
<div class="max-w-[90vw] mx-auto sm:px-6 lg:px-10 py-4">
1818
<!-- Filter bar -->
19-
<FilterBar></FilterBar>
19+
<FilterBar/>
2020

2121
<div class="flex flex-col lg:flex-row gap-4">
2222
<!-- Resources Section -->

0 commit comments

Comments
 (0)