From a1a2050f2724db512d3cc4e6efd8831a4b2acba5 Mon Sep 17 00:00:00 2001
From: elise <hei@elisejakob.no>
Date: Tue, 6 Aug 2024 01:34:07 +0200
Subject: [PATCH] association styling progress

---
 web/src/app/foreninger/page.tsx               |  2 +-
 .../associations/AssociationList.tsx          | 18 ++++++++++----
 .../associations/associationItem.module.scss  | 24 ++++++++++++++++---
 .../associations/associationList.module.scss  | 11 +++++++--
 4 files changed, 44 insertions(+), 11 deletions(-)

diff --git a/web/src/app/foreninger/page.tsx b/web/src/app/foreninger/page.tsx
index 1f5b491..97ae634 100644
--- a/web/src/app/foreninger/page.tsx
+++ b/web/src/app/foreninger/page.tsx
@@ -61,7 +61,7 @@ export default async function Page() {
     <main className="site-main" id="main">
       <PageHeader heading={index.title} lead={index.lead} />
       {index.body && <Blocks blocks={index.body} />}
-      <AssociationList associations={associations} />
+      <AssociationList associations={associations} heading="Foreninger og utvalg" />
     </main>
   );
 }
diff --git a/web/src/components/associations/AssociationList.tsx b/web/src/components/associations/AssociationList.tsx
index 8951aea..69cb71f 100644
--- a/web/src/components/associations/AssociationList.tsx
+++ b/web/src/components/associations/AssociationList.tsx
@@ -1,17 +1,25 @@
 import { AssociationFragment } from "@/gql/graphql";
 import { AssociationItem } from "./AssociationItem";
 import styles from "./associationList.module.scss";
+import { SectionHeader } from "../general/SectionHeader";
 
 export const AssociationList = ({
   associations,
+  heading
 }: {
   associations: AssociationFragment[];
+  heading: string
 }) => {
   return (
-    <ul className={styles.associationList}>
-      {associations.map((association) => (
-        <AssociationItem key={association.id} association={association} />
-      ))}
-    </ul>
+    <section>
+      {heading && (
+        <SectionHeader heading={heading} />
+      )}
+      <ul className={styles.associationList}>
+        {associations.map((association) => (
+          <AssociationItem key={association.id} association={association} />
+        ))}
+      </ul>
+    </section>
   );
 };
diff --git a/web/src/components/associations/associationItem.module.scss b/web/src/components/associations/associationItem.module.scss
index 7ac8dda..d5a6271 100644
--- a/web/src/components/associations/associationItem.module.scss
+++ b/web/src/components/associations/associationItem.module.scss
@@ -1,16 +1,19 @@
 .associationItem {
+  --item-height: 10rem;
   position: relative;
   list-style: none;
   display: grid;
-  grid-template-columns: 7rem 1fr;
+  grid-template-columns: 1fr auto;
   align-items: flex-start;
-  column-gap: var(--spacing-gap-column);
+  column-gap: 1rem;
   row-gap: var(--spacing-gap-row);
   padding: var(--spacing-s);
+  background: var(--color-background-secondary);
 }
 
 .image {
-  width: 100%;
+  order: 2;
+  width: 6rem;
   padding-top: 100%;
   position: relative;
 
@@ -24,11 +27,26 @@
 }
 
 .text {
+  order: 1;
   padding: 0;
+  height: var(--item-height);
+  overflow: hidden;
+  position: relative;
+  &:after {
+    content: "";
+    background-image: linear-gradient(to top, var(--color-background-secondary), transparent);
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 4rem;
+    pointer-events: none;
+  }
 }
 
 .title {
   margin-bottom: var(--spacing-s);
+  font-size: 1.1rem;
 }
 
 .excerpt {
diff --git a/web/src/components/associations/associationList.module.scss b/web/src/components/associations/associationList.module.scss
index a1fa670..b5de610 100644
--- a/web/src/components/associations/associationList.module.scss
+++ b/web/src/components/associations/associationList.module.scss
@@ -1,7 +1,14 @@
 .associationList {
   display: grid;
-  grid-template-columns: 1fr;
-  column-gap: var(--spacing-gap-column);
+  grid-template-columns: repeat(3, 1fr);
+  column-gap: calc(var(--spacing-gap-column)/2);
   row-gap: var(--spacing-gap-row);
   padding-bottom: var(--spacing-section-bottom);
+}
+
+
+@media (max-width: 900px) {
+  .associationList {
+    grid-template-columns: 1fr;
+  }
 }
\ No newline at end of file