From c75ebeae586063ad12c36495a41c2804e54db0b6 Mon Sep 17 00:00:00 2001
From: Paul Weidner <paul.weidner@gmail.com>
Date: Fri, 25 Aug 2023 15:06:29 -0700
Subject: [PATCH] Condense styling of views

---
 modules/core/ui/theme/css/views.css           | 59 +++++++++++++++++++
 .../core/ui/theme/farm_ui_theme.libraries.yml |  4 ++
 modules/core/ui/theme/farm_ui_theme.module    |  7 +++
 3 files changed, 70 insertions(+)
 create mode 100644 modules/core/ui/theme/css/views.css

diff --git a/modules/core/ui/theme/css/views.css b/modules/core/ui/theme/css/views.css
new file mode 100644
index 000000000..53f5ce4c8
--- /dev/null
+++ b/modules/core/ui/theme/css/views.css
@@ -0,0 +1,59 @@
+/* Add spacing below views attachments like the map. */
+.view .view-filters,
+.view .attachment.attachment-before {
+  margin-bottom: var(--gin-spacing-s);
+}
+
+/* Decrease space after exposed filter form. */
+.view .view-filters form.views-exposed-form {
+  margin-bottom: var(--gin-spacing-s);
+}
+
+/* Decrease padding within the view-content wrapper. */
+.view .view-content.gin-layer-wrapper {
+  padding: var(--gin-spacing-xs);
+}
+
+/* Do not wrap text within views table cells. */
+.view table.views-table th,
+.view table.views-table td {
+  max-width: 15em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/*
+  Decrease size of elements in views exposed form.
+  This is inspired by the claro/gin form-element--extrasmall but does not make
+  elements quite as small. Specifically a min-height of 2.5 instead of 1.5.
+*/
+.view form.views-exposed-form .form-element {
+  font-size: var(--gin-font-size-s);
+  line-height: 1.5;
+  border-radius: var(--gin-border-s);
+  min-height: 2.5rem;
+}
+
+/* Styling for text and date elements in exposed form. */
+.view form.views-exposed-form .form-element--type-text,
+.view form.views-exposed-form .form-element--type-date {
+  padding: var(--gin-spacing-xxs) var(--gin-spacing-xs);
+  max-width: 15rem;
+}
+
+/* Styling for select elements in exposed form. */
+.view form.views-exposed-form .form-element--type-select,
+.view form.views-exposed-form .form-element--type-select-multiple {
+  padding: var(--gin-spacing-xxs) var(--gin-spacing-xs);
+  min-width: 3.5rem;
+}
+.view form.views-exposed-form .form-element--type-select {
+  background-size: 1.75rem 0.4375rem;
+  padding-right: calc(1.5rem - 1px);
+}
+
+/* Decrease height of views bulk form action. */
+.view form.views-form div[data-drupal-selector='edit-header'] > div.form-wrapper {
+  padding: 0 0 0 var(--gin-spacing-xs);
+}
diff --git a/modules/core/ui/theme/farm_ui_theme.libraries.yml b/modules/core/ui/theme/farm_ui_theme.libraries.yml
index 8545f23e5..7f54ebf56 100644
--- a/modules/core/ui/theme/farm_ui_theme.libraries.yml
+++ b/modules/core/ui/theme/farm_ui_theme.libraries.yml
@@ -42,3 +42,7 @@ toolbar:
       css/toolbar.css: { }
   js:
     js/toolbar.js: { weight: -50 }
+views:
+  css:
+    theme:
+      css/views.css: { }
diff --git a/modules/core/ui/theme/farm_ui_theme.module b/modules/core/ui/theme/farm_ui_theme.module
index 5e6a1b510..5d01d0da1 100644
--- a/modules/core/ui/theme/farm_ui_theme.module
+++ b/modules/core/ui/theme/farm_ui_theme.module
@@ -124,6 +124,13 @@ function farm_ui_theme_preprocess_plan__full(&$variables) {
   $variables['#attached']['library'][] = 'farm_ui_theme/layout';
 }
 
+/**
+ * Implements hook_preprocess_HOOK().
+ */
+function farm_ui_theme_preprocess_views_view(&$variables) {
+  $variables['#attached']['library'][] = 'farm_ui_theme/views';
+}
+
 /**
  * Splits content into a stacked two-column layout.
  *