Merge pull request #62 from essexcountycouncil/LP-96/add-temp-grid-sy…

…stem-for-views

adds (temp) grid system for views

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;
+  }
+}
+

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:

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';
   }