Ajustement des layouts du bloc de formations (#604)

assets/sass/_theme/blocks/programs.sass

 .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)

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
 

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 }}