From fca119e12540a450633002d2eb40a351db29e9bb Mon Sep 17 00:00:00 2001 From: Dragos Dumitrescu Date: Fri, 4 Nov 2022 23:04:41 +0200 Subject: [PATCH 01/13] Added twigs for list search and included new teaser view mode --- hdbt.theme | 16 ++++++++ .../module/helfi_tpr/tpr-service.html.twig | 37 ++++++++++++------- .../paragraph--service-list-search.html.twig | 15 ++++++++ 3 files changed, 55 insertions(+), 13 deletions(-) create mode 100644 templates/paragraphs/paragraph--service-list-search.html.twig diff --git a/hdbt.theme b/hdbt.theme index bfc045140..32b3d68bd 100644 --- a/hdbt.theme +++ b/hdbt.theme @@ -811,6 +811,22 @@ function hdbt_preprocess_paragraph(array &$variables) { }, $paragraph->field_service_list_services->getValue())); } + if ($paragraph_type == 'service_list_search') { + $ids = ''; + $service_ids = ''; + if ($paragraph->hasField('field_service_list_services')) { + $ids = implode(',', array_map(function ($service) { + return $service['target_id']; + }, $paragraph->field_service_list_services->getValue())); + } + if ($paragraph->hasField('field_service_list_service_ids')) { + $service_ids = implode(',', array_map(function ($service) { + return $service['value']; + }, $paragraph->field_service_list_service_ids->getValue())); + } + $variables['services_list_views_argument'] = $ids . '|' . $service_ids; + } + // Contact card paragraph. if ( $paragraph_type == 'contact_card' && diff --git a/templates/module/helfi_tpr/tpr-service.html.twig b/templates/module/helfi_tpr/tpr-service.html.twig index 8c0a47804..edbdc35c9 100644 --- a/templates/module/helfi_tpr/tpr-service.html.twig +++ b/templates/module/helfi_tpr/tpr-service.html.twig @@ -7,8 +7,31 @@ */ #} -{% if view_mode != 'teaser' %} +{% if view_mode == 'teaser' %} +
+ +

+ {{ entity.label }} +

+ {% include '@hdbt/misc/icon.twig' ignore missing with {icon: 'arrow-right'} %} + +
+ +{% elseif view_mode == 'teaser_search_result' %} +
+ +

+ {{ entity.label }} +

+
+ {{ content.description }} +
+ {% include '@hdbt/misc/icon.twig' ignore missing with {icon: 'arrow-right'} %} + +
+ +{% else %}
{% embed "@hdbt/misc/lead-in.twig" with { content: content.description_summary } %}{% endembed %} @@ -34,16 +57,4 @@ {% endif %}
- -{% elseif view_mode == 'teaser' %} - -
- -

- {{ entity.label }} -

