Block formation - grille (#311)

* premier commit pour feedback :)

* Fixes

* fix variable name

* Grid Layout

* Block Formation - grille

* Fix point virgule

* Margin instead of padding

* Accessibilité ++

* Edits apres retours Alex

* polish

---------

Co-authored-by: alexisben <alex@noesya.coop>

assets/sass/_theme/_configuration.sass

@@ -410,6 +410,9 @@ $block-pages-card-page-color-hover: var(--color-background) !default
 // Block posts
 $block-posts-grid-columns: 3 !default
 
+// Block programs
+$block-programs-aspect-ratio: 16/9 !default
+
 // Block timeline
 $block-timeline-horizontal-background: var(--color-background-alt) !default
 $block-timeline-horizontal-color: var(--color-text) !default

assets/sass/_theme/blocks/programs.sass

 .block-programs
-    .programs
-        li
-            display: block
-            a
-                @include h3
-                @include arrow-right-hover
-                display: flex
-                justify-content: space-between
-                transition: color 0.55s
-                padding-right: $spacing-4
-                &:hover
-                    color: var(--color-accent)
 
-    @include in-page-without-sidebar
+    &--list
         .programs
             li
+                display: block
                 a
-                    @include h2
\ No newline at end of file
+                    @include h3
+                    @include arrow-right-hover
+                    display: flex
+                    justify-content: space-between
+                    transition: color 0.55s
+                    padding-right: $spacing-4
+                    &:hover
+                        color: var(--color-accent)
+        @include in-page-without-sidebar
+            .programs li a
+                @include h2
+
+    &--grid
+        .programs-grid
+            align-items: start
+            @include grid(1, false, $spacing-5)
+            @include grid(2, xl)
+            article
+                display: flex
+                flex-direction: column
+                .program-content
+                    order: 2
+                    position: relative
+                    &:hover
+                        .more:after
+                            transform: translateX($spacing-1)
+                [itemprop='name']
+                    margin-bottom: $spacing-1
+                a
+                    @include stretched-link
+                    text-decoration: none
+                .more
+                    @include icon(arrow, 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)
+

config.yaml

@@ -168,6 +168,10 @@ params:
           mobile:   170
           tablet:   350
           desktop:  415
+      programs:
+        mobile:   400
+        tablet:   800
+        desktop:  600 
     sections:
       categories:
         hero:

layouts/partials/blocks/templates/programs.html

 {{- $block := .block -}}
 {{- $block_class := partial "GetBlockClass" .block -}}
+{{ $heading := .heading | default "h3" }}
+{{ $heading_tag := (dict 
+    "open" ((printf "<%s itemprop='name'>" $heading) | safeHTML)
+    "close" ((printf "</%s>" $heading) | safeHTML)
+    ) }}
 
 {{- with .block.data -}}
   <div class="{{ $block_class }}">
@@ -10,18 +15,57 @@
           "heading_level" $block.ranks.self
         )}}
 
-        <ol class="programs">
-          {{- range .programs -}}
-            <li>
+        {{- if eq $block.data.layout "grid" -}}
+
+          <div class="programs-grid">
+            {{- range .programs -}}
               {{ $program := site.GetPage (printf "/programs%s" .path) }}
-              {{- $title := partial "PrepareHTML" $program.Title -}}
-              <a href="{{ $program.Permalink }}" title="{{ safeHTML (i18n "commons.more_aria" (dict "Title" $title)) }}">
-                {{- $title -}}
-              </a>
-            </li>
-          {{ end }}
-        </ol>
+              {{ $title := $program.Title | safeHTML }}
+              <article 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)) }}">
+                      {{- $title -}}
+                    </a>
+                  {{ $heading_tag.close }}
+
+                  {{ with  $program.Params.summary | safeHTML}}
+                    <p itemprop="abstract">{{ . }}</p>
+                  {{ end }}
+
+                  <p class="more meta" aria-hidden="true">{{- i18n "commons.more" -}}</p>
+                </div>
+
+                {{- if $program.Params.image -}}
+                  <div class="media">
+                    {{- partial "commons/image.html"
+                        (dict
+                          "image"    $program.Params.image
+                          "sizes"    site.Params.image_sizes.blocks.programs
+                        ) -}}
+                  </div>
+                {{- end -}}
+
+              </article>
+            {{ end }}
+          </div>
+
+        {{- else -}}
+
+          <ol class="programs">
+            {{- range .programs -}}
+              <li>
+                {{ $program := site.GetPage (printf "/programs%s" .path) }}
+                {{- $title := partial "PrepareHTML" $program.Title -}}
+                <a href="{{ $program.Permalink }}" title="{{ safeHTML (i18n "commons.more_aria" (dict "Title" $title)) }}">
+                  {{- $title -}}
+                </a>
+              </li>
+            {{ end }}
+          </ol>
+
+        {{- end -}}
       </div>
     </div>
   </div>
-{{- end -}}
+{{- end -}}
\ No newline at end of file

layouts/programs/list.html

@@ -2,7 +2,7 @@
   {{ if eq .File.Path "programs/_index.html" }}
     {{ partial "programs/hero.html" . }}
     {{ partial "programs/list.html" . }}
-{{ else }}
+  {{ else }}
     {{ partial "programs/hero-single.html" . }}
     {{ partial "programs/single.html" . }}
   {{ end }}