Skip to content

Commit dba4f8f

Browse files
smattymattysmattymatty
committed
fixed buttons on home page
1 parent c1f26af commit dba4f8f

File tree

19 files changed

+537
-103
lines changed

19 files changed

+537
-103
lines changed

‎BaseApp/logs/views.log

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,140 @@
11
2024-05-30T23:47:24.845475-0400 -- DEBUG -- get_tailwind_info -- line 36
22
get_tailwind_info
3+
2024-06-01T22:24:39.344288-0400 -- DEBUG -- get_tailwind_info -- line 36
4+
get_tailwind_info
5+
2024-06-01T22:47:59.620477-0400 -- DEBUG -- get_tailwind_info -- line 36
6+
get_tailwind_info
7+
2024-06-01T22:48:25.124649-0400 -- DEBUG -- get_tailwind_info -- line 36
8+
get_tailwind_info
9+
2024-06-01T22:48:26.060931-0400 -- DEBUG -- get_tailwind_info -- line 36
10+
get_tailwind_info
11+
2024-06-01T22:48:27.917063-0400 -- DEBUG -- get_tailwind_info -- line 36
12+
get_tailwind_info
13+
2024-06-01T22:48:28.774104-0400 -- DEBUG -- get_tailwind_info -- line 36
14+
get_tailwind_info
15+
2024-06-01T22:48:29.702503-0400 -- DEBUG -- get_tailwind_info -- line 36
16+
get_tailwind_info
17+
2024-06-01T22:49:21.792967-0400 -- DEBUG -- get_tailwind_info -- line 36
18+
get_tailwind_info
19+
2024-06-01T22:49:23.928679-0400 -- DEBUG -- get_tailwind_info -- line 36
20+
get_tailwind_info
21+
2024-06-01T22:50:20.868740-0400 -- DEBUG -- get_tailwind_info -- line 36
22+
get_tailwind_info
23+
2024-06-01T22:50:22.596449-0400 -- DEBUG -- get_tailwind_info -- line 36
24+
get_tailwind_info
25+
2024-06-01T22:50:23.256879-0400 -- DEBUG -- get_tailwind_info -- line 36
26+
get_tailwind_info
27+
2024-06-01T22:50:23.892176-0400 -- DEBUG -- get_tailwind_info -- line 36
28+
get_tailwind_info
29+
2024-06-01T22:50:24.512425-0400 -- DEBUG -- get_tailwind_info -- line 36
30+
get_tailwind_info
31+
2024-06-01T22:50:25.089875-0400 -- DEBUG -- get_tailwind_info -- line 36
32+
get_tailwind_info
33+
2024-06-01T22:50:26.101863-0400 -- DEBUG -- get_tailwind_info -- line 36
34+
get_tailwind_info
35+
2024-06-01T22:50:32.402563-0400 -- DEBUG -- get_tailwind_info -- line 36
36+
get_tailwind_info
37+
2024-06-01T22:50:33.758556-0400 -- DEBUG -- get_tailwind_info -- line 36
38+
get_tailwind_info
39+
2024-06-01T22:50:34.416191-0400 -- DEBUG -- get_tailwind_info -- line 36
40+
get_tailwind_info
41+
2024-06-01T22:50:35.163914-0400 -- DEBUG -- get_tailwind_info -- line 36
42+
get_tailwind_info
43+
2024-06-01T22:50:36.661929-0400 -- DEBUG -- get_tailwind_info -- line 36
44+
get_tailwind_info
45+
2024-06-01T22:50:37.433329-0400 -- DEBUG -- get_tailwind_info -- line 36
46+
get_tailwind_info
47+
2024-06-01T22:50:37.986480-0400 -- DEBUG -- get_tailwind_info -- line 36
48+
get_tailwind_info
49+
2024-06-01T22:50:38.669091-0400 -- DEBUG -- get_tailwind_info -- line 36
50+
get_tailwind_info
51+
2024-06-01T22:50:39.252367-0400 -- DEBUG -- get_tailwind_info -- line 36
52+
get_tailwind_info
53+
2024-06-01T22:50:39.887234-0400 -- DEBUG -- get_tailwind_info -- line 36
54+
get_tailwind_info
55+
2024-06-01T22:50:41.276559-0400 -- DEBUG -- get_tailwind_info -- line 36
56+
get_tailwind_info
57+
2024-06-01T22:51:13.295622-0400 -- DEBUG -- get_tailwind_info -- line 36
58+
get_tailwind_info
59+
2024-06-01T22:51:14.762359-0400 -- DEBUG -- get_tailwind_info -- line 36
60+
get_tailwind_info
61+
2024-06-01T22:51:19.572488-0400 -- DEBUG -- get_tailwind_info -- line 36
62+
get_tailwind_info
63+
2024-06-01T22:51:22.094267-0400 -- DEBUG -- get_tailwind_info -- line 36
64+
get_tailwind_info
65+
2024-06-01T22:51:23.759835-0400 -- DEBUG -- get_tailwind_info -- line 36
66+
get_tailwind_info
67+
2024-06-01T22:51:25.117099-0400 -- DEBUG -- get_tailwind_info -- line 36
68+
get_tailwind_info
69+
2024-06-01T22:51:26.340427-0400 -- DEBUG -- get_tailwind_info -- line 36
70+
get_tailwind_info
71+
2024-06-01T22:51:27.112049-0400 -- DEBUG -- get_tailwind_info -- line 36
72+
get_tailwind_info
73+
2024-06-01T22:51:27.962134-0400 -- DEBUG -- get_tailwind_info -- line 36
74+
get_tailwind_info
75+
2024-06-01T22:51:28.940125-0400 -- DEBUG -- get_tailwind_info -- line 36
76+
get_tailwind_info
77+
2024-06-01T22:51:29.673406-0400 -- DEBUG -- get_tailwind_info -- line 36
78+
get_tailwind_info
79+
2024-06-01T22:51:30.314814-0400 -- DEBUG -- get_tailwind_info -- line 36
80+
get_tailwind_info
81+
2024-06-01T22:51:31.206781-0400 -- DEBUG -- get_tailwind_info -- line 36
82+
get_tailwind_info
83+
2024-06-01T22:51:31.949283-0400 -- DEBUG -- get_tailwind_info -- line 36
84+
get_tailwind_info
85+
2024-06-01T22:51:32.921004-0400 -- DEBUG -- get_tailwind_info -- line 36
86+
get_tailwind_info
87+
2024-06-01T22:51:33.676322-0400 -- DEBUG -- get_tailwind_info -- line 36
88+
get_tailwind_info
89+
2024-06-01T22:51:34.646339-0400 -- DEBUG -- get_tailwind_info -- line 36
90+
get_tailwind_info
91+
2024-06-01T22:51:38.390446-0400 -- DEBUG -- get_tailwind_info -- line 36
92+
get_tailwind_info
93+
2024-06-01T23:01:47.686153-0400 -- DEBUG -- get_tailwind_info -- line 36
94+
get_tailwind_info
95+
2024-06-01T23:01:48.475523-0400 -- DEBUG -- get_tailwind_info -- line 36
96+
get_tailwind_info
97+
2024-06-01T23:01:49.275269-0400 -- DEBUG -- get_tailwind_info -- line 36
98+
get_tailwind_info
99+
2024-06-01T23:01:50.042123-0400 -- DEBUG -- get_tailwind_info -- line 36
100+
get_tailwind_info
101+
2024-06-01T23:01:50.681579-0400 -- DEBUG -- get_tailwind_info -- line 36
102+
get_tailwind_info
103+
2024-06-01T23:01:51.723002-0400 -- DEBUG -- get_tailwind_info -- line 36
104+
get_tailwind_info
105+
2024-06-01T23:01:52.635052-0400 -- DEBUG -- get_tailwind_info -- line 36
106+
get_tailwind_info
107+
2024-06-01T23:01:53.196243-0400 -- DEBUG -- get_tailwind_info -- line 36
108+
get_tailwind_info
109+
2024-06-01T23:01:53.717539-0400 -- DEBUG -- get_tailwind_info -- line 36
110+
get_tailwind_info
111+
2024-06-01T23:01:54.233953-0400 -- DEBUG -- get_tailwind_info -- line 36
112+
get_tailwind_info
113+
2024-06-01T23:01:54.708441-0400 -- DEBUG -- get_tailwind_info -- line 36
114+
get_tailwind_info
115+
2024-06-01T23:01:55.215360-0400 -- DEBUG -- get_tailwind_info -- line 36
116+
get_tailwind_info
117+
2024-06-01T23:02:05.599364-0400 -- DEBUG -- get_blog_post_list -- line 36
118+
page_number=1, search_query=''
119+
2024-06-01T23:02:08.607326-0400 -- DEBUG -- get_blog_post_list -- line 36
120+
page_number=2, search_query=''
121+
2024-06-01T23:02:35.708010-0400 -- DEBUG -- get_blog_post_list -- line 36
122+
page_number=3, search_query=''
123+
2024-06-01T23:02:38.706979-0400 -- DEBUG -- get_blog_post_list -- line 36
124+
page_number=4, search_query=''
125+
2024-06-01T23:02:44.151092-0400 -- DEBUG -- get_blog_post_list -- line 36
126+
page_number=5, search_query=''
127+
2024-06-01T23:02:51.606581-0400 -- DEBUG -- get_blog_post_list -- line 36
128+
page_number=6, search_query=''
129+
2024-06-01T23:04:13.685913-0400 -- DEBUG -- get_blog_post_list -- line 36
130+
page_number=1, search_query=''
131+
2024-06-01T23:04:14.197502-0400 -- DEBUG -- get_blog_post_list -- line 36
132+
page_number=2, search_query=''
133+
2024-06-01T23:04:14.482624-0400 -- DEBUG -- get_blog_post_list -- line 36
134+
page_number=3, search_query=''
135+
2024-06-01T23:05:09.993520-0400 -- DEBUG -- get_blog_post_list -- line 36
136+
page_number=1, search_query=''
137+
2024-06-01T23:05:10.279500-0400 -- DEBUG -- get_blog_post_list -- line 36
138+
page_number=2, search_query=''
139+
2024-06-01T23:05:10.455415-0400 -- DEBUG -- get_blog_post_list -- line 36
140+
page_number=3, search_query=''

