From e119838f34b661069fdb31eb33e3e5af48c4118e Mon Sep 17 00:00:00 2001
From: Olivia206 <olivia.simonet@mmibordeaux.com>
Date: Tue, 16 May 2023 11:47:59 +0200
Subject: [PATCH] fixed organization chart style with long summaries
---
assets/js/theme/blocks/organizationChart.js | 26 +++++++++++++++++++
assets/js/theme/index.js | 1 +
.../_theme/blocks/organization_chart.sass | 15 ++++++++++-
.../blocks/templates/organization_chart.html | 12 ++++++---
4 files changed, 49 insertions(+), 5 deletions(-)
create mode 100644 assets/js/theme/blocks/organizationChart.js
diff --git a/assets/js/theme/blocks/organizationChart.js b/assets/js/theme/blocks/organizationChart.js
new file mode 100644
index 00000000..7226404d
--- /dev/null
+++ b/assets/js/theme/blocks/organizationChart.js
@@ -0,0 +1,26 @@
+const organizationsCharts = document.querySelectorAll('.block-organization_chart');
+
+class OrganizationChart {
+ constructor (dom) {
+ this.dom = dom;
+
+ this.init();
+ this.listen();
+ }
+ init() {
+ this.content = this.dom.querySelector('.persons');
+ this.persons = this.content.querySelectorAll('.person');
+ this.classLongSummary = "is-column";
+ this.personWithLargeSummary = this.content.querySelector('[data-column="true"]')
+ if (!this.personWithLargeSummary) {
+ return;
+ }
+ }
+ listen() {
+ this.content.classList.add(this.classLongSummary);
+ }
+}
+
+organizationsCharts.forEach((dom) => {
+ new OrganizationChart(dom);
+});
\ No newline at end of file
diff --git a/assets/js/theme/index.js b/assets/js/theme/index.js
index ea01d207..503c2883 100644
--- a/assets/js/theme/index.js
+++ b/assets/js/theme/index.js
@@ -5,5 +5,6 @@ import './design-system/mainMenu';
import './design-system/modal';
import './design-system/toc';
import './blocks/keyFigures';
+import './blocks/organizationChart';
import './blocks/timeline';
import './blocks/partners';
diff --git a/assets/sass/_theme/blocks/organization_chart.sass b/assets/sass/_theme/blocks/organization_chart.sass
index 46a5f3bf..b0db1dbd 100644
--- a/assets/sass/_theme/blocks/organization_chart.sass
+++ b/assets/sass/_theme/blocks/organization_chart.sass
@@ -6,7 +6,20 @@
@include in-page-with-sidebar
.persons
@include grid(1, sm)
- @include grid(2, desktop)
+ &:not(.is-column)
+ @include grid(2, desktop)
+ &.is-column
+ @include grid(2, xl)
+ @include media-breakpoint-between(desktop, xl)
+ .person
+ justify-content: space-between
+ .avatar
+ margin-right: 0
+ margin-left: $spacing1
+ order: 1
+ width: col(3)
+ .description
+ margin-top: 0
article
flex-direction: row
.avatar
diff --git a/layouts/partials/blocks/templates/organization_chart.html b/layouts/partials/blocks/templates/organization_chart.html
index a515fd20..4e8e7b73 100644
--- a/layouts/partials/blocks/templates/organization_chart.html
+++ b/layouts/partials/blocks/templates/organization_chart.html
@@ -1,12 +1,15 @@
{{- $template := .block.template -}}
{{- $position := .block.position -}}
{{- $title := .block.title -}}
+{{- $charLimit := 30 -}}
+{{- $isColumn := false -}}
+
{{- with .block.data -}}
{{- $with_link := .with_link -}}
{{- $with_photo := .with_photo -}}
-<section class="block block-organization_chart{{ if $title }} block-with-title{{ end }}" id="block-{{ $position }}">
- <div class="container">
- <div class="block-content">
+ <section class="block block-organization_chart{{ if $title }} block-with-title{{ end }}" id="block-{{ $position }}">
+ <div class="container">
+ <div class="block-content">
{{ if (or $title .description) -}}
<div class="top">
{{- if not $title -}}
@@ -24,6 +27,7 @@
<div class="persons">
{{- range .persons -}}
{{ $person := site.GetPage (printf "/persons/%s" .slug) }}
+ {{ $summaryLength := len $person.Params.summary}}
<article class="person" itemscope itemtype="https://schema.org/Person">
<div class="description">
<h3 class="name" itemprop="name">
@@ -35,7 +39,7 @@
</a>
{{ end }}
</h3>
- <p itemprop="jobTitle">
+ <p itemprop="jobTitle" {{- if ge $summaryLength $charLimit -}} data-column="true" {{- end -}}>
{{- if (partial "GetTextFromHTML" .role) }}
{{ partial "PrepareHTML" .role }}
{{- else if partial "GetTextFromHTML" $person.Params.summary }}
--
GitLab