Use subgrid in panel-top

uktrade · Feb 21, 2025 · 2ee855c · 2ee855c
1 parent 4231e93
commit 2ee855c
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 36 deletions.
diff --git a/international_online_offer/sass/pages/guide-dynamic.scss b/international_online_offer/sass/pages/guide-dynamic.scss
@@ -46,17 +46,23 @@ $gap: 30px;
 }
 
 .dynamic-guide {
+	// The only purpose of this selector is to hold the following variables
+	// so we use this to make it not participate in the layout.
+	display: contents;
+
 	--vertical-gap: 15px;
 	--grid-side-margin: calc(var(--vertical-gap) * 2);
 	--hero-image-height: 80px;
+	--vertical-padding: 15px;
 
 	@media (min-width: sizes.$tablet-size) {
 		--hero-image-height: 270px;
+		--vertical-padding: 30px;
 	}
 
 	@media (min-width: sizes.$donknowhowtonameit-size) {
-		--vertical-gap: 30px;
 		--hero-image-height: 450px;
+		--vertical-gap: 30px;
 	}
 
 	&__hero-image {
@@ -95,16 +101,7 @@ $gap: 30px;
 	}
 
 	&__hero {
-		padding: 20px great-constants.$great-container-padding 25px;
-		grid-area: top;
-
-		@media (min-width: sizes.$tablet-size) {
-			display: initial;
-			grid-area: 1 / 1;
-			padding: 0;
-			margin: $gap;
-			margin-right: 0;
-		}
+		grid-area: hero;
 	}
 
 	&__icon-edit {
@@ -116,9 +113,7 @@ $gap: 30px;
 
 		@media (min-width: sizes.$tablet-size) {
 			display: initial;
-			grid-area: 1 / 2;
-			margin: $gap;
-			margin-left: 0;
+			grid-area: region-map;
 			background-image: url("/static/svg/regions/uk-all.svg");
 			background-size: contain;
 			background-repeat: no-repeat;
@@ -131,6 +126,10 @@ $gap: 30px;
 		&-top {
 			@include shadow-thrower();
 			grid-area: top;
+			display: grid;
+			grid-template-columns: subgrid;
+			grid-template-areas: "hero region-map";
+			padding: 20px var(--vertical-padding) 25px;
 		}
 
 		&-left {

diff --git a/international_online_offer/templates/eyb/guide-dynamic.html b/international_online_offer/templates/eyb/guide-dynamic.html
@@ -13,27 +13,22 @@
     <div class="dynamic-guide">
         <div class="dynamic-guide__hero-image"></div>
         <div class="dynamic-guide__grid">
-            <div class="dynamic-guide__panel-top"></div>
-            {% comment %}
-				Note that dynamic-guide__hero and dynamic-guid__region-map are not
-				children of dynamic-guide__panel-top eventhough they visually appear
-				as such. This is because we are using grid layout but we avoid using
-				subgrid.
-            {% endcomment %}
-            <div class="dynamic-guide__hero">
-                <h2 class="govuk-caption-xl">Your company name</h2>
-                <h1 class="govuk-heading-xl">Expand your business and set up in the UK</h1>
-                <p class="govuk-body">
-                    This guide is based on the details and plans you provided about your business, in our <strong>Advanced engineering</strong> sector.
-                </p>
-                <a class="govuk-link">
-                    <img class="dynamic-guide__icon-edit"
-                         alt="Pencil icon"
-                         src="{% static '/static/svg/icon-edit.svg' %}" />
-                    Change your details and plans
-                </a>
+            <div class="dynamic-guide__panel-top">
+                <div class="dynamic-guide__hero">
+                    <h2 class="govuk-caption-xl">Your company name</h2>
+                    <h1 class="govuk-heading-xl">Expand your business and set up in the UK</h1>
+                    <p class="govuk-body">
+                        This guide is based on the details and plans you provided about your business, in our <strong>Advanced engineering</strong> sector.
+                    </p>
+                    <a class="govuk-link">
+                        <img class="dynamic-guide__icon-edit"
+                             alt="Pencil icon"
+                             src="{% static 'svg/icon-edit.svg' %}" />
+                        Change your details and plans
+                    </a>
+                </div>
+                <div class="dynamic-guide__region-map"></div>
             </div>
-            <div class="dynamic-guide__region-map"></div>
             <div class="dynamic-guide__panel-left">
                 <div class="dynamic-guide__section">{% lorem %}</div>
                 <div class="dynamic-guide__section">{% lorem %}</div>