add component for associationheader, misc association design adjustments
This commit is contained in:
@ -1,11 +1,8 @@
|
|||||||
import { getClient } from "@/app/client";
|
import { getClient } from "@/app/client";
|
||||||
import { Breadcrumb } from "@/components/general/Breadcrumb";
|
import { AssociationHeader } from "@/components/associations/AssociationHeader";
|
||||||
import Icon from "@/components/general/Icon";
|
|
||||||
import { Image } from "@/components/general/Image";
|
|
||||||
import { PageContent } from "@/components/general/PageContent";
|
import { PageContent } from "@/components/general/PageContent";
|
||||||
import { graphql } from "@/gql";
|
import { graphql } from "@/gql";
|
||||||
import { AssociationFragment } from "@/gql/graphql";
|
import { AssociationFragment } from "@/gql/graphql";
|
||||||
import Link from "next/link";
|
|
||||||
import { notFound } from "next/navigation";
|
import { notFound } from "next/navigation";
|
||||||
|
|
||||||
export async function generateStaticParams() {
|
export async function generateStaticParams() {
|
||||||
@ -54,25 +51,7 @@ export default async function Page({ params }: { params: { slug: string } }) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<main className="site-main" id="main">
|
<main className="site-main" id="main">
|
||||||
<Breadcrumb link="/foreninger" text={association.associationType ? association.associationType : "Foreninger"} />
|
<AssociationHeader association={association} />
|
||||||
<section className="page-header">
|
|
||||||
<h1>{association.title}</h1>
|
|
||||||
{association.websiteUrl && (
|
|
||||||
<a className="button" href={association.websiteUrl} target="_blank">
|
|
||||||
<span>Besøk nettside</span>
|
|
||||||
<Icon type="externalLink" />
|
|
||||||
</a>
|
|
||||||
)}
|
|
||||||
{association.logo && (
|
|
||||||
<Image
|
|
||||||
src={association.logo.url}
|
|
||||||
alt={`Logoen til ${association.title}`}
|
|
||||||
width={association.logo.width}
|
|
||||||
height={association.logo.height}
|
|
||||||
sizes="100vw"
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</section>
|
|
||||||
{association.lead && (
|
{association.lead && (
|
||||||
<div
|
<div
|
||||||
className="lead"
|
className="lead"
|
||||||
|
36
web/src/components/associations/AssociationHeader.tsx
Normal file
36
web/src/components/associations/AssociationHeader.tsx
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
import { AssociationFragment } from "@/gql/graphql";
|
||||||
|
import { Image } from "@/components/general/Image";
|
||||||
|
import styles from './associationHeader.module.scss';
|
||||||
|
import { Breadcrumb } from "../general/Breadcrumb";
|
||||||
|
import Icon from "../general/Icon";
|
||||||
|
|
||||||
|
export const AssociationHeader = ({
|
||||||
|
association,
|
||||||
|
}: {
|
||||||
|
association: AssociationFragment;
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<section className={`${styles.associationHeader} ${association.logo && styles.hasLogo}`}>
|
||||||
|
<div>
|
||||||
|
<Breadcrumb link="/foreninger" text={association.associationType ? association.associationType : "Foreninger"} />
|
||||||
|
<h1>{association.title}</h1>
|
||||||
|
{association.websiteUrl && (
|
||||||
|
<a className="button" href={association.websiteUrl} target="_blank">
|
||||||
|
<span>Besøk nettside</span>
|
||||||
|
<Icon type="externalLink" />
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{association.logo && (
|
||||||
|
<Image
|
||||||
|
src={association.logo.url}
|
||||||
|
alt={`Logoen til ${association.title}`}
|
||||||
|
width={association.logo.width}
|
||||||
|
height={association.logo.height}
|
||||||
|
sizes="100vw"
|
||||||
|
className={styles.logo}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
@ -10,8 +10,8 @@ export const AssociationItem = ({
|
|||||||
}) => {
|
}) => {
|
||||||
return (
|
return (
|
||||||
<li className={`${styles.associationItem} linkItem`}>
|
<li className={`${styles.associationItem} linkItem`}>
|
||||||
<div className={styles.image}>
|
{association.logo && (
|
||||||
{association.logo && (
|
<div className={styles.image}>
|
||||||
<Image
|
<Image
|
||||||
src={association.logo.url}
|
src={association.logo.url}
|
||||||
alt={`Logoen til ${association.title}`}
|
alt={`Logoen til ${association.title}`}
|
||||||
@ -19,8 +19,8 @@ export const AssociationItem = ({
|
|||||||
height={0}
|
height={0}
|
||||||
sizes="20vw"
|
sizes="20vw"
|
||||||
/>
|
/>
|
||||||
)}
|
</div>
|
||||||
</div>
|
)}
|
||||||
<div className={styles.text}>
|
<div className={styles.text}>
|
||||||
<h1 className={styles.title}>{association.title}</h1>
|
<h1 className={styles.title}>{association.title}</h1>
|
||||||
{association.excerpt && (
|
{association.excerpt && (
|
||||||
|
@ -0,0 +1,27 @@
|
|||||||
|
.associationHeader {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 2fr 1fr;
|
||||||
|
column-gap: var(--spacing-gap-column);
|
||||||
|
row-gap: var(--spacing-gap-row);
|
||||||
|
max-width: var(--size-width-p);
|
||||||
|
margin: 0 auto var(--spacing-section-bottom);
|
||||||
|
|
||||||
|
&.hasLogo {
|
||||||
|
max-width: var(--size-width-lead);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: var(--font-size-h1);
|
||||||
|
margin-bottom: var(--spacing-m);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.associationHeader {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 16rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
Reference in New Issue
Block a user