Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

UHF-9508 & UHF-10769: Change unit contact card layout and improve accessibility #1082

Merged
merged 4 commits into from
Oct 17, 2024
Merged

UHF-9508 & UHF-10769: Change unit contact card layout and improve accessibility #1082

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b82e0d9
change unit contact card layout
j-mys Oct 11, 2024
e847bd9
UHF-9508: Styling and DOM changes so that the title is inside the com…
teroelonen Oct 11, 2024
1e8eac5
UHF-9508: Add unit name for the screen readers to help with link context
teroelonen Oct 14, 2024
0ce6779
UHF-9508: Merge branch 'main' of https://github.com/City-of-Helsinki/…
teroelonen Oct 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .eslintignore
View file
Open in desktop
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
Open in desktop

Large diffs are not rendered by default.

154 changes: 32 additions & 122 deletions src/scss/06_components/paragraphs/_unit-contact-card.scss
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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