From b380adc61fb691fb0a65ae9487f4ba6db71317d8 Mon Sep 17 00:00:00 2001
From: Mark Conroy <mark@annertech.com>
Date: Wed, 10 Apr 2024 11:25:27 +0200
Subject: [PATCH] adds (temp) grid system for views

---
 ecc_theme/css/ecc-shared/grid.css | 79 +++++++++++++++++++++++++++++++
 ecc_theme/ecc_theme.libraries.yml |  5 ++
 ecc_theme/ecc_theme.theme         |  1 +
 3 files changed, 85 insertions(+)
 create mode 100644 ecc_theme/css/ecc-shared/grid.css

diff --git a/ecc_theme/css/ecc-shared/grid.css b/ecc_theme/css/ecc-shared/grid.css
new file mode 100644
index 0000000..357b6ca
--- /dev/null
+++ b/ecc_theme/css/ecc-shared/grid.css
@@ -0,0 +1,79 @@
+/*
+  @TODO: remove this file and library if
+  https://github.com/localgovdrupal/localgov_base/pull/537 is merged.
+*/
+
+/*
+  Any view using the `view--grid` class will have:
+  - 1 column on mobile
+  - 2 columns on tablet and desktop
+  - 3, 4, 5 columns on desktop depending on what extra class you add to the view.
+  - a gap of var(--spacing) between each item, unless you add a gap class.
+  Available classes:
+  - view--grid-thirds
+  - view--grid-quarters
+  - view--grid-fifths
+  As well as that, can can specify the gap with with the following classes:
+  - view--grid-gap-none
+  - view--grid-gap-small
+  - view--grid-gap-smaller
+  - view--grid-gap-smallest
+  - view--grid-gap-medium - default, so no need to manually add to the view.
+  - view--grid-gap-large
+  - view--grid-gap-larger
+  - view--grid-gap-largest
+*/
+.view--grid {
+  --ecc-view-grid-columns: 1;
+  --ecc-view-grid-gap: var(--spacing);
+}
+
+.view--grid-gap-none {
+  --ecc-view-grid-gap: 0;
+}
+.view--grid-gap-small {
+  --ecc-view-grid-gap: var(--spacing-small);
+}
+.view--grid-gap-smaller {
+  --ecc-view-grid-gap: var(--spacing-smaller);
+}
+.view--grid-gap-smallest {
+  --ecc-view-grid-gap: var(--spacing-smallest);
+}
+.view--grid-gap-medium {
+  --ecc-view-grid-gap: var(--spacing);
+}
+.view--grid-gap-large {
+  --ecc-view-grid-gap: var(--spacing-large);
+}
+.view--grid-gap-larger {
+  --ecc-view-grid-gap: var(--spacing-larger);
+}
+.view--grid-gap-largest {
+  --ecc-view-grid-gap: var(--spacing-largest);
+}
+
+.view--grid .view-content {
+  display: grid;
+  grid-template-columns: repeat(var(--ecc-view-grid-columns), 1fr);
+  grid-gap: var(--ecc-view-grid-gap);
+}
+
+@media screen and (min-width: 48rem) {
+  .view--grid .view-content {
+    --ecc-view-grid-columns: 2;
+  }
+}
+
+@media screen and (min-width: 60rem) {
+  .view--grid-thirds .view-content {
+    --ecc-view-grid-columns: 3;
+  }
+  .view--grid-quarters .view-content {
+    --ecc-view-grid-columns: 4;
+  }
+  .view--grid-fifths .view-content {
+    --ecc-view-grid-columns: 5;
+  }
+}
+
diff --git a/ecc_theme/ecc_theme.libraries.yml b/ecc_theme/ecc_theme.libraries.yml
index 9e0e38c..46d2a11 100755
--- a/ecc_theme/ecc_theme.libraries.yml
+++ b/ecc_theme/ecc_theme.libraries.yml
@@ -8,6 +8,11 @@ fonts:
       css/ecc-shared/fonts.css: { weight: 1 }
 
 # Components
+grid:
+  css:
+    theme:
+      css/ecc-shared/grid.css: { weight: 1 }
+
 accordion:
   css:
     theme:
diff --git a/ecc_theme/ecc_theme.theme b/ecc_theme/ecc_theme.theme
index 44f9f15..ed27f58 100755
--- a/ecc_theme/ecc_theme.theme
+++ b/ecc_theme/ecc_theme.theme
@@ -131,6 +131,7 @@ function ecc_theme_preprocess_html(&$variables) {
  * Implements hook_views_pre_render().
  */
 function ecc_theme_views_pre_render($view) {
+  $view->element['#attached']['library'][] = 'ecc_theme/grid';
   if ($view->id() === 'localgov_events_listing' && $view->current_display === 'page_all_events') {
     $view->element['#attached']['library'][] = 'ecc_theme/events-listing-page';
   }