From cc62ec3a66f1684ac5a6cd13e327308c5dd51763 Mon Sep 17 00:00:00 2001
From: alexisben <alex@noesya.coop>
Date: Wed, 23 Nov 2022 12:17:17 +0100
Subject: [PATCH] cta
---
assets/sass/_theme/_configuration.sass | 3 +
assets/sass/_theme/blocks/call_to_action.sass | 2 +-
assets/sass/_theme/blocks/testimonials.sass | 56 +++++++++++--------
.../sass/_theme/design-system/typography.sass | 8 +++
.../blocks/templates/testimonials.html | 16 ++++--
5 files changed, 55 insertions(+), 30 deletions(-)
diff --git a/assets/sass/_theme/_configuration.sass b/assets/sass/_theme/_configuration.sass
index 8421380c..e5f4550a 100644
--- a/assets/sass/_theme/_configuration.sass
+++ b/assets/sass/_theme/_configuration.sass
@@ -109,6 +109,7 @@ $quote-size-short: px2rem(60) !default
$quote-size-long: px2rem(40) !default
$quote-line-height: 120% !default
$quote-weight: normal !default
+$quote-style: italic !default
// Buttons
$btn-font-size-md: px2rem(18) !default // TODO
@@ -261,8 +262,10 @@ $block-testimonials-xl-font-size: $quote-size-short !default
$block-testimonials-xl-line-height: $quote-line-height !default
$block-testimonials-xl-font-size-long-text: $quote-size-long !default
$block-testimonials-xl-line-height-long-text: $quote-line-height !default
+$block-testimonials-color: $color-accent !default
$block-testimonials-font-size: $quote-size-md !default
$block-testimonials-line-height: $quote-line-height !default
+$block-testimonials-style: $quote-style !default
$block-testimonials-pagination-background: $color-border !default
$block-testimonials-pagination-progress-background: $color-text !default
diff --git a/assets/sass/_theme/blocks/call_to_action.sass b/assets/sass/_theme/blocks/call_to_action.sass
index a25d021f..c5695a2b 100644
--- a/assets/sass/_theme/blocks/call_to_action.sass
+++ b/assets/sass/_theme/blocks/call_to_action.sass
@@ -107,7 +107,7 @@
&:first-child
margin-top: 0
a + a
- margin-top: $spacing0
+ margin-top: $spacing1
@include media-breakpoint-down(lg)
> div
h2, h3, .description
diff --git a/assets/sass/_theme/blocks/testimonials.sass b/assets/sass/_theme/blocks/testimonials.sass
index 9dbd81fe..a8a45bea 100644
--- a/assets/sass/_theme/blocks/testimonials.sass
+++ b/assets/sass/_theme/blocks/testimonials.sass
@@ -1,10 +1,11 @@
.block-testimonials
blockquote
@extend .blockquote
- padding-top: calc(#{$block-testimonials-font-size} * 2)
p
font-size: $block-testimonials-font-size
line-height: $block-testimonials-line-height
+ font-style: $block-testimonials-style
+ color: $block-testimonials-color
@include media-breakpoint-up(md)
font-size: px2rem(30) // TODO : on peut peut-être la sortir avec du RFS ?
@include media-breakpoint-up(xl)
@@ -15,33 +16,27 @@
@include media-breakpoint-up(xl)
font-size: $block-testimonials-xl-font-size-long-text
line-height: $block-testimonials-xl-line-height-long-text
- &::before
- content: "“"
- font-size: calc(#{$block-testimonials-font-size} * 3)
- line-height: 1
- position: absolute
- transform: translateY(-50%)
+ // &::before
+ // content: "“"
+ // font-size: calc(#{$block-testimonials-font-size} * 3)
+ // line-height: 1
+ // position: absolute
+ // transform: translateY(-50%)
// TODO : ajuster en fonction de la typo
figure
- font-size: px2rem(16)
margin-bottom: 0
-
figcaption
align-items: center
display: flex
- .avatar
- flex-shrink: 0
- margin-right: $grid-gutter
-
+ margin-top: $spacing1
.avatar
- max-width: 96px
- @include media-breakpoint-up(lg)
- max-width: 136px
- @include media-breakpoint-up(xl)
- max-width: 166px
+ flex-shrink: 0
+ width: calc(#{col(1, 8)} + #{$grid-gutter} / 2)
+ margin-right: calc(#{$grid-gutter} / 2)
+ margin-bottom: 0
@include media-breakpoint-up(xxl)
- max-width: 192px
+ width: calc(#{col(1, 7)} + #{$grid-gutter} / 2)
.splide
display: flex
@@ -89,10 +84,25 @@
i
background-color: $block-testimonials-pagination-progress-background
width: 0
- @include in-page-without-sidebar
- .testimonials
- @include media-breakpoint-up(md)
- padding-right: offset(4)
+ @include media-breakpoint-up(md)
+ @include in-page-without-sidebar
+ figure
+ padding-right: offset(1)
+ &.with-picture
+ position: relative
+ padding-left: offset(2)
+ figcaption
+ display: block
+ margin-top: $spacing0
+ .avatar
+ position: absolute
+ left: 0
+ top: 0
+ width: col(2)
+
+
+
+
// TODO : en discuter en créa
// figure
diff --git a/assets/sass/_theme/design-system/typography.sass b/assets/sass/_theme/design-system/typography.sass
index fa65178f..2a338b33 100644
--- a/assets/sass/_theme/design-system/typography.sass
+++ b/assets/sass/_theme/design-system/typography.sass
@@ -102,6 +102,14 @@ p
line-height: $meta-line-height
@include media-breakpoint-up(md)
font-size: $meta-size-md
+
+.signature
+ font-family: $signature-font-family
+ font-size: $signature-size
+ font-weight: $signature-weight
+ line-height: $signature-line-height
+ @include media-breakpoint-up(md)
+ font-size: $signature-size-md
small, .small
font-family: $small-font-family
diff --git a/layouts/partials/blocks/templates/testimonials.html b/layouts/partials/blocks/templates/testimonials.html
index a1c82e54..9c0b57e9 100644
--- a/layouts/partials/blocks/templates/testimonials.html
+++ b/layouts/partials/blocks/templates/testimonials.html
@@ -20,7 +20,6 @@
{{ end -}}
<div class="testimonials">
-
{{- if $is_carousel }}
<div class="splide" data-splide='{"arrows":false,"autoplay":true,"pauseOnHover":false,"pauseOnFocus":false,"type":"loop","autoHeight":true}'>
<div class="splide__slider">
@@ -30,7 +29,7 @@
{{ range .testimonials }}
{{ $is_long := gt (len .text) 150 }}
- <figure{{ if $is_carousel }} class="splide__slide"{{ end }}>
+ <figure class="{{ if $is_carousel }}splide__slide{{ end }} {{ if .photo }}with-picture{{ end }}">
<blockquote {{- if $is_long }} class="is-long" {{- end }}>
<p>{{- partial "PrepareHTML" .text -}}</p>
</blockquote>
@@ -49,12 +48,17 @@
</div>
{{- end }}
{{ if or .author .job -}}
- <span>
+ <p>
{{- if .author -}}
- <b>{{ partial "PrepareHTML" .author }}</b><br>
+ <span class="signature">{{ partial "PrepareHTML" .author }}</span>
+ {{- end }}
+ {{- if and .author .job -}}
+ <br>
+ {{- end -}}
+ {{- if .job -}}
+ <span class="meta">{{- partial "PrepareHTML" .job -}}</span>
{{- end }}
- {{- partial "PrepareHTML" .job -}}
- </span>
+ </p>
{{- end }}
</figcaption>
{{ end }}
--
GitLab