Skip to content

Commit 938ead3

Browse files
cheddZycheddZy
committed
i made the filter work yippie
1 parent 46ed689 commit 938ead3

File tree

6 files changed

+278
-53
lines changed

6 files changed

+278
-53
lines changed

‎src/components/Content.astro

+209-19
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,148 @@
11
---
22
import '../styles/styles.scss';
33
import '../styles/globals.scss';
4-
import Filter from "./ui/Filter.astro";
5-
import Placeholder from "./Placeholder.astro";
64
---
5+
<script>
6+
let filters = new Set();
7+
let buttons = document.querySelectorAll('.filterButton');
8+
let items = document.querySelectorAll('.item');
9+
let showAll = document.getElementById('filterAll');
710

11+
//filter button listener
12+
for (const btn of buttons) {
13+
btn.addEventListener('click', () => {
14+
if (btn.classList.contains('active')) {
15+
btn.classList.remove('active');
16+
filters.delete(btn.innerHTML.toLowerCase());
17+
} else {
18+
btn.classList.add('active');
19+
filters.add(btn.innerHTML.toLowerCase());
20+
}
21+
22+
console.log(filters);
23+
24+
if (showAll.classList.contains('active')) {
25+
showAll.classList.remove('active');
26+
} else if(filters.size == 0) {
27+
showAll.classList.add('active');
28+
showAllItems();
29+
}
30+
updateList();
31+
})
32+
}
33+
34+
// showAll listener
35+
showAll.addEventListener('click', () => {
36+
if (showAll.classList.contains('active')) {
37+
showAll.classList.remove('active');
38+
}
39+
else {
40+
showAll.classList.add('active');
41+
filters.clear();
42+
showAllItems();
43+
}
44+
console.log(filters);
45+
46+
for(const btn of buttons) {
47+
if(filters.size === 0) {
48+
btn.classList.remove('active');
49+
showAll.classList.add('active');
50+
showAllItems();
51+
} else {
52+
53+
}
54+
}
55+
updateList();
56+
})
57+
58+
function updateList() {
59+
if(filters.size === 0) {
60+
showAllItems();
61+
} else {
62+
for (const item of items) {
63+
items.forEach(item => {
64+
const itemText = item.textContent.trim();
65+
if (filters.has(itemText)) {
66+
console.log(itemText);
67+
item.classList.add('show');
68+
item.classList.remove('hide');
69+
} else {
70+
item.classList.add('hide');
71+
item.classList.remove('show');
72+
}
73+
});
74+
}
75+
}
76+
}
77+
function showAllItems() {
78+
for(const item of items) {
79+
item.classList.add('show');
80+
item.classList.remove('hide');
81+
}
82+
}
83+
84+
85+
</script>
886

987
<section>
1088
<div id="filterList">
11-
<Filter/>
12-
</div>
13-
<div id="favorites">
14-
<Placeholder />
15-
<Placeholder />
16-
<Placeholder />
17-
<Placeholder />
89+
<div>
90+
<section class="filterMenu">
91+
<h3>Filter</h3>
92+
<div class="filterButtonList">
93+
<button class="active" id="filterAll">All</button>
94+
</div>
95+
<div class="filterButtonList">
96+
<button class='filterButton' aria-label='Inspiration contentt'>Inspiration</button>
97+
<button class='filterButton' aria-label='Personal websites, portfolios, blogs'>Personal</button>
98+
<button class='filterButton' aria-label='Commerce tools'>Commerce</button>
99+
<button class='filterButton' aria-label='Resources'>Resources</button>
100+
<button class='filterButton' aria-label='Free resources'>Free</button>
101+
</div>
102+
</section>
103+
</div>
18104
</div>
19-
<div id="content">
20-
<Placeholder />
21-
<Placeholder />
22-
<Placeholder />
105+
<div id="contentWrap">
106+
<p class="item show free">free</p>
107+
<p class="item show free">free</p>
108+
<p class="item show inspiration">inspiration</p>
109+
<p class="item show free">free</p>
110+
<p class="item show commerce">commerce</p>
111+
<p class="item show free">free</p>
112+
<p class="item show free">free</p>
113+
<p class="item show inspiration">inspiration</p>
114+
<p class="item show free">free</p>
115+
<p class="item show free">free</p>
116+
23117
</div>
24118
</section>
25119

26120

27121
<style>
28-
#content {
29-
display: flex;
30-
flex-direction: row;
31-
justify-content: space-between;
32-
flex-wrap: wrap;
122+
#contentWrap {
123+
display: grid;
124+
grid-template-columns: 1fr 1fr 1fr 1fr;
125+
grid-template-rows: auto;
126+
gap: 1rem;
33127
margin-inline: 4%;
34128
}
129+
130+
.hide {
131+
display: none;
132+
}
133+
134+
.contentBlock.hide {
135+
display: none;
136+
}
137+
35138
#favorites {
36139
display: flex;
37140
flex-direction: row;
38141
justify-content: space-between;
39142
flex-wrap: wrap;
40143
margin-inline: 4%;
41144
}
145+
42146
section {
43147
display: flex;
44148
flex-direction: column;
@@ -48,7 +152,7 @@ import Placeholder from "./Placeholder.astro";
48152
#filterList {
49153
top: 0;
50154
position: sticky;
51-
margin:auto;
155+
margin: auto;
52156
max-width: 1200px;
53157
display: flex;
54158
flex-direction: column;
@@ -57,4 +161,90 @@ import Placeholder from "./Placeholder.astro";
57161
align-items: center;
58162
}
59163

