Skip to content

Commit

Permalink
Equal Column Height
Browse files Browse the repository at this point in the history 
Added a form option on sections for equal column height.
This option only shows up for 2, 3, and 4 column options.
All blocks within the column will be made equal height flex items.

In Layout Builder the "Add Block" button is unfortunately a flex item as well and so the preview differs slightly with the saved layout.
  • Loading branch information
@jnicholCU
jnicholCU committed Aug 20, 2024
1 parent 648cb48 commit 2c2574d
Show file tree
Hide file tree
Showing 5 changed files with 44 additions and 8 deletions.
5 changes: 5 additions & 0 deletions css/ucb-bootstrap-layouts.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,3 +55,8 @@
border-top: solid 2px currentColor;
transform: translate(-50%, 50%) rotate(45deg);
}

.layout-builder__add-block {
width: 100%;
align-content: flex-end;
}
12 changes: 9 additions & 3 deletions layouts/four-column/layout--four-column.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,12 @@
]
%}

{% if settings.column_equal_height == '1' %}
{% set columnHeight = 'd-flex flex-wrap' %}
{% else %}
{% set columnHeight = '' %}
{% endif %}

{% if settings.background_image_styles %}
{% if settings.overlay_color == 'black' %}
{% set row_overlay_settings = "ucb-bootstrap-layout-section-overlay-dark" %}
Expand Down Expand Up @@ -123,19 +129,19 @@
{% endif %}

{% if content.second %}
<div {{ region_attributes.second.addClass('column', 'col-lg-' ~ column_widths.1, 'column--second', 'col-md-6 col-12') }}>
<div {{ region_attributes.second.addClass('column', columnHeight, 'col-lg-' ~ column_widths.1, 'column--second', 'col-md-6 col-12') }}>
{{ content.second }}
</div>
{% endif %}

{% if content.third %}
<div {{ region_attributes.third.addClass('column', 'col-lg-' ~ column_widths.2, 'column--third', 'col-md-6 col-12') }}>
<div {{ region_attributes.third.addClass('column', columnHeight, 'col-lg-' ~ column_widths.2, 'column--third', 'col-md-6 col-12') }}>
{{ content.third }}
</div>
{% endif %}

{% if content.fourth %}
<div {{ region_attributes.fourth.addClass('column', 'col-lg-' ~ column_widths.3, 'column--fourth', 'col-md-6 col-12') }}>
<div {{ region_attributes.fourth.addClass('column', columnHeight, 'col-lg-' ~ column_widths.3, 'column--fourth', 'col-md-6 col-12') }}>
{{ content.fourth }}
</div>
{% endif %}
Expand Down
12 changes: 9 additions & 3 deletions layouts/three-column/layout--three-column.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,12 @@
]
%}

{% if settings.column_equal_height == '1' %}
{% set columnHeight = 'd-flex flex-wrap' %}
{% else %}
{% set columnHeight = '' %}
{% endif %}

{% if settings.background_image_styles %}
{% if settings.overlay_color == 'black' %}
{% set row_overlay_settings = "ucb-bootstrap-layout-section-overlay-dark" %}
Expand Down Expand Up @@ -117,19 +123,19 @@
<div class="container ucb-contained-row">
<div{{attributes.addClass(row_classes, frame_classes|join(' '))}} style="padding-left: {{ settings.section_padding_left }}; padding-right: {{ settings.section_padding_right }};">
{% if content.first %}
<div {{ region_attributes.first.addClass('column', 'col-lg-' ~ column_widths.0, 'column--first', 'col-12') }}>
<div {{ region_attributes.first.addClass('column', columnHeight, 'col-lg-' ~ column_widths.0, 'column--first', 'col-12') }}>
{{ content.first }}
</div>
{% endif %}

{% if content.second %}
<div {{ region_attributes.second.addClass('column', 'col-lg-' ~ column_widths.1, 'column--second', 'col-12') }}>
<div {{ region_attributes.second.addClass('column', columnHeight, 'col-lg-' ~ column_widths.1, 'column--second', 'col-12') }}>
{{ content.second }}
</div>
{% endif %}

