Merge pull request #1456 from CuBoulder/issue/1435

Homepage updates
CuBoulder · Nov 12, 2024 · 1d5a37d · 1d5a37d
2 parents 9cd3cd2 + 783ee69
commit 1d5a37d
Show file tree

Hide file tree

Showing 7 changed files with 86 additions and 33 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+- ### Homepage updates
+  Handful of updates for the above and below content regions as well as the homepage footer style
+
+  Sister PR: https://github.com/CuBoulder/ucb_site_configuration/pull/71
+
+  Resolves #1435 
+---
+
 - ### Newsletter: Additional Style Fixes
   - Header issues fixed including: Campus logo too small, Website link wrong color, Newsletter title too small, and date and website link should be smaller. Email header too large. Provided correct email header from Lissa ( thanks!).   **NOTE**: Link color SHOULD have all the correct client-specific and dark/light mode overrides being applied to force brand colors... but is not guaranteed to work across all clients equally due to email HTML having zero standards between clients. 
   - Fixes spacing  between border and next articles in a series of Articles or User-content. Previously the top spacing was too small.

diff --git a/boulder_base.theme b/boulder_base.theme
@@ -166,13 +166,17 @@ function boulder_base_preprocess_page(array &$variables) {
   $variables['ucb_footer_menu_default_links'] = theme_get_setting('ucb_footer_menu_default_links');
   $variables['show_breadcrumb'] = theme_get_setting('ucb_breadcrumb_nav');
   $variables['theme_path'] = base_path() . $variables['directory'];
+  $variables['ucb_homepage_header'] = theme_get_setting('ucb_homepage_header');
   $variables['ucb_campus_header_color'] = theme_get_setting('ucb_campus_header_color');
   $variables['ucb_header_color'] = $headerColor = theme_get_setting('ucb_header_color');
   $variables['ucb_be_boulder'] = theme_get_setting('ucb_be_boulder');
   $variables['ucb_sidebar_position'] = theme_get_setting('ucb_sidebar_position');
   $variables['ucb_rave_alerts'] = theme_get_setting('ucb_rave_alerts');
   $variables['ucb_sticky_menu'] = theme_get_setting('ucb_sticky_menu');
   $variables['ucb_heading_font'] = theme_get_setting('ucb_heading_font');
+  $variables['ucb_above_content_region_color'] = theme_get_setting('ucb_above_content_region_color');
+  $variables['ucb_after_content_one_region_color'] = theme_get_setting('ucb_after_content_one_region_color');
+  $variables['ucb_after_content_two_region_color'] = theme_get_setting('ucb_after_content_two_region_color');
   $useCustomLogo = theme_get_setting('ucb_use_custom_logo');
   if ($useCustomLogo) {
     $fileUrlGenerator = \Drupal::service('file_url_generator');

diff --git a/config/install/boulder_base.settings.yml b/config/install/boulder_base.settings.yml
@@ -9,6 +9,7 @@ favicon:
   use_default: 0
   path: /themes/custom/boulder_base/favicon.png
   mimetype: image/png
+ucb_homepage_header: 0
 ucb_campus_header_color: '1'
 ucb_header_color: '3'
 ucb_sidebar_position: right
@@ -22,4 +23,7 @@ ucb_footer_menu_default_links: 0
 ucb_breadcrumb_nav: 1
 ucb_use_custom_logo: false
 ucb_heading_font: 'bold'
+ucb_above_content_region_color: 'white'
+ucb_after_content_one_region_color: 'white'
+ucb_after_content_two_region_color: 'white'
 web_express_version: '20241030'
diff --git a/css/layout-builder-styles.css b/css/layout-builder-styles.css
@@ -263,7 +263,7 @@
   padding-bottom: 0;
 }
 
-.ucb-bootstrap-layout-section .column .block:last-child, .ucb-sidebar .block:last-child, .ucb-above-content-region .block:last-child, .ucb-below-content-region .block:last-child {
+.ucb-bootstrap-layout-section .column .block:last-child, .ucb-sidebar .block:last-child{
   margin-bottom: 0
 }
 

diff --git a/css/ucb-brand-bar.css b/css/ucb-brand-bar.css
@@ -31,6 +31,10 @@
   .ucb-brand-bar img.ucb-logo {
     max-width: 240px;
   }
+
+  .ucb-brand-bar img.ucb-logo.ucb-homepage {
+    max-width: 320px;
+  }
 }
 
 .ucb-brand-bar .ucb-brand-bar-controls {

diff --git a/templates/layout/page.html.twig b/templates/layout/page.html.twig
@@ -97,6 +97,12 @@
       {% set header_color = 'dark' %}
     {% endif %}
 
+    {% if ucb_homepage_header %}
+      {% set hompeage_logo_size = "ucb-homepage" %}
+    {% else %}
+      {% set hompeage_logo_size = "" %}
+    {% endif %}
+
     {% if ucb_rave_alerts %}
       <rave-alert feed="https://www.getrave.com/rss/cuboulder/channel1" link="https://alerts.colorado.edu"></rave-alert>
     {% endif %}
@@ -116,7 +122,7 @@
         <div class="container">{{ attach_library('boulder_base/ucb-brand-bar') }}
           <div class="ucb-brand-bar ucb-brand-bar-{{ campus_header_color }}">
             <a href="https://www.colorado.edu" class="ucb-home-link">
-              <img class="ucb-logo" src="https://cdn.colorado.edu/static/brand-assets/live/images/cu-boulder-logo-text-{{ campus_header_text_color }}.svg" alt="University of Colorado Boulder">
+              <img class="ucb-logo {{ hompeage_logo_size }}" src="https://cdn.colorado.edu/static/brand-assets/live/images/cu-boulder-logo-text-{{ campus_header_text_color }}.svg" alt="University of Colorado Boulder">
             </a>
             <div class="ucb-brand-bar-controls">
               {# Google Translate #}
@@ -157,33 +163,35 @@
       {% if site_search.0 %}
         {% include '@boulder_base/includes/ucb-search-modal.html.twig' %}
       {% endif %}
-      <header class="ucb {{ header_color }}{% if site_affiliation.id %} ucb-site-affiliation-{{ site_affiliation.id }}{% endif %}" role="banner">
-        <div class="container ucb-menu-wrapper">
-          <div class="ucb-site-name-wrapper">
-            <a href="{{ front_page }}">
-              {% if ucb_custom_logo %}<img role="img" class="ucb-custom-logo" srcset="{{ ucb_custom_logo.url }} {{ ucb_custom_logo.scale }}" alt="{{ site_name }}">
-              {% else %}
-                {{ site_name }}
-              {% endif %}
-            </a>
-            {% if site_affiliation.id %}
-              <div class="affiliation">
-                {% if site_affiliation.url %}
-                  <a href="{{ site_affiliation.url }}">{{ site_affiliation.label }}</a>
+      {% if not ucb_homepage_header %}
+        <header class="ucb  {{ header_color }}{% if site_affiliation.id %} ucb-site-affiliation-{{ site_affiliation.id }}{% endif %}" role="banner">
+          <div class="container ucb-menu-wrapper">
+            <div class="ucb-site-name-wrapper">
+              <a href="{{ front_page }}">
+                {% if ucb_custom_logo %}<img role="img" class="ucb-custom-logo" srcset="{{ ucb_custom_logo.url }} {{ ucb_custom_logo.scale }}" alt="{{ site_name }}">
                 {% else %}
-                  {{ site_affiliation.label }}
+                  {{ site_name }}
                 {% endif %}
-              </div>
+              </a>
+              {% if site_affiliation.id %}
+                <div class="affiliation">
+                  {% if site_affiliation.url %}
+                    <a href="{{ site_affiliation.url }}">{{ site_affiliation.label }}</a>
+                  {% else %}
+                    {{ site_affiliation.label }}
+                  {% endif %}
+                </div>
+              {% endif %}
+            </div>
+            {% if (page.primary_menu|render and drupal_menu('main')|render) or (page.secondary_menu|render and (drupal_menu('secondary')|render or drupal_menu('social-media-menu')|render)) or (page.footer_menu|render and (drupal_menu('footer')|render or drupal_menu('social-media-menu')|render)) %}
+              <button id="ucb-mobile-menu-toggle" aria-label="Toggle menu">
+                <i class="ucb-mobile-menu-open-icon fa-solid fa-bars"></i>
+                <i class="ucb-mobile-menu-close-icon fa-solid fa-xmark"></i>
+              </button>
             {% endif %}
           </div>
-          {% if (page.primary_menu|render and drupal_menu('main')|render) or (page.secondary_menu|render and (drupal_menu('secondary')|render or drupal_menu('social-media-menu')|render)) or (page.footer_menu|render and (drupal_menu('footer')|render or drupal_menu('social-media-menu')|render)) %}
-            <button id="ucb-mobile-menu-toggle" aria-label="Toggle menu">
-              <i class="ucb-mobile-menu-open-icon fa-solid fa-bars"></i>
-              <i class="ucb-mobile-menu-close-icon fa-solid fa-xmark"></i>
-            </button>
-          {% endif %}
-        </div>
-      </header>
+        </header>
+      {% endif %}
       <section class="ucb-main-nav-section mobile ucb-header-{{ header_color }}" role="navigation">
         <div class="ucb-main-nav-container ucb-secondary-menu-position-{{ ucb_secondary_menu_position == 'above' ? 'above' : 'inline container' }} ucb-button-{{ menu_button_color }}">
           {{ page.primary_menu }}
@@ -228,9 +236,11 @@
           </div>
         {% endif %}
         {% if page.above_content|render %}
-          <div class="ucb-above-content-region ucb-layout-container container ucb-contained-row">
-            <div class="layout-row row">
-              {{ page.above_content }}
+          <div class="ucb-above-content-region ucb-bootstrap-layout__background-color--{{ucb_above_content_region_color}}">
+            <div class="ucb-layout-container container ucb-contained-row">
+              <div class="layout-row row">
+                {{ page.above_content }}
+              </div>
             </div>
           </div>
         {% endif %}
@@ -273,15 +283,21 @@
           </div>
         {% endif %}
         {% if page.below_content|render %}
-          <div class="ucb-below-content-region ucb-layout-container container ucb-contained-row">
-            <div class="layout-row row">
-              {{ page.below_content }}
+          <div class="ucb-below-content-region ucb-bootstrap-layout__background-color--{{ ucb_after_content_one_region_color }}">
+            <div class="ucb-layout-container container ucb-contained-row">
+              <div class="layout-row row">
+                {{ page.below_content }}
+              </div>
             </div>
           </div>
         {% endif %}
         {% if page.second_below_content|render %}
-          <div class="ucb-below-content-region ucb-layout-container container ucb-contained-row">
-            {{ page.second_below_content }}
+          <div class="ucb-below-content-region ucb-bootstrap-layout__background-color--{{ ucb_after_content_two_region_color }}">
+            <div class="ucb-layout-container container ucb-contained-row">
+              <div class="layout-row row">
+                {{ page.second_below_content }}
+              </div>
+            </div>
           </div>
         {% endif %}
       </div>

diff --git a/templates/regions/region--site-information.html.twig b/templates/regions/region--site-information.html.twig
@@ -32,6 +32,23 @@
           <p class = "ucb-site-information-print">© Regents of the University of Colorado</p>
         </div>
     </div>
+  {% elseif ucb_be_boulder == '3' %}
+    <div class="be-boulder-container text-center">
+        <div class="ucb-footer" style="width: 100%;">
+          <p><a href="https://www.colorado.edu"><img alt="Be Boulder." class="ucb-footer-be-boulder" src="https://cdn.colorado.edu/static/brand-assets/live/images/be-boulder-white.svg" style="max-width:320px; height:auto;"></a></p>
+          {{ content }}
+          <p><a class="ucb-home-link" href="https://www.colorado.edu">University of Colorado Boulder</a></p>
+          <p>&copy; Regents of the University of Colorado</p>
+          <p class="ucb-info-footer-links"><a href="https://www.colorado.edu/compliance/policies/privacy-statement">Privacy</a> &bull; <a href="https://www.colorado.edu/about/legal-trademarks">Legal &amp; Trademarks</a> &bull; <a href="https://www.colorado.edu/map">Campus Map</a></p>
+          <p class="ucb-info-footer-links mb-3"><a href="https://www.colorado.edu/accessibility" class="">Accessibility</a>&nbsp;•&nbsp;<a href="https://www.colorado.edu/about/your-right-know">Student Consumer Information</a>&nbsp;• <a href="https://www.colorado.edu/land-acknowledgment">Land Acknowledgement</a> •&nbsp;<a href="https://www.colorado.edu/policies">Policies</a>&nbsp;• <a href="https://www.colorado.edu/jobs">CU Boulder Jobs</a></p>
+          <p>Download the&nbsp;<strong><a href="https://www.colorado.edu/node/5273/attachment">Clery Act Annual Security &amp;&nbsp;Fire safety report</a></strong>,&nbsp;or&nbsp;<strong><a href="https://www.colorado.edu/police/clery">request a paper&nbsp;copy</a></strong>&nbsp;from&nbsp;the CU&nbsp;Boulder&nbsp;<strong><a href="https://www.colorado.edu/police/">Police Department</a></strong>. &nbsp;</p>
+        </div>
+      </div>
+        <div class="ucb-footer-print">
+          <p><a class="ucb-home-link ucb-site-information-print-title" href="https://www.colorado.edu">University of Colorado Boulder</a></p>
+          <p class = "ucb-site-information-print">© Regents of the University of Colorado</p>
+        </div>
+    </div>
   {% else %}
     {{ content }}
   {% endif %}