Merge pull request #152 from USEPA/IN-439b

IN-439b USWDS Collection Styling for new Dynamic Lists
USEPA · Jul 1, 2021 · ba6f978 · ba6f978
2 parents 3e3d4e7 + 33d47af
commit ba6f978
Show file tree

Hide file tree

Showing 15 changed files with 79 additions and 28 deletions.
diff --git a/config/sync/core.entity_form_display.paragraph.views_reference_list.default.yml b/config/sync/core.entity_form_display.paragraph.views_reference_list.default.yml
@@ -14,15 +14,15 @@ bundle: views_reference_list
 mode: default
 content:
   field_list_header:
-    weight: 1
+    weight: 0
     settings:
       size: 60
       placeholder: ''
     third_party_settings: {  }
     type: string_textfield
     region: content
   field_views_reference:
-    weight: 0
+    weight: 1
     settings: {  }
     third_party_settings: {  }
     type: viewsreference_select

diff --git a/config/sync/field.field.paragraph.views_reference_list.field_views_reference.yml b/config/sync/field.field.paragraph.views_reference_list.field_views_reference.yml
@@ -11,7 +11,7 @@ id: paragraph.views_reference_list.field_views_reference
 field_name: field_views_reference
 entity_type: paragraph
 bundle: views_reference_list
-label: 'Views Reference'
+label: 'Content Type'
 description: ''
 required: false
 translatable: false

diff --git a/config/sync/views.view.articles_list.yml b/config/sync/views.view.articles_list.yml
@@ -167,7 +167,7 @@ display:
           exposed: true
           expose:
             operator_id: field_keywords_target_id_op
-            label: 'Keywords (field_keywords)'
+            label: Keywords
             description: ''
             use_operator: false
             operator: field_keywords_target_id_op
@@ -232,7 +232,7 @@ display:
       display_extenders: {  }
       title: ''
       use_ajax: true
-      use_more: true
+      use_more: false
       use_more_always: true
       use_more_text: 'Go to Google with this ''more'' link'
       link_url: 'https://www.google.com/'

diff --git a/config/sync/views.view.blog_post_list.yml b/config/sync/views.view.blog_post_list.yml
@@ -198,7 +198,7 @@ display:
           exposed: true
           expose:
             operator_id: field_keywords_target_id_op
-            label: 'Keywords (field_keywords)'
+            label: Keywords
             description: ''
             use_operator: false
             operator: field_keywords_target_id_op

diff --git a/config/sync/views.view.events_list.yml b/config/sync/views.view.events_list.yml
@@ -198,7 +198,7 @@ display:
           exposed: true
           expose:
             operator_id: field_event_tags_target_id_op
-            label: 'Tags (field_event_tags)'
+            label: Tags
             description: ''
             use_operator: false
             operator: field_event_tags_target_id_op

diff --git a/docroot/modules/custom/epa_core/css/admin_forms.css b/docroot/modules/custom/epa_core/css/admin_forms.css
@@ -0,0 +1,6 @@
+/* This file intends to override the 'Seven' theme styling used for admin pages. To be used in a pinch only. */
+/* In 99% of circumstances, form items etc should be removed via configuration changes */
+
+div[class*='exposed-filters-vr-exposed-filters-visible'] {
+  display: none;
+}
diff --git a/docroot/modules/custom/epa_core/epa_core.libraries.yml b/docroot/modules/custom/epa_core/epa_core.libraries.yml
@@ -0,0 +1,11 @@
+hierarchy-handler:
+  version: 1.x
+  js:
+    js/HierarchySelectHandler.js: {}
+  dependencies:
+    - core/jquery
+admin-forms:
+  version: 1.x
+  css:
+    theme:
+      css/admin_forms.css: {}
diff --git a/docroot/modules/custom/epa_core/epa_core.module b/docroot/modules/custom/epa_core/epa_core.module
@@ -5,9 +5,21 @@
  * Contains misc features for EPA intranet.
  */
 
+
 /**
  * Implements hook_views_plugins_style_alter() to show empty calendar when not events exist.
  */
 function epa_core_views_plugins_style_alter(array &$plugins) {
   $plugins['fullcalendar_view_display']['even empty'] = true;
-}
+}
+
+/**
+ * Attach handler js if a hierarchy input type is detected
+ * Implements hook_form_alter().
+ */
+function epa_core_form_alter(&$form, \Drupal\Core\Form\FormStateInterface $form_state, $form_id) {
+  if (str_contains($form_id, 'webform') && $form_id != "webform_source_form") {
+    $form['#attached']['library'][] = 'epa_core/hierarchy-handler';
+  }
+  $form['#attached']['library'][] = 'epa_core/admin-forms';
+}
diff --git a/docroot/themes/custom/epa_intranet/assets/css/global.css b/docroot/themes/custom/epa_intranet/assets/css/global.css
@@ -3,6 +3,10 @@
   min-width: 0;
 }
 
+div[class*='exposed-filters-vr-exposed-filters-visible'] {
+  display: none;
+}
+
 div.more-link {
   margin-bottom: 1rem;
 }
@@ -15,7 +19,6 @@ div.more-link {
   font-family: Public Sans Web,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
   font-size: .88rem;
   line-height: 1.2;
-  margin-bottom: 1rem;
   margin-top: 2rem;
   padding-left: 1.25rem;
   padding-right: 1.25rem;

diff --git a/docroot/themes/custom/epa_intranet/epa_intranet.theme b/docroot/themes/custom/epa_intranet/epa_intranet.theme
@@ -108,6 +108,19 @@ function epa_intranet_preprocess_field(&$variables, $hook) {
   }
 }
 
