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