Skip to content

Commit 87ebfe1

Browse files
YuheshPandianYuheshPandian
authored
Merge pull request #65 from YuheshPandian/main
I have enhanced the gallery page by adding 11 new icons along with a search bar. The addition of the search bar will enable users to easily search for specific icons, making navigation more efficient and user-friendly. This improvement aims to streamline the process of finding icons, ensuring that users can quickly locate what they need.
2 parents 86f1f4f + f435b00 commit 87ebfe1

24 files changed

Lines changed: 4460 additions & 4 deletions

‎api/icons/views.py‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,11 +32,20 @@ def index_page(request):
3232
def icon_gallery_view(request):
3333
base_path = os.path.join(settings.BASE_DIR, "..", "icons")
3434

35+
query = request.GET.get("query", "").lower().strip()
36+
3537
def load_icons(theme):
3638
folder = os.path.join(base_path, theme)
3739
if not os.path.exists(folder):
3840
return []
39-
return sorted([f for f in os.listdir(folder) if f.endswith(".svg")])
41+
42+
icons = sorted([f for f in os.listdir(folder) if f.endswith(".svg")])
43+
if query:
44+
icons = [
45+
icon for icon in icons if query in icon.removesuffix(".svg").lower()
46+
]
47+
48+
return icons
4049

4150
dark_icons = load_icons("dark")
4251
light_icons = load_icons("light")

‎api/templates/icon_gallery.html‎

Lines changed: 75 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
@@ -87,6 +87,50 @@
8787
animation-delay: 0.7s;
8888
}
8989

90+
.search-bar {
91+
display: flex;
92+
align-items: center;
93+
gap: 8px;
94+
background: rgb(27, 66, 66);
95+
width: 100%;
96+
max-width: 500px;
97+
margin: 20px auto;
98+
padding: 10px 14px;
99+
border-radius: 12px;
100+
opacity: 0;
101+
animation: fadeInText 0.7s ease forwards;
102+
animation-delay: 0.7s;
103+
}
104+
105+
.search-bar input {
106+
flex: 1;
107+
min-width: 0;
108+
background: transparent;
109+
outline: none;
110+
border: none;
111+
color: #9ec8b9;
112+
font-size: 18px;
113+
font-family: Inter, sans-serif;
114+
}
115+
.search-bar input::placeholder {
116+
color: #4c7466c9;
117+
}
118+
119+
.search-bar .search-btn {
120+
background: transparent;
121+
border: none;
122+
color: #6b9687;
123+
font-size: 18px;
124+
cursor: pointer;
125+
padding: 4px;
126+
flex-shrink: 0;
127+
}
128+
129+
.search-bar .search-btn:hover {
130+
cursor: pointer;
131+
color: #40685a;
132+
}
133+
90134
.section {
91135
margin-top: 40px;
92136
}
@@ -162,6 +206,9 @@
162206
font-weight: 500;
163207
border-radius: 12px;
164208
cursor: pointer;
209+
opacity: 0;
210+
animation: fadeInText 0.7s ease forwards;
211+
animation-delay: 0.7s;
165212
}
166213

167214
button.toggle-btn:hover {
@@ -258,6 +305,19 @@
258305
font-size: 2.25rem;
259306
}
260307

308+
.search-bar {
309+
max-width: 95%;
310+
padding: 8px 12px;
311+
}
312+
313+
.search-bar input {
314+
font-size: 16px;
315+
}
316+
317+
.search-bar .search-btn {
318+
font-size: 16px;
319+
}
320+
261321
.icon-grid {
262322
gap: 8px;
263323
grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
@@ -323,6 +383,18 @@ <h1>Icon Gallery</h1>
323383
Toggle Icon Theme
324384
</button>
325385

386+
<form action="/gallery/" method="GET" class="search-bar">
387+
<input
388+
type="text"
389+
name="query"
390+
id="search-input"
391+
placeholder="Search Icon"
392+
/>
393+
<button type="submit" class="search-btn">
394+
<i class="fas fa-search"></i>
395+
</button>
396+
</form>
397+
326398
<p
327399
style="
328400
color: #5c8374de;
@@ -338,7 +410,7 @@ <h1>Icon Gallery</h1>
338410
{% for icon in dark_icons %}
339411
<div class="icon-container">
340412
<img src="/dark/{{ icon|cut:'.svg' }}" alt="{{ icon }}" />
341-
<div class="label" onclick="copyLabelText(this,'dark')">
413+
<div class="label" onclick="copyLabelText(this, 'dark')">
342414
{{ icon|cut:'.svg' }}
343415
</div>
344416
</div>
@@ -359,7 +431,7 @@ <h1>Icon Gallery</h1>
359431
/>
360432
<div
361433
class="label"
362-
onclick="copyLabelText(this,'light')"
434+
onclick="copyLabelText(this, 'light')"
363435
style="background: #9ec8b9; color: #092635"
364436
>
365437
{{ icon|cut:'.svg' }}

‎icons/dark/x.svg‎

Lines changed: 83 additions & 0 deletions
Loading

‎icons/dark/xml.svg‎

Lines changed: 89 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)