From 9ae404990749ffa66df546a220856eac8f9a6f37 Mon Sep 17 00:00:00 2001
From: alexisben <alex@noesya.coop>
Date: Thu, 22 Dec 2022 11:33:11 +0100
Subject: [PATCH] block chapter layout
---
assets/sass/_theme/_configuration.sass | 6 +++
assets/sass/_theme/blocks/base.sass | 7 ++-
assets/sass/_theme/blocks/chapter.sass | 37 ++++++++++++---
.../sass/_theme/design-system/typography.sass | 4 ++
.../partials/blocks/templates/chapter.html | 46 +++++++++++--------
5 files changed, 69 insertions(+), 31 deletions(-)
diff --git a/assets/sass/_theme/_configuration.sass b/assets/sass/_theme/_configuration.sass
index f100df54..03096790 100644
--- a/assets/sass/_theme/_configuration.sass
+++ b/assets/sass/_theme/_configuration.sass
@@ -249,6 +249,12 @@ $block-call-to-action-color: $color-background !default
$block-call-to-action-button-background: $color-background !default
$block-call-to-action-button-color: $color-text !default
+// Block chapter
+$block-chapter-layout-accent-background: $color-accent !default
+$block-chapter-layout-accent-color: white !default
+$block-chapter-layout-alt-background: $color-background-alt !default
+$block-chapter-layout-alt-color: black !default
+
// Block definitions
$block-definition-border-color: $color-border !default
$block-definition-border-color-hovered: $color-accent !default
diff --git a/assets/sass/_theme/blocks/base.sass b/assets/sass/_theme/blocks/base.sass
index 55086550..0ad07930 100644
--- a/assets/sass/_theme/blocks/base.sass
+++ b/assets/sass/_theme/blocks/base.sass
@@ -1,12 +1,11 @@
.blocks
.block
- margin-top: $spacing4
- &:first-of-type
- margin-top: 0
+ padding-top: $spacing2
+ padding-bottom: $spacing2
// &-with-title
// margin-top: $spacing4
&:last-of-type
- padding-bottom: $spacing4
+ padding-bottom: $spacing2
.block
// Mobile & full-width
diff --git a/assets/sass/_theme/blocks/chapter.sass b/assets/sass/_theme/blocks/chapter.sass
index d64c3377..371aecf7 100644
--- a/assets/sass/_theme/blocks/chapter.sass
+++ b/assets/sass/_theme/blocks/chapter.sass
@@ -10,22 +10,45 @@
figcaption
@include small
margin-top: 0.5rem
- .block-content
+ .chapter
flex-direction: column
display: flex
- .chapter
+ .text
order: 2
figure
margin-bottom: $spacing1
+ &--alt_background
+ background: $block-chapter-layout-alt-background
+ .block-content
+ color: $block-chapter-layout-alt-color
+ a
+ @include link($block-chapter-layout-accent-color)
+ &--accent_background
+ background: $block-chapter-layout-accent-background
+ .block-content
+ color: $block-chapter-layout-accent-color
+ a
+ @include link($block-chapter-layout-accent-color)
+
@include media-breakpoint-up(desktop)
@include in-page-with-sidebar
- picture
- margin-top: $spacing1
+ &--alt_background, &--accent_background
+ background: none
+ .chapter .text
+ padding: $grid-gutter col(1, 8)
+ figcaption
+ padding: 0 col(1, 8)
+ &--alt_background
+ .chapter
+ background: $block-chapter-layout-alt-background
+ &--accent_background
+ .chapter
+ background: $block-chapter-layout-accent-background
@include in-page-without-sidebar
- .block-content
+ .chapter
flex-direction: row
align-items: center
- .chapter
+ .text
order: 0
width: col(7)
figure
@@ -34,4 +57,4 @@
margin-bottom: 0
@include in-page-with-or-without-sidebar
h2, h3
- @include h2
\ No newline at end of file
+ @include h2
diff --git a/assets/sass/_theme/design-system/typography.sass b/assets/sass/_theme/design-system/typography.sass
index 90b4a1bb..d7b8823d 100644
--- a/assets/sass/_theme/design-system/typography.sass
+++ b/assets/sass/_theme/design-system/typography.sass
@@ -171,6 +171,10 @@ small, .small
.rich-text
@include rich-text
+figcaption
+ a
+ color: inherit
+
@mixin inherit-text
font-family: inherit
font-weight: inherit
diff --git a/layouts/partials/blocks/templates/chapter.html b/layouts/partials/blocks/templates/chapter.html
index 61014c58..b8075a6f 100644
--- a/layouts/partials/blocks/templates/chapter.html
+++ b/layouts/partials/blocks/templates/chapter.html
@@ -1,40 +1,45 @@
{{- $context := .context -}}
{{- $position := .block.position -}}
{{- $title := .block.title -}}
+{{- $layout := .block.data.layout | default "no_background" -}}
{{- $class := "block block-chapter" -}}
{{- with .block.data -}}
{{ if .image }}
{{- $class = printf "%s block-chapter--with-image" $class -}}
{{ end }}
+ {{- $layout_class := printf "block-chapter--%s" $layout -}}
+ {{- $class = printf "%s %s" $class $layout_class -}}
+
<section class="{{ $class }}{{ if $title }} block-with-title{{ end }}" id="block-{{ $position }}">
<div class="container">
<div class="block-content">
-
+
<div class="chapter">
- {{ if $title -}}
- <div class="top">
- {{ partial "blocks/title" (dict
- "title" $title
- "context" $context
- ) }}
+ <div class="text">
+ {{ if $title -}}
+ <div class="top">
+ {{ partial "blocks/title" (dict
+ "title" $title
+ "context" $context
+ ) }}
+ </div>
+ {{ end -}}
+ {{ if (partial "GetTextFromHTML" .text) -}}
+ <div class="rich-text">
+ {{ partial "PrepareHTML" .text }}
</div>
- {{ end -}}
- {{ if (partial "GetTextFromHTML" .text) -}}
- <div class="rich-text">
- {{ partial "PrepareHTML" .text }}
+ {{ end -}}
+ {{ if (partial "GetTextFromHTML" .notes) }}
+ <div class="notes">
+ {{ partial "PrepareHTML" .notes }}
+ </div>
+ {{ end -}}
</div>
- {{ end -}}
- {{ if (partial "GetTextFromHTML" .notes) }}
- <div class="notes">
- {{ partial "PrepareHTML" .notes }}
- </div>
- {{ end -}}
- </div>
- {{ with .image }}
+ {{ if .image }}
<figure>
{{ partial "commons/image.html"
(dict
- "image" .
+ "image" .image
"mobile" "350x350"
"tablet" "450x450"
"desktop" "1280x1280"
@@ -44,6 +49,7 @@
{{ end }}
</figure>
{{ end -}}
+ </div>
</div>
</div>
</section>
--
GitLab