From b3b354cec2bd82e62a1b6d97a9da03f7f7efe4de Mon Sep 17 00:00:00 2001
From: alexisben <alex@noesya.coop>
Date: Mon, 22 Jan 2024 18:51:49 +0100
Subject: [PATCH] handle descriptions in list mode
---
assets/sass/_theme/blocks/pages.sass | 42 +++++++++++++++----
layouts/partials/GetTruncateContent | 10 +++--
layouts/partials/blocks/templates/pages.html | 8 +++-
.../partials/blocks/templates/pages/list.html | 38 +++++++++++++++--
4 files changed, 82 insertions(+), 16 deletions(-)
diff --git a/assets/sass/_theme/blocks/pages.sass b/assets/sass/_theme/blocks/pages.sass
index 7cdba45f..6a5065f9 100644
--- a/assets/sass/_theme/blocks/pages.sass
+++ b/assets/sass/_theme/blocks/pages.sass
@@ -2,7 +2,7 @@
.top
a
text-decoration: none
- .grid, .cards
+ .grid, .cards, .list
article
position: relative
display: flex
@@ -128,34 +128,57 @@
&--list
ul
@include list-reset
+ &.title-only
+ li
+ line-height: 1
li
display: block
- line-height: 1
+ li
margin-top: $spacing0
- a
+ > a
@include icon(arrow, before, true)
padding-right: $spacing0
@include hover-translate-icon(before, 5)
@include link
text-decoration-color: rgba(0,0,0,0)
-
+ article
+ .page-title
+ @include h3
+ a
+ @include icon(arrow, after, true)
+ @include hover-translate-icon(after)
+ text-decoration-color: transparent
@include media-breakpoint-down(desktop)
.top
margin-bottom: $spacing0
ul
margin-top: $spacing1
-
+ @include media-breakpoint-up(desktop)
+ ul:not(.title-only)
+ li + li
+ margin-top: $grid-gutter
+ article
+ gap: $grid-gutter
+ flex-direction: row
+ .media
+ flex-shrink: 0
+ margin-bottom: 0
@include in-page-with-sidebar
.block-content
.top
margin-bottom: $spacing1
- ul
+ ul.title-only
@include grid(2, desktop)
grid-row-gap: $spacing0 !important
grid-column-gap: half($grid-gutter) !important
li
margin-top: 0
+ article
+ gap: half($grid-gutter)
+ .media
+ width: calc(#{col(2, 8)} + #{half($grid-gutter)})
+ .page-content
+ width: col(6, 8)
@include in-page-without-sidebar
.block-title
@@ -176,7 +199,7 @@
@include body-text
margin-top: 0
// Default behavior (without page description)
- ul
+ ul.title-only
@include grid(4, desktop)
grid-column: 1 / 13
li
@@ -188,6 +211,11 @@
display: block
li + li
margin-top: $spacing0
+ article
+ .media
+ width: col(2, 6)
+ .page-content
+ width: col(4, 6)
&--alternate
.top
diff --git a/layouts/partials/GetTruncateContent b/layouts/partials/GetTruncateContent
index d1eaa91d..e540e620 100644
--- a/layouts/partials/GetTruncateContent
+++ b/layouts/partials/GetTruncateContent
@@ -1,5 +1,9 @@
{{ $length := .length | default 150 }}
-
{{ $text := replace .text "<" " <" }}
-{{ $text = chomp (truncate $length "…" (safeHTML (plainify $text))) }}
-{{ return $text }}
+
+{{ if gt .length 0 }}
+ {{ $text = chomp (truncate $length "…" (safeHTML (plainify $text))) }}
+ {{ return $text }}
+{{ else }}
+ {{ return .text }}
+{{ end }}
\ No newline at end of file
diff --git a/layouts/partials/blocks/templates/pages.html b/layouts/partials/blocks/templates/pages.html
index 6fe502b7..8c76cce8 100644
--- a/layouts/partials/blocks/templates/pages.html
+++ b/layouts/partials/blocks/templates/pages.html
@@ -42,12 +42,16 @@
<div class="{{ $block_class }} {{ $page_class }}">
<div class="container">
<div class="block-content">
+ {{ if $main_description }}
+ {{ $main_description = printf "<p>%s</p>" $main_description }}
+ {{ end }}
+
{{ partial "blocks/top.html" (dict
"title" $title
"link" $page_link
"heading_level" $block.ranks.self
- "description" (printf "<p>%s</p>" $main_description)
- )}}
+ "description" $main_description
+ ) }}
{{- partial (printf "blocks/templates/pages/%s.html" $layout) (dict
"pages" .pages
diff --git a/layouts/partials/blocks/templates/pages/list.html b/layouts/partials/blocks/templates/pages/list.html
index 0a7945ac..1b0a758b 100644
--- a/layouts/partials/blocks/templates/pages/list.html
+++ b/layouts/partials/blocks/templates/pages/list.html
@@ -1,11 +1,41 @@
-<ul>
+{{ $show_descriptions := .show_descriptions }}
+{{ $show_images := .show_images }}
+{{ $heading_level := .heading_level | default 3 }}
+{{ $heading_tag := partial "GetHeadingTag" (dict
+ "level" $heading_level
+ "attributes" "class='page-title'"
+)}}
+<ul class="list {{ if and (not $show_descriptions) (not $show_images) }} title-only {{ end }}">
{{ range .pages }}
{{ $page := site.GetPage .file }}
{{ with $page }}
<li>
- <a href="{{- .Permalink -}}">
- {{- partial "PrepareHTML" .Title -}}
- </a>
+ {{ if or $show_descriptions $show_images }}
+ <article>
+ <div class="page-content">
+ {{ $heading_tag.open }}
+ <a href="{{- .Permalink -}}">
+ {{- partial "PrepareHTML" .Title -}}
+ </a>
+ {{ $heading_tag.close }}
+
+ {{ if and $show_descriptions .Params.summary }}
+ <p>{{ partial "GetTruncateContent" ( dict
+ "text" .Params.summary
+ "length" site.Params.pages.index.truncate_description
+ ) }}</p>
+ {{ end }}
+ </div>
+
+ {{ if $show_images }}
+ {{- partial "pages/page-media.html" . -}}
+ {{ end }}
+ </article>
+ {{ else }}
+ <a href="{{- .Permalink -}}">
+ {{- partial "PrepareHTML" .Title -}}
+ </a>
+ {{ end }}
</li>
{{- end -}}
{{ end }}
--
GitLab