From 59e53940699798e6e983b988593130225b9e9db8 Mon Sep 17 00:00:00 2001
From: Olivia206 <olivia.simonet@mmibordeaux.com>
Date: Mon, 12 Dec 2022 17:05:02 +0100
Subject: [PATCH] list mixin for programs and categories
---
assets/sass/_theme/_utils.sass | 44 +++++++++++++++++++
.../sass/_theme/design-system/typography.sass | 14 ++----
assets/sass/_theme/sections/categories.sass | 4 ++
assets/sass/_theme/sections/diplomas.sass | 2 +-
assets/sass/_theme/sections/programs.sass | 23 +---------
layouts/partials/categories/categories.html | 8 ++--
layouts/partials/categories/category.html | 35 +++++++--------
7 files changed, 73 insertions(+), 57 deletions(-)
diff --git a/assets/sass/_theme/_utils.sass b/assets/sass/_theme/_utils.sass
index 5e4c1064..98db93c4 100644
--- a/assets/sass/_theme/_utils.sass
+++ b/assets/sass/_theme/_utils.sass
@@ -195,6 +195,50 @@
color: $color-text-alt
display: block
+@mixin list-section
+ @include list-reset
+ > li
+ border-bottom: 1px solid $color-border
+ padding-bottom: $spacing1
+ padding-top: $spacing1
+ position: relative
+ > .title
+ @include h2
+ transition: color 0.55s
+ @include media-breakpoint-down(md)
+ @include icon("arrow-right", "after", px2rem(16), true)
+ bottom: $spacing0
+ position: absolute
+ right: 0
+ @include media-breakpoint-up(md)
+ @include arrow-right-hover
+ display: block
+ &::after
+ font-size: $font-size-base
+ transform: translateX(0)
+ position: relative
+ &:hover
+ color: $color-accent
+ &::after
+ transform: translateX($spacing0)
+ a
+ text-decoration: none
+
+ @include media-breakpoint-down(md)
+ a, p
+ display: block
+ @include media-breakpoint-up(md)
+ align-items: baseline
+ display: flex
+ justify-content: space-between
+ a:first-child, p:first-child
+ > .title
+ & + a,
+ & + p
+ margin-left: $spacing1
+ text-align: right
+ white-space: nowrap
+
@mixin visually-hidden
clip: rect(0,0,0,0) !important
border: 0 !important
diff --git a/assets/sass/_theme/design-system/typography.sass b/assets/sass/_theme/design-system/typography.sass
index 6bfd11cb..7cb5b1f9 100644
--- a/assets/sass/_theme/design-system/typography.sass
+++ b/assets/sass/_theme/design-system/typography.sass
@@ -159,17 +159,11 @@ p
small, .small
@include small
-@mixin rich-text
- h1, h2, h3, h4, h5, h6, p
- margin-top: 2em
- &:first-child, meta + &
- margin-top: 0
-
-.rich-text
- @include rich-text
-
[itemprop="articleBody"]
- @include rich-text
+ h1, h2, h3, h4, h5, h6
+ margin-block-start: 2em
+ &:first-child, meta + &
+ margin-block-start: 0
@mixin blockquote
margin: 0
diff --git a/assets/sass/_theme/sections/categories.sass b/assets/sass/_theme/sections/categories.sass
index e69de29b..f6218cdf 100644
--- a/assets/sass/_theme/sections/categories.sass
+++ b/assets/sass/_theme/sections/categories.sass
@@ -0,0 +1,4 @@
+ul.categories
+ @include list-section
+ article
+ @include article
\ No newline at end of file
diff --git a/assets/sass/_theme/sections/diplomas.sass b/assets/sass/_theme/sections/diplomas.sass
index eb92809d..99db73d9 100644
--- a/assets/sass/_theme/sections/diplomas.sass
+++ b/assets/sass/_theme/sections/diplomas.sass
@@ -25,12 +25,12 @@ ul.diplomas
@include icon(caret, after)
font-size: px2rem(6)
margin-left: 5px
-
.dropdown-menu
@include inset(calc(100% + #{$spacing0}), 0, auto, auto)
background-color: $color-background-alt
display: none
position: absolute
+ z-index: 2
@include media-breakpoint-down(md)
right: half(-$grid-gutter-sm)
left: half(-$grid-gutter-sm)
diff --git a/assets/sass/_theme/sections/programs.sass b/assets/sass/_theme/sections/programs.sass
index a494cdbc..7ba475f6 100644
--- a/assets/sass/_theme/sections/programs.sass
+++ b/assets/sass/_theme/sections/programs.sass
@@ -7,28 +7,7 @@ section.programs
@include grid(3, xl)
ol.programs
- @include list-reset
- > li
- border-bottom: 1px solid $color-border
- padding-bottom: $spacing1
- padding-top: $spacing1
- > .title
- @include h2
- a
- text-decoration: none
-
- @include media-breakpoint-down(md)
- a, p
- display: block
- @include media-breakpoint-up(md)
- align-items: baseline
- display: flex
- justify-content: space-between
- a:first-child, p:first-child
- > .title
- & + a
- margin-left: $spacing1
- text-align: right
+ @include list-section
.programs__section
.hero-program
diff --git a/layouts/partials/categories/categories.html b/layouts/partials/categories/categories.html
index 6b329ad2..ae383086 100644
--- a/layouts/partials/categories/categories.html
+++ b/layouts/partials/categories/categories.html
@@ -1,7 +1,7 @@
-<div class="categories">
+<ul class="categories">
{{ range .Paginator.Pages }}
- <div>
+ <li>
{{ partial "categories/category.html" . }}
- </div>
+ </li>
{{ end }}
-</div>
+</ul>
diff --git a/layouts/partials/categories/category.html b/layouts/partials/categories/category.html
index 39dc208e..e640a4b2 100644
--- a/layouts/partials/categories/category.html
+++ b/layouts/partials/categories/category.html
@@ -1,20 +1,15 @@
-<article class="category">
- <div>
- <h1>{{ partial "PrepareHTML" .Title }}</h1>
- <a href="{{ .Permalink }}" class="link" aria-label="{{ i18n "commons.more_aria" (dict "Title" .Title) }}">{{ i18n "commons.more" }}</a>
- </div>
- <div class="media">
- {{- if .Params.image -}}
- {{- partial "commons/image.html"
- (dict
- "image" .Params.image
- "alt" .Title
- "mobile" "351x291"
- "tablet" "334x167"
- "desktop" "634x317"
- ) -}}
- {{- else -}}
- {{- partial "commons/image-default.html" (dict "class" "img-fluid") -}}
- {{- end -}}
- </div>
-</article>
+<a href="{{ .Permalink }}" class="title" aria-label="{{ i18n "commons.more_aria" (dict "Title" .Title) }}">{{ partial "PrepareHTML" .Title }}</a>
+<div class="media">
+ {{- if .Params.image -}}
+ {{- partial "commons/image.html"
+ (dict
+ "image" .Params.image
+ "alt" .Title
+ "mobile" "351x291"
+ "tablet" "334x167"
+ "desktop" "634x317"
+ ) -}}
+ {{- else -}}
+ {{- partial "commons/image-default.html" (dict "class" "img-fluid") -}}
+ {{- end -}}
+</div>
--
GitLab