Skip to content

Commit f035b1d

Browse files
recursivezerorecursivezero
authored
Feature/RZA-250128: Refactor the India , Blog and Draw page (#134)
2 parents 6f45e1d + e9f7499 commit f035b1d

File tree

17 files changed

+909
-591
lines changed

17 files changed

+909
-591
lines changed

‎public/assets/images/blog/blog-3.png‎

4.37 MB
Loading

‎public/assets/images/dance.png‎

6.72 MB
Loading

‎src/assets/styles/map/map.css‎

Lines changed: 10 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -19,20 +19,13 @@
1919
color: var(--text);
2020
}
2121

22-
.explore-header {
23-
margin-bottom: 2rem;
24-
}
25-
26-
.explore-header h1 {
27-
font-size: 1.5rem;
28-
font-weight: bold;
29-
color: var(--text);
30-
}
31-
3222
.explore-grid {
33-
display: grid;
34-
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
23+
display: flex;
24+
flex-wrap: wrap;
25+
justify-content: center;
26+
align-items: flex-start;
3527
gap: 1.5rem;
28+
padding: 1rem;
3629
}
3730

3831
.explore-card {
@@ -47,6 +40,7 @@
4740
transition: box-shadow 0.2s ease;
4841
border-top-left-radius: 10%;
4942
border-top-right-radius: 10%;
43+
flex-shrink: 0;
5044
}
5145

5246
.explore-card:hover {
@@ -58,13 +52,11 @@
5852
width: 100%;
5953
aspect-ratio: 16/9;
6054
overflow: hidden;
61-
border-top-left-radius: 10%;
62-
border-top-right-radius: 10%;
6355
}
6456

6557
.card-image img {
6658
width: 100%;
67-
height: 100%;
59+
height: 140%;
6860
object-fit: cover;
6961
}
7062

@@ -104,9 +96,11 @@
10496
.explore-container {
10597
padding: 1rem;
10698
}
99+
107100
.explore-card {
108101
width: 18rem;
109102
}
103+
110104
.explore-grid {
111105
grid-template-columns: 1fr;
112106
}
@@ -176,4 +170,4 @@
176170
fill: #ffa500;
177171
transform: scale(1);
178172
}
179-
}
173+
}

‎src/components/ControllerContainer.astro‎

Lines changed: 85 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,94 @@
11
---
2-
import ImageIcon from "@/assets/icons/image.svg";
2+
import CaseToggle from "@/components/draw/CaseToggle.astro";
3+
import FontToggle from "@/components/draw/FontToggle.astro";
4+
import ImageToggle from "@/components/draw/ImgToggle.astro";
5+
import ColorToggle from "@/components/draw/ColorToggle.astro";
6+
import BackgroundToggle from "@/components/draw/BgToggle.astro";
7+
import ResetButton from "@/components/draw/ResetButton.astro";
8+
import SharePopover from "@/components/ShareButton.astro";
9+
import Help from "@/components/Help.astro";
10+
import Speak from "@/components/Speaker.astro";
311
---
412

