Skip to content

Commit

Permalink
Merge pull request #1082 from City-of-Helsinki/UHF-9508-unit-contact-…
Browse files Browse the repository at this point in the history 
…card

UHF-9508 & UHF-10769: Change unit contact card layout and improve accessibility
  • Loading branch information
@teroelonen
teroelonen authored Oct 17, 2024
2 parents f637282 + 0ce6779 commit 84550be
Show file tree
Hide file tree
Showing 6 changed files with 99 additions and 180 deletions.
1 change: 1 addition & 0 deletions .eslintignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,4 @@ node_modules/**/*
webpack.config.js
webpack.config.dev.js
webpack.config.build.js
src/js/calculator/*/tests/*
2 changes: 1 addition & 1 deletion dist/css/styles.min.css
View file

Large diffs are not rendered by default.

154 changes: 32 additions & 122 deletions src/scss/06_components/paragraphs/_unit-contact-card.scss
View file
Original file line number Diff line number Diff line change
@@ -1,71 +1,51 @@
.component--unit-contact-card {
.unit-contact-card {
background-color: $color-silver-light;
}
display: flex;
flex-direction: column;
gap: $spacing;
padding: $spacing-and-half;

// If the unit contact card is just before footer.
.layout-main-wrapper > *:last-child .component--unit-contact-card:last-child {
margin-bottom: -115px; // Enough to get the block under the footer.
padding-bottom: 55px; // Leave enough room between the last card and footer.
@include breakpoint($breakpoint-s) {
padding-bottom: $spacing-double;
padding-top: $spacing-double;
}
}

// If the unit contact card is at the upper content area.
.components--upper,
.components--unit,
.components--service {
> .component--unit-contact-card .component__container {
padding-left: $spacing;
padding-right: $spacing;
@include breakpoint($breakpoint-m) {
padding-bottom: $spacing-triple;
padding-left: $spacing-double;
padding-right: $spacing-double;
padding-top: $spacing-triple;
}

.component__title + .component__content {
@include breakpoint($component-spacing-breakpoint) {
margin-top: 40px;
}
}
.component--unit-contact-card--with-image .unit-contact-card {
@include breakpoint($breakpoint-s) {
flex-direction: row-reverse;
gap: $spacing-and-half;
}
}

.component--unit-contact-card .component__container {
padding-bottom: $spacing-double;
padding-top: $spacing-double;
.unit-contact-card__image {
flex-basis: 30%;
flex-shrink: 0;

@include breakpoint($breakpoint-m) {
padding-bottom: $spacing-quadruple;
padding-top: $spacing-quadruple;
picture,
img {
aspect-ratio: 1.5;
background-color: $color-black-5;
display: block;
height: auto;
width: 100%;
}
}

.unit-contact-card {
@include breakpoint($breakpoint-l) {
overflow: hidden; // Because of the floats.
}
.unit-contact-card__info {
display: flex;
flex-direction: column;
flex-grow: 1;
}

.unit-contact-card__info-row {
margin-top: $spacing-double;
margin-top: $spacing-and-half;
padding-left: calc(#{$spacing-and-half} + #{$spacing-half}); // Icon width + spacing between text and icon.
position: relative;
width: 100%;

@include breakpoint($breakpoint-l) {
// The float in here is because of the complex structure when switching between mobile and desktop layouts.
// The image needs to be printed on mobile after the visiting address but before other information so it is
// printed there in the DOM, but it needs to be on the "column" next to the values on the desktop view.
float: left;
margin-right: 50%;
padding-right: $spacing-and-half;
width: 50%;
}

&:first-child {
@include breakpoint($breakpoint-l) {
margin-top: 0;
}
margin-top: 0;
}

// Icons container.
Expand All @@ -78,79 +58,9 @@
p:first-child {
margin-top: 0;
}
}

// Additional details on the "left column".
.unit-contact-card__info-row--details {
@include breakpoint($breakpoint-l) {
display: none; // This is shown only on mobile to make the print order correct.
}
}

// If the details should be visible on the left column on desktop.
.unit-contact-card--details-on-left {
.unit-contact-card__info-row--details {
@include breakpoint($breakpoint-l) {
display: block;
}
}

.unit-contact-card__image-with-details .unit-contact-card__info-row--details {
@include breakpoint($breakpoint-l) {
display: none;
}
}
}

// Container for the image and possible details.
.unit-contact-card__image-with-details {
@include breakpoint($breakpoint-l) {
float: right;
margin-left: -50%;
width: 50%;
}

.unit-contact-card__info-row--details {
display: none; // Additional details is shown on this column only on desktop view.

@include breakpoint($breakpoint-l) {
display: block;
float: none;
margin-right: 0;
padding-right: 0;
width: 100%;
}
}
}

// If the left column on desktop is empty.
.unit-contact-card--left-column-empty .unit-contact-card__image-with-details {
float: none;
margin-left: 0;
}

.unit-contact-card__image {
margin-top: $spacing-and-half;

img {
display: block;
height: auto;
overflow: hidden;
width: 100%;
}

+ .unit-contact-card__info-row {
margin-top: $spacing-and-half;

@include breakpoint($breakpoint-l) {
margin-top: $spacing-double;
}
}

&:first-child {
@include breakpoint($breakpoint-l) {
margin-top: 0;
}
.form-item {
margin-bottom: 0;
}
}

Expand Down Expand Up @@ -185,7 +95,7 @@
padding-left: 0; // There is no icon on the link so this padding is not needed.

&:first-child {
@include breakpoint($breakpoint-l) {
@include breakpoint($breakpoint-s) {
margin-top: 0;
}
}
Expand Down
114 changes: 57 additions & 57 deletions templates/paragraphs/paragraph--unit-contact-card.html.twig
View file
Original file line number Diff line number Diff line change
@@ -1,82 +1,82 @@
{# This is shown twice in DOM, to move it between mobile and desktop versions maintaining logical tabbing order #}
{% set unit_contact_card_details %}
{% if unit_contact_card.details|render %}
<div class="unit-contact-card__info-row unit-contact-card__info-row--details">
<div class="unit-contact-card__info-row__title">{{ 'Additional details'|t }}:</div>
<div class="unit-contact-card__info-row__content">{{ unit_contact_card.details }}</div>
</div>
{% endif %}
{% endset %}
{% if unit_contact_card.picture_url|render or unit_contact_card.picture_url_override|render %}
{% set with_image_class = 'component--unit-contact-card--with-image' %}
{% endif %}

{% block paragraph %}
{% embed "@hdbt/misc/component.twig" with
{
component_classes: [
'component--unit-contact-card',
with_image_class
],
component_title: unit_contact_card.title,
component_content_class: [
'unit-contact-card',
unit_contact_card.left_column_empty ? 'unit-contact-card--left-column-empty',
unit_contact_card.details_on_left ? 'unit-contact-card--details-on-left',
'unit-contact-card'
],
}
%}
{% block component_content %}
{% if unit_contact_card.address|render %}
<div class="unit-contact-card__info-row unit-contact-card__info-row--address">
<div class="unit-contact-card__info-row__title">{{ 'Visiting address'|t }}:</div>
<div class="unit-contact-card__info-row__content">{{ unit_contact_card.address }}</div>
</div>
{% endif %}

{% if unit_contact_card.picture_url_override|render or unit_contact_card.picture_url|render or unit_contact_card.details|render %}
<div class="unit-contact-card__image-with-details">
{% if unit_contact_card.picture_url_override|render or unit_contact_card.picture_url|render %}
{% set picture_classes = 'unit-contact-card__image' %}
{% set image_attributes = create_attribute() %}
<div{{ image_attributes.addClass(picture_classes) }}>
{% if unit_contact_card.picture_url_override|render %}
{{ unit_contact_card.picture_url_override }}
{% elseif unit_contact_card.picture_url|render %}
{{ unit_contact_card.picture_url }}
{% endif %}
</div>
{% if unit_contact_card.picture_url|render or unit_contact_card.picture_url_override|render %}
<div class="unit-contact-card__image">
{% if unit_contact_card.picture_url_override|render %}
{{ unit_contact_card.picture_url_override }}
{% elseif unit_contact_card.picture_url|render %}
{{ unit_contact_card.picture_url }}
{% endif %}
{{ unit_contact_card_details }}
</div>
{% endif %}

{% if unit_contact_card.address_postal|render %}
<div class="unit-contact-card__info-row unit-contact-card__info-row--address">
<div class="unit-contact-card__info-row__title">{{ 'Postal address'|t }}:</div>
<div class="unit-contact-card__info-row__content">{{ unit_contact_card.address_postal }}</div>
</div>
{% endif %}
<div class="unit-contact-card__info">
<h2 class="component__title">{{ unit_contact_card.title }}</h2>

{% if unit_contact_card.phone|render %}
<div class="unit-contact-card__info-row unit-contact-card__info-row--phone">
<div class="unit-contact-card__info-row__title">{{ 'Telephone number'|t }}:</div>
<div class="unit-contact-card__info-row__content">{{ unit_contact_card.phone }}</div>
</div>
{% endif %}
{% if unit_contact_card.address|render %}
<div class="unit-contact-card__info-row unit-contact-card__info-row--address">
<div class="unit-contact-card__info-row__title">{{ 'Visiting address'|t }}:</div>
<div class="unit-contact-card__info-row__content">{{ unit_contact_card.address }}</div>
</div>
{% endif %}

{% if unit_contact_card.opening_hours|render %}
<div class="unit-contact-card__info-row unit-contact-card__info-row--opening-hours">
<div class="unit-contact-card__info-row__title">{{ 'Opening hours'|t }}:</div>
<div class="unit-contact-card__info-row__content">{{ unit_contact_card.opening_hours }}</div>
</div>
{% endif %}
{% if unit_contact_card.address_postal|render %}
<div class="unit-contact-card__info-row unit-contact-card__info-row--address">
<div class="unit-contact-card__info-row__title">{{ 'Postal address'|t }}:</div>
<div class="unit-contact-card__info-row__content">{{ unit_contact_card.address_postal }}</div>
</div>
{% endif %}

{{ unit_contact_card_details }}
{% if unit_contact_card.phone|render %}
<div class="unit-contact-card__info-row unit-contact-card__info-row--phone">
<div class="unit-contact-card__info-row__title">{{ 'Telephone number'|t }}:</div>
<div class="unit-contact-card__info-row__content">{{ unit_contact_card.phone }}</div>
</div>
{% endif %}

{% if unit_contact_card.unit_url %}
<div class="unit-contact-card__info-row unit-contact-card__link-wrapper">
{% set unit_link_attributes = { 'class': [ 'unit-contact-card__link', ], } %}
{{ link('Unit homepage'|t, unit_contact_card.unit_url, unit_link_attributes) }}
</div>
{% endif %}
{% if unit_contact_card.opening_hours|render %}
<div class="unit-contact-card__info-row unit-contact-card__info-row--opening-hours">
<div class="unit-contact-card__info-row__title">{{ 'Opening hours'|t }}:</div>
<div class="unit-contact-card__info-row__content">{{ unit_contact_card.opening_hours }}</div>
</div>
{% endif %}

{% if unit_contact_card.details|render %}
<div class="unit-contact-card__info-row unit-contact-card__info-row--details">
<div class="unit-contact-card__info-row__title">{{ 'Additional details'|t }}:</div>
<div class="unit-contact-card__info-row__content">{{ unit_contact_card.details }}</div>
</div>
{% endif %}

{% if unit_contact_card.unit_url %}
<div class="unit-contact-card__info-row unit-contact-card__link-wrapper">
{% set link_title %}
<span class="visually-hidden">
{{- unit_contact_card.title.0['#context'].value ~ ':' -}}
</span>
{{- 'See details'|t({}, {'context': 'Unit contact card'}) -}}
{% endset %}
{% set unit_link_attributes = { 'class': [ 'unit-contact-card__link' ], } %}
{{ link(link_title, unit_contact_card.unit_url, unit_link_attributes) }}
</div>
{% endif %}
</div>
{% endblock component_content %}
{% endembed %}
{% endblock paragraph %}
4 changes: 4 additions & 0 deletions translations/fi.po
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1300,6 +1300,10 @@ msgctxt "Survey"
msgid "Skip the survey"
msgstr "En osallistu kyselyyn"

msgctxt "Unit contact card"
msgid "See details"
msgstr "Katso tarkemmat tiedot"

msgctxt "The helper text before the news article published timestamp"
msgid "Published"
msgstr "Julkaistu"
Expand Down
4 changes: 4 additions & 0 deletions translations/sv.po
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1302,6 +1302,10 @@ msgctxt "Survey"
msgid "Skip the survey"
msgstr "Jag deltar inte i enkäten"

msgctxt "Unit contact card"
msgid "See details"
msgstr "Se detaljer"

msgctxt "The helper text before the news article published timestamp"
msgid "Published"
msgstr "Publicerad"
Expand Down

0 comments on commit 84550be

Please sign in to comment.