From 52a4c0f81b917780a1ec13a6584f9a7989eb3585 Mon Sep 17 00:00:00 2001
From: alexisben <alex@noesya.coop>
Date: Fri, 24 Feb 2023 11:09:43 +0100
Subject: [PATCH] better handling breadcrumb after hero
---
assets/sass/_theme/design-system/hero.sass | 6 ++++--
layouts/partials/header/hero.html | 7 ++++---
2 files changed, 8 insertions(+), 5 deletions(-)
diff --git a/assets/sass/_theme/design-system/hero.sass b/assets/sass/_theme/design-system/hero.sass
index 5162b476..6ca0cf94 100644
--- a/assets/sass/_theme/design-system/hero.sass
+++ b/assets/sass/_theme/design-system/hero.sass
@@ -13,7 +13,6 @@
min-height: $hero-height-desktop
*:focus-visible
outline-color: $hero-color
-
.content
align-items: start
padding-top: $spacing3
@@ -35,7 +34,8 @@
padding-top: 0
.content + .breadcrumb-nav
margin-top: $spacing3
-
+ &--no-margin
+ margin-bottom: 0
@include media-breakpoint-down(desktop)
.breadcrumb-nav
margin-left: half(-$grid-gutter-sm)
@@ -84,4 +84,6 @@
width: col(8)
figure
width: col(3)
+ + .breadcrumb-container
+ margin-top: 0
diff --git a/layouts/partials/header/hero.html b/layouts/partials/header/hero.html
index 45be3537..df099f4f 100644
--- a/layouts/partials/header/hero.html
+++ b/layouts/partials/header/hero.html
@@ -1,9 +1,10 @@
{{- $direction := "" -}}
+{{- $breadcrumb_is_after_hero := eq site.Params.breadcrumb.position "after-hero" -}}
{{ if .image }}
{{- $direction = partial "GetImageDirection" .image -}}
{{ end }}
-<header class="hero {{ if .image -}}hero--with-image hero--image-{{- $direction -}}{{- end -}}">
+<header class="hero {{ if .image -}}hero--with-image hero--image-{{- $direction -}}{{- end }} {{ if $breadcrumb_is_after_hero -}} hero--no-margin {{- end }}">
<div class="container">
{{- if eq site.Params.breadcrumb.position "hero-start" -}}
{{- if .breadcrumb | default true -}}
@@ -51,9 +52,9 @@
</div>
</header>
-{{- if eq site.Params.breadcrumb.position "after-hero" -}}
+{{- if $breadcrumb_is_after_hero -}}
{{- if .breadcrumb | default true -}}
- <div class="container">
+ <div class="container breadcrumb-container">
{{ partial "header/breadcrumbs.html" .context }}
</div>
{{- end -}}
--
GitLab