Merge pull request #116 from noesya/fixes/organization-chart

Fixes/organization chart

assets/js/theme/blocks/organizationChart.js

+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

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';

assets/sass/_theme/blocks/organization_chart.sass

@@ -6,14 +6,28 @@
     @include in-page-with-sidebar
         .persons
             @include grid(1, sm)
-            @include grid(2, desktop)
-        article
-            flex-direction: row
-            .avatar
-                margin-right: $spacing1
+            &: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
+            margin-right: $spacing1
+            @include media-breakpoint-up(md)
                 width: calc(#{col(1, 4)} + #{$grid-gutter})
-            .description
-                margin-top: $spacing1
+        .description
+            margin-top: $spacing1
     @include media-breakpoint-up(sm)
         @include in-page-without-sidebar
             .persons

layouts/partials/blocks/templates/organization_chart.html

 {{- $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 }}