Skip to content

Commit

Permalink
Layout "grand" pour les personnes (#832)
Browse files Browse the repository at this point in the history 
Co-authored-by: Alexis BENOIT <alex@noesya.coop>
  • Loading branch information
@Olivia206 @alexisben
Olivia206 and alexisben authored Dec 23, 2024
1 parent aee8c7c commit 8b25342
Show file tree
Hide file tree
Showing 6 changed files with 155 additions and 52 deletions.
132 changes: 94 additions & 38 deletions assets/sass/_theme/blocks/persons.sass
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,35 +9,112 @@
margin-top: $spacing-3
text-align: left

@mixin person-contacts-details-in-list
.contacts-details
ul + ul, li + li
margin-top: $spacing-2
li
display: block
span
padding-right: 0
a, address
text-align: left

.block-persons
article
.description
margin-top: $spacing-3
@include in-page-with-sidebar
.persons
@include grid(1, desktop)
row-gap: $spacing-2
@include media-breakpoint-up(xxl)
@include in-page-without-sidebar
.top .description
max-width: columns(8)
&.block-with-long-text
.persons
@include grid(2)
article
.avatar
width: columns(1.5)
.description
margin-top: $spacing-2
@include person-avatar-end
@include in-page-with-sidebar
article
flex-direction: row
gap: $spacing-3
@include media-breakpoint-up(md)
.avatar
width: columns(2)
@include in-page-without-sidebar
.top .description
max-width: columns(8)
&.block-with-long-text
&--grid
@include in-page-with-sidebar
.persons
@include grid(2)
article
@include person-avatar-end
@include grid(1, desktop)
row-gap: $spacing-2
@include media-breakpoint-up(xxl)
@include grid(2)
.person
.avatar
width: columns(1.5)
.description
margin-top: $spacing-2
@include media-breakpoint-up(xl)
@include person-contacts-details-in-list
@include in-page-without-sidebar
@include person-contacts-details-in-list
.person
text-align: center

&--large
.person
display: flex
flex-direction: column
row-gap: 0
+ .person
margin-top: $spacing-4
@include media-breakpoint-up(md)
margin-top: $spacing-6
.description
flex: 1
.person-name
@include lead
+ div
margin-top: $spacing-2
.more
position: relative
margin-top: space(8)
@include icon(arrow-right-line, after, true)
margin-left: space()
transition: 0.55s $arrow-ease-transition
@include media-breakpoint-down(md)
text-align: center
&:hover
.more::after
margin-left: space(2)
@include in-page-with-sidebar
.avatar
width: columns(3)
.contacts-details
a, address
width: columns(3)
text-align: left
li > span
width: offset(1)
@include in-page-without-sidebar
@include person-contacts-details-in-list
align-items: center
.avatar
width: columns(4)
.contacts-details
ul
@include grid(2, false, $spacing-2)
li + li
margin-top: 0
@include in-page-with-or-without-sidebar
flex-direction: row
gap: var(--grid-gutter)
text-align: left
@include media-breakpoint-down(md)
&-name,
&-role
text-align: center
.avatar
width: 100%
order: -1

&--list
.persons-list
@include list-reset
Expand All @@ -52,31 +129,12 @@
margin-top: 0
+ li
border-top: 1px solid var(--color-border)
.contacts-details
li > span
padding-right: $spacing-2
a, address
@include small
li
align-items: baseline
display: flex
justify-content: space-between
+ li
margin-top: $spacing-1
ul + ul
margin-top: $spacing-1
@include media-breakpoint-down(desktop)
.contacts-details
margin-top: $spacing-3
span
flex-shrink: 0
a, address
text-align: right
@include media-breakpoint-up(desktop)
.contacts-details
margin-top: 0
a, address
width: columns(3)
text-align: left
li > span
width: offset(1)
> li
Expand All @@ -102,5 +160,3 @@
.contacts-details
width: columns(4)



35 changes: 31 additions & 4 deletions assets/sass/_theme/sections/persons.sass
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,31 @@
.person
.contacts-details
margin-top: $spacing-2
li > span
padding-right: $spacing-2
flex-shrink: 0
a, address
@include small
position: relative
text-align: right
z-index: 2
li
align-items: baseline
display: flex
justify-content: space-between
+ li
margin-top: $spacing-1
ul + ul
margin-top: $spacing-1
@include media-breakpoint-down(md)
.contacts-details
margin-top: $spacing-3
span
flex-shrink: 0
a, address
text-align: right

article.person
@include article
word-break: break-word
gap: $spacing-3
Expand All @@ -16,6 +43,7 @@
margin-top: $spacing-1
.description
@include small
flex-grow: 1
@include media-breakpoint-down(lg)
flex-direction: row
gap: $spacing-3
Expand All @@ -24,21 +52,20 @@
flex-shrink: 0
margin-bottom: 0
width: 100px

@include media-breakpoint-down(md)
justify-content: space-between
.description
flex: 1
.avatar
order: 1
margin-right: 0
width: 68px

@include in-page-without-sidebar
text-align: center
.avatar
width: 100%

section.persons,
div.persons
.block-persons--grid .persons
@include grid(1)
@include grid(2, md)
@include grid(4, lg)
Expand Down
15 changes: 12 additions & 3 deletions hugo.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -330,9 +330,18 @@ params:
tablet: 216
desktop: 196
persons:
mobile: 80
tablet: 100
desktop: 255
grid:
mobile: 90
tablet: 360
desktop: 255
large:
mobile: 400
tablet: 360
desktop: 255
list:
mobile: 90
tablet: 360
desktop: 255
testimonials:
mobile: 80
tablet: 160
Expand Down
5 changes: 4 additions & 1 deletion layouts/partials/blocks/templates/persons.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,9 @@
{{- $is_large := false -}}

{{- with .block.data -}}
{{ $layout := .layout | default "grid" }}
{{ $options := .options }}
{{ $image_sizes := index site.Params.image_sizes.blocks.persons $layout }}
{{ range .persons }}
{{- $person := site.GetPage .path -}}
{{- $role := .role -}}
Expand Down Expand Up @@ -41,10 +43,11 @@
{{- range .persons -}}
{{ $person := site.GetPage .path }}
{{ partial "persons/person.html" (dict
"heading_level" $block.ranks.children
"options" $options
"person" $person
"role" .role
"layout" $layout
"image_sizes" $image_sizes
)}}
{{- end -}}
</div>
Expand Down
8 changes: 4 additions & 4 deletions layouts/partials/blocks/templates/persons/list.html
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
{{- $options := .options -}}

<ul class="persons-list {{ if $options.contacts }}with-contacts{{ end }}">
<ul class="persons-list {{ if $options.contact }}with-contacts{{ end }}">
{{- range .block.data.persons -}}
{{ $person := site.GetPage .path }}
<li itemscope itemtype="https://schema.org/Person">
<li class="person" itemscope itemtype="https://schema.org/Person">
<div>
<p class="person-name" itemprop="name">
{{ if $options.link }}
Expand All @@ -14,13 +14,13 @@
</a>
{{ end }}
</p>

{{ with .role }}
<p class="person-role">{{ partial "PrepareHTML" . }}</p>
{{ end }}
</div>

{{ if and $options.contacts $person.Params.contact_details }}
{{ if and $options.contact $person.Params.contact_details }}
{{ partial "commons/contact-details.html" $person }}
{{ end }}
</li>
Expand Down
12 changes: 10 additions & 2 deletions layouts/partials/persons/person.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@
) }}
{{ $person := .person }}
{{ $role := .role }}
{{ $layout := .layout }}
{{ $image_sizes := .image_sizes | default site.Params.image_sizes.sections.persons.item }}

<article class="person" itemscope itemtype="https://schema.org/Person">
<div class="description">
Expand All @@ -19,22 +21,28 @@
{{ end }}
{{ $heading_tag.close }}
{{ if and $options.summary (or $role $person.Params.summary) }}
<div itemprop="jobTitle">
<div class="person-role" itemprop="jobTitle">
{{ if (partial "GetTextFromHTML" $role) }}
<p>{{ partial "PrepareHTML" $role }}</p>
{{ else if $person.Params.summary }}
{{ partial "PrepareHTML" $person.Params.summary }}
{{ end }}
</div>
{{ end }}
{{ if and $options.contact $person.Params.contact_details}}
{{ partial "commons/contact-details.html" $person }}
{{ end }}
{{ if eq $layout "large" }}
<p class="more meta" aria-hidden="true">{{- i18n "commons.more" -}}</p>
{{ end }}
</div>
{{ if $options.image }}
<div class="avatar" itemprop="image">
{{ if $person.Params.image }}
{{ partial "commons/image.html"
(dict
"image" $person.Params.image
"sizes" site.Params.image_sizes.blocks.persons
"sizes" $image_sizes
) }}
{{ end }}
</div>
Expand Down

0 comments on commit 8b25342

Please sign in to comment.