+// Determine final date value for recurring dates and make vals accessible via twig
+function epa_intranet_preprocess_node__event(&$variables) {
+  if ($variables['view_mode'] == 'reference_list') {
+    $final_index = count($variables['elements']['field_event_date']['#items'])-1;
+    $last_element = $variables['elements']['field_event_date']['#items'][$final_index];
+    foreach($variables['elements']['field_event_date']['#items'] as $key => $item) {
+      $event_start_date = $item->getValue()['value'];
+      $variables['rawDateTime'] = date("Y-M-d H:i:s", $event_start_date);
+      $variables['displayMonth'] = date("M", $event_start_date);
+      $variables['displayDay'] = date("d", $event_start_date);
+    }
+  }
+}
 
 function epa_intranet_preprocess_media(&$variables) {
   if ($variables['view_mode'] == 'slideshow') {

diff --git a/docroot/themes/custom/epa_intranet/templates/field--node--field-event-date.html.twig b/docroot/themes/custom/epa_intranet/templates/field--node--field-event-date.html.twig
@@ -21,7 +21,6 @@
  */
 #}
 {% set view_mode = element['#view_mode'] %}
-
 {% if view_mode == 'reference_list' or view_mode == 'list' %}
   {% if items|length > 1 %}
     <em>
@@ -59,7 +58,7 @@
     label_display == 'inline' ? 'inline',
   ] %}
 
-  {% if (formatter == 'smartdate_recurring' and showRecurring) or (formatter == 'addtocal_view' and showEventDate) or (formatter == 'smartdate_default' and showEventDate) %}
+  {% if (formatter == 'smartdate_recurring' and showRecurring) or (formatter == 'addtocal_view' and showEventDate) %}
     <div{{ attributes.addClass(classes) }}>
       {% if not label_hidden %}
         {% if formatter == 'smartdate_recurring' %}
@@ -70,11 +69,11 @@
       {% endif %}
       <div class="card-body py-1 display-grid">
         {% for item in items %}
-          {% if (item.recurring and formatter == 'smartdate_recurring') or (not item.recurring and formatter == 'addtocal_view') or (not item.recurring and formatter == 'smartdate_default') %}
+          {% if (item.recurring and formatter == 'smartdate_recurring') or (not item.recurring and formatter == 'addtocal_view') %}
             <p{{ item.attributes }}>{{ item.content }}</p>
           {% endif %}
         {% endfor %}
       </div>
     </div>
-    {% endif %}
+  {% endif %}
 {% endif %}
diff --git a/docroot/themes/custom/epa_intranet/templates/node--article--reference-list.html.twig b/docroot/themes/custom/epa_intranet/templates/node--article--reference-list.html.twig
@@ -78,9 +78,9 @@
   <div class="usa-collection__body">
     {{ title_prefix }}
     {{ title_attributes }}
-    <h3 class="usa-collection__heading">
+    <span class="usa-collection__heading font-weight-bold">
       <a href="{{ url }}" rel="bookmark">{{ label }}</a>
-    </h3>
+    </span>
     {{ title_suffix }}
   </div>
 </li>
diff --git a/docroot/themes/custom/epa_intranet/templates/node--blog-post--reference-list.html.twig b/docroot/themes/custom/epa_intranet/templates/node--blog-post--reference-list.html.twig
@@ -77,9 +77,9 @@
   <div class="usa-collection__body">
     {{ title_prefix }}
     {{ title_attributes }}
-    <h3 class="usa-collection__heading">
+    <span class="usa-collection__heading font-weight-bold">
       <a href="{{ url }}" rel="bookmark">{{ label }}</a>
-    </h3>
+    </span>
     {{ title_suffix }}
   </div>
 </li>
diff --git a/docroot/themes/custom/epa_intranet/templates/node--event--reference-list.html.twig b/docroot/themes/custom/epa_intranet/templates/node--event--reference-list.html.twig
@@ -72,20 +72,27 @@
  * @ingroup themeable
  */
 #}
-
 <p>
-  <article{{ attributes }}>
-
+<li {{ attributes.addClass('usa-collection__item') }}>
+  <div class="usa-collection__calendar-date">
+    <time datetime="{{ rawDateTime }}">
+      <span class="usa-collection__calendar-date-month">{{ displayMonth }}</span>
+      <span class="usa-collection__calendar-date-day">{{ displayDay }}</span>
+    </time>
+  </div>
+  <div class="usa-collection__body">
     {{ title_prefix }}
     {% if label and not page %}
       {{ title_attributes }}
-      <a href="{{ url }}" rel="bookmark">{{ label }}</a>
-
+      <span class="usa-collection__heading font-weight-bold">
+        <a href="{{ url }}" rel="bookmark">{{ label }}</a>
+      </span>
     {% endif %}
     {{ title_suffix }}
+    <div class="usa-collection__description">
+      {{ content.field_event_date }}
+    </div>
+  </div>
 
-    <br/>
-    {{ content.field_event_date }}
-
-  </article>
+</li>
 </p>
diff --git a/docroot/themes/custom/epa_intranet/templates/paragraph--views-reference-list.html.twig b/docroot/themes/custom/epa_intranet/templates/paragraph--views-reference-list.html.twig
@@ -47,10 +47,10 @@
 
 {% block paragraph %}
   <div {{ attributes.addClass(classes) }}>
-    <div class="{{ isPage ? 'site-preview-heading' : 'm-0 font-weight-bold'}}">
+    <div class="site-preview-heading {{ not isPage ? 'm-0 p-0'}}">
       {{ content.field_list_header }}
     </div>
-    <article class="{{ isPage ? 'card-body' }}  py-1">
+    <article class="{{ isPage ? 'card-body' }} py-1">
       <ul class="usa-collection">
         {{ content.field_views_reference }}
       </ul>