513
<div class="controls-container">
614
<div class="controls">
7-
<label for="toggleCase" class="control-item" data-tooltip="Toggle case">
8-
<input type="checkbox" name="change_case" id="toggleCase" class="visually-hidden hidden" />
9-
<span
10-
id="text"
11-
class="control-button case-toggle"
12-
role="switch"
13-
aria-checked="false"
14-
tabindex="0"
15-
aria-label="Toggle case">Aa</span
16-
>
17-
</label>
18-
<label for="toggleFont" class="control-item" data-tooltip="Toggle font">
19-
<input type="checkbox" name="toggle_font" id="toggleFont" class="visually-hidden hidden" />
20-
<span
21-
id="font"
22-
class="control-button font-toggle"
23-
role="switch"
24-
aria-checked="false"
25-
tabindex="0"
26-
aria-label="Toggle font"
27-
>
28-
<span class="font-icon">F</span>
29-
</span>
30-
</label>
15+
<Speak />
16+
<CaseToggle />
17+
<FontToggle />
18+
3119
<div class="control-group">
32-
<label for="toggleImg" class="control-item" data-tooltip="Toggle Image">
33-
<input type="checkbox" name="toggle_img" id="toggleImg" class="visually-hidden hidden" />
34-
<span
35-
id="img"
36-
class="control-button img-toggle"
37-
role="switch"
38-
aria-checked="false"
39-
tabindex="0"
40-
aria-label="Toggle Image"
41-
>
42-
<ImageIcon class="img-icon" />
43-
</span>
44-
</label>
45-
<label for="toggleColor" class="control-item" data-tooltip="Toggle Font Color">
46-
<input type="checkbox" name="toggle_color" id="toggleColor" class="visually-hidden hidden" />
47-
<span
48-
class="control-button color-toggle"
49-
role="switch"
50-
aria-checked="false"
51-
tabindex="0"
52-
aria-label="Toggle Font Color"
53-
>
54-
<span class="color-icon">T</span>
55-
</span>
56-
</label>
57-
</div>
58-
<label for="toggleBg" class="control-item" data-tooltip="Toggle background">
59-
<input type="checkbox" name="change_bg" id="toggleBg" class="visually-hidden hidden" />
60-
<span
61-
class="control-button bg-toggle"
62-
role="switch"
63-
aria-checked="false"
64-
tabindex="0"
65-
aria-label="Toggle background"
66-
>
67-
<span class="bg-icon">🎨</span>
68-
</span>
69-
</label>
70-
<div class="control-item" data-tooltip="Reset all">
71-
<button class="control-button reset-button" id="resetButton" tabindex="0" aria-label="Reset all">↻</button>
20+
<ImageToggle />
21+
<ColorToggle />
7222
</div>
23+
24+
<BackgroundToggle />
25+
<ResetButton />
7326
</div>
27+
28+
<SharePopover />
29+
<Help
30+
title="Draw Keyboard"
31+
description="Draw letters by sliding your finger across the keys! Try the buttons to change the style, make it BIG or small, change the images, pick cool backgrounds, and customize font colors!"
32+
/>
7433
</div>
75-
<script type="module" src="/controller-container.js" is:inline></script>
34+
35+
<script>
36+
document.addEventListener("DOMContentLoaded", () => {
37+
const controlButtons = document.querySelectorAll(".control-button");
38+
let isKeyboardNav = false;
39+
controlButtons.forEach((button) => {
40+
button.addEventListener("focus", () => {
41+
if (isKeyboardNav) {
42+
controlButtons.forEach((btn) => btn.classList.remove("keyboard-focus"));
43+
button.classList.add("keyboard-focus");
44+
}
45+
});
46+
button.addEventListener("blur", () => {
47+
button.classList.remove("keyboard-focus");
48+
});
49+
button.addEventListener("mousedown", () => {
50+
isKeyboardNav = false;
51+
button.classList.remove("keyboard-focus");
52+
});
53+
button.addEventListener("keydown", (event) => {
54+
if ((event as KeyboardEvent).key === "Tab") {
55+
isKeyboardNav = true;
56+
}
57+
});
58+
});
59+
document.addEventListener("mousedown", () => {
60+
isKeyboardNav = false;
61+
controlButtons.forEach((btn) => btn.classList.remove("keyboard-focus"));
62+
});
63+
document.addEventListener("keydown", (event) => {
64+
const e = event as KeyboardEvent;
65+
if (e.key === "Tab") {
66+
isKeyboardNav = true;
67+
}
68+
const key = e.key;
69+
if (key.length === 1 && /[a-z]/i.test(key)) {
70+
if (window.playLetterSound) {
71+
window.playLetterSound(key.toLowerCase());
72+
}
73+
}
74+
});
75+
document.addEventListener("caseToggled", (event) => {
76+
const { isActive } = (event as CustomEvent).detail;
77+
});
78+
document.addEventListener("fontToggled", (event) => {
79+
const { isActive } = (event as CustomEvent).detail;
80+
});
81+
document.addEventListener("imageToggled", (event) => {
82+
const { isActive } = (event as CustomEvent).detail;
83+
});
84+
document.addEventListener("colorToggled", (event) => {
85+
const { isActive } = (event as CustomEvent).detail;
86+
});
87+
document.addEventListener("backgroundToggled", (event) => {
88+
const { isActive } = (event as CustomEvent).detail;
89+
});
90+
document.addEventListener("keyboardReset", (event) => {
91+
const { originalState } = (event as CustomEvent).detail;
92+
});
93+
});
94+
</script>

‎src/components/DrawKeyboard.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -485,7 +485,7 @@ import Keyboard from "@/components/Keyboard.astro";
485485
width: 100%;
486486
max-width: 1500px;
487487
gap: 2rem;
488-
margin-bottom: 1rem;
488+
margin-bottom: 1.5rem;
489489
position: relative;
490490
}
491491

0 commit comments

Comments
 (0)