From 82d889fa3800068b78d6725184bb120ed7d8cb75 Mon Sep 17 00:00:00 2001 From: Niko Date: Wed, 16 Apr 2025 08:09:25 +0200 Subject: [PATCH 01/25] Fresh look based one schedule from 2024. --- .env.development | 1 + src/components/schedule/break.astro | 6 ++- src/components/schedule/session.astro | 24 ++++++++--- src/content/config.ts | 61 ++++++++++++++++++++++----- src/layouts/Layout.astro | 7 +++ src/layouts/ScheduleLayout.astro | 47 +++++++++++++++++++++ src/pages/schedule.astro | 38 +++++++++++++++++ src/pages/schedule/[day].astro | 56 ++++++++++++++++++------ src/utils/dataLoader.ts | 1 - 9 files changed, 209 insertions(+), 32 deletions(-) create mode 100644 src/layouts/ScheduleLayout.astro create mode 100644 src/pages/schedule.astro diff --git a/.env.development b/.env.development index 6792a8ba4..355abfd0f 100644 --- a/.env.development +++ b/.env.development @@ -1,2 +1,3 @@ EP_SESSIONS_API="https://static.europython.eu/programme/ep2025/releases/current/sessions.json" EP_SPEAKERS_API="https://static.europython.eu/programme/ep2025/releases/current/speakers.json" +EP_SCHEDULE_API="https://gist.githubusercontent.com/nikoshell/55ab27b228a31130134f689429e93bf5/raw/a1542efb298366645ad44ae9087772671646d51b/schedule.json" diff --git a/src/components/schedule/break.astro b/src/components/schedule/break.astro index affbcd255..ecf97aba0 100644 --- a/src/components/schedule/break.astro +++ b/src/components/schedule/break.astro @@ -19,7 +19,11 @@ const { time, title, style }: Props = Astro.props; color: var(--color-text); display: flex; align-items: center; - font-weight: bold; + text-align: center; + justify-items: center; + /*font-weight: bold;*/ padding-left: 8px; + font-size:1rem; + background-color: #FCFBFA; } diff --git a/src/components/schedule/session.astro b/src/components/schedule/session.astro index de13bc7d3..8e38ce39c 100644 --- a/src/components/schedule/session.astro +++ b/src/components/schedule/session.astro @@ -25,6 +25,7 @@ const hasFooter = hasRoom || hasSpeakers; ---
+ -
+

{session.title}

