Skip to content

Commit 8df9879

Browse files
marchsabinomarchsabino
committed
feat: mobile view styling
1 parent 81e5b45 commit 8df9879

8 files changed

Lines changed: 84 additions & 64 deletions

File tree

‎public/scripts/toggle-card.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ function toggleCard(event) {
44
return;
55
}
66

7-
for (const element of card_list.querySelectorAll('.card')) {
7+
for (const element of card_list.querySelectorAll('button')) {
88
element.classList.remove('voted');
99
}
1010
event.target.classList.add('voted');

‎public/styles/main.css‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -247,6 +247,10 @@ button.btn.btn-lg {
247247
font-size: 1.15rem;
248248
}
249249

250+
button.btn.btn-sm {
251+
font-size: 0.9rem;
252+
}
253+
250254
button.outline {
251255
border: var(--default-border);
252256
}
@@ -310,3 +314,11 @@ aside ul {
310314
overflow-y: auto;
311315
max-height: 400px;
312316
}
317+
318+
.cards button {
319+
padding: var(--default-spacing);
320+
background: var(--card-bg);
321+
border-radius: 12px;
322+
border: var(--pill-border);
323+
}
324+

‎public/styles/secondary.css‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -166,6 +166,7 @@ table caption {
166166
padding: 4px 8px;
167167
cursor: default;
168168
border-radius: 8px;
169+
font-size: 1.05rem;
169170
}
170171

171172
.hoverable:hover {
@@ -176,6 +177,20 @@ table caption {
176177
.breakout {
177178
grid-template-columns: 1fr;
178179
}
180+
181+
.breakout aside {
182+
order: 1;
183+
}
184+
185+
.breakout section {
186+
order: 2;
187+
}
188+
189+
.breakout ol button {
190+
font-size: 1.25rem;
191+
width: 132px;
192+
height: 84px;
193+
}
179194
}
180195

181196
@keyframes fadeIn {

‎src/application/breakout_service.rs‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
use std::sync::Arc;
2-
31
use sqlx::SqlitePool;
2+
use std::sync::Arc;
43

54
use crate::{
65
domain::breakout::{Breakout, NewBreakout},

‎src/infrastructure/db/user_repository.rs‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
use std::sync::Arc;
2-
31
use sqlx::{SqlitePool, query_as};
2+
use std::sync::Arc;
43

54
use crate::domain::user::{NewUser, UpdateUser, UserRow};
65

‎src/util/htmx.rs‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,6 @@ impl HTMX {
1111
(StatusCode::OK, headers, "").into_response()
1212
}
1313

14-
pub fn trigger(action: &str) -> impl IntoResponse {
15-
let mut headers = HeaderMap::new();
16-
headers.insert("HX-Trigger", action.parse().unwrap());
17-
(StatusCode::OK, headers, "").into_response()
18-
}
19-
2014
pub fn refresh() -> impl IntoResponse {
2115
let mut headers = HeaderMap::new();
2216
headers.insert("HX-Refresh", "true".parse().unwrap());

‎templates/breakout.html‎

Lines changed: 53 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -11,59 +11,60 @@
1111
<body>
1212
{% include "_partials/navbar.html" %}
1313
<main>
14-
<div class="container">
15-
<section class="breakout" hx-ext="ws" ws-connect="/breakout/{{ breakout.lookup_id }}/ws">
16-
<div>
17-
<ol id="card_list">
18-
<li>
19-
<form ws-send>
20-
<input type="hidden" name="action" value="vote" />
21-
<input type="hidden" name="vote" value="1" />
22-
<button class="card" onclick="toggleCard(event)">1</button>
23-
</form>
24-
</li>
25-
<li>
26-
<form ws-send>
27-
<input type="hidden" name="action" value="vote" />
28-
<input type="hidden" name="vote" value="2" />
29-
<button class="card" onclick="toggleCard(event)">2</button>
30-
</form>
31-
</li>
32-
<li>
33-
<form ws-send>
34-
<input type="hidden" name="action" value="vote" />
35-
<input type="hidden" name="vote" value="3" />
36-
<button class="card" onclick="toggleCard(event)">3</button>
37-
</form>
38-
</li>
39-
<li>
40-
<form ws-send>
41-
<input type="hidden" name="action" value="vote" />
42-
<input type="hidden" name="vote" value="5" />
43-
<button class="card" onclick="toggleCard(event)">5</button>
44-
</form>
45-
</li>
46-
<li>
47-
<form ws-send>
48-
<input type="hidden" name="action" value="vote" />
49-
<input type="hidden" name="vote" value="8" />
50-
<button class="card" onclick="toggleCard(event)">8</button>
51-
</form>
52-
</li>
53-
<li>
54-
<form ws-send>
55-
<input type="hidden" name="action" value="vote" />
56-
<input type="hidden" name="vote" value="13" />
57-
<button class="card" onclick="toggleCard(event)">13</button>
58-
</form>
59-
</li>
60-
</ol>
14+
<div class="container">
15+
<div class="breakout" hx-ext="ws" ws-connect="/breakout/{{ breakout.lookup_id }}/ws">
16+
<section>
17+
<ol id="card_list" class="cards">
18+
<li>
19+
<form ws-send>
20+
<input type="hidden" name="action" value="vote" />
21+
<input type="hidden" name="vote" value="1" />
22+
<button onclick="toggleCard(event)">1</button>
23+
</form>
24+
</li>
25+
<li>
26+
<form ws-send>
27+
<input type="hidden" name="action" value="vote" />
28+
<input type="hidden" name="vote" value="2" />
29+
<button onclick="toggleCard(event)">2</button>
30+
</form>
31+
</li>
32+
<li>
33+
<form ws-send>
34+
<input type="hidden" name="action" value="vote" />
35+
<input type="hidden" name="vote" value="3" />
36+
<button onclick="toggleCard(event)">3</button>
37+
</form>
38+
</li>
39+
<li>
40+
<form ws-send>
41+
<input type="hidden" name="action" value="vote" />
42+
<input type="hidden" name="vote" value="5" />
43+
<button onclick="toggleCard(event)">5</button>
44+
</form>
45+
</li>
46+
<li>
47+
<form ws-send>
48+
<input type="hidden" name="action" value="vote" />
49+
<input type="hidden" name="vote" value="8" />
50+
<button onclick="toggleCard(event)">8</button>
51+
</form>
52+
</li>
53+
<li>
54+
<form ws-send>
55+
<input type="hidden" name="action" value="vote" />
56+
<input type="hidden" name="vote" value="13" />
57+
<button onclick="toggleCard(event)">13</button>
58+
</form>
59+
</li>
60+
</ol>
61+
</section>
62+
<aside class="card flex-col">
63+
<div id="votes"></div>
64+
</aside>
65+
</div>
6166
</div>
62-
<aside class="card flex-col">
63-
<div id="votes"></div>
64-
</aside>
65-
</section>
66-
<div id="name_swap" hx-get="/breakout/{{ breakout.lookup_id }}/user" hx-target="#modal"></div>
67+
<div id="name_swap" hx-get="/breakout/{{ breakout.lookup_id }}/user" hx-target="#modal"></div>
6768
</main>
6869
{% include "_partials/footer.html" %}
6970
</body>

‎templates/breakout_voters.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<div class="flex" style="justify-content:end;">
33
<form ws-send>
44
<input type="hidden" name="action" value="toggle_votes" />
5-
<button id="toggle_votes_btn" class="btn success">
5+
<button id="toggle_votes_btn" class="btn success btn-sm">
66
{% if breakout.show_votes %}
77
Start Voting
88
{% else %}

0 commit comments

Comments
 (0)