164+
.filterButtonList {
165+
align-items: center;
166+
display: flex;
167+
flex-direction: row;
168+
gap: 0.5rem;
169+
flex-wrap: wrap;
170+
background-color: #d1def6;
171+
border: #3574F0 1px solid;
172+
@apply rounded-lg;
173+
padding: 0.5rem 1rem;
174+
}
175+
176+
177+
.filterMenu {
178+
min-height: 50px;
179+
width: 100%;
180+
align-items: center;
181+
display: flex;
182+
position: sticky;
183+
flex-direction: row;
184+
justify-content: space-between;
185+
gap: 0.5rem;
186+
overflow-x: clip;
187+
}
188+
189+
190+
svg {
191+
height: 1.5rem;
192+
color: #3574F0;
193+
}
194+
195+
h3 {
196+
display: none;
197+
font-size: 1rem !important;
198+
}
199+
200+
@media screen and (max-width: 800px) {
201+
section {
202+
flex-direction: row;
203+
padding: 1rem;
204+
border-radius: 0;
205+
}
206+
207+
}
208+
209+
210+
.filterButton, #filterAll {
211+
display: flex;
212+
}
213+
214+
.filterButton, #filterAll {
215+
@apply px-3;
216+
@apply py-1;
217+
@apply rounded-full;
218+
@apply transition-colors;
219+
@apply duration-100;
220+
221+
font-size: 0.9rem;
222+
font-weight: 500;
223+
color: rgb(9, 32, 128);
224+
border: 1px transparent solid;
225+
}
226+
227+
.filterButton, #filterAll {
228+
//color: red !important;
229+
}
230+
231+
.filterButton:hover, #filterAll:hover {
232+
border: 1px #3574F0 solid;
233+
}
234+
235+
.filterButton:active, #filterAll:active {
236+
color: #F0F1F2;
237+
font-weight: 500;
238+
background-color: #3574F0;
239+
border: 1px transparent solid;
240+
}
241+
242+
.filterButton.active, #filterAll.active {
243+
color: #F0F1F2;
244+
font-weight: 500;
245+
background-color: #3574F0;
246+
border: 1px transparent solid;
247+
}
248+
249+
60250
</style>

‎src/components/HeaderAlert.astro

+3-5
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,6 @@ import '../styles/globals.scss'
1717
}, 300)
1818
localStorage.setItem('alertBox', 'dismissed');
1919
})
20-
21-
2220
</script>
2321

2422
<div id="alertContainer">
@@ -73,7 +71,7 @@ import '../styles/globals.scss'
7371
}
7472
svg {
7573
height: 1.5rem;
76-
color: rgba(19, 55, 204, 1);
74+
color: #b66616;
7775
}
7876
p {
7977
display: flex;
@@ -94,8 +92,8 @@ import '../styles/globals.scss'
9492
justify-content: space-between;
9593
margin-inline: 6%;
9694

97-
border: solid 1px #3574F0;
98-
background-color: rgba(62, 96, 238, 0.2);
95+
border: solid 1px #f09335;
96+
background-color: rgba(238, 150, 62, 0.2);
9997
}
10098

10199
p {

‎src/components/Hero.astro

+13-12
Original file line numberDiff line numberDiff line change
@@ -20,18 +20,19 @@ import LogInButton from "./buttons/LogInButton.astro";
2020
End-all-be-all bookmark repository for designers,<br>
2121
featuring a curated list of resources & other cool finds.
2222
</h5>
23-
<div id="signIn">
24-
<SignUpButton
25-
href="/"
26-
target="_blank"
27-
label='Sign up button'
28-
/>
29-
<LogInButton
30-
href="/"
31-
target="_blank"
32-
label='Log in Button'
33-
/>
34-
</div>
23+
<!--TODO: Implement auth-->
24+
<!--<div id="signIn">-->
25+
<!-- <SignUpButton-->
26+
<!-- href="/"-->
27+
<!-- target="_blank"-->
28+
<!-- label='Sign up button'-->
29+
<!-- />-->
30+
<!-- <LogInButton-->
31+
<!-- href="/"-->
32+
<!-- target="_blank"-->
33+
<!-- label='Log in Button'-->
34+
<!-- />-->
35+
<!--</div>-->
3536

3637
</section>
3738

‎src/components/Placeholder.astro

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
---
22
3+
4+
const {label} = Astro.props;
35
---
46

57

68
<div class="wrapper">
79
<div class="blocky animate">
8-
10+
<p>{label}</p>
911
</div>
1012
<div class="texty">
1113
<div class="text animate"></div>

‎src/components/buttons/FilterButton.astro

+5-5
Original file line numberDiff line numberDiff line change
@@ -7,18 +7,18 @@ const {buttonText, label, className} = Astro.props;
77

88
</script>
99

10-
<button class={className} aria-label={label}>
10+
<button class='filterButton' aria-label={label}>
1111
<a>
1212
{buttonText}
1313
</a>
1414
</button>
1515

1616
<style>
17-
button {
17+
.filterButton {
1818
display: flex;
1919
}
2020

21-
a {
21+
.filterButton a {
2222
@apply px-3;
2323
@apply py-1;
2424
@apply rounded-full;
@@ -31,11 +31,11 @@ const {buttonText, label, className} = Astro.props;
3131
border: 1px transparent solid;
3232
}
3333

34-
a:hover {
34+
.filterButton a:hover {
3535
border: 1px #3574F0 solid;
3636
}
3737

38-
a:active {
38+
.filterButton a:active {
3939
color: #F0F1F2;
4040
font-weight: 500;
4141
background-color: #3574F0;

0 commit comments

Comments
 (0)