From 702c3e0c508d5e9b3bf9728ac295b54596f3cb9a Mon Sep 17 00:00:00 2001
From: Olivia Simonet <91660674+Olivia206@users.noreply.github.com>
Date: Thu, 12 Sep 2024 17:26:21 +0200
Subject: [PATCH] Ajustement des layouts du bloc de formations (#604)
---
assets/sass/_theme/blocks/programs.sass | 122 +++++++++++-------
assets/sass/_theme/utils/shame.sass | 2 +-
.../partials/blocks/templates/programs.html | 23 +++-
3 files changed, 89 insertions(+), 58 deletions(-)
diff --git a/assets/sass/_theme/blocks/programs.sass b/assets/sass/_theme/blocks/programs.sass
index 130423bb..4bdc25a7 100644
--- a/assets/sass/_theme/blocks/programs.sass
+++ b/assets/sass/_theme/blocks/programs.sass
@@ -1,67 +1,89 @@
.block-programs
- article
- position: relative
+ .program
+ display: flex
+ &-diploma
+ @include meta
+ display: block
+ margin-bottom: $spacing-1
+ margin-top: $spacing-1
+ .media img
+ aspect-ratio: $block-programs-aspect-ratio
+ display: block
+ object-fit: cover
+ @include media-breakpoint-up(desktop)
+ &-content
+ align-items: baseline
+ display: flex
&--list
- .programs
- li
- align-items: start
- gap: var(--grid-gutter)
- .program-diploma
- @include meta
- display: block
- margin-bottom: $spacing-1
- a
- @include h3
- @include hover-translate-icon($fade: true)
- @include icon(arrow-right-line, after, true)
- display: inline
- transition: color 0.55s
- padding-right: $spacing-4
- &:hover
- color: var(--color-accent)
- @include media-breakpoint-down(desktop)
+ .program
+ align-items: start
+ .program-title a
+ @include hover-translate-icon($fade: true)
+ @include icon(arrow-right-line, after, true)
+ display: inline
+ transition: color 0.55s
+ &:hover
+ color: var(--color-accent)
+ @include media-breakpoint-down(desktop)
+ flex-direction: column-reverse
+ gap: $spacing-2
+ .program-title a
+ align-items: baseline
display: flex
- flex-direction: column-reverse
- gap: $spacing-2
- @include media-breakpoint-up(desktop)
- .program-content
- max-width: columns(9)
- .media
- flex-shrink: 0
- width: columns(2)
-
+ &::after
+ opacity: 1
+ @include media-breakpoint-up(desktop)
+ flex-direction: row-reverse
+ .program-content
+ flex: 1
+ flex-wrap: wrap
+ .program-title
+ flex: 1
+ .program-title,
+ [itemprop="abstract"]
+ min-width: columns(6)
+ .program-diploma
+ width: var(--grid-gutter)
+ text-align: center
+ .media
+ flex-shrink: 0
+ margin-bottom: 0
+ width: columns(2)
+ @include in-page-with-sidebar
+ .program-diploma + [itemprop="abstract"]
+ padding-right: var(--grid-gutter)
+ width: 100%
@include in-page-without-sidebar
- .programs li a
+ .program-title
@include h2
-
+ [itemprop="abstract"]
+ width: columns(9)
+ .program-diploma
+ margin-left: offset(1)
&--grid
.programs-grid
align-items: start
@include grid(1, false, $spacing-5)
@include grid(2, xl)
- article
- display: flex
+ .program
flex-direction: column
.program-content
- order: 2
- &:hover
- .more:after
- transform: translateX($spacing-1)
- [itemprop='name']
- margin-bottom: $spacing-1
- a
- @include stretched-link
- text-decoration: none
- .more
- @include icon(arrow-right-line, after, true)
- @include hover-translate-icon
+ flex-direction: column
+ &:hover .more:after
+ transform: translateX($spacing-1)
+ .program-title
+ margin-bottom: $spacing-1
+ order: -1
+ .program-diploma
+ order: 0
+ [itemprop='abstract'],
+ .more
+ order: 2
+ .more
+ @include icon(arrow-right-line, after, true)
+ @include hover-translate-icon
.media
- order: 1
margin-bottom: $spacing-3
- img
- aspect-ratio: $block-programs-aspect-ratio
- display: block
- object-fit: cover
@include in-page-without-sidebar
@include grid(2)
@include grid(3, xl)
diff --git a/assets/sass/_theme/utils/shame.sass b/assets/sass/_theme/utils/shame.sass
index 95daa94a..338fd6bf 100644
--- a/assets/sass/_theme/utils/shame.sass
+++ b/assets/sass/_theme/utils/shame.sass
@@ -59,7 +59,7 @@
@mixin article-title
@include h3
a
- @include stretched-link
+ @include stretched-link(before)
display: block
text-decoration: none
diff --git a/layouts/partials/blocks/templates/programs.html b/layouts/partials/blocks/templates/programs.html
index 63f063db..b922badf 100644
--- a/layouts/partials/blocks/templates/programs.html
+++ b/layouts/partials/blocks/templates/programs.html
@@ -2,7 +2,7 @@
{{ $block_class := partial "GetBlockClass" .block }}
{{ $heading := .heading | default "h3" }}
{{ $heading_tag := (dict
- "open" ((printf "<%s itemprop='name'>" $heading) | safeHTML)
+ "open" ((printf "<%s class='program-title' itemprop='name'>" $heading) | safeHTML)
"close" ((printf "</%s>" $heading) | safeHTML)
) }}
@@ -18,12 +18,11 @@
)}}
{{ if eq $block.data.layout "grid" }}
-
<div class="programs-grid">
{{ range .programs }}
{{ $program := site.GetPage (printf "/programs%s" .path) }}
{{ $title := $program.Title | safeHTML }}
- <article itemscope itemtype="https://schema.org/EducationalOccupationalProgram">
+ <article class="program" itemscope itemtype="https://schema.org/EducationalOccupationalProgram">
<div class="program-content">
{{ $heading_tag.open }}
<a href="{{ $program.Permalink }}" itemtype="url" title="{{ safeHTML (i18n "commons.more_aria" (dict "Title" $title)) }}">
@@ -38,6 +37,14 @@
{{ end }}
<p class="more meta" aria-hidden="true">{{ i18n "commons.more" }}</p>
+
+ {{ $diploma := $program.Params.diplomas }}
+ {{ if and $options.diploma $diploma }}
+ {{- $diploma = site.GetPage (printf "/diplomas/%s" $diploma) -}}
+ {{- with $diploma -}}
+ <span class="program-diploma">{{ partial "PrepareHTML" .Params.short_name }}</span>
+ {{- end -}}
+ {{ end }}
</div>
{{ if and $program.Params.image $options.image }}
@@ -58,13 +65,15 @@
<ol class="programs">
{{ range .programs }}
- <li>
+ <li class="program">
{{ $program := site.GetPage (printf "/programs%s" .path) }}
<div class="program-content">
{{ $title := partial "PrepareHTML" $program.Title }}
- <a href="{{ $program.Permalink }}" title="{{ safeHTML (i18n "commons.more_aria" (dict "Title" $title)) }}">
- {{- $title -}}
- </a>
+ {{ $heading_tag.open }}
+ <a href="{{ $program.Permalink }}" itemtype="url" title="{{ safeHTML (i18n "commons.more_aria" (dict "Title" $title)) }}">
+ {{ $title }}
+ </a>
+ {{ $heading_tag.close }}
{{ $diploma := $program.Params.diplomas }}
{{ if and $options.diploma $diploma }}
--
GitLab