🎨 Dynamic grid

navikt · Dec 9, 2023 · 67d8a39 · 67d8a39
1 parent 5e76558
commit 67d8a39
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 19 deletions.
diff --git a/aksel.nav.no/website/components/layout/god-praksis-page/articles/ArticleCard.tsx b/aksel.nav.no/website/components/layout/god-praksis-page/articles/ArticleCard.tsx
@@ -35,7 +35,7 @@ export const ArticleCard = ({
     <Link
       href={`/${slug}`}
       className={cl(
-        "flex-shrink w-full overflow-hidden text-ellipsis hover:shadow-large px-10 pt-6 pb-8 rounded-xlarge bg-surface-default shadow-small",
+        "flex-shrink w-full focus:outline-none focus-visible:shadow-focus overflow-hidden text-ellipsis hover:shadow-large px-10 pt-6 pb-8 rounded-xlarge bg-surface-default shadow-small",
         {
           [styles.articleGrid]: group === "initial",
           [styles.articleGridLazy]: group === "lazy",

diff --git a/aksel.nav.no/website/components/layout/god-praksis-page/articles/ArticleGrid.tsx b/aksel.nav.no/website/components/layout/god-praksis-page/articles/ArticleGrid.tsx
@@ -1,5 +1,4 @@
 import cl from "clsx";
-import { HGrid } from "@navikt/ds-react";
 import { GpArticleT } from "@/layout/god-praksis-page/types";
 import { ArticleCard } from "./ArticleCard";
 import styles from "./articles.module.css";
@@ -18,23 +17,28 @@ function ArticleGrid({ data, initialData, loaded }: ArticleGridT) {
   return (
     <div>
       {loaded && (
-        <HGrid
-          gap="6"
-          columns={{ xs: 1, md: 2, lg: 3 }}
-          className={cl("pt-5", styles.articleGrid)}
-        >
-          {initialData.map((article, idx) => (
-            <ArticleCard key={article._id + idx} group="initial" {...article} />
-          ))}
-          {data.map((article, idx) => (
-            <ArticleCard
-              key={idx}
-              group="lazy"
-              delay={((idx % 3) + 1) * 300}
-              {...article}
-            />
-          ))}
-        </HGrid>
+        <div className="grid gap-5">
+          <div className={cl("pt-5", styles.initialGrid, styles.articleGrid)}>
+            {initialData.map((article, idx) => (
+              <ArticleCard
+                key={article._id + idx}
+                group="initial"
+                {...article}
+              />
+            ))}
+            {data.map((article, idx) => (
+              <ArticleCard
+                key={idx}
+                group="lazy"
+                delay={((idx % 3) + 1) * 300}
+                {...article}
+              />
+            ))}
+          </div>
+          {/* <HGrid gap="6" columns={{ xs: 1, md: 2, lg: 3 }}>
+
+          </HGrid> */}
+        </div>
       )}
     </div>
   );

diff --git a/aksel.nav.no/website/components/layout/god-praksis-page/articles/articles.module.css b/aksel.nav.no/website/components/layout/god-praksis-page/articles/articles.module.css
@@ -4,6 +4,7 @@
 
 .articleGridLazy {
   animation: articleGridFadeUpLazy 600ms forwards;
+  transition: none;
 }
 
 @keyframes articleGridFadeUp {
@@ -19,3 +20,41 @@
     transform: translateY(2rem);
   }
 }
+
+.initialGrid {
+  display: grid;
+  gap: var(--a-spacing-6);
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.initialGrid > :is(:nth-child(9n + 1)) {
+  grid-row: span 2 / span 2;
+}
+
+.initialGrid > :is(:nth-child(9n + 2), :nth-child(9n + 3)) {
+  grid-column: span 2 / span 2;
+}
+
+.initialGrid > :is(:nth-child(9n + 4)) {
+  grid-column: span 2 / span 2;
+}
+
+.initialGrid > :is(:nth-child(9n + 5)) {
+  grid-row: span 2 / span 2;
+}
+
+.initialGrid > :is(:nth-child(9n + 6)) {
+  grid-column: span 2 / span 2;
+}
+
+.initialGrid > :is(:nth-child(9n + 7)) {
+  grid-row: span 2 / span 2;
+}
+
+.initialGrid > :is(:nth-child(9n + 8)) {
+  grid-column: span 2 / span 2;
+}
+
+.initialGrid > :is(:nth-child(9n + 9)) {
+  grid-column: span 2 / span 2;
+}