From bc761557666bc83a10d74a0becd9113056b7e149 Mon Sep 17 00:00:00 2001 From: elisejakob Date: Thu, 20 Jun 2024 13:35:19 +0200 Subject: [PATCH] add venue map and style tables and make a placeholder image gallery --- web/public/assets/graphics/map/etg1.svg | 341 ++++++++++++++++++ web/public/assets/graphics/map/etg2.svg | 206 +++++++++++ web/public/assets/graphics/map/etg3.svg | 242 +++++++++++++ web/public/assets/graphics/map/kjeller.svg | 139 +++++++ web/src/app/lokaler/[slug]/page.tsx | 107 +++--- .../components/blocks/HorizontalRuleBlock.tsx | 2 +- .../components/blocks/ImageSliderBlock.tsx | 4 +- .../blocks/imageSliderBlock.module.scss | 7 +- web/src/components/blocks/swiper.scss | 2 + .../components/people/personList.module.scss | 4 +- web/src/components/venues/NeufMap.tsx | 24 ++ web/src/components/venues/VenueInfo.tsx | 51 +++ web/src/components/venues/VenueItem.tsx | 10 +- web/src/components/venues/neufMap.module.scss | 13 + .../components/venues/venueInfo.module.scss | 27 ++ web/src/css/base.scss | 4 + web/src/css/variables.scss | 1 + 17 files changed, 1130 insertions(+), 54 deletions(-) create mode 100644 web/public/assets/graphics/map/etg1.svg create mode 100644 web/public/assets/graphics/map/etg2.svg create mode 100644 web/public/assets/graphics/map/etg3.svg create mode 100644 web/public/assets/graphics/map/kjeller.svg create mode 100644 web/src/components/venues/NeufMap.tsx create mode 100644 web/src/components/venues/VenueInfo.tsx create mode 100644 web/src/components/venues/neufMap.module.scss create mode 100644 web/src/components/venues/venueInfo.module.scss diff --git a/web/public/assets/graphics/map/etg1.svg b/web/public/assets/graphics/map/etg1.svg new file mode 100644 index 0000000..e58830a --- /dev/null +++ b/web/public/assets/graphics/map/etg1.svg @@ -0,0 +1,341 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/public/assets/graphics/map/etg2.svg b/web/public/assets/graphics/map/etg2.svg new file mode 100644 index 0000000..d3aeb7d --- /dev/null +++ b/web/public/assets/graphics/map/etg2.svg @@ -0,0 +1,206 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/public/assets/graphics/map/etg3.svg b/web/public/assets/graphics/map/etg3.svg new file mode 100644 index 0000000..5c6b9ce --- /dev/null +++ b/web/public/assets/graphics/map/etg3.svg @@ -0,0 +1,242 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/public/assets/graphics/map/kjeller.svg b/web/public/assets/graphics/map/kjeller.svg new file mode 100644 index 0000000..4ed122b --- /dev/null +++ b/web/public/assets/graphics/map/kjeller.svg @@ -0,0 +1,139 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/src/app/lokaler/[slug]/page.tsx b/web/src/app/lokaler/[slug]/page.tsx index a973843..c27ad28 100644 --- a/web/src/app/lokaler/[slug]/page.tsx +++ b/web/src/app/lokaler/[slug]/page.tsx @@ -1,6 +1,9 @@ import { getClient } from "@/app/client"; import { Blocks } from "@/components/blocks/Blocks"; +import { ImageSliderBlock } from "@/components/blocks/ImageSliderBlock"; import Image from "@/components/general/Image"; +import { NeufMap } from "@/components/venues/NeufMap"; +import { VenueInfo } from "@/components/venues/VenueInfo"; import { graphql } from "@/gql"; import { VenueFragment } from "@/gql/graphql"; import { notFound } from "next/navigation"; @@ -47,11 +50,60 @@ export default async function Page({ params }: { params: { slug: string } }) { const venue = (data?.venue ?? {}) as VenueFragment; const featuredImage: any = venue.featuredImage; + // remove when real content is ready + const placeholderBlock = { + id: "d3971f38-32f9-46aa-9d56-9e69d2765cdc", + blockType: "ImageSliderBlock", + field: "image_slider", + images: [ + { + image: { + id: "7", + url: "https://cms.neuf.kult.444.no/media/original_images/22-06-02a_Storsalen_BR55620_FotoHelgeBrekke_SauXqU1.jpg", + width: 1024, + height: 683, + alt: "", + attribution: "Helge Brekke", + __typename: "CustomImage", + }, + text: "", + __typename: "ImageSliderItemBlock", + }, + { + image: { + id: "6", + url: "https://cms.neuf.kult.444.no/media/original_images/biblioteket_zPrxTfl.jpg", + width: 1200, + height: 800, + alt: "Biblioteket, inkl. boksamlingen og griseportretter", + attribution: "", + __typename: "CustomImage", + }, + text: "For et fint bilde! Dette er bildetekst i et bildegalleri.", + __typename: "ImageSliderItemBlock", + }, + { + image: { + id: "3", + url: "https://cms.neuf.kult.444.no/media/original_images/ABBAfever-22_websize-e1714644654899_kTNzMdU.jpg", + width: 1200, + height: 904, + alt: "", + attribution: "", + __typename: "CustomImage", + }, + text: "For et fint bilde! Dette er bildetekst i et bildegalleri. Jeg lurer også på hvordan det ser ut når bildeteksten går over flere linjer, så her er muligens en test av det. Det kommer sikkert litt an på skjermstørrelsen, men når jeg skriver såpass langt som dette er jeg garantert minst to linjer tror jeg!", + __typename: "ImageSliderItemBlock", + }, + ], + __typename: "ImageSliderBlock", + }; + return (
-
-

{venue.title}

- {featuredImage && ( + +

{venue.title}

+ {/*featuredImage && ( {featuredImage.alt} - )} -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Etasje{venue.floor}
Branntillatelse for{venue.capacityLegal}
Stående{venue.capacityStanding}
Sittende{venue.capacitySitting}
BrukTODO
Bar{venue.capabilityBar}
Lyd{venue.capabilityLighting}
Lys{venue.capabilityLighting}
A/V{venue.capabilityAudioVideo}
-
+ )*/} + + +
); } diff --git a/web/src/components/blocks/HorizontalRuleBlock.tsx b/web/src/components/blocks/HorizontalRuleBlock.tsx index 4115cfd..0810705 100644 --- a/web/src/components/blocks/HorizontalRuleBlock.tsx +++ b/web/src/components/blocks/HorizontalRuleBlock.tsx @@ -23,7 +23,7 @@ export const HorizontalRuleBlock = ({ return (
- + { return ( -
+
{ + return ( +
+
+ Kjeller + +
+
+ 1. etasje + +
+
+ 2. etasje + +
+
+ 3. etasje + +
+
+ ); +}; diff --git a/web/src/components/venues/VenueInfo.tsx b/web/src/components/venues/VenueInfo.tsx new file mode 100644 index 0000000..3875853 --- /dev/null +++ b/web/src/components/venues/VenueInfo.tsx @@ -0,0 +1,51 @@ +import { VenueFragment } from "@/gql/graphql"; +import styles from "./venueInfo.module.scss"; +import Link from "next/link"; +import Image from "../general/Image"; + +export const VenueInfo = ({ venue }: { venue: VenueFragment }) => { + return ( +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Etasje{venue.floor}
Branntillatelse for{venue.capacityLegal}
Stående{venue.capacityStanding}
Sittende{venue.capacitySitting}
BrukTODO
Bar{venue.capabilityBar}
Lyd{venue.capabilityLighting}
Lys{venue.capabilityLighting}
A/V{venue.capabilityAudioVideo}
+
+ ); +}; diff --git a/web/src/components/venues/VenueItem.tsx b/web/src/components/venues/VenueItem.tsx index c4a5603..b73faa9 100644 --- a/web/src/components/venues/VenueItem.tsx +++ b/web/src/components/venues/VenueItem.tsx @@ -21,7 +21,15 @@ export const VenueItem = ({ venue }: { venue: VenueFragment }) => {

{venue.title}

-

Detaljer om lokalet

+
+ Egner seg for: +
+ 50—115 personer +
+ + Konsert, foredrag, fest, debatt, teater, filmvisning + +
Mer om lokalet {venue.title} diff --git a/web/src/components/venues/neufMap.module.scss b/web/src/components/venues/neufMap.module.scss new file mode 100644 index 0000000..bf279fc --- /dev/null +++ b/web/src/components/venues/neufMap.module.scss @@ -0,0 +1,13 @@ +.neufMap { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--spacing-sitepadding); + width: 100%; + max-width: 1000px; + margin: var(--spacing-xl) auto; +} + +.floorHeading { + color: var(--color-deepBrick); + font-weight: 600; +} \ No newline at end of file diff --git a/web/src/components/venues/venueInfo.module.scss b/web/src/components/venues/venueInfo.module.scss new file mode 100644 index 0000000..84d926f --- /dev/null +++ b/web/src/components/venues/venueInfo.module.scss @@ -0,0 +1,27 @@ +.venueInfo { + max-width: var(--size-width-p); + margin: 1rem auto 2rem; + + table { + width: 100%; + border-collapse: collapse; + } + + tr { + border-bottom: var(--border); + } + + th { + text-align: left; + width: 11rem; + } + + th, + td { + padding: .5rem 0; + } + + td { + //font-family: var(--font-serif); + } +} \ No newline at end of file diff --git a/web/src/css/base.scss b/web/src/css/base.scss index ea1f812..3437bda 100644 --- a/web/src/css/base.scss +++ b/web/src/css/base.scss @@ -122,6 +122,10 @@ h6 { } } +img { + max-width: 100%; +} + button, .button { display: inline-block; diff --git a/web/src/css/variables.scss b/web/src/css/variables.scss index a1092ac..44f4768 100644 --- a/web/src/css/variables.scss +++ b/web/src/css/variables.scss @@ -48,6 +48,7 @@ --spacing-gap-column: 2rem; --spacing-gap-row: 1.5rem; --spacing-l: 3rem; + --spacing-xl: 6rem; --spacing-section-bottom: var(--spacing-l); // sizes