- {% include '@hdbt/misc/icon.twig' ignore missing with {icon: 'arrow-right'} %} - -
- {% endif %} diff --git a/templates/paragraphs/paragraph--service-list-search.html.twig b/templates/paragraphs/paragraph--service-list-search.html.twig new file mode 100644 index 000000000..548d46f6d --- /dev/null +++ b/templates/paragraphs/paragraph--service-list-search.html.twig @@ -0,0 +1,15 @@ +{% block paragraph %} + {% embed "@hdbt/misc/component.twig" with + { + component_classes: [ 'component--service-list-search' ], + component_title: content.field_service_list_title, + component_description: content.field_service_list_description, + } + %} + + {% block component_content %} + {{ drupal_view('service_list', 'block_1', services_list_views_argument) }} + + {% endblock component_content %} + {% endembed %} +{% endblock paragraph %} From 58112786bbb95e0bfd1fc823b421a4f26ac7a30e Mon Sep 17 00:00:00 2001 From: Dragos Dumitrescu Date: Mon, 7 Nov 2022 13:08:55 +0200 Subject: [PATCH 02/13] Added initial arrow link style for search teaser result card --- src/scss/06_components/pages/_service.scss | 38 ++++++++++++++++++++++ 1 file changed, 38 insertions(+) diff --git a/src/scss/06_components/pages/_service.scss b/src/scss/06_components/pages/_service.scss index 6bf910c2f..c678218d7 100644 --- a/src/scss/06_components/pages/_service.scss +++ b/src/scss/06_components/pages/_service.scss @@ -103,6 +103,44 @@ $teaser-icon-size-desktop: 48px; } } +.service.service--teaser-search-result { + .service__link { + &:hover { + text-decoration: underline; + + .hel-icon { + margin-left: $spacing; + + @media (prefers-reduced-motion) { + margin-left: 0; + } + } + } + } + .hel-icon { + --icon-size: #{$teaser-icon-size-mobile}; + bottom: 50%; + left: auto; + position: absolute; + right: $spacing; + transform: translateY(50%); + transition: all 0.3s; + + @media (prefers-reduced-motion) { + transition: none; + } + + @include breakpoint($breakpoint-l) { + --icon-size: #{ $teaser-icon-size-desktop}; + margin-top: $spacing-and-half; + position: static; + right: auto; + transform: none; + } + } + +} + .service--units__container { margin-bottom: $spacing-quadruple; margin-top: $spacing-quadruple; From ce7b8a1e9a399991921d4dc57608cea8e3458165 Mon Sep 17 00:00:00 2001 From: Dragos Dumitrescu Date: Mon, 7 Nov 2022 15:14:17 +0200 Subject: [PATCH 03/13] Added basic style for cards service list search --- src/scss/06_components/pages/_service.scss | 38 +++++++++++++++++++ .../paragraphs/_service-list.scss | 14 +++++++ .../module/helfi_tpr/tpr-service.html.twig | 14 +++++-- 3 files changed, 63 insertions(+), 3 deletions(-) diff --git a/src/scss/06_components/pages/_service.scss b/src/scss/06_components/pages/_service.scss index c678218d7..0ecffc9dd 100644 --- a/src/scss/06_components/pages/_service.scss +++ b/src/scss/06_components/pages/_service.scss @@ -105,6 +105,44 @@ $teaser-icon-size-desktop: 48px; .service.service--teaser-search-result { .service__link { + background-color: $color-white; + margin-top: $spacing-double; + padding: 0 $spacing-and-half $spacing-double; + position: relative; + width: 100%; + + @include breakpoint($breakpoint-m) { + display: flex; + flex-direction: column; + justify-content: space-between; + margin-top: 0; + padding: $spacing-double; + } + + .service__content { + align-content: flex-start; + + @include breakpoint($breakpoint-m) { + display: flex; + flex-wrap: wrap; + //max-width: 530px; + } + } + .service__read-more { + display: flex; + //margin-top: $spacing-double; + + @include breakpoint($breakpoint-m) { + justify-content: flex-end; + //margin-top: $spacing; + } + + //.hel-icon { + // @include hover-link-arrow-transition(); + // margin-left: $spacing-half; + //} + } + &:hover { text-decoration: underline; diff --git a/src/scss/06_components/paragraphs/_service-list.scss b/src/scss/06_components/paragraphs/_service-list.scss index 90eeb6338..9a60fa0cb 100644 --- a/src/scss/06_components/paragraphs/_service-list.scss +++ b/src/scss/06_components/paragraphs/_service-list.scss @@ -76,3 +76,17 @@ } } } + +.component--service-list-search { + background-color: $color-silver-light; + + .component__container { + padding-bottom: $spacing-double; + padding-top: $spacing-double; + + @include breakpoint($breakpoint-m) { + padding-bottom: $spacing-quadruple; + padding-top: $spacing-quadruple; + } + } +} diff --git a/templates/module/helfi_tpr/tpr-service.html.twig b/templates/module/helfi_tpr/tpr-service.html.twig index edbdc35c9..4fc0c64ff 100644 --- a/templates/module/helfi_tpr/tpr-service.html.twig +++ b/templates/module/helfi_tpr/tpr-service.html.twig @@ -24,10 +24,18 @@

{{ entity.label }}

-
- {{ content.description }} +
+
+ {{ content.description }} +
+
+ {{ content.errand_services }} +
+
+ +
+ {% include '@hdbt/misc/icon.twig' ignore missing with {icon: 'arrow-right'} %}
- {% include '@hdbt/misc/icon.twig' ignore missing with {icon: 'arrow-right'} %}
From 278dfd70caedcf4edbc93b6947cb533d98ec89ff Mon Sep 17 00:00:00 2001 From: Arsene Claudiu Ion Date: Mon, 7 Nov 2022 15:39:27 +0200 Subject: [PATCH 04/13] added tags to service twig --- templates/module/helfi_tpr/tpr-service.html.twig | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/templates/module/helfi_tpr/tpr-service.html.twig b/templates/module/helfi_tpr/tpr-service.html.twig index 4fc0c64ff..3a9eaf142 100644 --- a/templates/module/helfi_tpr/tpr-service.html.twig +++ b/templates/module/helfi_tpr/tpr-service.html.twig @@ -29,7 +29,9 @@ {{ content.description }}
- {{ content.errand_services }} + {% for channel in content.errand_services.unique_channels %} + {{ channel['#name'] }} + {% endfor %}
From be1c80f23596393b3f7f551d2ec8fc870f35adfa Mon Sep 17 00:00:00 2001 From: Arsene Claudiu Ion Date: Mon, 7 Nov 2022 15:50:05 +0200 Subject: [PATCH 05/13] removed unique channels var --- templates/module/helfi_tpr/tpr-service.html.twig | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/templates/module/helfi_tpr/tpr-service.html.twig b/templates/module/helfi_tpr/tpr-service.html.twig index 3a9eaf142..4fc0c64ff 100644 --- a/templates/module/helfi_tpr/tpr-service.html.twig +++ b/templates/module/helfi_tpr/tpr-service.html.twig @@ -29,9 +29,7 @@ {{ content.description }}
- {% for channel in content.errand_services.unique_channels %} - {{ channel['#name'] }} - {% endfor %} + {{ content.errand_services }}
From e083bdaa403a18697c78f780878089ab905241d4 Mon Sep 17 00:00:00 2001 From: Dragos Dumitrescu Date: Wed, 9 Nov 2022 00:29:33 +0200 Subject: [PATCH 06/13] Stles for service search list --- src/scss/06_components/pages/_service.scss | 96 +++++++++++++------ .../paragraphs/_service-list.scss | 17 ++++ .../module/helfi_tpr/tpr-service.html.twig | 12 ++- ...formatted--service-list--block-1.html.twig | 33 +++++++ 4 files changed, 124 insertions(+), 34 deletions(-) create mode 100644 templates/views/views-view-unformatted--service-list--block-1.html.twig diff --git a/src/scss/06_components/pages/_service.scss b/src/scss/06_components/pages/_service.scss index 0ecffc9dd..c74b7fc6d 100644 --- a/src/scss/06_components/pages/_service.scss +++ b/src/scss/06_components/pages/_service.scss @@ -63,8 +63,6 @@ $teaser-icon-size-desktop: 48px; } &:hover { - text-decoration: underline; - .hel-icon { margin-left: $spacing; @@ -109,6 +107,7 @@ $teaser-icon-size-desktop: 48px; margin-top: $spacing-double; padding: 0 $spacing-and-half $spacing-double; position: relative; + text-decoration: none; width: 100%; @include breakpoint($breakpoint-m) { @@ -118,7 +117,18 @@ $teaser-icon-size-desktop: 48px; margin-top: 0; padding: $spacing-double; } + .service__title { + @include font('special.card_title'); + margin-bottom: $spacing-quarter; + margin-top: 0; + padding-right: $spacing-and-half; + @include breakpoint($breakpoint-m) { + margin-bottom: 0; + padding-right: 0; + width: 100%; + } + } .service__content { align-content: flex-start; @@ -127,6 +137,24 @@ $teaser-icon-size-desktop: 48px; flex-wrap: wrap; //max-width: 530px; } + .channels { + ul { + list-style: none; + margin: 0; + padding: 0; + } + li { + background-color: rgb(222, 223, 225); + border-radius: 16px; + display: inline-block; + padding: 8px 6px; + //height: 32px; + //width: 67px; + & + li { + margin-left: 8px; + } + } + } } .service__read-more { display: flex; @@ -137,43 +165,53 @@ $teaser-icon-size-desktop: 48px; //margin-top: $spacing; } + .hel-icon { + --icon-size: #{$teaser-icon-size-mobile}; + //bottom: 50%; + //left: auto; + //position: absolute; + margin-right: $spacing; + transition: all 0.3s; + @media (prefers-reduced-motion) { + transition: none; + } + + @include breakpoint($breakpoint-l) { + --icon-size: #{ $teaser-icon-size-desktop}; + //margin-top: $spacing-and-half; + //position: static; + //right: auto; + //transform: none; + } + } + //.hel-icon { // @include hover-link-arrow-transition(); // margin-left: $spacing-half; //} } - &:hover { - text-decoration: underline; - .hel-icon { - margin-left: $spacing; - @media (prefers-reduced-motion) { - margin-left: 0; - } + &:hover { + text-decoration: none; + .service__title { + text-decoration: underline; } - } - } - .hel-icon { - --icon-size: #{$teaser-icon-size-mobile}; - bottom: 50%; - left: auto; - position: absolute; - right: $spacing; - transform: translateY(50%); - transition: all 0.3s; - @media (prefers-reduced-motion) { - transition: none; - } - - @include breakpoint($breakpoint-l) { - --icon-size: #{ $teaser-icon-size-desktop}; - margin-top: $spacing-and-half; - position: static; - right: auto; - transform: none; + .service__read-more { + .hel-icon { + transform: translateX($spacing); + @media (prefers-reduced-motion) { + transform: none; + } + //margin-left: $spacing; + // + //@media (prefers-reduced-motion) { + // margin-left: 0; + //} + } + } } } diff --git a/src/scss/06_components/paragraphs/_service-list.scss b/src/scss/06_components/paragraphs/_service-list.scss index 9a60fa0cb..4b2d8495f 100644 --- a/src/scss/06_components/paragraphs/_service-list.scss +++ b/src/scss/06_components/paragraphs/_service-list.scss @@ -89,4 +89,21 @@ padding-top: $spacing-quadruple; } } + + .services-search__results { + border-top: 1px solid $color-black-10; + display: block; + margin-top: $spacing-double; + padding-top: $spacing-double; + width: 100%; + + @include breakpoint($breakpoint-m) { + margin-top: $spacing-quadruple; + padding-top: $spacing-quadruple; + } + + > .views-row + .views-row { + margin-top: $spacing; + } + } } diff --git a/templates/module/helfi_tpr/tpr-service.html.twig b/templates/module/helfi_tpr/tpr-service.html.twig index 4fc0c64ff..8b760199d 100644 --- a/templates/module/helfi_tpr/tpr-service.html.twig +++ b/templates/module/helfi_tpr/tpr-service.html.twig @@ -25,11 +25,13 @@ {{ entity.label }}
-
- {{ content.description }} -
-
- {{ content.errand_services }} +
+
+ {{ content.description }} +
+
+ {{ content.errand_services }} +
diff --git a/templates/views/views-view-unformatted--service-list--block-1.html.twig b/templates/views/views-view-unformatted--service-list--block-1.html.twig new file mode 100644 index 000000000..15cd377e2 --- /dev/null +++ b/templates/views/views-view-unformatted--service-list--block-1.html.twig @@ -0,0 +1,33 @@ +{# +/** + * @file + * Theme override to display a view of unformatted rows. + * + * Available variables: + * - title: The title of this group of rows. May be empty. + * - rows: A list of the view's row items. + * - attributes: The row's HTML attributes. + * - content: The row's content. + * - view: The view object. + * - default_row_class: A flag indicating whether default classes should be + * used on rows. + * + * @see template_preprocess_views_view_unformatted() + */ +#} + +
+ {% if title %} +

{{ title }}

+ {% endif %} + {% for row in rows %} + {% + set row_classes = [ + default_row_class ? 'views-row', + ] + %} + + {{- row.content -}} +
+ {% endfor %} +
From 694d6ca081b44ac129ea5bd3151ef076fe4511b8 Mon Sep 17 00:00:00 2001 From: Ovidiu Ardelean <97089768+oviag@users.noreply.github.com> Date: Mon, 14 Nov 2022 18:12:42 +0200 Subject: [PATCH 07/13] Service list search design * updated teaser search result design * added margin-top for tags * adjustments for small screens * fixed design * removed commented code * Several fixes to tpr search result new feature Co-authored-by: Dragos Dumitrescu --- src/scss/06_components/pages/_service.scss | 109 +++++++++--------- .../paragraphs/_service-list.scss | 30 ++--- .../module/helfi_tpr/tpr-service.html.twig | 14 +-- 3 files changed, 71 insertions(+), 82 deletions(-) diff --git a/src/scss/06_components/pages/_service.scss b/src/scss/06_components/pages/_service.scss index c74b7fc6d..7aff6e867 100644 --- a/src/scss/06_components/pages/_service.scss +++ b/src/scss/06_components/pages/_service.scss @@ -102,97 +102,98 @@ $teaser-icon-size-desktop: 48px; } .service.service--teaser-search-result { + background-color: $color-white; + margin-bottom: $spacing; .service__link { - background-color: $color-white; - margin-top: $spacing-double; - padding: 0 $spacing-and-half $spacing-double; + display: flex; + flex-direction: column; + justify-content: space-between; + padding: $spacing-and-half; position: relative; text-decoration: none; width: 100%; @include breakpoint($breakpoint-m) { - display: flex; - flex-direction: column; - justify-content: space-between; - margin-top: 0; padding: $spacing-double; } .service__title { - @include font('special.card_title'); - margin-bottom: $spacing-quarter; + @include font('h4'); + margin-bottom: $spacing; margin-top: 0; - padding-right: $spacing-and-half; @include breakpoint($breakpoint-m) { - margin-bottom: 0; - padding-right: 0; + font-size: $base-font-size + 10; + margin-bottom: $spacing-half; width: 100%; } + @include breakpoint($breakpoint-l) { + margin-bottom: $spacing; + } } .service__content { - align-content: flex-start; + position: relative; + + .short-desc { + font-size: $base-font-size; + font-style: normal; + font-weight: $font-weight-regular; + margin-bottom: $spacing; + padding-right: calc(#{$spacing} + #{$teaser-icon-size-mobile}); + @include breakpoint($breakpoint-m) { + padding-right: calc(#{$spacing} + #{$teaser-icon-size-desktop} + #{$spacing}); + } + p { + margin: 0; + padding: 0; + } + } @include breakpoint($breakpoint-m) { display: flex; flex-wrap: wrap; - //max-width: 530px; } .channels { + padding-right: calc(#{$spacing} + #{$teaser-icon-size-mobile}); + @include breakpoint($breakpoint-m) { + padding-right: calc(#{$spacing} + #{$teaser-icon-size-desktop} + #{$spacing}); + } ul { + display: flex; + flex-wrap: wrap; + gap: $spacing-half; list-style: none; margin: 0; padding: 0; } li { + @include font('special.helper_text'); background-color: rgb(222, 223, 225); - border-radius: 16px; + border-radius: $spacing; display: inline-block; - padding: 8px 6px; - //height: 32px; - //width: 67px; - & + li { - margin-left: 8px; - } + font-weight: $font-weight-medium; + margin: 0; + padding: $spacing-half $gutter; } } } .service__read-more { - display: flex; - //margin-top: $spacing-double; - - @include breakpoint($breakpoint-m) { - justify-content: flex-end; - //margin-top: $spacing; - } - + bottom: 0; + position: absolute; + right: 0; .hel-icon { --icon-size: #{$teaser-icon-size-mobile}; - //bottom: 50%; - //left: auto; - //position: absolute; - margin-right: $spacing; - transition: all 0.3s; + @include breakpoint($breakpoint-m) { + --icon-size: #{$teaser-icon-size-desktop}; + margin-right: $spacing; + margin-top: $spacing-and-half; + transition: all 0.3s; + } @media (prefers-reduced-motion) { transition: none; } - - @include breakpoint($breakpoint-l) { - --icon-size: #{ $teaser-icon-size-desktop}; - //margin-top: $spacing-and-half; - //position: static; - //right: auto; - //transform: none; - } } - - //.hel-icon { - // @include hover-link-arrow-transition(); - // margin-left: $spacing-half; - //} } - - &:hover { text-decoration: none; .service__title { @@ -201,20 +202,16 @@ $teaser-icon-size-desktop: 48px; .service__read-more { .hel-icon { - transform: translateX($spacing); + @include breakpoint($breakpoint-m) { + transform: translateX($spacing); + } @media (prefers-reduced-motion) { transform: none; } - //margin-left: $spacing; - // - //@media (prefers-reduced-motion) { - // margin-left: 0; - //} } } } } - } .service--units__container { diff --git a/src/scss/06_components/paragraphs/_service-list.scss b/src/scss/06_components/paragraphs/_service-list.scss index 4b2d8495f..9bfeace8a 100644 --- a/src/scss/06_components/paragraphs/_service-list.scss +++ b/src/scss/06_components/paragraphs/_service-list.scss @@ -8,6 +8,14 @@ } .views-exposed-form { + + border-bottom: 1px solid $color-black-10; + + padding-bottom: $spacing-triple; + @include breakpoint($breakpoint-l) { + padding-bottom: $spacing-quadruple; + } + @include breakpoint($breakpoint-m) { align-items: flex-end; display: flex; @@ -44,10 +52,11 @@ } .service-list__count-container { - @include font('lead'); display: block; + margin-bottom: $spacing-double; + margin-top: $spacing-triple; + @include font('lead'); width: 100%; - .service-list__count { font-weight: $font-weight-bold; } @@ -89,21 +98,4 @@ padding-top: $spacing-quadruple; } } - - .services-search__results { - border-top: 1px solid $color-black-10; - display: block; - margin-top: $spacing-double; - padding-top: $spacing-double; - width: 100%; - - @include breakpoint($breakpoint-m) { - margin-top: $spacing-quadruple; - padding-top: $spacing-quadruple; - } - - > .views-row + .views-row { - margin-top: $spacing; - } - } } diff --git a/templates/module/helfi_tpr/tpr-service.html.twig b/templates/module/helfi_tpr/tpr-service.html.twig index 8b760199d..2feee474e 100644 --- a/templates/module/helfi_tpr/tpr-service.html.twig +++ b/templates/module/helfi_tpr/tpr-service.html.twig @@ -25,19 +25,19 @@ {{ entity.label }}
-
{{ content.description }}
-
- {{ content.errand_services }} + {% if content.errand_services[0]['#items'] | length > 0 %} +
+ {{ content.errand_services }} +
+ {% endif %} +
+ {% include '@hdbt/misc/icon.twig' ignore missing with {icon: 'arrow-right'} %}
-
-
- {% include '@hdbt/misc/icon.twig' ignore missing with {icon: 'arrow-right'} %} -
From 70a7bf81b5e02220519da7fcb5bcd266347688b9 Mon Sep 17 00:00:00 2001 From: Dragos Dumitrescu Date: Wed, 16 Nov 2022 16:40:23 +0200 Subject: [PATCH 08/13] PLAENH-258 - handle case when tpr search list has 1 page only --- hdbt.theme | 17 ++-- src/scss/06_components/pages/_service.scss | 4 - ...iews-view--service-list--block-1.html.twig | 79 +++++++++++++++++++ 3 files changed, 91 insertions(+), 9 deletions(-) create mode 100644 templates/views/views-view--service-list--block-1.html.twig diff --git a/hdbt.theme b/hdbt.theme index 32b3d68bd..e25697413 100644 --- a/hdbt.theme +++ b/hdbt.theme @@ -1227,11 +1227,14 @@ function _hdbt_craft_token(string $name, array &$variables) { * Implements hook_theme_suggestions_HOOK_alter(). */ function hdbt_theme_suggestions_views_view_alter(array &$suggestions, array $variables) { - if ( - isset($variables['view']) && - !empty($variables['view']->id()) - ) { - $suggestions[] = 'views_view__' . $variables['view']->id(); + if (isset($variables['view'])) { + $view = $variables['view']; + if (!empty($variables['view']->id())) { + $suggestions[] = 'views_view__' . $variables['view']->id(); + } + if (!empty($view->getDisplay()->display['id'])) { + $suggestions[] = 'views_view__' . $variables['view']->id() . '__' . $variables['view']->current_display; + } } } @@ -1281,6 +1284,10 @@ function hdbt_preprocess_views_view(&$variables) { if ($variables['view']->total_rows != NULL) { $variables['total_rows'] = $variables['view']->total_rows; } + if ($variables['view']->id() == 'service_list') { + $variables['is_ajax_request'] = \Drupal::request()->isXmlHttpRequest(); + } +// } /** diff --git a/src/scss/06_components/pages/_service.scss b/src/scss/06_components/pages/_service.scss index 7aff6e867..8ecb4efca 100644 --- a/src/scss/06_components/pages/_service.scss +++ b/src/scss/06_components/pages/_service.scss @@ -148,10 +148,6 @@ $teaser-icon-size-desktop: 48px; } } - @include breakpoint($breakpoint-m) { - display: flex; - flex-wrap: wrap; - } .channels { padding-right: calc(#{$spacing} + #{$teaser-icon-size-mobile}); @include breakpoint($breakpoint-m) { diff --git a/templates/views/views-view--service-list--block-1.html.twig b/templates/views/views-view--service-list--block-1.html.twig new file mode 100644 index 000000000..4cfd52202 --- /dev/null +++ b/templates/views/views-view--service-list--block-1.html.twig @@ -0,0 +1,79 @@ +{# +/** + * @file + * Theme override for main view template. + * + * Available variables: + * - attributes: Remaining HTML attributes for the element. + * - css_name: A css-safe version of the view name. + * - css_class: The user-specified classes names, if any. + * - header: The optional header. + * - footer: The optional footer. + * - rows: The results of the view query, if any. + * - empty: The content to display if there are no rows. + * - pager: The optional pager next/prev links to display. + * - exposed: Exposed widget form/info to display. + * - feed_icons: Optional feed icons to display. + * - more: An optional link to the next page of results. + * - title: Title of the view, only used when displaying in the admin preview. + * - title_prefix: Additional output populated by modules, intended to be + * displayed in front of the view title. + * - title_suffix: Additional output populated by modules, intended to be + * displayed after the view title. + * - attachment_before: An optional attachment view to be displayed before the + * view content. + * - attachment_after: An optional attachment view to be displayed after the + * view content. + * - dom_id: Unique id for every view being printed to give unique class for + * Javascript. + * + * @see template_preprocess_views_view() + */ +#} +{% + set classes = [ + 'views', + 'views--' ~ id|clean_class, + 'views--' ~ display_id|clean_class, + dom_id ? 'js-view-dom-id-' ~ dom_id, + 'unit-search__content' +] +%} + + + {{ title_prefix }} + {{ title }} + {{ title_suffix }} + + {% if header %} +
+ {{ header }} +
+ {% endif %} + + {% if is_ajax_request or total_rows > pager_items_per_page %} + {{ exposed }} + + {{ total_rows ?? 0 }} + {% trans with {'context': 'Service list count'}%}service{% plural total_rows %}services{% endtrans %} + + {% endif %} + + {{ attachment_before }} + + {{ rows }} + + {{ empty }} + {{ pager }} + + {{ attachment_after }} + {{ more }} + + {% if footer %} +
+ {{ footer }} +
+ {% endif %} + + {{ feed_icons }} + From aec21d36d7deebf7ef4d430ad9cd86e3b8ffc0a7 Mon Sep 17 00:00:00 2001 From: Dragos Dumitrescu Date: Thu, 5 Jan 2023 22:16:13 +0200 Subject: [PATCH 09/13] Changes for TPR service search after review --- hdbt.theme | 14 ++- src/scss/06_components/pages/_service.scss | 111 +----------------- .../paragraphs/_service-list.scss | 6 + ...pr-service--teaser-search-result.html.twig | 8 ++ .../module/helfi_tpr/tpr-service.html.twig | 47 ++------ .../paragraph--service-list-search.html.twig | 2 +- ...iew--service-list--block-search.html.twig} | 1 - ...ted--service-list--block-search.html.twig} | 18 +-- 8 files changed, 48 insertions(+), 159 deletions(-) create mode 100644 templates/module/helfi_tpr/tpr-service--teaser-search-result.html.twig rename templates/views/{views-view--service-list--block-1.html.twig => views-view--service-list--block-search.html.twig} (98%) rename templates/views/{views-view-unformatted--service-list--block-1.html.twig => views-view-unformatted--service-list--block-search.html.twig} (65%) diff --git a/hdbt.theme b/hdbt.theme index 936b1e482..2d277e2af 100644 --- a/hdbt.theme +++ b/hdbt.theme @@ -23,6 +23,7 @@ use Drupal\menu_link_content\Plugin\Menu\MenuLinkContent; use Drupal\node\NodeInterface; use Drupal\responsive_image\Entity\ResponsiveImageStyle; use Drupal\views\ViewExecutable; +use Drupal\helfi_tpr\Entity\Service; /** * Implements hook_preprocess(). @@ -1298,7 +1299,6 @@ function hdbt_preprocess_views_view(&$variables) { if ($variables['view']->id() == 'service_list') { $variables['is_ajax_request'] = \Drupal::request()->isXmlHttpRequest(); } -// } /** @@ -1344,6 +1344,18 @@ function hdbt_preprocess_tpr_service_channel(&$variables) { } } +/** + * Implements hook_preprocess_HOOK(). + */ +function hdbt_preprocess_tpr_service(&$variables) { + if (!isset($variables['entity']) || !$variables['entity'] instanceof Service) { + return; + } + $entity = $variables['entity']; + + $variables['service_url'] = !$entity->isNew() ? $entity->toUrl('canonical') : NULL; +} + /** * Implements hook_preprocess_HOOK(). */ diff --git a/src/scss/06_components/pages/_service.scss b/src/scss/06_components/pages/_service.scss index 8ecb4efca..6bf910c2f 100644 --- a/src/scss/06_components/pages/_service.scss +++ b/src/scss/06_components/pages/_service.scss @@ -63,6 +63,8 @@ $teaser-icon-size-desktop: 48px; } &:hover { + text-decoration: underline; + .hel-icon { margin-left: $spacing; @@ -101,115 +103,6 @@ $teaser-icon-size-desktop: 48px; } } -.service.service--teaser-search-result { - background-color: $color-white; - margin-bottom: $spacing; - .service__link { - display: flex; - flex-direction: column; - justify-content: space-between; - padding: $spacing-and-half; - position: relative; - text-decoration: none; - width: 100%; - - @include breakpoint($breakpoint-m) { - padding: $spacing-double; - } - .service__title { - @include font('h4'); - margin-bottom: $spacing; - margin-top: 0; - - @include breakpoint($breakpoint-m) { - font-size: $base-font-size + 10; - margin-bottom: $spacing-half; - width: 100%; - } - @include breakpoint($breakpoint-l) { - margin-bottom: $spacing; - } - } - .service__content { - position: relative; - - .short-desc { - font-size: $base-font-size; - font-style: normal; - font-weight: $font-weight-regular; - margin-bottom: $spacing; - padding-right: calc(#{$spacing} + #{$teaser-icon-size-mobile}); - @include breakpoint($breakpoint-m) { - padding-right: calc(#{$spacing} + #{$teaser-icon-size-desktop} + #{$spacing}); - } - p { - margin: 0; - padding: 0; - } - } - - .channels { - padding-right: calc(#{$spacing} + #{$teaser-icon-size-mobile}); - @include breakpoint($breakpoint-m) { - padding-right: calc(#{$spacing} + #{$teaser-icon-size-desktop} + #{$spacing}); - } - ul { - display: flex; - flex-wrap: wrap; - gap: $spacing-half; - list-style: none; - margin: 0; - padding: 0; - } - li { - @include font('special.helper_text'); - background-color: rgb(222, 223, 225); - border-radius: $spacing; - display: inline-block; - font-weight: $font-weight-medium; - margin: 0; - padding: $spacing-half $gutter; - } - } - } - .service__read-more { - bottom: 0; - position: absolute; - right: 0; - .hel-icon { - --icon-size: #{$teaser-icon-size-mobile}; - @include breakpoint($breakpoint-m) { - --icon-size: #{$teaser-icon-size-desktop}; - margin-right: $spacing; - margin-top: $spacing-and-half; - transition: all 0.3s; - } - @media (prefers-reduced-motion) { - transition: none; - } - } - } - - &:hover { - text-decoration: none; - .service__title { - text-decoration: underline; - } - - .service__read-more { - .hel-icon { - @include breakpoint($breakpoint-m) { - transform: translateX($spacing); - } - @media (prefers-reduced-motion) { - transform: none; - } - } - } - } - } -} - .service--units__container { margin-bottom: $spacing-quadruple; margin-top: $spacing-quadruple; diff --git a/src/scss/06_components/paragraphs/_service-list.scss b/src/scss/06_components/paragraphs/_service-list.scss index 9bfeace8a..4ba892c73 100644 --- a/src/scss/06_components/paragraphs/_service-list.scss +++ b/src/scss/06_components/paragraphs/_service-list.scss @@ -84,6 +84,12 @@ } } } + + .services-search__results { + > .views-row + .views-row { + margin-top: $spacing; + } + } } .component--service-list-search { diff --git a/templates/module/helfi_tpr/tpr-service--teaser-search-result.html.twig b/templates/module/helfi_tpr/tpr-service--teaser-search-result.html.twig new file mode 100644 index 000000000..133a18f4f --- /dev/null +++ b/templates/module/helfi_tpr/tpr-service--teaser-search-result.html.twig @@ -0,0 +1,8 @@ +{% embed '@hdbt/component/card.twig' with { + card_modifier_class: 'card--tpr-service-teaser', + card_title: entity.label, + card_url: service_url, + card_description: content.description, + card_tags: content.errand_services[0]['#items'], +} %} +{% endembed %} diff --git a/templates/module/helfi_tpr/tpr-service.html.twig b/templates/module/helfi_tpr/tpr-service.html.twig index 2feee474e..8c0a47804 100644 --- a/templates/module/helfi_tpr/tpr-service.html.twig +++ b/templates/module/helfi_tpr/tpr-service.html.twig @@ -7,41 +7,8 @@ */ #} -{% if view_mode == 'teaser' %} +{% if view_mode != 'teaser' %} -
- -

- {{ entity.label }} -

- {% include '@hdbt/misc/icon.twig' ignore missing with {icon: 'arrow-right'} %} - -
- -{% elseif view_mode == 'teaser_search_result' %} -
- -

- {{ entity.label }} -

-
-
- {{ content.description }} -
- {% if content.errand_services[0]['#items'] | length > 0 %} -
- {{ content.errand_services }} -
- {% endif %} -
- {% include '@hdbt/misc/icon.twig' ignore missing with {icon: 'arrow-right'} %} -
-
- - -
- -{% else %}
{% embed "@hdbt/misc/lead-in.twig" with { content: content.description_summary } %}{% endembed %} @@ -67,4 +34,16 @@ {% endif %}
+ +{% elseif view_mode == 'teaser' %} + +
+ +

+ {{ entity.label }} +

+ {% include '@hdbt/misc/icon.twig' ignore missing with {icon: 'arrow-right'} %} + +
+ {% endif %} diff --git a/templates/paragraphs/paragraph--service-list-search.html.twig b/templates/paragraphs/paragraph--service-list-search.html.twig index 548d46f6d..6a06ca7b0 100644 --- a/templates/paragraphs/paragraph--service-list-search.html.twig +++ b/templates/paragraphs/paragraph--service-list-search.html.twig @@ -8,7 +8,7 @@ %} {% block component_content %} - {{ drupal_view('service_list', 'block_1', services_list_views_argument) }} + {{ drupal_view('service_list', 'block_search', services_list_views_argument) }} {% endblock component_content %} {% endembed %} diff --git a/templates/views/views-view--service-list--block-1.html.twig b/templates/views/views-view--service-list--block-search.html.twig similarity index 98% rename from templates/views/views-view--service-list--block-1.html.twig rename to templates/views/views-view--service-list--block-search.html.twig index 4cfd52202..13ea0c80e 100644 --- a/templates/views/views-view--service-list--block-1.html.twig +++ b/templates/views/views-view--service-list--block-search.html.twig @@ -36,7 +36,6 @@ 'views--' ~ id|clean_class, 'views--' ~ display_id|clean_class, dom_id ? 'js-view-dom-id-' ~ dom_id, - 'unit-search__content' ] %} diff --git a/templates/views/views-view-unformatted--service-list--block-1.html.twig b/templates/views/views-view-unformatted--service-list--block-search.html.twig similarity index 65% rename from templates/views/views-view-unformatted--service-list--block-1.html.twig rename to templates/views/views-view-unformatted--service-list--block-search.html.twig index 15cd377e2..e679cd671 100644 --- a/templates/views/views-view-unformatted--service-list--block-1.html.twig +++ b/templates/views/views-view-unformatted--service-list--block-search.html.twig @@ -17,17 +17,9 @@ #}
- {% if title %} -

{{ title }}

- {% endif %} - {% for row in rows %} - {% - set row_classes = [ - default_row_class ? 'views-row', - ] - %} - - {{- row.content -}} -
- {% endfor %} +{% for row in rows %} +
+ {{- row.content -}} +
+{% endfor %} From 3a9147337684837a8ac78531e576c4dfb377083c Mon Sep 17 00:00:00 2001 From: Dragos Dumitrescu Date: Mon, 9 Jan 2023 14:16:20 +0200 Subject: [PATCH 10/13] Refactored existing service list view to pass stylelint and comments from PR #494 --- src/scss/06_components/pages/_service.scss | 111 +++++++++--------- .../paragraphs/_service-list.scss | 77 ++++++------ ...view--service-list--block-search.html.twig | 4 +- ...views-view--service-list--block.html.twig} | 6 +- 4 files changed, 98 insertions(+), 100 deletions(-) rename templates/views/{views-view--service-list.html.twig => views-view--service-list--block.html.twig} (95%) diff --git a/src/scss/06_components/pages/_service.scss b/src/scss/06_components/pages/_service.scss index 6bf910c2f..7bad1cb63 100644 --- a/src/scss/06_components/pages/_service.scss +++ b/src/scss/06_components/pages/_service.scss @@ -24,85 +24,80 @@ $teaser-icon-size-desktop: 48px; margin-right: calc(#{$spacing-and-half} / 2); } - .service__link { - border: 1px solid $color-black; - display: block; - height: 100%; - margin-top: $spacing-half; - padding: $spacing-and-half calc(#{$spacing-and-half} + #{$teaser-icon-size-mobile} + #{$spacing}) $spacing-and-half $spacing-and-half; - position: relative; - text-decoration: none; - - @include breakpoint($breakpoint-l) { - display: flex; - flex-direction: column; - justify-content: space-between; - line-height: 0; // Remove extra space under the arrow icon on larger card - margin-top: 0; - min-height: 240px; // As in designs - padding: $spacing-double $spacing-and-half calc(#{$spacing-and-half} + #{$spacing-and-half}); - } - - &::before { - background-color: $color-gold; - content: ''; - display: block; - height: 100%; - left: 0; - position: absolute; - top: 0; - width: $spacing-half; - - @include breakpoint($breakpoint-l) { - bottom: 0; - height: $spacing-and-half; - right: 0; - top: auto; - width: 100%; - } - } - - &:hover { - text-decoration: underline; - - .hel-icon { - margin-left: $spacing; - - @media (prefers-reduced-motion) { - margin-left: 0; - } - } - } - } - .service__title { @include font('h4'); margin: 0; } .hel-icon { - --icon-size: #{$teaser-icon-size-mobile}; bottom: 50%; left: auto; position: absolute; right: $spacing; - transform: translateY(50%); - transition: all 0.3s; - @media (prefers-reduced-motion) { - transition: none; - } + @include pseudo-icon('arrow-right'); + @include hover-link-arrow-transition; @include breakpoint($breakpoint-l) { --icon-size: #{ $teaser-icon-size-desktop}; margin-top: $spacing-and-half; position: static; - right: auto; transform: none; } } } +.service__link { + border: 1px solid $color-black; + display: block; + height: 100%; + margin-top: $spacing-half; + padding: $spacing-and-half calc(#{$spacing-and-half} + #{$teaser-icon-size-mobile} + #{$spacing}) $spacing-and-half $spacing-and-half; + position: relative; + text-decoration: none; + + @include breakpoint($breakpoint-l) { + display: flex; + flex-direction: column; + justify-content: space-between; + line-height: 0; // Remove extra space under the arrow icon on larger card + margin-top: 0; + min-height: 240px; // As in designs + padding: $spacing-double $spacing-and-half calc(#{$spacing-and-half} + #{$spacing-and-half}); + } + + &::before { + background-color: $color-gold; + content: ''; + display: block; + height: 100%; + left: 0; + position: absolute; + top: 0; + width: $spacing-half; + + @include breakpoint($breakpoint-l) { + bottom: 0; + height: $spacing-and-half; + right: 0; + top: auto; + width: 100%; + } + } + + &:hover { + text-decoration: underline; + + .hel-icon { + transform: translateX($spacing-quarter); + + @media (prefers-reduced-motion) { + transform: none; + } + } + } +} + .service--units__container { margin-bottom: $spacing-quadruple; margin-top: $spacing-quadruple; diff --git a/src/scss/06_components/paragraphs/_service-list.scss b/src/scss/06_components/paragraphs/_service-list.scss index 4ba892c73..ac368c224 100644 --- a/src/scss/06_components/paragraphs/_service-list.scss +++ b/src/scss/06_components/paragraphs/_service-list.scss @@ -8,10 +8,9 @@ } .views-exposed-form { - border-bottom: 1px solid $color-black-10; - padding-bottom: $spacing-triple; + @include breakpoint($breakpoint-l) { padding-bottom: $spacing-quadruple; } @@ -20,34 +19,34 @@ align-items: flex-end; display: flex; } + } + + .form-item { + @include breakpoint($breakpoint-m) { + margin-bottom: 0; + width: 70%; + } + } - .form-item { - @include breakpoint($breakpoint-m) { - margin-bottom: 0; - width: 70%; - } + .hds-text-input__input-wrapper { + &::after { + @include pseudo-icon('search', 20px, $color-black, block); + position: absolute; + right: $spacing; + top: 50%; + transform: translateY(-50%); } - .hds-text-input__input-wrapper { - &::after { - @include pseudo-icon('search', 20px, $color-black, block); - position: absolute; - right: $spacing; - top: 50%; - transform: translateY(-50%); - } - - .hds-text-input__input { - border-radius: 0; - padding-right: $spacing-triple; - } + .hds-text-input__input { + border-radius: 0; + padding-right: $spacing-triple; } + } - .form-actions { - @include breakpoint($breakpoint-m) { - display: flex; - width: 30%; - } + .form-actions { + @include breakpoint($breakpoint-m) { + display: flex; + width: 30%; } } @@ -55,8 +54,10 @@ display: block; margin-bottom: $spacing-double; margin-top: $spacing-triple; + @include font('lead'); width: 100%; + .service-list__count { font-weight: $font-weight-bold; } @@ -72,19 +73,10 @@ margin-right: calc(-#{$spacing-and-half} / 2); margin-top: $spacing-triple; } - - .views-row { - @include breakpoint($breakpoint-l) { - margin-top: $spacing-and-half; - width: 25%; - } - - &:nth-child(-n+4) { - margin-top: 0; - } - } } +} +.views--service-list--block-search { .services-search__results { > .views-row + .views-row { margin-top: $spacing; @@ -92,6 +84,19 @@ } } +.views--service-list--block { + .views-row { + @include breakpoint($breakpoint-l) { + margin-top: $spacing-and-half; + width: 25%; + } + + &:nth-child(-n+4) { + margin-top: 0; + } + } +} + .component--service-list-search { background-color: $color-silver-light; diff --git a/templates/views/views-view--service-list--block-search.html.twig b/templates/views/views-view--service-list--block-search.html.twig index 13ea0c80e..9a2ca9cb4 100644 --- a/templates/views/views-view--service-list--block-search.html.twig +++ b/templates/views/views-view--service-list--block-search.html.twig @@ -33,8 +33,8 @@ {% set classes = [ 'views', - 'views--' ~ id|clean_class, - 'views--' ~ display_id|clean_class, + 'views--service-list', + 'views--service-list--block-search', dom_id ? 'js-view-dom-id-' ~ dom_id, ] %} diff --git a/templates/views/views-view--service-list.html.twig b/templates/views/views-view--service-list--block.html.twig similarity index 95% rename from templates/views/views-view--service-list.html.twig rename to templates/views/views-view--service-list--block.html.twig index 13635ea20..9e34ec8af 100644 --- a/templates/views/views-view--service-list.html.twig +++ b/templates/views/views-view--service-list--block.html.twig @@ -32,11 +32,9 @@ #} {% set classes = [ - 'views', - 'views--' ~ id|clean_class, - 'views--' ~ display_id|clean_class, + 'views--service-list', + 'views--service-list--block', dom_id ? 'js-view-dom-id-' ~ dom_id, - 'unit-search__content' ] %} From 1dd0c9aa61bb0cf1f866aed131b6d94451505e18 Mon Sep 17 00:00:00 2001 From: ovidiu Date: Tue, 7 Feb 2023 13:26:07 +0200 Subject: [PATCH 11/13] modify icon translation and fix for mobile --- src/scss/06_components/pages/_service.scss | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/scss/06_components/pages/_service.scss b/src/scss/06_components/pages/_service.scss index 7bad1cb63..623c0048a 100644 --- a/src/scss/06_components/pages/_service.scss +++ b/src/scss/06_components/pages/_service.scss @@ -30,13 +30,19 @@ $teaser-icon-size-desktop: 48px; } .hel-icon { + --icon-size: #{$teaser-icon-size-mobile}; bottom: 50%; left: auto; position: absolute; right: $spacing; + transform: translateY(50%); + transition: all 0.3s; + + @media (prefers-reduced-motion) { + transition: none; + } @include pseudo-icon('arrow-right'); - @include hover-link-arrow-transition; @include breakpoint($breakpoint-l) { --icon-size: #{ $teaser-icon-size-desktop}; @@ -89,10 +95,9 @@ $teaser-icon-size-desktop: 48px; text-decoration: underline; .hel-icon { - transform: translateX($spacing-quarter); - + margin-left: $spacing; @media (prefers-reduced-motion) { - transform: none; + margin-left: 0; } } } From 7e2de81ceb0a37177ce55c3a95994bc5072afa53 Mon Sep 17 00:00:00 2001 From: ovidiu Date: Tue, 7 Feb 2023 13:27:24 +0200 Subject: [PATCH 12/13] added use statement --- hdbt.theme | 1 + 1 file changed, 1 insertion(+) diff --git a/hdbt.theme b/hdbt.theme index 2d277e2af..657910648 100644 --- a/hdbt.theme +++ b/hdbt.theme @@ -23,6 +23,7 @@ use Drupal\menu_link_content\Plugin\Menu\MenuLinkContent; use Drupal\node\NodeInterface; use Drupal\responsive_image\Entity\ResponsiveImageStyle; use Drupal\views\ViewExecutable; +use Drupal\helfi_react_search\LinkedEvents; use Drupal\helfi_tpr\Entity\Service; /** From 4c3c6cfb941d9131cc352591b9d8fb0e8ef5e7dc Mon Sep 17 00:00:00 2001 From: ovidiu Date: Tue, 7 Feb 2023 16:05:05 +0200 Subject: [PATCH 13/13] fixed arrow motion to use transition transform instead of transition all --- src/scss/06_components/pages/_service.scss | 21 +++++++++++++-------- 1 file changed, 13 insertions(+), 8 deletions(-) diff --git a/src/scss/06_components/pages/_service.scss b/src/scss/06_components/pages/_service.scss index 623c0048a..2ffc64b47 100644 --- a/src/scss/06_components/pages/_service.scss +++ b/src/scss/06_components/pages/_service.scss @@ -36,7 +36,6 @@ $teaser-icon-size-desktop: 48px; position: absolute; right: $spacing; transform: translateY(50%); - transition: all 0.3s; @media (prefers-reduced-motion) { transition: none; @@ -49,6 +48,7 @@ $teaser-icon-size-desktop: 48px; margin-top: $spacing-and-half; position: static; transform: none; + transition: transform 0.3s linear; } } } @@ -90,15 +90,20 @@ $teaser-icon-size-desktop: 48px; width: 100%; } } +} + +.service__link:hover { + text-decoration: underline; +} - &:hover { - text-decoration: underline; +.service__link:hover .hel-icon { + text-decoration: underline; - .hel-icon { - margin-left: $spacing; - @media (prefers-reduced-motion) { - margin-left: 0; - } + @include breakpoint($breakpoint-l) { + transform: translateX($spacing); + + @media (prefers-reduced-motion) { + transform: none; } } }