Merge pull request #474 from CuBoulder/issue/471

Edge-to-edge update
CuBoulder · Aug 23, 2023 · c3d7df0 · c3d7df0
2 parents acacc39 + 8265a30
commit c3d7df0
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 39 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]
 
+- ### Edge-to-edge update
+  Updated the templates and some css to accommodate the new edge-to-edge option
+
+  Sister PR: https://github.com/CuBoulder/ucb_bootstrap_layouts/pull/16
+
+  Closes #471 
+---
+
 - ### Page title changes
   Removed page title from the basic page theme
   Created a field file for the page title so that it has the proper tags and attributes

diff --git a/css/block/hero-unit.css b/css/block/hero-unit.css
@@ -102,4 +102,10 @@
   width: 1em;
   height: 1em;
   margin: .5em
-}
+}
+
+.ucb-hero-outer-wrapper {
+  --bs-gutter-x: 1.5rem;
+  padding-right: calc(var(--bs-gutter-x) * .5);
+  padding-left: calc(var(--bs-gutter-x) * .5);
+}
diff --git a/templates/block/block--hero-unit.html.twig b/templates/block/block--hero-unit.html.twig
@@ -70,48 +70,50 @@
 	{% endif %}
 {% endif %}
 
-<div{{attributes.addClass(classes)}}>
-	{{ title_prefix }}
-	{% if label %}
-		<h2{{title_attributes}}>{{ label }}</h2>
-	{% endif %}
-	{{ title_suffix }}
-	{% block content %}
-		<div{{attributes.addClass(classes).setAttribute("style","#{bgValue}").addClass(size,overlayClass,videoClass)}}>
-			{% if videoURL is defined %}
-				<div hidden class="ucb-hero-unit-video-wrapper">
-					<div class="ucb-hero-unit-video-player-wrapper" id="ucb_hero_unit_video_player_{{ blockId }}"></div>
-					<div class="ucb-hero-unit-video-controls-wrapper">
-						<div class="ucb-hero-unit-video-controls">
-							<span class="ucb-hero-unit-video-control-button ucb-hero-unit-video-play-pause" title="Play/Pause video">
-								<i class="fa fa-play"></i>
-							</span>
+<div class="ucb-hero-outer-wrapper">
+	<div{{attributes.addClass(classes)}}>
+		{{ title_prefix }}
+		{% if label %}
+			<h2{{title_attributes}}>{{ label }}</h2>
+		{% endif %}
+		{{ title_suffix }}
+		{% block content %}
+			<div{{attributes.addClass(classes,size,overlayClass,videoClass).setAttribute("style","#{bgValue}")}}>
+				{% if videoURL is defined %}
+					<div hidden class="ucb-hero-unit-video-wrapper">
+						<div class="ucb-hero-unit-video-player-wrapper" id="ucb_hero_unit_video_player_{{ blockId }}"></div>
+						<div class="ucb-hero-unit-video-controls-wrapper">
+							<div class="ucb-hero-unit-video-controls">
+								<span class="ucb-hero-unit-video-control-button ucb-hero-unit-video-play-pause" title="Play/Pause video">
+									<i class="fa fa-play"></i>
+								</span>
+							</div>
 						</div>
 					</div>
-				</div>
-				<script type="text/javascript">
-					window.addEventListener('load', () => enableVideoHero('{{ videoURL }}', 'ucb_hero_unit_video_player_{{ blockId }}'));
-				</script>
-			{% endif %}
-			{% set linkColor = content['#block_content'].field_link_color.value %}
-			{# Dont let twig render the links #}
-			<div class="ucb-hero-unit-content container">
-				<div class="row">
-					{% if content['#block_content'].field_text_align.value == "text-righthalf" %}
-						<div class="col-12 col-md-6"></div>
-					{% endif %}
-					<div class="col ucb-hero-unit-links">
-						{{ content|without('field_links') }}
-						{# Render links here #}
+					<script type="text/javascript">
+						window.addEventListener('load', () => enableVideoHero('{{ videoURL }}', 'ucb_hero_unit_video_player_ {{ blockId }}'));
+					</script>
+				{% endif %}
+				{% set linkColor = content['#block_content'].field_link_color.value %}
+				{# Dont let twig render the links #}
+				<div class="ucb-hero-unit-content container">
+					<div class="row">
+						{% if content['#block_content'].field_text_align.value == "text-righthalf" %}
+							<div class="col-12 col-md-6"></div>
+						{% endif %}
+						<div class="col ucb-hero-unit-links">
+							{{ content|without('field_links') }}
+							{# Render links here #}
 							{% for item in content['#block_content'].field_links.value %}
 								{{ link(item.title, item.uri, {'class': ['button', linkColor]} ) }}
 							{% endfor %}
+						</div>
+						{% if content['#block_content'].field_text_align.value == "text-lefthalf" %}
+							<div class="col-12 col-md-6"></div>
+						{% endif %}
 					</div>
-					{% if content['#block_content'].field_text_align.value == "text-lefthalf" %}
-						<div class="col-12 col-md-6"></div>
-					{% endif %}
 				</div>
 			</div>
-		</div>
-	{% endblock %}
+		{% endblock %}
+	</div>
 </div>
diff --git a/templates/block/block--slider.html.twig b/templates/block/block--slider.html.twig
@@ -14,7 +14,6 @@
 
 {%
   set classes = [
-	'container',
     'block',
     'block-' ~ configuration.provider|clean_class,
     'block-' ~ plugin_id|clean_class,

diff --git a/templates/block/block--video-reveal.html.twig b/templates/block/block--video-reveal.html.twig
@@ -11,7 +11,6 @@
 
 {%
   set classes = [
-	'container',
     'ucb-video-reveal',
     'block',
     'block-' ~ configuration.provider|clean_class,