SDSS-1201 | @jdwjdwjdw | Add 4 column card grid option for lists, adjust one-column layout, fixup load more issue

docroot/profiles/sdss/sdss_profile/modules/sdss_layout_paragraphs/layouts/one_column/one-column.css

@@ -14,7 +14,9 @@
 }
 
 @media screen and (min-width: 992px) {
-  .layout--layout-paragraphs-one-column .ds-entity--paragraph.ds-entity--stanford-card {
+  .layout--layout-paragraphs-one-column .ds-entity--paragraph.ds-entity--stanford-card,
+  .layout--layout-paragraphs-one-column .ptype-sdss-news-list-card,
+  .layout--layout-paragraphs-one-column .paragraph--type--stanford-entity .su-entity-item>div:first-child:last-child {
     width: 100%;
     max-width: 980px;
     margin: 0 auto;
@@ -25,5 +27,22 @@
     max-width: 850px;
     margin: 0 auto;
   }
+}
+
+@media screen and (min-width: 1200px) {
+  .layout--layout-paragraphs-one-column .paragraph--type--stanford-card,
+  .layout--layout-paragraphs-one-column .ptype-stanford-card,
+  .layout--layout-paragraphs-one-column .paragraph--type--stanford-cta-list,
+  .layout--layout-paragraphs-one-column .ptype-stanford-cta-list,
+  .layout--layout-paragraphs-one-column .paragraph--type--stanford-entity,
+  .layout--layout-paragraphs-one-column .ptype-stanford-entity,
+  .layout--layout-paragraphs-one-column .paragraph--type--stanford-gallery,
+  .layout--layout-paragraphs-one-column .ptype-stanford-gallery,
+  .layout--layout-paragraphs-one-column .ptype-stanford-image-cta,
+  .layout--layout-paragraphs-one-column .paragraph--type--stanford-lists,
+  .layout--layout-paragraphs-one-column .ptype-stanford-lists,
+  .layout--layout-paragraphs-one-column .ptype-stanford-media-caption {
+    max-width: 100%;
+  }
 
 }

docroot/profiles/sdss/sdss_profile/modules/sdss_layout_paragraphs/layouts/one_four_one/layout-paragraphs-sdss-one-four-one.html.twig

@@ -12,7 +12,6 @@
 #}
 {%
   set classes = [
-    'centered-content',
     'layout',
     'layout--layout-paragraphs-one-four-one',
     'layout--layout-paragraphs-sdss-one-four-one',
@@ -28,7 +27,7 @@
       </div>
     {% endif %}
 
-    <div class="content-well centered-container">
+    <div class="content-well">
     {% if content.first %}
       <div {{ region_attributes.first.addClass('layout__region', 'layout__region--first', 'layout__region--column') }}>
         {{ content.first }}

docroot/profiles/sdss/sdss_profile/modules/sdss_layout_paragraphs/layouts/one_four_one/one-four-one.css

@@ -35,11 +35,6 @@ XS 390px
   grid-template-columns: repeat(2, 1fr);
 }
 
-.flex-lg-9-of-12.main-region .layout-paragraphs-sdss-one-four-one .centered-container {
-  margin-left: unset;
-  margin-right: unset;
-}
-
 /* At Least Large */
 @media screen and (min-width: 992px) {
   .layout--layout-paragraphs-one-four-one .content-well {
@@ -90,3 +85,9 @@ XS 390px
   max-width: 100%;
 }
 
+/* Style lists in node edit page for one-four-one layout */
+.layout--layout-paragraphs-one-four-one .js-lpb-component[data-type=stanford_lists] .grid-container-3 {
+  grid-gap: 20px;
+  display: grid;
+  grid-template-columns: repeat(3,1fr)
+}

docroot/profiles/sdss/sdss_profile/themes/sdss_subtheme/js/scripts.js

@@ -1,16 +1,16 @@
-(function ($, Drupal, once) {
+(function ($, Drupal) {
   'use strict';
   Drupal.behaviors.sdss_subtheme = {
-    attach: function (context, settings) {
+    attach: function (context) {
 
       // Add search link button to navigation.
-      $('#block-sdss-subtheme-main-navigation').after('<a href="/search" id="sdss-button--search-link" class="su-site-search__submit"><span class="visually-hidden">Search</span></a>');
+      $('#block-sdss-subtheme-main-navigation', context).after('<a href="/search" id="sdss-button--search-link" class="su-site-search__submit"><span class="visually-hidden">Search</span></a>');
 
       // Add current path as a drupal redirect desitnation to saml_login links.
       // Will redirect the user to the current page after logging in.
-      $('a[href="/saml_login"').attr("href", "/saml/login?destination=" + window.location.pathname);
+      $('a[href="/saml_login"', context).attr("href", "/saml/login?destination=" + window.location.pathname);
 
     }
   };
 
-})(jQuery, Drupal, once);
+})(jQuery, Drupal);

docroot/profiles/sdss/sdss_profile/themes/sdss_subtheme/sdss_subtheme.libraries.yml

@@ -97,3 +97,9 @@ sdss:
      dist/css/sdss_subtheme.css: {minified: true }
   js:
     js/scripts.js: { scope: footer }
+
+
+basic-page-full-width:
+  css:
+    theme:
+      dist/css/full-width.basic-page.css: {}

docroot/profiles/sdss/sdss_profile/themes/sdss_subtheme/sdss_subtheme.react_behaviors.yml

@@ -57,3 +57,17 @@ banner_variant_info:  # part of the key after the :
       options:
         sdss-banner-wrapper--headline-default: Default
         sdss-banner-wrapper--headline-center: Center
+
+lists_variant_info:
+  id: lists_style
+  label: Lists Paragraph Style
+  bundles:
+    - paragraphs_type|stanford_lists
+  config:
+    grid_rows:
+      type: select
+      title: Max number of grid columns
+      description: Applicable only to lists with cards and when "Advanced options > Items to display" is set above 3
+      empty_option: Default
+      options:
+        sdss-card-grid--four-col: Max 4 grid columns

docroot/profiles/sdss/sdss_profile/themes/sdss_subtheme/sdss_subtheme.theme

@@ -4,6 +4,8 @@
  * Preprocess functions for SDSS Subtheme.
  */
 
+use Drupal\node\NodeInterface;
+
 /**
  * Prepares variables for the html.html.twig template.
  */
@@ -123,5 +125,30 @@ function sdss_subtheme_preprocess_page(&$vars) {
   // These need to allows be the "dark" variants for the SDSS subtheme.
   $vars['brand_bar_variant'] = 'su-brand-bar--dark';
   $vars['global_footer_variant'] = 'su-global-footer--dark';
+
+  // Implement full-width basic page styles
+  $is_page_node = isset($vars['node']) && $vars['node'] instanceof NodeInterface && $vars['node']->bundle() == 'stanford_page';
+
+  if (!$is_page_node) {
+    return;
+  }
+
+  $has_layout_field = $vars['node']->hasField('layout_selection') && $vars['node']->get('layout_selection')->getString() == 'stanford_basic_page_full';
+
+  if ($has_layout_field) {
+    $vars['#attached']['library'][] = 'sdss_subtheme/basic-page-full-width';
+  }
 }
 
+/**
+ * Implements hook_preprocess_lists().
+ */
+function sdss_subtheme_preprocess_paragraph__stanford_lists(array &$variables): void {
+  /** @var \Drupal\paragraphs\Entity\Paragraph $paragraph */
+  $paragraph = &$variables['paragraph'];
+  $existing_classes = $variables['attributes']['class'] ?? [];
+  $extra_classes = [
+    $paragraph->getBehaviorSetting('react_paragraphs:lists_variant_info', 'grid_rows'),
+  ];
+  $variables['attributes']['class'] = array_merge($existing_classes, $extra_classes);
+}

docroot/profiles/sdss/sdss_profile/themes/sdss_subtheme/src/scss/basic-page/full-width.scss

@@ -0,0 +1,43 @@
+@charset "UTF-8";
+
+// My theme's config settings.
+$su-image-path: '~decanter/core/src/img';
+$fa-font-path:  '~@fortawesome/fontawesome-free/webfonts';
+
+// Import Decanter Library:
+@import 'decanter/core/src/scss/decanter-no-markup';
+
+// Import SDSS utilities
+@import '../utilities/index';
+
+// Full width styles for one-column layout
+.layout-paragraphs-sdss-one-column {
+  // All paragraphs except banner, news spotlight, wysiwyg, and news list card
+  .ptype-stanford-lists,
+  .ptype-stanford-gallery,
+  .ptype-stanford-card,
+  .ptype-stanford-media-caption,
+  .ptype-stanford-entity {
+    @include sdss-centered-column;
+  }
+}
+
+// Full width styles for one-four-one layout
+.layout-paragraphs-sdss-one-four-one {
+  .content-well {
+    @include sdss-centered-column;
+  }
+
+  .layout__region--top,
+  .layout__region--bottom {
+
+    // All paragraphs except banner, news spotlight, wysiwyg, and news list card
+    .ptype-stanford-lists,
+    .ptype-stanford-gallery,
+    .ptype-stanford-card,
+    .ptype-stanford-media-caption,
+    .ptype-stanford-entity {
+      @include sdss-centered-column;
+    }
+  }
+}

docroot/profiles/sdss/sdss_profile/themes/sdss_subtheme/src/scss/components/index.scss

@@ -27,6 +27,7 @@
 @import 'card/index.scss';
 @import 'events/index.scss';
 @import 'header/index.scss';
+@import 'lists/index.scss';
 @import 'local-footer/index.scss';
 @import 'lockup/index.scss';
 @import 'login-page/index.scss';

docroot/profiles/sdss/sdss_profile/themes/sdss_subtheme/src/scss/components/lists/_lists-paragraph.scss

@@ -0,0 +1,16 @@
+@charset "UTF-8";
+
+// Max four card grid option for card grid lists in one column layout
+.layout--layout-paragraphs-one-column {
+  .sdss-card-grid--four-col {
+    .grid-container-3 {
+      @include grid-media-min('md') {
+        grid-template-columns: repeat(2,minmax(0,1fr));
+      }
+
+      @include grid-media-min('2xl') {
+        grid-template-columns: repeat(4,minmax(0,1fr));
+      }
+    }
+  }
+}

docroot/profiles/sdss/sdss_profile/themes/sdss_subtheme/src/scss/components/lists/index.scss

@@ -0,0 +1,5 @@
+@charset "UTF-8";
+
+// Lists Roll Up
+
+@import 'lists-paragraph';

docroot/profiles/sdss/sdss_profile/themes/sdss_subtheme/src/scss/components/news-list-card/_news-list-card.scss

@@ -80,10 +80,3 @@
     }
   }
 }
-
-// Center one-col layout
-.layout-paragraphs-sdss-one-column {
-  .paragraph--type--sdss-news-list-card {
-    @include centered-column;
-  }
-}

docroot/profiles/sdss/sdss_profile/themes/sdss_subtheme/src/scss/components/newsroom/_spotlight.scss

@@ -141,20 +141,3 @@
     }
   }
 }
-
-// Added margins to full width on the 4-col for all paragraphs except banners.
-.node--layout-full {
-  .layout-paragraphs-sdss-one-four-one {
-    .layout__region--top,
-    .layout__region--bottom {
-      .ptype-stanford-lists,
-      .ptype-stanford-wysiwyg,
-      .ptype-stanford-gallery,
-      .ptype-stanford-card,
-      .ptype-stanford-media-caption,
-      .ptype-stanford-entity  {
-        @include sdss-centered-column;
-      }
-    }
-  }
-}

docroot/profiles/sdss/sdss_profile/themes/sdss_subtheme/webpack.config.js

@@ -18,6 +18,7 @@ var webpackConfig = {
   entry: {
     "ckeditor": path.resolve("src/scss/ckeditor.scss"),
     "sdss_subtheme": path.resolve("src/scss/config/index.scss"),
+    "full-width.basic-page": ["./src/scss/basic-page/full-width.scss"],
   },
   output: {
     path: config.distFolder,