Skip to content

Commit

Permalink
Merge branch 'TMS-935' into stage
Browse files Browse the repository at this point in the history
  • Loading branch information
@eebbi
eebbi committed Nov 20, 2023
2 parents c95dc42 + a4c6d83 commit 2355266
Show file tree
Hide file tree
Showing 8 changed files with 99 additions and 69 deletions.
4 changes: 3 additions & 1 deletion .github/PULL_REQUEST_TEMPLATE.md
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
CR: TMS-628
Severa-ID: 2108
Severa-kuvaus:
Task: https://hiondigital.atlassian.net/browse/TMS-

<!--- Provide a general summary of your changes in the Title above -->

Expand Down
9 changes: 9 additions & 0 deletions CHANGELOG.MD
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,18 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.

## [Unreleased]

- TMS-935: Archive filter accessibility fixes

## [1.9.4] - 2023-10-23

- TMS-970: Add image meta to call-to-action and content-columns components

## [1.9.3] - 2023-10-12

### Fixed

- TMS-982: Fix exhibition-archive year-filters & search
- TMS-936: Image carousel accessibility fixes

## [1.9.2] - 2023-09-04

Expand Down
9 changes: 7 additions & 2 deletions assets/styles/ui-components/_archive-filters.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,19 +65,24 @@
.archive-filters {
&__select-container {
display: flex;
flex-direction: column;
flex-direction: column-reverse;
gap: $theme-spacing-oneandhalf;

@include until($tablet) {
width: 100%;
}

@include from($tablet) {
flex-direction: row;
flex-direction: unset;
flex-wrap: wrap-reverse;
}

select {
width: 100%;
}
}

&__description {
width: 100%;
}
}
66 changes: 35 additions & 31 deletions partials/layouts/layout-call-to-action.dust
View file
Original file line number Diff line number Diff line change
@@ -1,43 +1,47 @@
<div {?anchor}id="{anchor|s}"{/anchor} class="call-to-action {accent_color|s}">
<div {?anchor}id="{anchor|attr}"{/anchor} class="call-to-action {accent_color|attr}">
<div class="keep-vertical-spacing">

