Vis undergrupper på matvaregruppe-siden

Mattilsynet · Oct 16, 2023 · 5cd8d4c · 5cd8d4c
1 parent 910d50b
commit 5cd8d4c
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 3 deletions.
diff --git a/src/matvaretabellen/pages.clj b/src/matvaretabellen/pages.clj
@@ -133,9 +133,12 @@
                                       (create-food-group-breadcrumbs locale food-group false))})]]
        [:div.mvt-hero-banner
         [:div.container
-         [:div {:style {:display "flex"}}
-          [:div {:style {:flex "1"}}
-           [:h1.h1 (get-in food-group [:food-group/name locale])]]]]]]))))
+         [:h1.h1 (get-in food-group [:food-group/name locale])]
+         [:div.mvt-cards.mtl
+          (for [child (:food-group/_parent food-group)]
+            (let [the-name (get-in child [:food-group/name locale])]
+              [:a.mvt-card {:href (urls/get-food-group-url locale the-name)}
+               the-name]))]]]]))))
 
 (defn render-page [context page]
   (let [db (:foods/db context)]

diff --git a/ui/resources/public/css/matvaretabellen.css b/ui/resources/public/css/matvaretabellen.css
@@ -104,6 +104,19 @@
     margin-top: 6px;
 }
 
+.mvt-cards {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 24px;
+}
+
+.mvt-card {
+    width: 30vw;
+    flex-shrink: 0;
+    padding: 24px;
+    background: #fff;
+}
+
 .mvt-hero-banner {
     background: #F1EADF;
     padding: 40px 0;