Skip to content

Commit e894282

Browse files
annadruidannadruid
authored
Merge pull request #998 from City-of-Helsinki/UHF-12543
UHF-12543: Styled course unit page
2 parents 251c206 + d3638d1 commit e894282

9 files changed

Lines changed: 278 additions & 2 deletions

File tree

‎public/modules/custom/helfi_kasko_content/src/CrossInstitutionalStudies/Controller/Controller.php‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,10 +78,14 @@ public function build(string $id): array {
7878

7979
foreach ($event->images as $image) {
8080
$build['#images'][] = [
81-
'#theme' => 'imagecache_external',
81+
'#theme' => 'imagecache_external_responsive',
8282
'#uri' => $image->url,
8383
'#style_name' => 'medium',
8484
'#alt' => $image->alt_text,
85+
'#responsive_image_style_id' => 'main_image',
86+
'#attributes' => [
87+
'data-photographer' => $image->photographer_name,
88+
],
8589
];
8690
}
8791

‎public/modules/custom/helfi_kasko_content/translations/fi.po‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -258,3 +258,35 @@ msgctxt "LinkedEvents API"
258258
msgid "remote learning"
259259
msgstr "etäopiskelu"
260260

261+
msgctxt "Cross institutional studies"
262+
msgid "Study unit description"
263+
msgstr "Opintojakson kuvaus"
264+
265+
msgctxt "Cross institutional studies"
266+
msgid "Study unit details"
267+
msgstr "Opintojakson tiedot"
268+
269+
msgctxt "Cross institutional studies"
270+
msgid "Study unit"
271+
msgstr "Opintojakso"
272+
273+
msgctxt "Cross institutional studies"
274+
msgid "Date and time"
275+
msgstr "Ajankohta"
276+
277+
msgctxt "Cross institutional studies"
278+
msgid "Mode of teaching"
279+
msgstr "Opiskelumuoto"
280+
281+
msgctxt "Cross institutional studies"
282+
msgid "Language of instruction"
283+
msgstr "Opetuskieli"
284+
285+
msgctxt "Cross institutional studies"
286+
msgid "Sign up on Wilma"
287+
msgstr "Ilmoittaudu Wilmassa"
288+
289+
msgctxt "Cross institutional studies"
290+
msgid "Other options for completing the study unit"
291+
msgstr "Opintojakson muut suoritusvaihtoehdot"
292+

‎public/modules/custom/helfi_kasko_content/translations/sv.po‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -253,3 +253,35 @@ msgstr "nätstudier"
253253
msgctxt "LinkedEvents API"
254254
msgid "remote learning"
255255
msgstr "distansundervisning"
256+
257+
msgctxt "Cross institutional studies"
258+
msgid "Study unit description"
259+
msgstr "Beskrivning av studieavsnittet"
260+
261+
msgctxt "Cross institutional studies"
262+
msgid "Study unit details"
263+
msgstr "Uppgifter om studieavsnittet"
264+
265+
msgctxt "Cross institutional studies"
266+
msgid "Study unit"
267+
msgstr "Studieavsnitt"
268+
269+
msgctxt "Cross institutional studies"
270+
msgid "Date and time"
271+
msgstr "Tidpunkt"
272+
273+
msgctxt "Cross institutional studies"
274+
msgid "Mode of teaching"
275+
msgstr "Studieform"
276+
277+
msgctxt "Cross institutional studies"
278+
msgid "Language of instruction"
279+
msgstr "Undervisningsspråk"
280+
281+
msgctxt "Cross institutional studies"
282+
msgid "Sign up on Wilma"
283+
msgstr "Anmäl dig i Wilma"
284+
285+
msgctxt "Cross institutional studies"
286+
msgid "Other options for completing the study unit"
287+
msgstr "Andra alternativ att avlägga studieavsnittet"

‎public/themes/custom/hdbt_subtheme/dist/css/styles.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/themes/custom/hdbt_subtheme/src/scss/06-components/__index.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
1+
@import 'pages/_index';
12
@import 'paragraphs/_index';

‎public/themes/custom/hdbt_subtheme/src/scss/06-components/pages/__index.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@import 'course-unit';

‎public/themes/custom/hdbt_subtheme/src/scss/06-components/pages/_course-unit.scss‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
.component--course-unit__unit-details {
2+
.component__container {
3+
background-color: $color-engel-light;
4+
padding: $spacing-and-half;
5+
6+
@include breakpoint($breakpoint-l) {
7+
padding: $spacing-double;
8+
}
9+
}
10+
11+
.component__content {
12+
display: flex;
13+
flex-direction: column;
14+
gap: $spacing;
15+
margin-block-start: $spacing;
16+
}
17+
18+
.course-unit-details__item {
19+
display:flex;
20+
flex-direction: column;
21+
22+
span:first-child {
23+
font-weight: $font-weight-bold;
24+
}
25+
}
26+
27+
a[data-hds-component="button"] {
28+
margin-top: $spacing;
29+
width: fit-content;
30+
}
31+
}
32+
33+
.component--course-unit .component__content {
34+
@include font('body');
35+
}
36+
37+
.component--course-unit__main-image .main-image {
38+
padding: 0;
39+
}

‎public/themes/custom/hdbt_subtheme/templates/module/helfi_kasko_content/cross-institutional-studies-card.html.twig‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
{#
2+
Template for cource loaded from linked events.
3+
4+
TODO: https://helsinkisolutionoffice.atlassian.net/browse/UHF-11944.
5+
6+
See Drupal\helfi_kasko_content\CrossInstitutionalStudies\Controller\Controller.php
7+
See available variables with: {{ dd(_context) }}
8+
#}
9+
10+
{% set card_metas = [] %}
11+
12+
{% if event.start_date and event.end_date %}
13+
{% set card_metas = card_metas|merge([{
14+
icon: 'calendar',
15+
label: 'Date and time' | t({}, { context: 'Cross institutional studies' }),
16+
content: event.start_date | format_date('short') ~ ' - ' ~ event.end_date | format_date('short'),
17+
}]) %}
18+
{% endif %}
19+
20+
{% if event.keywords is not empty %}
21+
{% set card_metas = card_metas|merge([{
22+
icon: 'locate',
23+
label: 'Mode of teaching' | t({}, { context: 'Cross institutional studies' }),
24+
content: event.keywords | map(keyword => keyword.getlabel()) | join(', '),
25+
}]) %}
26+
{% endif %}
27+
28+
{% if event.in_language is not empty %}
29+
{% set card_metas = card_metas|merge([{
30+
icon: 'globe',
31+
label: 'Language of instruction' | t({}, { context: 'Cross institutional studies' }),
32+
content: event.in_language | map(language => language.getlabel()) | join(', '),
33+
}]) %}
34+
{% endif %}
35+
36+
37+
{% set card_url = url('helfi_kasko_content.cross_institutional_studies', { id: event.id }) %}
38+
39+
{% embed '@hdbt/component/card.twig' with {
40+
card_modifier_class: 'card--cross-institutional-course card--border',
41+
card_title_level: 'h3',
42+
card_title_lang: 'fi',
43+
card_title: event.title,
44+
card_url: card_url['#markup'],
45+
card_url_external: true,
46+
card_metas: card_metas,
47+
} %}
48+
{% endembed %}

‎public/themes/custom/hdbt_subtheme/templates/module/helfi_kasko_content/cross-institutional-studies.html.twig‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
{#
2+
Template for cource loaded from linked events.
3+
4+
TODO: https://helsinkisolutionoffice.atlassian.net/browse/UHF-11944.
5+
6+
See Drupal\helfi_kasko_content\CrossInstitutionalStudies\Controller\Controller.php
7+
See available variables with: {{ dd(_context) }}
8+
#}
9+
10+
{%
11+
set classes = [
12+
'course-unit',
13+
'course-unit--full'
14+
]
15+
%}
16+
17+
<article{{ attributes.addClass(classes) }}>
18+
19+
{% if event.short_description %}
20+
{% embed "@hdbt/misc/lead-in.twig" with { content: event.short_description } %}{% endembed %}
21+
<div class="page-divider"></div>
22+
{% endif %}
23+
24+
{% block main_content %}
25+
<div class="components">
26+
{% if images %}
27+
{% embed "@hdbt/misc/component.twig" with {
28+
component_classes: [ 'component--course-unit__main-image' ],
29+
} %}
30+
{% block component_content %}
31+
{% include '@hdbt/misc/image-with-caption.twig' with {
32+
figure_class: 'main-image',
33+
image: images[0],
34+
image_caption: {
35+
credit: images[0]["#attributes"]["data-photographer"],
36+
caption_identifier_class: 'image__caption',
37+
},
38+
} %}
39+
{% endblock component_content %}
40+
{% endembed %}
41+
{% endif %}
42+
43+
{% embed "@hdbt/misc/component.twig" with {
44+
component_classes: [ 'component--course-unit' ],
45+
component_title: 'Study unit description' | t({}, { context: 'Cross institutional studies' }),
46+
component_title_level: 'h2',
47+
} %}
48+
{% block component_content %}
49+
{{ description }}
50+
{% endblock component_content %}
51+
{% endembed %}
52+
53+
{% embed "@hdbt/misc/component.twig" with {
54+
component_classes: [ 'component--course-unit', 'component--course-unit__unit-details' ],
55+
component_title: 'Study unit details' | t({}, { context: 'Cross institutional studies' }),
56+
component_title_level: 'h3',
57+
} %}
58+
{% block component_content %}
59+
<div class="course-unit-details__item">
60+
<span>{{ 'Study unit' | t({}, { context: 'Cross institutional studies' }) }}</span>
61+
<span>{{ event.title }}</span>
62+
</div>
63+
64+
{% if event.start_date and event.end_date %}
65+
<div class="course-unit-details__item">
66+
<span>{{ 'Date and time' | t({}, { context: 'Cross institutional studies' }) }}</span>
67+
<span>{{ event.start_date | format_date('short') }} - {{ event.end_date | format_date('short') }}</span>
68+
</div>
69+
{% endif %}
70+
71+
{% if event.keywords is not empty %}
72+
<div class="course-unit-details__item">
73+
<span>{{ 'Mode of teaching' | t({}, { context: 'Cross institutional studies' }) }}</span>
74+
<span>{{ event.keywords | map(keyword => keyword.getlabel()) | join(', ') }}</span>
75+
</div>
76+
{% endif %}
77+
78+
{# Show location if event has location and the type is contact learning. #}
79+
{% if enum('Drupal\\helfi_kasko_content\\CrossInstitutionalStudies\\DTO\\Keyword').ContactLearning in event.keywords and event.location_extra_info %}
80+
<div class="course-unit-details__item">
81+
<span>{{ 'Location' | t({}, { context: 'Cross institutional studies' }) }}</span>
82+
<span>{{ event.location_extra_info }}</span>
83+
</div>
84+
{% endif %}
85+
86+
{% if event.in_language is not empty %}
87+
<div class="course-unit-details__item">
88+
<span>{{ 'Language of instruction' | t({}, { context: 'Cross institutional studies' }) }}</span>
89+
<span>{{ event.in_language | map(language => language.getlabel()) | join(', ') }}</span>
90+
</div>
91+
{% endif %}
92+
93+
{% set link_attributes = {
94+
'data-hds-component': 'button',
95+
} %}
96+
{% set link_title = 'Sign up on Wilma' | t({}, { context: 'Cross institutional studies' }) %}
97+
{# To-do: change to actual link #}
98+
{% set link_url = 'https://example.com' %}
99+
100+
{% if link_url %}
101+
{{ link(link_title, link_url, link_attributes) }}
102+
{% endif %}
103+
{% endblock component_content %}
104+
{% endembed %}
105+
106+
{% if sub_events %}
107+
{% embed "@hdbt/misc/component.twig" with {
108+
component_classes: [ 'component--course-unit' ],
109+
component_title: 'Other options for completing the study unit' | t({}, { context: 'Cross institutional studies' }),
110+
component_title_level: 'h2',
111+
} %}
112+
{% block component_content %}
113+
{{ sub_events }}
114+
{% endblock component_content %}
115+
{% endembed %}
116+
{% endif %}
117+
</div>
118+
{% endblock main_content %}
119+
</article>

0 commit comments

Comments
 (0)