Skip to content

Commit 4754f80

Browse files
Link1515Link1515
committed
style: update desktop agenda
1 parent 1412dff commit 4754f80

File tree

10 files changed

+58
-35
lines changed

10 files changed

+58
-35
lines changed

‎src/components/agenda/Agenda.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
import { useI18n } from '~/i18n/utils'
33
import Layout from '~/layouts/Layout.astro'
4-
import Desktop from './Desktop.astro'
4+
import Desktop from './desktop/Desktop.astro'
55
import Mobile from './Mobile.astro'
66
77
const { t } = useI18n(Astro.url.pathname)

‎src/components/agenda/Badge.astro‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
const { className } = Astro.props
3+
---
4+
5+
<span class:list={[className, 'rounded-full px-4 py-0.5']}>
6+
<slot />
7+
</span>

‎src/components/agenda/Session.astro‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import { getLocaleFromPath, useI18n } from '~/i18n/utils'
33
import schedule from '~/data/schedule.json'
44
import { extractHHmm } from '~/utils/build/agenda/extractHHmm'
5-
import SessionTags from './SessionTags.astro'
5+
import SessionBadges from './SessionBadges.astro'
66
77
const { t } = useI18n(Astro.url.pathname)
88
const locale = getLocaleFromPath(Astro.url.pathname)
@@ -73,15 +73,15 @@ function formatDescription(rawDescription) {
7373
}
7474
---
7575

76-
<div class:list={[isSession ? 'session' : '', 'flex flex-col p-3']} style={style}>
77-
<div class:list={['relative z-10 shrink-0 grow p-4', isRest ? 'bg-neutral-300' : 'bg-neutral-100', isSession ? 'cursor-pointer' : '']}>
76+
<div class:list={[isSession ? 'session' : '', 'm-3 flex flex-col']} style={style}>
77+
<div class:list={['relative z-10 shrink-0 grow rounded p-4', isRest ? 'bg-neutral-300' : 'bg-[#F3F3F3]', isSession ? 'cursor-pointer' : '']}>
7878
<div class="sticky" style="top: calc(var(--agenda-header-height) + 1rem);">
79-
<div class="font-bold text-neutral-800">{isZhTW ? session.zh.title : session.en.title}</div>
79+
<div class="font-bold">{isZhTW ? session.zh.title : session.en.title}</div>
8080
<div class="flex flex-col items-stretch">
81-
{speakers.map(speaker => <div class="text-sm text-neutral-700">{isZhTW ? speaker.zh.name : speaker.en.name}</div>)}
81+
{speakers.map(speaker => <div class="text-sm">{isZhTW ? speaker.zh.name : speaker.en.name}</div>)}
8282
</div>
8383

84-
{!isRest && <SessionTags session={session} />}
84+
{!isRest && <SessionBadges session={session} />}
8585
</div>
8686
</div>
8787