{% if content.third %}
<div {{ region_attributes.third.addClass('column', 'col-lg-' ~ column_widths.2, 'column--third', 'col-12') }}>
<div {{ region_attributes.third.addClass('column', columnHeight, 'col-lg-' ~ column_widths.2, 'column--third', 'col-12') }}>
{{ content.third }}
</div>
{% endif %}
Expand Down
10 changes: 8 additions & 2 deletions layouts/two-column/layout--two-column.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,12 @@
{% set frameStyle = 'content-frame-styled' %}
{% endif %}

{% if settings.column_equal_height == '1' %}
{% set columnHeight = 'd-flex flex-wrap' %}
{% else %}
{% set columnHeight = '' %}
{% endif %}

{%
set frame_classes = [
'ucb-content-frame',
Expand Down Expand Up @@ -117,12 +123,12 @@
<div class="container ucb-contained-row">
<div {{attributes.addClass(row_classes, frame_classes|join(' '))}} style="padding-left: {{ settings.section_padding_left }}; padding-right: {{ settings.section_padding_right }};">
{% if (content.first) and (content.first|render|striptags('<img><iframe>')|trim != "")%}
<div {{ region_attributes.first.addClass('column', 'col-lg-' ~ column_widths.0, 'column--first', 'col-12', 'flex-grow-1') }}>
<div {{ region_attributes.first.addClass('column', columnHeight, 'col-lg-' ~ column_widths.0, 'column--first', 'col-12', 'flex-grow-1') }}>
{{ content.first }}
</div>
{% endif %}
{% if (content.second) and (content.second|render|striptags('<img><iframe>')|trim != "") %}
<div {{ region_attributes.second.addClass('column', 'col-lg-' ~ column_widths.1, 'column--second', 'col-12', 'flex-grow-1') }}>
<div {{ region_attributes.second.addClass('column', columnHeight, 'col-lg-' ~ column_widths.1, 'column--second', 'col-12', 'flex-grow-1') }}>
{{ content.second }}
</div>
{% endif %}
Expand Down
13 changes: 13 additions & 0 deletions src/Plugin/Layout/LayoutBase.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,7 @@ public function defaultConfiguration(): array
'background_effect' => UCBLayout::ROW_BACKGROUND_EFFECT_SCROLL,
'class' => NULL,
'column_width' => $this->getDefaultColumnWidth(),
'column_equal_height' => 0,
'section_padding_top' => "0px",
'section_padding_right' => "0px",
'section_padding_bottom' => "0px",
Expand Down Expand Up @@ -161,6 +162,17 @@ public function buildConfigurationForm(array $form, FormStateInterface $form_sta
'#default_value' => $this->configuration['column_width'],
'#required' => TRUE,
];


if ($this->configuration['column_width'] != '12') {
$form['layout']['column_equal_height'] = [
'#type' => 'checkbox',
'#title' => $this->t('Equal Height'),
'#default_value' => $this->configuration['column_equal_height'],
'#description' => $this->t('Selecting this option will make all columns in this section have equal height.'),
'#required' => FALSE,
];
}
}

$form['spacing'] = [
Expand Down Expand Up @@ -410,6 +422,7 @@ public function submitConfigurationForm(array &$form, FormStateInterface $form_s
/*$this->configuration['class'] = $values['extra']['class'];*/
$this->configuration['background_image'] = $values['background']['background_image'] ?? NULL;
$this->configuration['column_width'] = $values['layout']['column_width'];
$this->configuration['column_equal_height'] = $values['layout']['column_equal_height'];
$this->configuration['background_image_styles'] = $new_styles;
$this->configuration['overlay_color'] = $values['background']['overlay_color'];
$this->configuration['background_effect'] = $values['background']['background_effect'];
Expand Down

0 comments on commit 2c2574d

Please sign in to comment.