From f77a37ca028c7e04ca74fefefebc610802bc69db Mon Sep 17 00:00:00 2001 From: Fabrice LAMANT Date: Wed, 4 Feb 2026 23:02:06 +0100 Subject: [PATCH] responsive --- ui/app/flag.tsx | 6 +- ui/app/layout.tsx | 9 +- ui/app/page.tsx | 281 +++++++++++++++++++++++++++------------------- ui/lib/text.ts | 14 ++- 4 files changed, 189 insertions(+), 121 deletions(-) diff --git a/ui/app/flag.tsx b/ui/app/flag.tsx index fd5f1dbb5..5db07ebbf 100644 --- a/ui/app/flag.tsx +++ b/ui/app/flag.tsx @@ -260,9 +260,9 @@ export default function Flag({ iso3, name }: { iso3: string; name: string }) { const iso2 = (iso3to2[iso3.toUpperCase()] || "").toLowerCase(); return {name} + /> } diff --git a/ui/app/layout.tsx b/ui/app/layout.tsx index 1ef034969..6984b6324 100644 --- a/ui/app/layout.tsx +++ b/ui/app/layout.tsx @@ -1,5 +1,5 @@ import type { Metadata } from "next"; -import { Geist, Geist_Mono } from "next/font/google"; +import { Geist, Geist_Mono, DM_Sans } from "next/font/google"; import "./globals.css"; import Head from "next/head"; @@ -13,6 +13,11 @@ const geistMono = Geist_Mono({ subsets: ["latin"], }); +const dmSans = DM_Sans({ + variable: "--font-dm-sans", + subsets: ["latin"], +}); + export const metadata: Metadata = { title: "Milano Cortina 2026 Winter Olympics Calendar", description: "Made with ❤️ by Fabrice Lamant", @@ -29,7 +34,7 @@ export default function RootLayout({ {children} diff --git a/ui/app/page.tsx b/ui/app/page.tsx index cf1e699d7..ac47cc6dd 100644 --- a/ui/app/page.tsx +++ b/ui/app/page.tsx @@ -3,10 +3,22 @@ import { loadSchedule } from "../lib/data"; import { useEffect, useState } from "react"; import Flag from "./flag"; -import { COPY, COPY_SUCCESS, FILTER_BY_COUNTRY, FILTER_BY_SPORT, MADE_BY_FABRICE, NOT_AFFILIATED, NO_EVENT_FOR_FILTERS } from "../lib/text"; +import { COPY, COPY_SUCCESS, FILTER_BY_COUNTRY, FILTER_BY_SPORT, LANGUAGE, MADE_BY_FABRICE, NOT_AFFILIATED, NO_EVENT_FOR_FILTERS } from "../lib/text"; import useLocalStorage from "@/lib/local-storage"; import { GoogleAnalytics } from "@next/third-parties/google"; +import { Google_Sans, SUSE_Mono } from "next/font/google"; + +const googleSans = Google_Sans({ + variable: "--font-google-sans", + subsets: ["latin"], +}); + +const suseMono = SUSE_Mono({ + variable: "--font-suse-mono", + subsets: ["latin"], +}); + export interface MultilingualString { [key: string]: string; } @@ -176,31 +188,33 @@ export default function Home() { main = (
- + - - Apple Calendar - +
+ + Apple Calendar + - - Google Calendar - + + Google Calendar + - - Office 365 Calendar - + + Office 365 Calendar + - - Outlook Calendar - + + Outlook Calendar + - - Yahoo Calendar - + + Yahoo Calendar + +
{ events @@ -272,16 +286,16 @@ export default function Home() { return (
{dayHeader} -
-
- {startHours}:{startMinutes} +
+
+ {startHours}:{startMinutes}
{endHours}:{endMinutes}
-
+
{translate(data.sports.find(sport => sport.key === event.sport)?.name || {})}
-
{translate(event.name)}
+
{translate(event.name)}
{competitors}
@@ -293,52 +307,90 @@ export default function Home() { ) } + const header = ( +
+ +
+ + {/* */} +
+
+ ); + + const footer = ( +
+ + +
+ ); + + let cookie = <>; + + if (cookieConsent === 'true') { + cookie = ( + + ); + } else if (cookieConsent === 'null') { + cookie = ( +
+

This website uses cookies for statistics purposes and to enhance the user experience.

+ + +
+ ); + } + return (
-
-
- Milano Cortina 2026 Winter Olympics Calendar +
+ +
+ {header} + + {main} + + {footer} + + {cookie}
-
-
- {main} -
- - -
- - {cookieConsent === 'true' && - - } - - {cookieConsent === 'null' && -
-

This website uses cookies for statistics purposes and to enhance the user experience.

- - -
- }
); diff --git a/ui/lib/text.ts b/ui/lib/text.ts index dcb3c8dff..823523540 100644 --- a/ui/lib/text.ts +++ b/ui/lib/text.ts @@ -92,5 +92,17 @@ export const NO_EVENT_FOR_FILTERS = { pt: "Não há evento para a equipe e/ou esporte selecionado, por favor ajuste seus filtros.", zh: "所选团队和/或运动没有事件，请调整您的过滤器。", ja: "選択したチームおよび/またはスポーツのイベントはありません。フィルターを調整してください。", - ru: "Для выбранной команды и/или вида спорта нет событий, пожалуйста, отрегулируйте ваши фильтры." + ru: "Для выбранной команды и/или вида спорта нет событий, пожалуйста, отрегулируйте ваши фильтры." +} + +export const LANGUAGE = { + en: "Language", + fr: "Langue", + es: "Idioma", + de: "Sprache", + it: "Lingua", + pt: "Idioma", + zh: "语言", + ja: "言語", + ru: "Язык", }