‎BaseApp/static/BaseApp/button_handlers.mjs

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,9 +88,19 @@ ToggledButtonGroup.initAll = function (groupFilter = "") {
8888
// Use this to Initialize all button groups
8989
// with an empty string, it will check for all elements with the ID ending in "-button-group"
9090
// given a string as argument, it will only check for elements with the ID ending in "-button-group" and the string
91+
// if the string includes spaces, it will split the string and call itself recursively
9192
let selector = "[id$='-button-group']";
9293
if (groupFilter) {
93-
selector = `#${groupFilter}-button-group`;
94+
if (groupFilter.includes(" ")) {
95+
//split into an array of strings
96+
const groupFilterList = groupFilter.split(" ");
97+
groupFilterList.forEach((groupFilter) => {
98+
// call self recursively
99+
ToggledButtonGroup.initAll(groupFilter);
100+
});
101+
} else {
102+
selector = `#${groupFilter}-button-group`;
103+
}
94104
}
95105
// ERROR CHECKING
96106
const groups = document.querySelectorAll(selector);

‎BaseApp/static/BaseApp/strategies.mjs

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
export const initialActiveStrategies = {
2-
first: (items) => items[0] || console.error("No first item found"),
3-
last: (items) =>
4-
items[items.length - 1] || console.error("No last item found"),
5-
none: (items) => null,
6-
random: (items) =>
7-
items[Math.floor(Math.random() * items.length)] ||
8-
console.error("No random item found"),
2+
first: (items) => items[0] || console.error("No first item found"),
3+
last: (items) =>
4+
items[items.length - 1] || console.error("No last item found"),
5+
none: (items) => null,
6+
random: (items) =>
7+
items[Math.floor(Math.random() * items.length)] ||
8+
console.error("No random item found"),
99
};
1010
// Dynamically generate strategies for specific indices
1111
for (let i = 1; i <= 100; i++) {
12-
initialActiveStrategies[i] = (items) =>
13-
items[i - 1] || console.error(`No button at index ${i} found`);
12+
initialActiveStrategies[i] = (items) =>
13+
items[i - 1] || console.error(`No button at index ${i} found`);
14+
// TODO: add strategy to search for button by text content
1415
}

‎BaseApp/templates/BaseApp/home/sections/tech_info.html

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,34 @@
1+
{% load static %}
12
<div hx-get="{% url 'BaseApp:django-info' %}"
23
hx-target="#home-tech-info-output"
34
hx-swap="innerHTML"
45
hx-trigger="load"
56
class="hidden"></div>
67
<div class="bg-black/10 text-center bg-gradient-to-b from-black/20 from-0% via-blue-300/5 via-5% to-black/20 to-50%">
78
<span class="text-sm text-white/30">Click to learn more about technologies used on this website</span>
8-
<div id="tech-info-buttons-container"
9-
class="flex gap-4 py-2 w-full justify-evenly">
9+
<div id="tech-info-button-group"
10+
data-active-class="bg-black/50 hover:bg-black/50 font-bold text-white border-b-4 border-white/20"
11+
data-initial-active="first"
12+
class="flex gap-4 p-2 px-6 w-full justify-evenly">
1013
<button id="django-info-button"
1114
hx-get="{% url 'BaseApp:django-info' %}"
1215
hx-target="#home-tech-info-output"
1316
hx-swap="innerHTML"
14-
class="text-sm md:text-base lg:text-lg px-4 sm:px-4 md:px-8 lg:px-12 py-2 md:py-4 border-x border-white/10 rounded-md transition-all duration-300 ease-linear bg-black/20 hover:bg-black/30">
17+
class="flex-grow w-full text-base lg:text-lg px-4 md:px-8 py-4 border-x border-white/10 rounded-md transition-all duration-100 ease-linear bg-black/20 hover:bg-black/30">
1518
Django
1619
</button>
1720
<button id="tailwind-info-button"
1821
hx-get="{% url 'BaseApp:tailwind-info' %}"
1922
hx-target="#home-tech-info-output"
2023
hx-swap="innerHTML"
21-
class="text-sm md:text-base lg:text-lg px-4 sm:px-4 md:px-8 lg:px-12 py-4 border-x border-white/10 rounded-md transition-all duration-300 ease-linear bg-black/20 hover:bg-black/30">
24+
class="flex-grow w-full text-base lg:text-lg px-4 md:px-8 py-4 border-x border-white/10 rounded-md transition-all duration-100 ease-linear bg-black/20 hover:bg-black/30">
2225
TailwindCSS
2326
</button>
2427
<button id="htmx-info-button"
2528
hx-get="{% url 'BaseApp:htmx-info' %}"
2629
hx-target="#home-tech-info-output"
2730
hx-swap="innerHTML"
28-
class="text-sm md:text-base lg:text-lg px-4 sm:px-4 md:px-8 lg:px-12 py-2 md:py-4 border-x border-white/10 rounded-md transition-all duration-300 ease-linear bg-black/20 hover:bg-black/30">
31+
class="flex-grow w-full text-base lg:text-lg px-4 md:px-8 py-4 border-x border-white/10 rounded-md transition-all duration-100 ease-linear bg-black/20 hover:bg-black/30">
2932
HTMX
3033
</button>
3134
</div>
@@ -34,3 +37,6 @@
3437
id="home-tech-info-output"></div>
3538
</div>
3639
</div>
40+
<script type="module">import { ToggledButtonGroup } from "{% static 'BaseApp/button_handlers.mjs' %}";
41+
ToggledButtonGroup.initAll("tech-info")
42+
</script>

‎BaseApp/templates/BaseApp/ui_elements/sections/buttons_examples.html

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ <h4 class="text-lg font-bold text-center">
66
Responsive Row/Column of Buttons, toggled active, uniform size, initial first, dark theme
77
</h4>
88
<div id="example-button-group"
9-
data-active-class="bg-black/50 hover:bg-black/50 font-bold text-white"
10-
data-initial-active="3"
9+
data-active-class="bg-black/50 hover:bg-black/50 font-bold text-white border-b-4 border-white/20"
10+
data-initial-active="first"
1111
class="flex flex-col md:flex-row gap-2 justify-center">
1212
<button class="flex-grow w-full text-base lg:text-lg px-4 md:px-8 py-4 border-x border-white/10 rounded-md transition-all duration-100 ease-linear bg-black/20 hover:bg-black/30">
1313
Button
@@ -31,7 +31,7 @@ <h4 class="text-lg font-bold text-center text-black/70">
3131
Responsive Buttons, toggled active, various sizes, initial random, light theme
3232
</h4>
3333
<div id="example2-button-group"
34-
data-active-class="bg-white hover:bg-white font-bold text-black"
34+
data-active-class="bg-white hover:bg-white font-bold text-black border-b-4 border-black/60"
3535
data-initial-active="random"
3636
class="flex flex-wrap gap-2 justify-center transition-all duration-300 ease-linear">
3737
<button class="flex-grow w-1/3 text-black/70 text-base lg:text-lg px-4 md:px-8 py-4 border-x border-black/50 rounded-md transition-all duration-100 ease-linear bg-black/20 hover:bg-black/30">
@@ -52,7 +52,8 @@ <h4 class="text-lg font-bold text-center text-black/70">
5252
</div>
5353
</div>
5454
</div>
55+
// TODO: add MultiButtonGroup example with multiple buttons active at once
5556
<script type="module">import { ToggledButtonGroup } from "{% static 'BaseApp/button_handlers.mjs' %}";
56-
ToggledButtonGroup.initAll("example")
57-
ToggledButtonGroup.initAll("example2")
57+
ToggledButtonGroup.initAll("example example2")
58+
// TODO: allow multiple groups in one function call
5859
</script>

0 commit comments

Comments
 (0)