Skip to content

Commit a915772

Browse files
Link1515Link1515
committed
refactor: simplify mobile agenda tab toggling
1 parent 343b79a commit a915772

File tree

1 file changed

+79
-98
lines changed

1 file changed

+79
-98
lines changed

‎src/components/agenda/Mobile.astro‎

Lines changed: 79 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import Session from '~/components/agenda/Session.astro'
88
const locale = getLocaleFromPath(Astro.url.pathname)
99
const { title, date } = Astro.props
1010
11-
const sessions = schedule.sessions.filter(session => session.start.startsWith(date)).sort(session => session.start.localeCompare(session.end))
11+
const sessions = schedule.sessions.filter(session => session.start.startsWith(date))
1212
1313
const allSessions = sessions.reduce((acc, session) => {
1414
const key = extractHHmm(session.start)
@@ -66,125 +66,106 @@ const rhTimes = Object.keys(rhSessions).sort((a, b) => a.localeCompare(b))
6666
<a class={title === 'Day 1' ? 'text-info-dark' : 'text-info'} href={getRelativeLocaleUrl(locale, 'agenda/day1')}>Day 1</a>
6767
<a class={title === 'Day 2' ? 'text-info-dark' : 'text-info'} href={getRelativeLocaleUrl(locale, 'agenda/day2')}>Day 2</a>
6868
</div>
69-
<div class="grid grid-cols-5 text-center">
70-
<button id="allBtn">ALL</button>
71-
<button id="r0Btn">R0</button>
72-
<button id="r1Btn">R1</button>
73-
<button id="r2Btn">R2</button>
74-
<button id="rhBtn">RH</button>
69+
<div id="btns" class="grid grid-cols-5 text-center">
70+
<button data-target="#allSessions" class="border-primary border-b-2 transition-colors">ALL</button>
71+
<button data-target="#r0Sessions" class="border-b-2 border-transparent transition-colors">R0</button>
72+
<button data-target="#r1Sessions" class="border-b-2 border-transparent transition-colors">R1</button>
73+
<button data-target="#r2Sessions" class="border-b-2 border-transparent transition-colors">R2</button>
74+
<button data-target="#rhSessions" class="border-b-2 border-transparent transition-colors">RH</button>
7575
</div>
7676
</div>
7777
</div>
7878

7979
<div class="container">
8080
<h2 class="mt-8 mb-12">{title}</h2>
8181

82-
<div id="allSessions">
83-
{
84-
allTimes.map(time => (
85-
<div>
86-
<div>{time}</div>
87-
{allSessions[time].map(session => (
88-
<Session session={session} />
89-
))}
90-
</div>
91-
))
92-
}
93-
</div>
82+
<div id="sessions">
83+
<div id="allSessions">
84+
{
85+
allTimes.map(time => (
86+
<div>
87+
<div>{time}</div>
88+
{allSessions[time].map(session => (
89+
<Session session={session} />
90+
))}
91+
</div>
92+
))
93+
}
94+
</div>
9495

95-
<div id="r0Sessions" style="display: none;">
96-
{
97-
r0Times.map(time => (
98-
<div>
99-
<div>{time}</div>
100-
{r0Sessions[time].map(session => (
101-
<Session session={session} />
102-
))}
103-
</div>
104-
))
105-
}
106-
</div>
96+
<div id="r0Sessions" style="display: none;">
97+
{
98+
r0Times.map(time => (
99+
<div>
100+
<div>{time}</div>
101+
{r0Sessions[time].map(session => (
102+
<Session session={session} />
103+
))}
104+
</div>
105+
))
106+
}
107+
</div>
107108

108-
<div id="r1Sessions" style="display: none;">
109-
{
110-
r1Times.map(time => (
111-
<div>
112-
<div>{time}</div>
113-
{r1Sessions[time].map(session => (
114-
<Session session={session} />
115-
))}
116-
</div>
117-
))
118-
}
119-
</div>
109+
<div id="r1Sessions" style="display: none;">
110+
{
111+
r1Times.map(time => (
112+
<div>
113+
<div>{time}</div>
114+
{r1Sessions[time].map(session => (
115+
<Session session={session} />
116+
))}
117+
</div>
118+
))
119+
}
120+
</div>
120121

121-
<div id="r2Sessions" style="display: none;">
122-
{
123-
r2Times.map(time => (
124-
<div>
125-
<div>{time}</div>
126-
{r2Sessions[time].map(session => (
127-
<Session session={session} />
128-
))}
129-
</div>
130-
))
131-
}
132-
</div>
122+
<div id="r2Sessions" style="display: none;">
123+
{
124+
r2Times.map(time => (
125+
<div>
126+
<div>{time}</div>
127+
{r2Sessions[time].map(session => (
128+
<Session session={session} />
129+
))}
130+
</div>
131+
))
132+
}
133+
</div>
133134

134-
<div id="rhSessions" style="display: none;">
135-
{
136-
rhTimes.map(time => (
137-
<div>
138-
<div>{time}</div>
139-
{rhSessions[time].map(session => (
140-
<Session session={session} />
141-
))}
142-
</div>
143-
))
144-
}
135+
<div id="rhSessions" style="display: none;">
136+
{
137+
rhTimes.map(time => (
138+
<div>
139+
<div>{time}</div>
140+
{rhSessions[time].map(session => (
141+
<Session session={session} />
142+
))}
143+
</div>
144+
))
145+
}
146+
</div>
145147
</div>
146148
</div>
147149
</div>
148150

149151
<script>
150152
import $ from 'jquery'
151153

152-
const $allSessions = $('#allSessions')
153-
const $r0Sessions = $('#r0Sessions')
154-
const $r1Sessions = $('#r1Sessions')
155-
const $r2Sessions = $('#r2Sessions')
156-
const $rhSessions = $('#rhSessions')
157-
158-
$('#allBtn').on('click', function () {
159-
hideAll()
160-
$allSessions.css('display', '')
161-
})
162-
163-
$('#r0Btn').on('click', function () {
164-
hideAll()
165-
$r0Sessions.css('display', '')
166-
})
167-
168-
$('#r1Btn').on('click', function () {
169-
hideAll()
170-
$r1Sessions.css('display', '')
171-
})
172-
173-
$('#r2Btn').on('click', function () {
174-
hideAll()
175-
$r2Sessions.css('display', '')
176-
})
154+
const $btnsChildren = $('#btns button')
155+
const $sessionsChildren = $('#sessions > div')
177156

178-
$('#rhBtn').on('click', function () {
157+
$('#btns').on('click', 'button', function () {
179158
hideAll()
180-
$rhSessions.css('display', '')
159+
$(this).removeClass('border-transparent').addClass('border-primary')
160+
$($(this).data('target')).css('display', '')
181161
})
182162

183163
function hideAll() {
184-
$allSessions.css('display', 'none')
185-
$r0Sessions.css('display', 'none')
186-
$r1Sessions.css('display', 'none')
187-
$r2Sessions.css('display', 'none')
188-
$rhSessions.css('display', 'none')
164+
$btnsChildren.each(function () {
165+
$(this).removeClass('border-primary').addClass('border-transparent')
166+
})
167+
$sessionsChildren.each(function () {
168+
$(this).css('display', 'none').removeClass('border-primary')
169+
})
189170
}
190171
</script>

0 commit comments

Comments
 (0)