diff --git a/assets/js/theme/blocks/organizationChart.js b/assets/js/theme/blocks/organizationChart.js new file mode 100644 index 0000000000000000000000000000000000000000..7226404d65f9a95c80b78d48484e2b798a833419 --- /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 ea01d20778510cce110222889c1b409ba03712f2..503c2883743ed8c1f52024d8e5c562abab05d520 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 46a5f3bfb105d3be7ca097e185c8ce26a68fc365..b0db1dbd82a67547caea0a26444a42d45fa2e483 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 a515fd200b1c316fb6ab9e9321455b1266766d36..4e8e7b73cbc98174d30658192e8191f0b7786649 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 }}