From 443abe7b9eea223aa04fa79da9f9cc3d9f2dc8ba Mon Sep 17 00:00:00 2001 From: elisejakob Date: Thu, 23 May 2024 15:35:05 +0200 Subject: [PATCH] new date list, event page progress --- web/src/app/arrangementer/[slug]/page.tsx | 2 + web/src/components/events/DateList.tsx | 7 ++- web/src/components/events/DateListOld.tsx | 47 +++++++++++++++++++ web/src/components/events/EventHeader.tsx | 23 ++++----- .../components/events/dateList.module.scss | 24 +++------- .../components/events/dateListOld.module.scss | 38 +++++++++++++++ .../components/events/eventHeader.module.scss | 46 +++++++++++++++++- web/src/css/base.scss | 15 ++++++ 8 files changed, 170 insertions(+), 32 deletions(-) create mode 100644 web/src/components/events/DateListOld.tsx create mode 100644 web/src/components/events/dateListOld.module.scss diff --git a/web/src/app/arrangementer/[slug]/page.tsx b/web/src/app/arrangementer/[slug]/page.tsx index c73e096..a0c3493 100644 --- a/web/src/app/arrangementer/[slug]/page.tsx +++ b/web/src/app/arrangementer/[slug]/page.tsx @@ -1,6 +1,7 @@ import { getClient } from "@/app/client"; import { Blocks } from "@/components/blocks/Blocks"; import { DateList } from "@/components/events/DateList"; +import { DateListOld } from "@/components/events/DateListOld"; import { EventHeader } from "@/components/events/EventHeader"; import { BgPig } from "@/components/general/BgPig"; import { graphql } from "@/gql"; @@ -54,6 +55,7 @@ export default async function Page({ params }: { params: { slug: string } }) {
+
diff --git a/web/src/components/events/DateList.tsx b/web/src/components/events/DateList.tsx index c707c4f..c27e8a0 100644 --- a/web/src/components/events/DateList.tsx +++ b/web/src/components/events/DateList.tsx @@ -3,7 +3,12 @@ import styles from "./dateList.module.scss"; export const DateList = () => { return (
-

Kommende datoer

+

+ + + Kommende datoer{" "} + (4) +

  • diff --git a/web/src/components/events/DateListOld.tsx b/web/src/components/events/DateListOld.tsx new file mode 100644 index 0000000..e184103 --- /dev/null +++ b/web/src/components/events/DateListOld.tsx @@ -0,0 +1,47 @@ +import styles from "./dateListOld.module.scss"; + +export const DateListOld = () => { + return ( +
    +

    Kommende datoer (4)

    +
      +
    • +
      + 27/05/2024  + 18.00 +
      +
      + Storsalen +
      +
      • +
    • +
      + Mandag 27. mai 2024  + kl. 18.00 +
      + i Storsalen +
      +
      +
      • +
    • +
      + 27. mai 2024  + kl. 18.00 +
      +
      + Storsalen +
      +
      • +
    • +
      + Storsalen +
      +
      + 27.05.2024  + 18.00 +
      +
      • +
    +
    + ); +}; diff --git a/web/src/components/events/EventHeader.tsx b/web/src/components/events/EventHeader.tsx index a97c3c3..4bcb758 100644 --- a/web/src/components/events/EventHeader.tsx +++ b/web/src/components/events/EventHeader.tsx @@ -15,18 +15,9 @@ export const EventHeader = ({ event }: { event: EventFragment }) => {

    {event.title}

    - {event.facebookUrl && ( - - Gå til Facebook-event - - )} - {event.ticketUrl && ( - - Kjøp billetter - - )} +

    Vise neste dato her?

    -

    Pris

    + {/*

    Pris

    */}
      {!event.priceRegular && !event.priceStudent && @@ -55,6 +46,16 @@ export const EventHeader = ({ event }: { event: EventFragment }) => { )}
    + {event.ticketUrl && ( + + Kjøp billetter + + )} + {event.facebookUrl && ( + + Gå til Facebook-event + + )} {event.categories.length > 0 && (
    Kategorier: {event.categories.map((x) => x.name).join(", ")} diff --git a/web/src/components/events/dateList.module.scss b/web/src/components/events/dateList.module.scss index 969dcce..6a31489 100644 --- a/web/src/components/events/dateList.module.scss +++ b/web/src/components/events/dateList.module.scss @@ -1,30 +1,18 @@ .dateList { list-style: none; - margin: 1rem 0 var(--spacing-sitepadding); + margin: 0 calc(var(--spacing-sitepadding)*-1) calc(var(--spacing-sitepadding)*2); + padding: 0 var(--spacing-sitepadding); display: flex; - gap: var(--spacing-gap-column); + gap: 1rem; } .date { font-family: var(--font-serif); - font-size: var(--font-size-lead); - margin-bottom: 1rem; - padding-left: 4rem; + font-size: var(--font-size-body); position: relative; - min-height: 3.2rem; line-height: 1.2; - - &:before { - content: ""; - display: block; - width: 3.2rem; - height: 3.2rem; - border-radius: 100%; - background: var(--color-goldenBeige); - position: absolute; - left: 0; - top: 0; - } + border-right: var(--border); + padding-right: 1rem; } .time { diff --git a/web/src/components/events/dateListOld.module.scss b/web/src/components/events/dateListOld.module.scss new file mode 100644 index 0000000..a3d43c1 --- /dev/null +++ b/web/src/components/events/dateListOld.module.scss @@ -0,0 +1,38 @@ +.dateList { + list-style: none; + background: var(--color-background-secondary); + margin: 1rem calc(var(--spacing-sitepadding)*-1); + padding: var(--spacing-sitepadding); + display: flex; + gap: var(--spacing-gap-column); +} + +.date { + font-family: var(--font-serif); + font-size: var(--font-size-lead); + margin-bottom: 1rem; + padding-left: 4rem; + position: relative; + min-height: 3.2rem; + line-height: 1.2; + + &:before { + content: ""; + display: block; + width: 3.2rem; + height: 3.2rem; + border-radius: 100%; + background: var(--color-goldenBeige); + position: absolute; + left: 0; + top: 0; + } +} + +.time { + width: 100%; +} + +.venue { + font-style: italic; +} \ No newline at end of file diff --git a/web/src/components/events/eventHeader.module.scss b/web/src/components/events/eventHeader.module.scss index fa0d3d3..a50ea43 100644 --- a/web/src/components/events/eventHeader.module.scss +++ b/web/src/components/events/eventHeader.module.scss @@ -21,7 +21,49 @@ } } -.details { +.details {} + +.prices { + margin: 2rem 0 1rem; + + h2 { + font-size: 1rem; + font-family: var(--font-main); + } +} + +.priceList { + list-style: none; + display: flex; +} + +.priceItem { font-family: var(--font-serif); - font-size: var(--font-size-lead); + font-size: var(--font-size-caption); + position: relative; + padding: 0 1.5rem 0 1rem; + + &:after { + content: "/"; + font-family: var(--font-serif); + font-size: 2rem; + position: absolute; + top: 0; + right: 0; + line-height: 1.2; + } + + &:first-child { + padding-left: 0; + } + + &:last-child { + &:after { + display: none; + } + } +} + +.priceLabel { + display: block; } \ No newline at end of file diff --git a/web/src/css/base.scss b/web/src/css/base.scss index 44d692a..aa0df5a 100644 --- a/web/src/css/base.scss +++ b/web/src/css/base.scss @@ -166,6 +166,21 @@ input[type="text"] { transition: opacity var(--transition-easing); } +.number { + font-family: var(--font-serif); + font-weight: 400; +} + +.textLink { + font-family: var(--font-serif); + font-style: italic; + display: block; + + &:after { + content: "→"; + } +} + .hiddenLink { position: absolute; top: 0;