@@ -90,7 +90,7 @@ function formatDescription(rawDescription) {
9090
<div class="modal-content hidden">
9191
<div class="header">
9292
<h3 class="text-primary">{isZhTW ? session.zh.title : session.en.title}</h3>
93-
<SessionTags session={session} />
93+
<SessionBadges session={session} />
9494
<div class="mb-2">
9595
{formatMMdd(session.start)} {formatHHmm(session.start)} ~ {formatHHmm(session.end)} @ {session.broadcast || session.room}
9696
</div>

src/components/agenda/SessionTags.astro renamed to src/components/agenda/SessionBadges.astro

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
---
22
import { getLocaleFromPath, useI18n } from '~/i18n/utils'
33
import schedule from '~/data/schedule.json'
4+
import Badge from '~/components/agenda/Badge.astro'
45
56
const { t } = useI18n(Astro.url.pathname)
67
const locale = getLocaleFromPath(Astro.url.pathname)
@@ -20,8 +21,8 @@ function typeToDetail(type) {
2021
}
2122
---
2223

23-
<div class="my-2 flex flex-wrap gap-1 text-xs text-white">
24-
{session.type && <span class="bg-primary rounded-full px-2">{isZhTW ? type.zh.name : type.en.name}</span>}
25-
{session.language && <span class="rounded-full bg-neutral-500 px-2">{t(`language.${session.language}`)}</span>}
26-
{tags.map(tag => <span class="rounded-full bg-neutral-400 px-2">{isZhTW ? tag.zh.name : tag.en.name}</span>)}
24+
<div class="my-2 flex flex-wrap gap-2 text-xs text-white">
25+
{session.type && <Badge className="bg-info-dark">{isZhTW ? type.zh.name : type.en.name}</Badge>}
26+
{session.language && <Badge className="bg-[#585858]">{t(`language.${session.language}`)}</Badge>}
27+
{tags.map(tag => <Badge className="bg-[#A4A4A4]">{isZhTW ? tag.zh.name : tag.en.name}</Badge>)}
2728
</div>

‎src/components/agenda/desktop/DayLink.astro‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
const { curTitle, title, href } = Astro.props
3+
---
4+
5+
<a class:list={[title === curTitle ? 'text-info-dark border-info-dark border-b-6' : 'text-info', 'hover:text-info-dark px-10 text-lg transition-colors']} href={href}>{title}</a>

src/components/agenda/Desktop.astro renamed to src/components/agenda/desktop/Desktop.astro

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
---
22
import { getRelativeLocaleUrl } from 'astro:i18n'
3-
import { useI18n, getLocaleFromPath } from '~/i18n/utils'
3+
import { getLocaleFromPath } from '~/i18n/utils'
44
import schedule from '~/data/schedule.json'
55
import { extractHHmm } from '~/utils/build/agenda/extractHHmm'
6-
import Time from '~/components/agenda/Time.astro'
6+
import DayLink from '~/components/agenda/desktop/DayLink.astro'
7+
import RoomCard from '~/components/agenda/desktop/RoomCard.astro'
8+
import Time from '~/components/agenda/desktop/Time.astro'
79
import Session from '~/components/agenda/Session.astro'
810
9-
const { t } = useI18n(Astro.url.pathname)
1011
const locale = getLocaleFromPath(Astro.url.pathname)
1112
const { title, date } = Astro.props
1213
@@ -22,26 +23,24 @@ schedule.sessions.forEach(session => {
2223
---
2324

2425
<div class="agenda hidden lg:block">
25-
<div class="sticky top-0 z-30 flex flex-col justify-center bg-white shadow" style="height: var(--agenda-header-height);">
26+
<div class="sticky top-0 z-30 mb-6 flex flex-col justify-center bg-white" style="height: var(--agenda-header-height);">
2627
<div class="container">
27-
<div class="mb-5 flex justify-center gap-4 font-bold">
28-
<a class={title === 'Day 1' ? 'text-info-dark' : 'text-info'} href={getRelativeLocaleUrl(locale, 'agenda/day1')}>Day 1</a>
29-
<a class={title === 'Day 2' ? 'text-info-dark' : 'text-info'} href={getRelativeLocaleUrl(locale, 'agenda/day2')}>Day 2</a>
28+
<div class="mt-4 mb-5 flex gap-4 font-bold">
29+
<DayLink href={getRelativeLocaleUrl(locale, 'agenda/day1')} title="Day 1" curTitle={title} />
30+
<DayLink href={getRelativeLocaleUrl(locale, 'agenda/day2')} title="Day 2" curTitle={title} />
3031
</div>
3132

3233
<div class="agenda-grid grid text-center">
3334
<div></div>
34-
<div class="bg-primary mx-3 py-2 text-white">{t('room.R0')}</div>
35-
<div class="bg-primary mx-3 py-2 text-white">{t('room.R1')}</div>
36-
<div class="bg-primary mx-3 py-2 text-white">{t('room.R2')}</div>
37-
<div class="bg-primary mx-3 py-2 text-white">{t('room.RH')}</div>
35+
<RoomCard room="R0" />
36+
<RoomCard room="R1" />
37+
<RoomCard room="R2" />
38+
<RoomCard room="RH" />
3839
</div>
3940
</div>
4041
</div>
4142

4243
<div class="container">
43-
<h2 class="mt-8 mb-12">{title}</h2>
44-
4544
<div id="agenda-grid" class="agenda-grid relative grid">
4645
{Array.from(times).map(time => <Time at={time} />)}
4746
{sessions.map(session => <Session session={session} />)}

‎src/components/agenda/desktop/RoomCard.astro‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
import { useI18n } from '~/i18n/utils'
3+
4+
const { t } = useI18n(Astro.url.pathname)
5+
const { room } = Astro.props
6+
---
7+
8+
<div class="mx-3 flex items-center justify-center gap-3 py-2 text-white">
9+
<span class="text-info-dark text-4xl font-bold">{room}</span>
10+
<span class="text-info text-left">{t(`room.${room}`)}</span>
11+
</div>

src/components/agenda/Time.astro renamed to src/components/agenda/desktop/Time.astro

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ const style = at ? `grid-area: ${row} / time` : ''
77
---
88

99
<div class="agenda-timeline z-0 block" style={style}>
10-
<div class="translate-y-[-50%] font-medium">{at}</div>
10+
<div class="translate-y-[-50%] font-medium text-[#7C7C7C]">{at}</div>
1111
</div>
1212

1313
<style>
@@ -17,6 +17,6 @@ const style = at ? `grid-area: ${row} / time` : ''
1717
left: 4rem;
1818
right: 0;
1919
height: 1px;
20-
background-color: #e5e5e5;
20+
background-color: #d7d7d7;
2121
}
2222
</style>

‎src/i18n/messages/en.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,10 @@
1111
"en": "English"
1212
},
1313
"room": {
14-
"R0": "International Conference Hall (R0)",
15-
"R1": "1st Conference Room (R1)",
16-
"R2": "2nd Conference Room (R2)",
17-
"RH": "Recreation Hall (RH)"
14+
"R0": "International Conference Hall",
15+
"R1": "1st Conference Room",
16+
"R2": "2nd Conference Room",
17+
"RH": "Recreation Hall"
1818
},
1919
"nav": {
2020
"agenda": "Agenda",

‎src/i18n/messages/zh-tw.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,10 @@
1111
"en": "英語"
1212
},
1313
"room": {
14-
"R0": "國際會議廳 (R0)",
15-
"R1": "第一會議室 (R1)",
16-
"R2": "第二會議室 (R2)",
17-
"RH": "交誼廳 (RH)"
14+
"R0": "國際會議廳",
15+
"R1": "第一會議室",
16+
"R2": "第二會議室",
17+
"RH": "交誼廳"
1818
},
1919
"nav": {
2020
"agenda": "議程",

0 commit comments

Comments
 (0)