{#rows}
<div class="call-to-action__item section is-flex is-justify-content-center pt-6 pb-6"{bg_style|s}>
<div class="container columns is-variable is-6 is-vcentered {container_class|s}">
{?image}
<div class="column is-relative {img_column_class}">
{>"shared/layout-after-main-content" /}
<div class="image {image_class|s}">
{@image id=image.id size="large" class="objectfit-image" /}
</div>
{?display_artist}
{?image_title_and_artist}
<span class="is-block pt-2 pb-2 mb-0 {txt_color_class|s}">{image_title_and_artist|s}</span>
{/image_title_and_artist}
{/display_artist}
{>"shared/layout-before-main-content" /}
</div>
{/image}
<div class="call-to-action__item section is-flex is-justify-content-center pt-6 pb-6"{bg_style|attr}>
<div class="container columns is-variable is-6 is-vcentered {container_class|attr}">
{?image}
<div class="column is-relative {img_column_class|attr}">
{>"shared/layout-after-main-content" /}
<div class="image {image_class|attr}">
{@image id=image.id size="large" class="objectfit-image" /}
</div>

<div class="column {text_column_class|s}">
{?title}
<h2 class="call-to-action__title h4 mt-0 {txt_color_class|s}">
{title|s}
</h2>
{/title}
{@isset key1=display_caption key2=image.caption method="and" }
{>"ui/image/image-caption" /}
{/isset}

{?description}
<div class="call-to-action__description mt-6 mb-6 {txt_color_class|s}">
{description|s}
{?display_artist}
{?image_title_and_artist}
<span class="is-block pt-2 pb-2 mb-0 {txt_color_class|attr}">{image_title_and_artist|html}</span>
{/image_title_and_artist}
{/display_artist}
{>"shared/layout-before-main-content" /}
</div>
{/description}
{/image}

{>"ui/button-link" classes="is-primary" icon="chevron-right" icon_classes="icon--medium" /}
<div class="column {text_column_class|attr}">
{?title}
<h2 class="call-to-action__title h4 mt-0 {txt_color_class|attr}">
{title|html}
</h2>
{/title}

{?description}
<div class="call-to-action__description mt-6 mb-6 {txt_color_class|attr}">
{description|kses}
</div>
{/description}

{>"ui/button-link" classes="is-primary" icon="chevron-right" icon_classes="icon--medium" /}
</div>
</div>
</div>
</div>
{/rows}


</div>
</div>
5 changes: 5 additions & 0 deletions partials/layouts/layout-content-columns.dust
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,11 @@
<div class="image">
{@image id=image.id size="large" class="objectfit-image" /}
</div>

{@isset key1=display_caption key2=image.caption method="AND" }
{>"ui/image/image-caption" /}
{/isset}

{?display_artist}
{?image_author_and_artist}
<small>{image_author_and_artist|html}</small>
Expand Down
34 changes: 17 additions & 17 deletions partials/layouts/layout-image-carousel.dust
View file
Original file line number Diff line number Diff line change
@@ -1,37 +1,37 @@
{?rows}
<div {?anchor}id="{anchor|s}"{/anchor} class="section image-carousel layout-image-carousel p-8 {accent_color|s}" {bg_style|s}>
<div {?anchor}id="{anchor|attr}"{/anchor} class="section image-carousel layout-image-carousel p-8 {accent_color|attr}" {bg_style|attr}>
<div class="container keep-vertical-spacing">
<div class="columns is-multiline">

{?title}
<h3 id="{carousel_id}-title"
class="image-carousel__title column is-block is-half is-offset-one-quarter has-text-centered mt-0 mb-0 {carousel_title_class|s} {txt_color_class|s}">
{title|s}
<h3 id="{carousel_id|attr}-title"
class="image-carousel__title column is-block is-half is-offset-one-quarter has-text-centered mt-0 mb-0 {carousel_title_class|attr} {txt_color_class|attr}">
{title|html}
</h3>
{/title}

{?description}
<div class="image-carousel__description column is-half is-offset-one-quarter has-text-lead has-text-centered mt-0 {txt_color_class|s}">
{description|s}
<div class="image-carousel__description column is-half is-offset-one-quarter has-text-lead has-text-centered mt-0 {txt_color_class|attr}">
{description|kses}
</div>
{/description}

<div class="image-carousel__inner column is-full">
<button class="button button--icon is-primary is-rounded slick-prev slick-arrow" type="button">
{>"ui/icon" icon="chevron-left" /}
<span class="is-sr-only">{Strings.s.gallery.previous|s}</span>
<span class="is-sr-only">{translations.previous|s}</span>
</button>

<div class="image-carousel__items image-carousel__items--primary"
id="{carousel_id}" data-slider-for="{carousel_id}-modal-carousel">
id="{carousel_id|attr}" data-slider-for="{carousel_id|attr}-modal-carousel">
{#rows}
<div class="image-carousel__item" id="{id}">
<div class="image-carousel__item" id="{id|attr}">
{! Modal trigger !}
<button
class="image modal-trigger {shape}"
class="image modal-trigger {shape|attr}"
data-modal-button
data-target="{carousel_id}-modal"
aria-controls="{carousel_id}-modal"
data-target="{carousel_id|attr}-modal"
aria-controls="{carousel_id|attr}-modal"
aria-expanded="false"
aria-haspopup="true"
aria-label="{translations.open}"
Expand All @@ -44,27 +44,27 @@

<button class="button button--icon is-primary is-rounded slick-next slick-arrow" type="button">
{>"ui/icon" icon="chevron-right" /}
<span class="is-sr-only">{Strings.s.gallery.next|s}</span>
<span class="is-sr-only">{translations.next|html}</span>
</button>
</div>
</div>
</div>

{! The modal !}
<div id="{carousel_id}-modal" class="modal modal--large modal--slider" role="dialog" aria-modal="true" aria-labelledby="{carousel_id}">
<div id="{carousel_id|attr}-modal" class="modal modal--large modal--slider" role="dialog" aria-modal="true" aria-labelledby="{carousel_id|attr}">
<div class="modal-background"></div>

<button
class="button button--icon modal-close-button is-flex is-align-self-flex-end image-carousel__modal-control">
<span class="modal-close-button__text">{translations.close}</span>
<span class="modal-close-button__text">{translations.close|html}</span>
{>"ui/icon" icon="close" class="icon--medium" /}
</button>
<div class="modal-content">

{! Slider inside the modal !}
<div class="image-carousel__items image-carousel__items--modal column is-full" id="{carousel_id}-modal-carousel" data-slider-for="{carousel_id}">
<div class="image-carousel__items image-carousel__items--modal column is-full" id="{carousel_id|attr}-modal-carousel" data-slider-for="{carousel_id|attr}">
{#rows}
<div class="image-carousel__item" id="{id}-modal">
<div class="image-carousel__item" id="{id|attr}-modal">
<div class="img-wrapper">
{@image id=image.id alt=image.alt title=image.alt size="fullhd" width="{image.sizes.fullhd-width}" height="{image.sizes.fullhd-height}" loading="" /}
</div>
Expand Down
39 changes: 22 additions & 17 deletions partials/views/home/home-filters.dust
View file
Original file line number Diff line number Diff line change
@@ -1,60 +1,65 @@
<div class="archive-filters columns mt-6">
<div class="column is-8">
<nav class="column is-8" aria-labelledby="filter">
{?filters.categories}
<div class="h6 mb-4">
{Strings.s.home.filter_by_category|s}
<div class="h6 mb-4" id="filter">
{Strings.s.home.filter_by_category|html}
</div>

<div>
{#filters.categories}
<a href="{url}"
class="pill mr-2 mb-2 {^is_active}is-primary-invert{/is_active}">
<a href="{url|url}"
class="pill mr-2 mb-2 {^is_active}is-primary-invert{/is_active}" {?is_active}aria-current="true"{/is_active}>
{?is_active}
{>"ui/icon" icon="checkmark" class="icon--medium mr-2 is-primary-invert" /}
{/is_active}

{name|s}
{name|html}
</a>
{/filters.categories}
</div>
{/filters.categories}
</div>
</nav>

<div class="column is-4">
<form action="" method="get" class="is-flex is-justify-content-flex-end archive-filters__form">
{?filters.active_category}
<input name="filter-category" type="hidden" value="{filters.active_category|s}">
<input name="filter-category" type="hidden" value="{filters.active_category|attr}">
{/filters.active_category}

<div class="archive-filters__select-container">
<div class="archive-filters__select-container" aria-describedby="archive-filters-description">

<p class="archive-filters__description" id="archive-filters-description">
{Strings.s.home.description|html}
</p>

<div class="archive-filters__dropdown-item">
<label for="filter-year" class="is-block h6 mb-4">
{Strings.s.home.year|s}
{Strings.s.home.year|html}
</label>

<select name="filter-year" id="filter-year"
class="js-trigger-form-submit p-2 has-background-invert has-border-radius-small has-border-gray has-border-1">
<option value="">{Strings.s.common.all|s}</option>
<option value="">{Strings.s.common.all|html}</option>

{#filters.years}
<option value="{key}" {is_selected|s}>
{name|s}
<option value="{key|attr}" {is_selected|attr}>
{name|html}
</option>
{/filters.years}
</select>
</div>

<div class="archive-filters__dropdown-item">
<label for="filter-month" class="is-block h6 mb-4">
{Strings.s.home.month|s}
{Strings.s.home.month|html}
</label>

<select name="filter-month" id="filter-month"
class="js-trigger-form-submit p-2 has-border-radius-small has-border-gray has-border-1">
<option value="">{Strings.s.common.all|s}</option>
<option value="">{Strings.s.common.all|html}</option>
{#filters.months}
<option value="{key}" {is_selected|s}>
{name|s}
<option value="{key|attr}" {is_selected|attr}>
{name|html}
</option>
{/filters.months}
</select>
Expand Down
2 changes: 1 addition & 1 deletion style.css
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/*
* Theme Name: TMS Theme Taidemuseo
* Description: Tampere Multisite Taidemuseo Theme
* Version: 1.9.2
* Version: 1.9.3
* Author: Geniem
* Author URI: https://geniem.fi
* Template: tms-theme-base
Expand Down

0 comments on commit 2355266

Please sign in to comment.