@@ -86,7 +89,13 @@ const hasFooter = hasRoom || hasSpeakers; font-weight: bold; display: grid; flex-direction: column; - background-color: var(--color-body-background); + /*background-color: var(--color-body-background);*/ + + background-color: color-mix( + in srgb, + var(--color-body-background), + white 30% + ); position: relative; grid-template-areas: @@ -120,6 +129,7 @@ const hasFooter = hasRoom || hasSpeakers; bottom: 0; left: 0; z-index: 1; + } footer :global(a) { @@ -135,7 +145,7 @@ const hasFooter = hasRoom || hasSpeakers; display: flex; flex-direction: column; align-items: center; - border-right: 1px solid var(--color-text); + /*border-right: 1px solid var(--color-text);*/ gap: 4px; & .minus { @@ -169,7 +179,7 @@ const hasFooter = hasRoom || hasSpeakers; background-color: color-mix( in srgb, var(--color-body-background), - white 40% + white 50% ); } @@ -190,13 +200,13 @@ const hasFooter = hasRoom || hasSpeakers; } footer.has-speakers { - border-top: 1px solid var(--color-text); + /*border-top: 1px solid var(--color-text);*/ margin-top: auto; } header { background-color: var(--color-primary); - border-bottom: 2px solid var(--color-primary); + /*border-bottom: 2px solid var(--color-primary);*/ color: black; text-transform: capitalize; font-size: 0.8em; diff --git a/src/content/config.ts b/src/content/config.ts index 6ad9d0d79..ede498d4d 100644 --- a/src/content/config.ts +++ b/src/content/config.ts @@ -1,5 +1,5 @@ import { defineCollection, reference, z } from "astro:content"; -import { loadData } from "../utils/dataLoader"; +import { loadData } from "@utils/dataLoader"; const mode = import.meta.env.MODE; console.log(`\x1b[35m[EP]\x1b[0m Current MODE: \x1b[1m\x1b[34m${mode}\x1b[0m`); @@ -158,18 +158,59 @@ const sessions = defineCollection({ }), }); +//const days = defineCollection({ +// type: "data", +// schema: z.object({ +// rooms: z.array(z.string()), +// events: z.array( +// z.object({ +// rooms: z.array(z.string()), +// event_type: z.string(), +// code: z.string().optional(), +// title: z.string(), +// slug: z.string().optional(), +// session_type: z.string().optional(), // why? +// speakers: z +// .array( +// z.object({ +// code: z.string(), +// name: z.string(), +// website_url: z.string(), +// }) +// ) +// .optional(), +// tweet: z.string().optional().nullable(), +// level: z.string().optional().nullable(), +// start: z.string(), +// website_url: z.string().optional().nullable(), +// duration: z.number(), +// }) +// ), +// }), +//}); + const days = defineCollection({ - type: "data", + loader: async (): Promise => { + const rawSchedule = await loadData(import.meta.env.EP_SCHEDULE_API); + const schedule = rawSchedule.default ?? rawSchedule; + + return Object.entries(schedule.days).map(([date, data]: [string, any]) => ({ + id: date, + ...data, + })); + }, schema: z.object({ - rooms: z.array(z.string()), + id: z.string(), // the date, like "2024-07-08" + rooms: z.array(z.string()).optional(), events: z.array( z.object({ - rooms: z.array(z.string()), - event_type: z.string(), code: z.string().optional(), - title: z.string(), + duration: z.number(), + event_type: z.string(), + level: z.string().optional().nullable(), + rooms: z.array(z.string()), + session_type: z.string().optional(), slug: z.string().optional(), - session_type: z.string().optional(), // why? speakers: z .array( z.object({ @@ -179,11 +220,11 @@ const days = defineCollection({ }) ) .optional(), - tweet: z.string().optional().nullable(), - level: z.string().optional().nullable(), start: z.string(), + title: z.string(), + track: z.string().optional().nullable(), + tweet: z.string().optional().nullable(), website_url: z.string().optional().nullable(), - duration: z.number(), }) ), }), diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index f2e786a9d..2f0e37ffa 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -15,6 +15,13 @@ const { title, description } = Astro.props; + + + + + + +
diff --git a/src/layouts/ScheduleLayout.astro b/src/layouts/ScheduleLayout.astro new file mode 100644 index 000000000..a40d355f7 --- /dev/null +++ b/src/layouts/ScheduleLayout.astro @@ -0,0 +1,47 @@ +--- +import Header from "../components/header/header.astro"; +import Footer from "../components/footer.astro"; +import BaseHead from "../components/BaseHead.astro"; + +export interface Props { + title: string; + description: string; +} + +const { title, description } = Astro.props; +--- + + + + + + + +
+ Skip to main content + +
+ +
+ +
+ +
+
+
+
+ + + diff --git a/src/pages/schedule.astro b/src/pages/schedule.astro new file mode 100644 index 000000000..d1a781c49 --- /dev/null +++ b/src/pages/schedule.astro @@ -0,0 +1,38 @@ +--- +import { getCollection } from "astro:content"; + +const days = await getCollection("days"); + +const availableDays = days.map((day) => new Date(day.id)); +--- + + + + diff --git a/src/pages/schedule/[day].astro b/src/pages/schedule/[day].astro index c909548e7..3a4212499 100644 --- a/src/pages/schedule/[day].astro +++ b/src/pages/schedule/[day].astro @@ -1,6 +1,6 @@ --- import { getEntry, getCollection } from "astro:content"; -import Layout from "../../layouts/Layout.astro"; +import Layout from "../../layouts/ScheduleLayout.astro"; import Break from "../../components/schedule/break.astro"; import Session from "../../components/schedule/session.astro"; import { addMinutes, differenceInMinutes, parseISO } from "date-fns"; @@ -8,6 +8,8 @@ import { Title } from "../../components/typography/title"; import { Select } from "../../components/form/select"; import { formatInTimeZone } from "date-fns-tz"; + + const format = (date: Date, format: string) => { return formatInTimeZone(date, "Europe/Prague", format); }; @@ -32,6 +34,7 @@ export const getStaticPaths = async () => { }; const days = await getCollection("days"); +console.log(days); const day = await getEntry("days", Astro.params.day); const ROOMS = (day?.data.rooms ?? []) @@ -212,7 +215,7 @@ for (let i = 0; i < slots.length; i++) { const sizeInMinutes = nextTime - currentTime; let size = sizeInMinutes / 5; - let sizeValue = `repeat(${size}, fit-content(200px))`; + let sizeValue = `repeat(${size}, fit-content(100px))`; if (current.type === "break") { // we might have some "breaks" that are quite short, for example @@ -337,12 +340,12 @@ posters.forEach((poster) => {
-
+
Time
@@ -355,7 +358,7 @@ posters.forEach((poster) => { class="schedule" style={{ gridTemplateRows: gridRows.join(" "), - gridTemplateColumns: `80px repeat(${ROOMS.length}, minmax(200px, 1fr))`, + gridTemplateColumns: `80px repeat(${ROOMS.length}, minmax(100px, 1fr))`, }} > { @@ -422,16 +425,39 @@ posters.forEach((poster) => {
+ diff --git a/src/pages/schedule/[day].astro b/src/pages/schedule/[day].astro index 3a4212499..4a2aa4197 100644 --- a/src/pages/schedule/[day].astro +++ b/src/pages/schedule/[day].astro @@ -564,14 +564,17 @@ posters.forEach((poster) => { &::after { content: ""; display: block; + padding: 4px 8px; } h2, - &::after { - background: var(--color-primary); - color: var(--color-text-inverted); + { + background: linear-gradient(#F8F7F6, #F2E2D3 ); + /*color: var(--color-text-inverted);*/ padding: 4px 8px; - outline: 2px solid var(--color-primary); + margin-top:8px; + border-radius: 10px; + /*outline: 2px solid var(--color-primary);*/ /*font-weight: bold;*/ font-size: 0.8em; } From c83d87df6efd7cf56903836d1abae57b062c75b5 Mon Sep 17 00:00:00 2001 From: Niko Date: Wed, 16 Apr 2025 09:52:39 +0200 Subject: [PATCH 03/25] Add preview schedule endpoint. --- .env.preview | 1 + src/layouts/ScheduleLayout.astro | 8 ++++++++ 2 files changed, 9 insertions(+) diff --git a/.env.preview b/.env.preview index 6792a8ba4..355abfd0f 100644 --- a/.env.preview +++ b/.env.preview @@ -1,2 +1,3 @@ EP_SESSIONS_API="https://static.europython.eu/programme/ep2025/releases/current/sessions.json" EP_SPEAKERS_API="https://static.europython.eu/programme/ep2025/releases/current/speakers.json" +EP_SCHEDULE_API="https://gist.githubusercontent.com/nikoshell/55ab27b228a31130134f689429e93bf5/raw/a1542efb298366645ad44ae9087772671646d51b/schedule.json" diff --git a/src/layouts/ScheduleLayout.astro b/src/layouts/ScheduleLayout.astro index a40d355f7..ab88f0872 100644 --- a/src/layouts/ScheduleLayout.astro +++ b/src/layouts/ScheduleLayout.astro @@ -15,6 +15,14 @@ const { title, description } = Astro.props; + + + + + + + +
From 358751fa83d7709beba6fde3f36cc8c38f84db49 Mon Sep 17 00:00:00 2001 From: Niko Date: Wed, 16 Apr 2025 09:59:20 +0200 Subject: [PATCH 04/25] Update TS types. --- src/env.d.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/env.d.ts b/src/env.d.ts index ccf023d42..107ecdf18 100644 --- a/src/env.d.ts +++ b/src/env.d.ts @@ -4,6 +4,7 @@ interface ImportMetaEnv { readonly EP_SESSIONS_API: string; readonly EP_SPEAKERS_API: string; + readonly EP_SCHEDULE_API: string; } interface ImportMeta { From 47d75c5e4bc0cf1f331f4c6ea2511c76cd0a3f9a Mon Sep 17 00:00:00 2001 From: Niko Date: Wed, 16 Apr 2025 11:22:06 +0200 Subject: [PATCH 05/25] Update style. --- package.json | 12 ++++++------ pnpm-lock.yaml | 12 ++++++------ src/components/schedule/break.astro | 13 +++++++++---- src/content/config.ts | 5 ++--- src/layouts/ScheduleLayout.astro | 30 +++++++---------------------- 5 files changed, 30 insertions(+), 42 deletions(-) diff --git a/package.json b/package.json index ecfd184f5..2f6685d2d 100644 --- a/package.json +++ b/package.json @@ -16,21 +16,21 @@ "@astrojs/mdx": "^4.2.3", "@astrojs/react": "^4.2.3", "@astrojs/sitemap": "^3.3.0", - "@astrojs/tailwind": "^5.1.4", - "@fontsource-variable/inter": "^5.1.1", + "@astrojs/tailwind": "^5.1.5", + "@fontsource-variable/inter": "^5.2.5", "@fortawesome/fontawesome-free": "^6.7.2", "@tailwindcss/typography": "^0.5.16", "@types/react": "^19.1.0", "@types/react-dom": "^19.1.1", - "astro": "^5.1.6", + "astro": "^5.5.2", "astro-delete-unused-images": "^1.0.3", "astro-meta-tags": "^0.3.1", - "astro-pagefind": "^1.8.1", + "astro-pagefind": "^1.8.3", "astro-preload": "^1.1.2", "clsx": "^2.1.1", "date-fns": "^4.1.0", "date-fns-tz": "^3.2.0", - "hastscript": "^9.0.0", + "hastscript": "^9.0.1", "js-yaml": "^4.1.0", "marked": "^15.0.7", "pagefind": "^1.3.0", @@ -45,7 +45,7 @@ }, "devDependencies": { "@types/js-yaml": "^4.0.9", - "prettier": "^3.4.2", + "prettier": "^3.5.3", "prettier-plugin-astro": "^0.14.1" }, "prettier": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 15eb290db..082bf68ee 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -24,10 +24,10 @@ importers: specifier: ^3.3.0 version: 3.3.0 '@astrojs/tailwind': - specifier: ^5.1.4 + specifier: ^5.1.5 version: 5.1.5(astro@5.5.2(jiti@1.21.7)(rollup@4.39.0)(typescript@5.8.3)(yaml@2.7.0))(tailwindcss@3.4.17) '@fontsource-variable/inter': - specifier: ^5.1.1 + specifier: ^5.2.5 version: 5.2.5 '@fortawesome/fontawesome-free': specifier: ^6.7.2 @@ -42,7 +42,7 @@ importers: specifier: ^19.1.1 version: 19.1.1(@types/react@19.1.0) astro: - specifier: ^5.1.6 + specifier: ^5.5.2 version: 5.5.2(jiti@1.21.7)(rollup@4.39.0)(typescript@5.8.3)(yaml@2.7.0) astro-delete-unused-images: specifier: ^1.0.3 @@ -51,7 +51,7 @@ importers: specifier: ^0.3.1 version: 0.3.1(astro@5.5.2(jiti@1.21.7)(rollup@4.39.0)(typescript@5.8.3)(yaml@2.7.0)) astro-pagefind: - specifier: ^1.8.1 + specifier: ^1.8.3 version: 1.8.3(astro@5.5.2(jiti@1.21.7)(rollup@4.39.0)(typescript@5.8.3)(yaml@2.7.0)) astro-preload: specifier: ^1.1.2 @@ -66,7 +66,7 @@ importers: specifier: ^3.2.0 version: 3.2.0(date-fns@4.1.0) hastscript: - specifier: ^9.0.0 + specifier: ^9.0.1 version: 9.0.1 js-yaml: specifier: ^4.1.0 @@ -106,7 +106,7 @@ importers: specifier: ^4.0.9 version: 4.0.9 prettier: - specifier: ^3.4.2 + specifier: ^3.5.3 version: 3.5.3 prettier-plugin-astro: specifier: ^0.14.1 diff --git a/src/components/schedule/break.astro b/src/components/schedule/break.astro index ecf97aba0..fdf5586de 100644 --- a/src/components/schedule/break.astro +++ b/src/components/schedule/break.astro @@ -8,22 +8,27 @@ export interface Props { const { time, title, style }: Props = Astro.props; --- -
+
{time}{" "} {title} + {time} {title}
diff --git a/src/content/config.ts b/src/content/config.ts index ede498d4d..9212887c4 100644 --- a/src/content/config.ts +++ b/src/content/config.ts @@ -191,8 +191,7 @@ const sessions = defineCollection({ const days = defineCollection({ loader: async (): Promise => { - const rawSchedule = await loadData(import.meta.env.EP_SCHEDULE_API); - const schedule = rawSchedule.default ?? rawSchedule; + const schedule = await loadData(import.meta.env.EP_SCHEDULE_API); return Object.entries(schedule.days).map(([date, data]: [string, any]) => ({ id: date, @@ -200,7 +199,7 @@ const days = defineCollection({ })); }, schema: z.object({ - id: z.string(), // the date, like "2024-07-08" + id: z.string(), rooms: z.array(z.string()).optional(), events: z.array( z.object({ diff --git a/src/layouts/ScheduleLayout.astro b/src/layouts/ScheduleLayout.astro index ab88f0872..a52cd20a4 100644 --- a/src/layouts/ScheduleLayout.astro +++ b/src/layouts/ScheduleLayout.astro @@ -1,7 +1,5 @@ --- -import Header from "../components/header/header.astro"; -import Footer from "../components/footer.astro"; -import BaseHead from "../components/BaseHead.astro"; +import Layout from "@layouts/Layout.astro"; export interface Props { title: string; @@ -11,36 +9,22 @@ export interface Props { const { title, description } = Astro.props; --- - - - - - + + - -
- Skip to main content - -
- -
- -
- -
-
-
+
+
- + - diff --git a/src/pages/schedule/[day].astro b/src/components/schedule/day.astro similarity index 90% rename from src/pages/schedule/[day].astro rename to src/components/schedule/day.astro index 4a2aa4197..254c8bedb 100644 --- a/src/pages/schedule/[day].astro +++ b/src/components/schedule/day.astro @@ -1,14 +1,20 @@ + --- import { getEntry, getCollection } from "astro:content"; -import Layout from "../../layouts/ScheduleLayout.astro"; -import Break from "../../components/schedule/break.astro"; -import Session from "../../components/schedule/session.astro"; +import Break from "@components/schedule/break.astro"; +import Session from "@components/schedule/session.astro"; import { addMinutes, differenceInMinutes, parseISO } from "date-fns"; -import { Title } from "../../components/typography/title"; -import { Select } from "../../components/form/select"; +//import { Title } from "@components/typography/title"; +import Headline from "@components/ui/Headline.astro"; +import { Select } from "@components/form/select"; import { formatInTimeZone } from "date-fns-tz"; +export interface props { + dayName: string; + eventType?: string | null; +} + const format = (date: Date, format: string) => { return formatInTimeZone(date, "Europe/Prague", format); @@ -33,9 +39,13 @@ export const getStaticPaths = async () => { }); }; + +const { dayName } = Astro.props; + const days = await getCollection("days"); -console.log(days); -const day = await getEntry("days", Astro.params.day); + +//const day = await getEntry("days", dayName); +const day = await getEntry("days", dayName); const ROOMS = (day?.data.rooms ?? []) .filter((room) => room.toLowerCase() !== "exhibit hall") @@ -313,30 +323,15 @@ posters.forEach((poster) => { postersByTime[poster.startTime].push(poster); }); + + +const date = parseISO(dayName); +const dateText = format(date, "eeee - do MMMM"); --- - -
- Schedule - - -
+
@@ -423,7 +418,7 @@ posters.forEach((poster) => {
- + diff --git a/src/content/config.ts b/src/content/config.ts index e90be80f3..b070c2cf7 100644 --- a/src/content/config.ts +++ b/src/content/config.ts @@ -109,10 +109,10 @@ const speakers = defineCollection({ submissions: z.array(reference("sessions")), affiliation: z.string().nullable(), homepage: z.string().nullable(), - gitx_url: z.string().url().nullable(), + gitx_url: z.string().url().nullable().optional(), linkedin_url: z.string().url().nullable(), mastodon_url: z.string().url().nullable(), - bluesky_url: z.string().url().nullable(), + bluesky_url: z.string().url().nullable().optional(), twitter_url: z.string().url().nullable(), }), }); diff --git a/src/data/links.json b/src/data/links.json index 729514b12..c9c73d094 100644 --- a/src/data/links.json +++ b/src/data/links.json @@ -50,6 +50,31 @@ } ] }, + { + "name": "Schedule", + "items": [ + { + "name": "Tutorials", + "path": "/schedule/tutorial" + }, + { + "name": "Sponsor Presentations", + "path": "/schedule/sponsored" + }, + { + "name": "Talks", + "path": "/schedule/talk" + }, + { + "name": "Posters", + "path": "/schedule/poster" + }, + { + "name": "Keynotes", + "path": "/schedule/keynote" + } + ] + }, { "name": "Prague & Venue", "items": [ diff --git a/src/pages/schedule.astro b/src/pages/schedule.astro index d1a781c49..ebb9209d4 100644 --- a/src/pages/schedule.astro +++ b/src/pages/schedule.astro @@ -1,38 +1,31 @@ --- -import { getCollection } from "astro:content"; +import { getEntry, getCollection } from "astro:content"; +import Layout from "@layouts/ScheduleLayout.astro"; +import ScheduleDay from "@components/schedule/day.astro"; +import Headline from "@ui/Headline.astro"; -const days = await getCollection("days"); +export const getStaticPaths = async () => { + const days = await getCollection("days"); -const availableDays = days.map((day) => new Date(day.id)); ---- + return days.map((day) => { + return { params: { day: day.id } }; + }); +}; - - - + diff --git a/src/pages/schedule/[type].astro b/src/pages/schedule/[type].astro new file mode 100644 index 000000000..59ce503ba --- /dev/null +++ b/src/pages/schedule/[type].astro @@ -0,0 +1,74 @@ +--- +import { getCollection } from "astro:content"; +import Layout from "@layouts/ScheduleLayout.astro"; +import ScheduleDay from "@components/schedule/day.astro"; +import { slugify } from '@utils/content'; +import Headline from "@ui/Headline.astro" + +export const getStaticPaths = async () => { + const sessions = await getCollection("sessions"); + + const allTypes = Array.from( + new Set( + sessions + .map((session) => slugify(session.data.session_type)) + .filter((type) => type) + ) + ).sort(); + return allTypes.map((type) => { + return { params: { type } }; + }); +}; + +const days = await getCollection("days"); + +const allDays = Array.from( + new Set(days.map((day) => day.id).filter((id) => id)) +).sort(); + +const visibleClass = Astro.params.type; + +--- + + + + + { + days.map((day) => ( + + )) + } + + + diff --git a/src/pages/schedule/day/[day].astro b/src/pages/schedule/day/[day].astro new file mode 100644 index 000000000..3ab50d721 --- /dev/null +++ b/src/pages/schedule/day/[day].astro @@ -0,0 +1,27 @@ +--- +import { getEntry, getCollection } from "astro:content"; +import Layout from "@layouts/ScheduleLayout.astro"; +import ScheduleDay from "@components/schedule/day.astro"; +import Headline from "@ui/Headline.astro"; +import Button from "@ui/Button.astro"; + +export const getStaticPaths = async () => { + const days = await getCollection("days"); + + return days.map((day) => { + return { params: { day: day.id } }; + }); +}; + +const days = await getCollection("days"); + +const allDays = Array.from( + new Set(days.map((day) => day.id).filter((id) => id)) +).sort(); +let isActive = true; +--- + + + + + diff --git a/src/utils/content.ts b/src/utils/content.ts new file mode 100644 index 000000000..9a7c964a7 --- /dev/null +++ b/src/utils/content.ts @@ -0,0 +1,10 @@ +export function slugify(text) { + return text + .toString() + .toLowerCase() + .trim() + .replace(/\s+/g, "-") // Replace spaces with - + .replace(/&/g, "-and-") // Replace & with 'and' + .replace(/[^\w\-]+/g, "") // Remove all non-word chars + .replace(/\-\-+/g, "-"); // Replace multiple - with single - +} From 431cc9c8c33a14180055d4a8f3e4285894ab93b9 Mon Sep 17 00:00:00 2001 From: Niko Date: Sat, 19 Apr 2025 16:42:54 +0200 Subject: [PATCH 09/25] Update mobile view. --- src/components/schedule/day.astro | 28 ++++++++++++-- src/components/schedule/session.astro | 55 +++++++++++++++++---------- src/components/ui/Headline.astro | 2 +- src/layouts/Layout.astro | 7 +--- src/layouts/ScheduleLayout.astro | 8 ++-- 5 files changed, 67 insertions(+), 33 deletions(-) diff --git a/src/components/schedule/day.astro b/src/components/schedule/day.astro index 254c8bedb..b46693171 100644 --- a/src/components/schedule/day.astro +++ b/src/components/schedule/day.astro @@ -432,7 +432,7 @@ const dateText = format(date, "eeee - do MMMM"); .schedule-wrapper { - min-width: 780px; + min-width: 360px; width: 100%; } :global(body) { @@ -465,7 +465,7 @@ const dateText = format(date, "eeee - do MMMM"); header, .time { - display: none; + /*display: none;*/ } :global(.session) { @@ -490,7 +490,29 @@ const dateText = format(date, "eeee - do MMMM"); display: none; } + + .schedule-container.header { + display:none; + } + + @media screen and (max-width: 799px) { + .time { + background:transparent; + } + .time h2 { + text-align:center; + color:#333332; + font-size:2rem; + } + .room-info { + text-align:center; + } + } @media screen and (min-width: 800px) { + + .schedule-container.header { + display: inherit; + } .schedule-container { /*overflow-x: auto;*/ padding-bottom: 2px; @@ -510,7 +532,7 @@ const dateText = format(date, "eeee - do MMMM"); position: sticky; top: 0; background: var(--color-body-background); - z-index: 20; + z-index: 20;inherit > div > div { padding: 8px; diff --git a/src/components/schedule/session.astro b/src/components/schedule/session.astro index 33dcc3f5f..11a1e76c3 100644 --- a/src/components/schedule/session.astro +++ b/src/components/schedule/session.astro @@ -2,6 +2,7 @@ import { formatInTimeZone } from "date-fns-tz"; import Speakers from "./speakers.astro"; import { slugify } from "@utils/content"; +import Icon from "@ui/Icon.astro"; export interface props { style: any; @@ -47,6 +48,16 @@ const hasFooter = true; }
--> +
+ + {session.rooms.length === 1 && ( +
+ Room: + {session.rooms && session.rooms.join(", ")} ⇢ +
+ )} +
+