From 3955cd5cb466923e4cd55d557ab806278514e10e Mon Sep 17 00:00:00 2001 From: Pieter Frenssen Date: Wed, 20 Oct 2021 16:18:50 +0300 Subject: [PATCH 01/10] ISAICP-6763: Remove the 'Discover topics' section. --- ...ock.views_block__discover_topics_block.yml | 30 --- ...ntity_subqueue.discover_topics.default.yml | 34 --- ...tityqueue.entity_queue.discover_topics.yml | 25 --- config/sync/tour.tour.joinup_homepage.yml | 8 - config/sync/user.role.moderator.yml | 1 - .../views.view.curated_content_listings.yml | 1 - config/sync/views.view.discover_topics.yml | 194 ------------------ tests/behat.yml.dist | 1 - tests/features/homepage.feature | 59 ------ .../curated_content_listings.feature | 5 +- .../joinup_front_page.module | 18 -- web/themes/ventuno/README.md | 2 +- .../components/_discover-topics-block.scss | 127 ------------ web/themes/ventuno/src/scss/homepage.scss | 1 - 14 files changed, 3 insertions(+), 503 deletions(-) delete mode 100644 config/sync/block.block.views_block__discover_topics_block.yml delete mode 100644 config/sync/core.entity_view_display.entity_subqueue.discover_topics.default.yml delete mode 100644 config/sync/entityqueue.entity_queue.discover_topics.yml delete mode 100644 config/sync/views.view.discover_topics.yml delete mode 100644 web/themes/ventuno/src/scss/components/_discover-topics-block.scss diff --git a/config/sync/block.block.views_block__discover_topics_block.yml b/config/sync/block.block.views_block__discover_topics_block.yml deleted file mode 100644 index 3b6f496528..0000000000 --- a/config/sync/block.block.views_block__discover_topics_block.yml +++ /dev/null @@ -1,30 +0,0 @@ -uuid: 1dce27fe-78bf-4332-8113-5c37204cb1db -langcode: en -status: true -dependencies: - config: - - views.view.discover_topics - module: - - system - - views - theme: - - ventuno -id: views_block__discover_topics_block -theme: ventuno -region: featured -weight: -24 -provider: null -plugin: 'views_block:discover_topics-block' -settings: - id: 'views_block:discover_topics-block' - label: '' - provider: views - label_display: visible - views_label: '' - items_per_page: none -visibility: - request_path: - id: request_path - pages: '' - negate: false - context_mapping: { } diff --git a/config/sync/core.entity_view_display.entity_subqueue.discover_topics.default.yml b/config/sync/core.entity_view_display.entity_subqueue.discover_topics.default.yml deleted file mode 100644 index e59f35de04..0000000000 --- a/config/sync/core.entity_view_display.entity_subqueue.discover_topics.default.yml +++ /dev/null @@ -1,34 +0,0 @@ -uuid: 8f976025-309a-4980-bd69-03d8e372c521 -langcode: en -status: true -dependencies: - config: - - entityqueue.entity_queue.discover_topics - module: - - field_delimiter - - field_formatter_range - - template_suggestion -id: entity_subqueue.discover_topics.default -targetEntityType: entity_subqueue -bundle: discover_topics -mode: default -content: - items: - label: hidden - type: entity_reference_label - weight: 0 - region: content - settings: - link: true - third_party_settings: - field_delimiter: - delimiter: '' - field_formatter_range: - limit: 0 - offset: 0 - order: 0 - template_suggestion: - template_suggestion: '' -hidden: - langcode: true - title: true diff --git a/config/sync/entityqueue.entity_queue.discover_topics.yml b/config/sync/entityqueue.entity_queue.discover_topics.yml deleted file mode 100644 index e828670c88..0000000000 --- a/config/sync/entityqueue.entity_queue.discover_topics.yml +++ /dev/null @@ -1,25 +0,0 @@ -uuid: 5646860a-d57a-489c-8b89-d32fe718dfec -langcode: en -status: true -dependencies: - module: - - taxonomy -id: discover_topics -label: 'Discover topics' -handler: simple -handler_configuration: { } -entity_settings: - target_type: taxonomy_term - handler: 'default:taxonomy_term' - handler_settings: - target_bundles: - topic: topic - sort: - field: _none - auto_create: false - auto_create_bundle: '' -queue_settings: - min_size: 1 - max_size: 10 - act_as_queue: false - reverse: false diff --git a/config/sync/tour.tour.joinup_homepage.yml b/config/sync/tour.tour.joinup_homepage.yml index 39d734a29a..03cf9cc738 100644 --- a/config/sync/tour.tour.joinup_homepage.yml +++ b/config/sync/tour.tour.joinup_homepage.yml @@ -25,14 +25,6 @@ tips: location: left attributes: data-class: search-bar - discover_topics: - id: discover_topics - plugin: text - body: 'Or, select a topic to view relevant content items.' - weight: 3 - location: right - attributes: - data-class: view-discover-topics spotlight: id: spotlight plugin: text diff --git a/config/sync/user.role.moderator.yml b/config/sync/user.role.moderator.yml index c1fbd7b97c..d63e0516ec 100644 --- a/config/sync/user.role.moderator.yml +++ b/config/sync/user.role.moderator.yml @@ -231,7 +231,6 @@ permissions: - 'unfeature entity' - 'update any simple_block block content' - 'update collection_settings meta-entity' - - 'update discover_topics entityqueue' - 'update highlighted_event entityqueue' - 'update highlighted_solution entityqueue' - 'update paragraph content iframe' diff --git a/config/sync/views.view.curated_content_listings.yml b/config/sync/views.view.curated_content_listings.yml index 8da28174ca..635f3b37c5 100644 --- a/config/sync/views.view.curated_content_listings.yml +++ b/config/sync/views.view.curated_content_listings.yml @@ -23,7 +23,6 @@ display: type: views_multiple_permissions options: permissions: - - 'update discover_topics entityqueue' - 'update highlighted_event entityqueue' - 'update highlighted_solution entityqueue' - 'update spotlight entityqueue' diff --git a/config/sync/views.view.discover_topics.yml b/config/sync/views.view.discover_topics.yml deleted file mode 100644 index ffaadb0810..0000000000 --- a/config/sync/views.view.discover_topics.yml +++ /dev/null @@ -1,194 +0,0 @@ -uuid: 37dffbcd-38e1-4fcf-8802-8ad3041f81d3 -langcode: en -status: true -dependencies: - config: - - entityqueue.entity_queue.discover_topics - module: - - entityqueue -id: discover_topics -label: 'Discover topics' -module: views -description: '' -tag: '' -base_table: entity_subqueue_field_data -base_field: name -display: - default: - display_plugin: default - id: default - display_title: Master - position: 0 - display_options: - access: - type: none - options: { } - cache: - type: tag - options: { } - query: - type: views_query - options: - disable_sql_rewrite: false - distinct: false - replica: false - query_comment: '' - query_tags: { } - exposed_form: - type: basic - options: - submit_button: Apply - reset_button: false - reset_button_label: Reset - exposed_sorts_label: 'Sort by' - expose_sort_order: true - sort_asc_label: Asc - sort_desc_label: Desc - pager: - type: none - options: - offset: 0 - style: - type: default - options: - grouping: { } - row_class: '' - default_row_class: true - uses_fields: false - row: - type: 'entity:entity_subqueue' - options: - relationship: none - view_mode: default - fields: - title: - table: entity_subqueue_field_data - field: title - id: title - entity_type: null - entity_field: title - plugin_id: field - relationship: none - group_type: group - admin_label: '' - label: '' - exclude: false - alter: - alter_text: false - text: '' - make_link: false - path: '' - absolute: false - external: false - replace_spaces: false - path_case: none - trim_whitespace: false - alt: '' - rel: '' - link_class: '' - prefix: '' - suffix: '' - target: '' - nl2br: false - max_length: 0 - word_boundary: true - ellipsis: true - more_link: false - more_link_text: '' - more_link_path: '' - strip_tags: false - trim: false - preserve_tags: '' - html: false - element_type: '' - element_class: '' - element_label_type: '' - element_label_class: '' - element_label_colon: true - element_wrapper_type: '' - element_wrapper_class: '' - element_default_classes: true - empty: '' - hide_empty: false - empty_zero: false - hide_alter_empty: true - click_sort_column: value - type: string - settings: { } - group_column: value - group_columns: { } - group_rows: true - delta_limit: 0 - delta_offset: 0 - delta_reversed: false - delta_first_last: false - multi_type: separator - separator: ', ' - field_api_classes: false - filters: - status: - value: '1' - table: entity_subqueue_field_data - field: status - plugin_id: boolean - entity_type: entity_subqueue - entity_field: status - id: status - expose: - operator: '' - operator_limit_selection: false - operator_list: { } - group: 1 - queue: - id: queue - table: entity_subqueue_field_data - field: queue - value: - discover_topics: discover_topics - entity_type: entity_subqueue - entity_field: queue - plugin_id: bundle - expose: - operator_limit_selection: false - operator_list: { } - sorts: { } - header: { } - footer: - area: - id: area - table: views - field: area - relationship: none - group_type: group - admin_label: '' - empty: false - tokenize: false - content: - value: 'See more topics' - format: full_html - plugin_id: text - empty: { } - relationships: { } - arguments: { } - display_extenders: { } - title: 'Discover topics' - use_ajax: false - cache_metadata: - max-age: -1 - contexts: - - 'languages:language_content' - - 'languages:language_interface' - tags: { } - block: - display_plugin: block - id: block - display_title: Block - position: 1 - display_options: - display_extenders: { } - cache_metadata: - max-age: -1 - contexts: - - 'languages:language_content' - - 'languages:language_interface' - tags: { } diff --git a/tests/behat.yml.dist b/tests/behat.yml.dist index edaab95926..8dcf0029fe 100644 --- a/tests/behat.yml.dist +++ b/tests/behat.yml.dist @@ -104,7 +104,6 @@ default: Contact information inline form: '#edit-field-ar-contact-information-wrapper' Content: '.section--content-middle, main .layout-content' Cookie consent banner: '#cookie-consent-banner' - Discover topics block: '.block-views-blockdiscover-topics-block' Entity actions: '.block-joinup-local-tasks-block' Explore block: '.block-joinup-front-page-explore-block' Featured: '.region-featured' diff --git a/tests/features/homepage.feature b/tests/features/homepage.feature index a489c49ee2..e04b84abe2 100644 --- a/tests/features/homepage.feature +++ b/tests/features/homepage.feature @@ -180,65 +180,6 @@ Feature: Homepage Then I should be on the search page And I should see the "RNA vaccines" tile - # Todo: This test is disabled because of a persisting failure on CPHP which - # cannot be replicated locally. To be enabled again once we have moved to - # the new infrastructure. - # See https://citnet.tech.ec.europa.eu/CITnet/jira/browse/ISAICP-6656 - @terms @javascript @wip - Scenario Outline: Discover topics block shows a list of topics. - Given collection: - | title | Clash of vania's | - | state | validated | - And news content: - | title | headline | collection | topic | state | publication date | body | - | Some title | Some headline | Clash of vania's | E-justice | validated | 2021-04-26T19:09:00Z | Body | - | Internet medicine | It cures virtually everything | Clash of vania's | E-health Dpt. | validated | 2014-02-22T19:26:57Z | Electronic healthcare | - And the "Discover topics" content listing contains: - | type | label | - | topic | Employment and Support Allowance | - | topic | E-justice | - When I - And I am on the homepage - Then I should see the link "Employment and Support Allowance" in the "Discover topics block" - And I should see the link "E-justice" in the "Discover topics block" - When I click "E-justice" - Then I should be on the advanced search page - And the option with text "E-justice" from select facet "topic" is selected - - # See more topics modal. - When I am on the homepage - Then I should see the link "See more topics" in the "Discover topics block" - And I should not see the text "Topic categories" - And I should not see the following links in the "Discover topics block": - | Economy and Welfare | - | eGov | - | E-health Dpt. | - | HR Dpt. | - | Info | - | Law and Justice | - | Social and Political | - - When I click "See more topics" in the "Discover topics block" - Then a modal should open - And I should see the text "Topic categories" - And I should see the following links: - | Economy and Welfare | - | eGov | - | E-health Dpt. | - | HR Dpt. | - | Info | - | Law and Justice | - | Social and Political | - When I click "E-health Dpt." in the "Modal content" - Then I should be on the advanced search page - And the option with text "E-health Dpt." from select facet "topic" is selected - And the page should show the tiles "Internet medicine" - - Examples: - | logged in | - | am not logged in | - | am logged in as a user with the authenticated role | - @terms Scenario: Explore block shows a selection of news, events, collections and solutions Given users: diff --git a/tests/features/moderator/curated_content_listings.feature b/tests/features/moderator/curated_content_listings.feature index 15fdf64faf..75b3788a7f 100644 --- a/tests/features/moderator/curated_content_listings.feature +++ b/tests/features/moderator/curated_content_listings.feature @@ -10,12 +10,11 @@ Feature: Curated content listings And I click "Curated content listings" Then I should see the heading "Curated content listings" And I should see the following links: - | Discover topics | | Highlighted event | | Highlighted solution | | In the spotlight | - When I click "Discover topics" - Then I should see the heading "Update curated content listing Discover topics" + When I click "In the spotlight" + Then I should see the heading "Update curated content listing In the spotlight" And I should see the button "Add item" And I should see the button "Save" And I should see the button "Reverse" diff --git a/web/modules/custom/joinup_front_page/joinup_front_page.module b/web/modules/custom/joinup_front_page/joinup_front_page.module index 12b0107d66..83019f2c2c 100644 --- a/web/modules/custom/joinup_front_page/joinup_front_page.module +++ b/web/modules/custom/joinup_front_page/joinup_front_page.module @@ -7,24 +7,6 @@ declare(strict_types = 1); -/** - * Implements hook_preprocess_HOOK(). - * - * The 'Discover topics' block which is shown on the front page is created using - * the Views module. The block includes a 'See more topics' link which opens a - * modal dialog with the full list of available topics. Include the necessary JS - * so that all users can interact with the modal. - */ -function joinup_front_page_preprocess_block(&$variables): void { - if (!isset($variables['derivative_plugin_id']) || $variables['derivative_plugin_id'] !== 'discover_topics-block') { - return; - } - - // Load the library. - $variables['#attached']['library'][] = 'core/jquery'; - $variables['#attached']['library'][] = 'core/drupal.dialog.ajax'; -} - /** * Implements hook_theme(). */ diff --git a/web/themes/ventuno/README.md b/web/themes/ventuno/README.md index d4fbaefffa..517402b276 100755 --- a/web/themes/ventuno/README.md +++ b/web/themes/ventuno/README.md @@ -130,7 +130,7 @@ being created: ```gherkin ... -And the "Discover topics" content listing contains: +And the "Highlighted content" content listing contains: | type | label | | topic | Employment and Support Allowance | | topic | E-justice | diff --git a/web/themes/ventuno/src/scss/components/_discover-topics-block.scss b/web/themes/ventuno/src/scss/components/_discover-topics-block.scss deleted file mode 100644 index 404382c7f9..0000000000 --- a/web/themes/ventuno/src/scss/components/_discover-topics-block.scss +++ /dev/null @@ -1,127 +0,0 @@ -.block-views-blockdiscover-topics-block { - @extend .col-lg; - > h2 { - font-size: $font-size-sm; - font-weight: $display-font-weight; - color: $gray-500; - text-transform: uppercase; - text-align: center; - @include media-breakpoint-up(lg) { - margin-top: calc(2.75rem + (1.375rem + 1.5vw)*2); // Super custom spacing to align badges with search bar - text-align: left; - } - @include media-breakpoint-up(xl) { - margin-top: calc(2.75rem + 2.5rem*2); // Super custom spacing to align badges with search bar - } - } - .view-discover-topics { - .discover-topics__items { - display: flex; - flex-wrap: wrap; - justify-content: center; - - // On mobile, limit the topics shown to occupy max 3 lines: #ISAICP-6701. - @include media-breakpoint-down(md) { - max-height: 8.4rem; - overflow: hidden; - padding: 0.1rem 0; - margin-bottom: .4rem; - } - @include media-breakpoint-up(lg) { - justify-content: flex-start; - } - .field__item { - a { - display: inline-block; - border: 1px solid $gray-300; - padding: $btn-padding-y $btn-padding-x; - background-color: $white; - color: $gray-400; - border-radius: $btn-border-radius; - margin: 0 .5rem .5rem 0; - &:hover { - text-decoration: none; - } - } - } - } - .view-footer { - text-align: center; - @include media-breakpoint-up(lg) { - text-align: left; - } - a { - display: inline-block; - padding: $btn-padding-y $btn-padding-x; - background-color: $secondary; - color: $brand; - border-radius: $btn-border-radius; - margin: 0 .5rem .5rem 0; - &:hover { - text-decoration: none; - } - } - } - } -} - -.ui-widget-overlay { - background-color: $primary; - opacity: .2; -} -.ui-dialog { - &.ui-widget-content { - border: none; - border-radius: $btn-border-radius; - @extend .pb-2; - } - .ui-widget-header { - background: none; - border: none; - @extend .px-3; - @extend .mt-2; - .ui-dialog-title { - @extend .h4; - text-transform: uppercase; - line-height: 1.4; - } - .ui-dialog-titlebar-close { - @include font-icon-before("\E806", 2rem, $gray-400); - padding: 0; - border: none; - background: no-repeat; - position: static; - float: right; - margin: 0; - } - } - .ui-dialog-content { - overflow-y: scroll; - max-height: 70vh !important; - .views-field-name { - @extend .mb-1; - a { - color: $brand; - } - } - } - @include media-breakpoint-up(md) { - min-width: 740px; - .view-topic-parent-list { - .view-content { - display: flex; - justify-content: space-between; - flex-wrap: wrap; - margin: 0 -15px; - .views-row { - flex: 1 0 33.3%; - padding: 0 15px; - } - } - } - } - @include media-breakpoint-up(lg) { - min-width: 830px; - } - -} \ No newline at end of file diff --git a/web/themes/ventuno/src/scss/homepage.scss b/web/themes/ventuno/src/scss/homepage.scss index 0791e76be8..3c7ffa37c2 100644 --- a/web/themes/ventuno/src/scss/homepage.scss +++ b/web/themes/ventuno/src/scss/homepage.scss @@ -10,7 +10,6 @@ // Components @import "components/about-block"; -@import "components/discover-topics-block"; @import "components/homepage"; @import "components/in-the-spotlight-block"; @import "components/latest-news-block"; From 4b363e999aea8de6d8f9c5c81e2e64d3f65d4e0a Mon Sep 17 00:00:00 2001 From: Pieter Frenssen Date: Wed, 20 Oct 2021 17:44:13 +0300 Subject: [PATCH 02/10] Revert "ISAICP-6729: Change search block in homepage." --- ...earch.yml => block.block.globalsearch.yml} | 20 ++-- config/sync/views.view.search.yml | 6 +- .../block/block--exposed-search.html.twig | 21 ---- ...ement--views-exposed-form-search.html.twig | 102 ------------------ .../form/input--search-expose-form.html.twig | 24 ----- web/themes/ventuno/ventuno.theme | 30 ------ 6 files changed, 11 insertions(+), 192 deletions(-) rename config/sync/{block.block.exposed_search.yml => block.block.globalsearch.yml} (50%) delete mode 100644 web/themes/ventuno/templates/block/block--exposed-search.html.twig delete mode 100644 web/themes/ventuno/templates/form/form-element--views-exposed-form-search.html.twig delete mode 100644 web/themes/ventuno/templates/form/input--search-expose-form.html.twig diff --git a/config/sync/block.block.exposed_search.yml b/config/sync/block.block.globalsearch.yml similarity index 50% rename from config/sync/block.block.exposed_search.yml rename to config/sync/block.block.globalsearch.yml index d4cbffdecb..01cc6ef123 100644 --- a/config/sync/block.block.exposed_search.yml +++ b/config/sync/block.block.globalsearch.yml @@ -1,26 +1,24 @@ -uuid: 07af8993-33e3-4053-bbf7-324d21a6f1a2 +uuid: 1ef39009-13ab-424a-a4cf-50cca466b674 langcode: en status: true dependencies: - config: - - views.view.search module: + - joinup_search - system - - views theme: - ventuno -id: exposed_search +id: globalsearch theme: ventuno region: featured -weight: -25 +weight: -26 provider: null -plugin: 'views_exposed_filter_block:search-page_1' +plugin: joinup_search_global_search settings: - id: 'views_exposed_filter_block:search-page_1' - label: '' - provider: views + id: joinup_search_global_search + label: 'Global search' + provider: joinup_search label_display: '0' - views_label: '' + template_suggestion: homepage visibility: request_path: id: request_path diff --git a/config/sync/views.view.search.yml b/config/sync/views.view.search.yml index a38941f284..fdb879274d 100644 --- a/config/sync/views.view.search.yml +++ b/config/sync/views.view.search.yml @@ -182,19 +182,17 @@ display: description: '' use_operator: false operator: search_api_fulltext_op - operator_limit_selection: false - operator_list: { } identifier: keys required: false remember: false multiple: false remember_roles: authenticated: authenticated - licence_manager: '0' anonymous: '0' moderator: '0' administrator: '0' - rdf_graph_manager: '0' + operator_limit_selection: false + operator_list: { } is_grouped: false group_info: label: '' diff --git a/web/themes/ventuno/templates/block/block--exposed-search.html.twig b/web/themes/ventuno/templates/block/block--exposed-search.html.twig deleted file mode 100644 index 0ea72d7ba0..0000000000 --- a/web/themes/ventuno/templates/block/block--exposed-search.html.twig +++ /dev/null @@ -1,21 +0,0 @@ -{# -/** - * @file - * Default theme implementation for the global search bar. - * - * Available variables: - * - filters: the search filters, to be displayed as chips. - * - * @ingroup themeable - */ -#} -{% - set search_url = path('view.search.page_1') -%} -

{{ 'Find the interoperability
resources you need'|trans }}

-{% block content %} -
- {{ content }} -
-{% endblock %} -

{% trans %}Need more search options? Use our advanced search{% endtrans %}

diff --git a/web/themes/ventuno/templates/form/form-element--views-exposed-form-search.html.twig b/web/themes/ventuno/templates/form/form-element--views-exposed-form-search.html.twig deleted file mode 100644 index ae745a547c..0000000000 --- a/web/themes/ventuno/templates/form/form-element--views-exposed-form-search.html.twig +++ /dev/null @@ -1,102 +0,0 @@ -{# -/** - * @file - * Default theme implementation for a form element views exposed form search block. - * - * Available variables: - * - attributes: HTML attributes for the containing element. - * - errors: (optional) Any errors for this form element, may not be set. - * - prefix: (optional) The form element prefix, may not be set. - * - suffix: (optional) The form element suffix, may not be set. - * - required: The required marker, or empty if the associated form element is - * not required. - * - type: The type of the element. - * - name: The name of the element. - * - label: A rendered label element. - * - label_display: Label display setting. It can have these values: - * - before: The label is output before the element. This is the default. - * The label includes the #title and the required marker, if #required. - * - after: The label is output after the element. For example, this is used - * for radio and checkbox #type elements. If the #title is empty but the - * field is #required, the label will contain only the required marker. - * - invisible: Labels are critical for screen readers to enable them to - * properly navigate through forms but can be visually distracting. This - * property hides the label for everyone except screen readers. - * - attribute: Set the title attribute on the element to create a tooltip but - * output no label element. This is supported only for checkboxes and radios - * in \Drupal\Core\Render\Element\CompositeFormElementTrait::preRenderCompositeFormElement(). - * It is used where a visual label is not needed, such as a table of - * checkboxes where the row and column provide the context. The tooltip will - * include the title and required marker. - * - description: (optional) A list of description properties containing: - * - content: A description of the form element, may not be set. - * - attributes: (optional) A list of HTML attributes to apply to the - * description content wrapper. Will only be set when description is set. - * - description_display: Description display setting. It can have these values: - * - before: The description is output before the element. - * - after: The description is output after the element. This is the default - * value. - * - invisible: The description is output after the element, hidden visually - * but available to screen readers. - * - disabled: True if the element is disabled. - * - title_display: Title display setting. - * - * @see template_preprocess_form_element() - * - * @ingroup themeable - */ -#} -{% - set classes = [ - 'input-group', - 'js-form-item', - 'form-item', - 'js-form-type-' ~ type|clean_class, - 'form-item-' ~ name|clean_class, - 'js-form-item-' ~ name|clean_class, - title_display not in ['after', 'before'] ? 'form-no-label', - disabled == 'disabled' ? 'form-disabled', - errors ? 'form-item--error', - col_class ? col_class, - margin_class ? margin_class, -] -%} -{% - set description_classes = [ - 'description', - 'form-text', - 'text-muted', - description_display == 'invisible' ? 'visually-hidden', -] -%} - - {% if label_display in ['before', 'invisible'] %} - {{ label }} - {% endif %} - {% if prefix is not empty %} - {{ prefix }} - {% endif %} - {% if description_display == 'before' and description.content %} - - {{ description.content }} - - {% endif %} - {{ children }} - {% if suffix is not empty %} - {{ suffix }} - {% endif %} - {% if label_display == 'after' %} - {{ label }} - {% endif %} - {% if errors %} -
- {{ errors }} -
- {% endif %} - {% if description_display in ['after', 'invisible'] and description.content %} - - {{ description.content }} - - {% endif %} - - diff --git a/web/themes/ventuno/templates/form/input--search-expose-form.html.twig b/web/themes/ventuno/templates/form/input--search-expose-form.html.twig deleted file mode 100644 index 118558ef27..0000000000 --- a/web/themes/ventuno/templates/form/input--search-expose-form.html.twig +++ /dev/null @@ -1,24 +0,0 @@ -{# -/** - * @file - * Theme override for an 'input' #type form element. - * - * Available variables: - * - attributes: A list of HTML attributes for the input element. - * - children: Optional additional rendered elements. - * - * @see template_preprocess_input() - */ -#} -{% - set classes = [ - 'search-bar__input', - 'form-control', - 'px-4', - 'py-3', - 'shadow', - attributes.hasClass('error') ? 'is-invalid', -] -%} - -{{ children }} diff --git a/web/themes/ventuno/ventuno.theme b/web/themes/ventuno/ventuno.theme index 9728db6ac0..4c9496b51e 100644 --- a/web/themes/ventuno/ventuno.theme +++ b/web/themes/ventuno/ventuno.theme @@ -7,7 +7,6 @@ declare(strict_types = 1); -use Drupal\Core\Form\FormStateInterface; use Drupal\Core\Menu\MenuLinkTreeElement; use Drupal\Core\Menu\MenuTreeParameters; use Drupal\Core\Url; @@ -224,32 +223,3 @@ function ventuno_smart_trim(string $string, int $length, bool $ellipsis = TRUE): $truncate = new TruncateHTML(); return $truncate->truncateChars($string, $length, $ellipsis ? '…' : ''); } - -/** - * Implements hook_theme_suggestions_HOOK_alter() for form-element.html.twig. - */ -function ventuno_theme_suggestions_form_element_alter(array &$suggestions, array $variables): void { - if (isset($variables['element']['#joinup_parent'])) { - $suggestions[] = 'form_element__' . $variables['element']['#joinup_parent']; - } -} - -/** - * Implements hook_form_alter(). - */ -function ventuno_form_alter(&$form, FormStateInterface $form_state, $form_id): void { - // Check if the form contains exposed filter form element. - if ($form_id == 'views_exposed_form') { - // Here you can define the check for specific view so that - // it doesn't apply to all views. - $view = $form_state->get('view'); - if ($view->id() === 'search') { - $form['keys']['#theme'] = 'input__search_expose_form'; - $form['keys']['#title_display'] = 'invisible'; - $form['keys']['#attributes']['id'] = 'search-bar__input'; - $form['keys']['#attributes']['placeholder'] = t('Start typing to search…'); - $form['keys']['#joinup_parent'] = $form_id . '_' . $view->id(); - $form['sort_by']['#type'] = 'hidden'; - } - } -} From 22204bb20bac6a71fcff3a0911ec97c5ae516e3d Mon Sep 17 00:00:00 2001 From: Theo Suja Date: Thu, 21 Oct 2021 13:00:43 +0200 Subject: [PATCH 03/10] ISAICP-6763: Add and optimize svg, update BCL builder. --- web/themes/ventuno/bcl-builder.config.js | 30 +++ .../ventuno/src/images/homepage-banner.svg | 1 + web/themes/ventuno/src/images/iop-eu-logo.svg | 1 + web/themes/ventuno/src/images/logo.svg | 239 +----------------- 4 files changed, 33 insertions(+), 238 deletions(-) create mode 100644 web/themes/ventuno/src/images/homepage-banner.svg create mode 100644 web/themes/ventuno/src/images/iop-eu-logo.svg diff --git a/web/themes/ventuno/bcl-builder.config.js b/web/themes/ventuno/bcl-builder.config.js index 5e5c8b7595..5403ef314e 100644 --- a/web/themes/ventuno/bcl-builder.config.js +++ b/web/themes/ventuno/bcl-builder.config.js @@ -84,6 +84,16 @@ module.exports = { to: path.resolve(outputFolder, "assets/fonts/joinup-icons"), options: { up: true }, }, + { + from: [ + path.resolve( + __dirname, + "src/images/logo.svg" + ), + ], + to: path.resolve(outputFolder, "assets/images"), + options: { up: true }, + }, { from: [ path.resolve( @@ -94,6 +104,26 @@ module.exports = { to: path.resolve(outputFolder, "assets/images"), options: { up: true }, }, + { + from: [ + path.resolve( + __dirname, + "src/images/iop-eu-logo.svg" + ), + ], + to: path.resolve(outputFolder, "assets/images"), + options: { up: true }, + }, + { + from: [ + path.resolve( + __dirname, + "src/images/homepage-banner.svg" + ), + ], + to: path.resolve(outputFolder, "assets/images"), + options: { up: true }, + }, { from: [ path.resolve( diff --git a/web/themes/ventuno/src/images/homepage-banner.svg b/web/themes/ventuno/src/images/homepage-banner.svg new file mode 100644 index 0000000000..530b8a92f7 --- /dev/null +++ b/web/themes/ventuno/src/images/homepage-banner.svg @@ -0,0 +1 @@ + diff --git a/web/themes/ventuno/src/images/iop-eu-logo.svg b/web/themes/ventuno/src/images/iop-eu-logo.svg new file mode 100644 index 0000000000..53598e5b61 --- /dev/null +++ b/web/themes/ventuno/src/images/iop-eu-logo.svg @@ -0,0 +1 @@ + diff --git a/web/themes/ventuno/src/images/logo.svg b/web/themes/ventuno/src/images/logo.svg index 5c1562c1de..3a6722eaef 100644 --- a/web/themes/ventuno/src/images/logo.svg +++ b/web/themes/ventuno/src/images/logo.svg @@ -1,238 +1 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + From 2ede526bcf57fd40d0dd8d2c1082e6078fc472a1 Mon Sep 17 00:00:00 2001 From: Theo Suja Date: Thu, 21 Oct 2021 13:01:05 +0200 Subject: [PATCH 04/10] ISAICP-763: (WIP) Update header. --- .../scss/components/_global-search-block.scss | 17 +++++++++++------ ...nup-search-global-search--homepage.html.twig | 4 ++-- web/themes/ventuno/ventuno.libraries.yml | 2 +- 3 files changed, 14 insertions(+), 9 deletions(-) diff --git a/web/themes/ventuno/src/scss/components/_global-search-block.scss b/web/themes/ventuno/src/scss/components/_global-search-block.scss index 2582f77ad9..00f6d88f6b 100644 --- a/web/themes/ventuno/src/scss/components/_global-search-block.scss +++ b/web/themes/ventuno/src/scss/components/_global-search-block.scss @@ -1,16 +1,21 @@ .block-joinup-search-global-search { - @extend .pt-5; - @extend .pb-2; - @extend .me-3; - @extend .col-lg; + padding-top: $spacer * 3; // 48px @extend .pt-5; + padding-bottom: $spacer * .5; // 8px @extend .pb-2; + @include media-breakpoint-up(lg) { + margin-right: $spacer; // 16px @extend .me-3; + flex: 1 0 0%; // @extend .col-lg; + } .search-bar { .search-bar__input { border-style: none; - border-top-left-radius: $border-radius; - border-bottom-left-radius: $border-radius; + border-top-left-radius: $border-radius-pill; + border-bottom-left-radius: $border-radius-pill; } .btn-search { @include font-icon-before("\E805", 1.2rem, inherit, inherit, 0); + border-top-right-radius: $border-radius-pill; + border-bottom-right-radius: $border-radius-pill; + color: $dark; } } } diff --git a/web/themes/ventuno/templates/form/joinup-search-global-search--homepage.html.twig b/web/themes/ventuno/templates/form/joinup-search-global-search--homepage.html.twig index be485eb960..d4b92bba9a 100644 --- a/web/themes/ventuno/templates/form/joinup-search-global-search--homepage.html.twig +++ b/web/themes/ventuno/templates/form/joinup-search-global-search--homepage.html.twig @@ -21,8 +21,8 @@ {% endfor %}
- +
-

{% trans %}Need more search options? Use our advanced search{% endtrans %}

+

{% trans %}Need more search options? Use our advanced search{% endtrans %}

diff --git a/web/themes/ventuno/ventuno.libraries.yml b/web/themes/ventuno/ventuno.libraries.yml index 09b8a8b68e..24b7ced3fe 100644 --- a/web/themes/ventuno/ventuno.libraries.yml +++ b/web/themes/ventuno/ventuno.libraries.yml @@ -14,7 +14,7 @@ slick: style: version: VERSION css: - theme: + base: assets/css/main.css: {} js: assets/js/oe-bcl-joinup.bundle.min.js: { minified: true } From ee51b7ff5b8fd64189f836d3904716e5e0a8851c Mon Sep 17 00:00:00 2001 From: Theo Suja Date: Thu, 21 Oct 2021 13:55:45 +0200 Subject: [PATCH 05/10] ISAICP-6763: (WIP) Update homepage header. --- .../scss/components/_global-search-block.scss | 4 +- .../src/scss/components/_homepage.scss | 42 ++++++++++--------- ...p-search-global-search--homepage.html.twig | 14 +++++-- 3 files changed, 36 insertions(+), 24 deletions(-) diff --git a/web/themes/ventuno/src/scss/components/_global-search-block.scss b/web/themes/ventuno/src/scss/components/_global-search-block.scss index 00f6d88f6b..4e6f1131fe 100644 --- a/web/themes/ventuno/src/scss/components/_global-search-block.scss +++ b/web/themes/ventuno/src/scss/components/_global-search-block.scss @@ -3,7 +3,8 @@ padding-bottom: $spacer * .5; // 8px @extend .pb-2; @include media-breakpoint-up(lg) { margin-right: $spacer; // 16px @extend .me-3; - flex: 1 0 0%; // @extend .col-lg; + // flex: 1 0 0%; // @extend .col-lg; + max-width: calc(50% - $spacer * .5) } .search-bar { .search-bar__input { @@ -16,6 +17,7 @@ border-top-right-radius: $border-radius-pill; border-bottom-right-radius: $border-radius-pill; color: $dark; + background-color: $white; } } } diff --git a/web/themes/ventuno/src/scss/components/_homepage.scss b/web/themes/ventuno/src/scss/components/_homepage.scss index 4c41c34a14..922a86626d 100644 --- a/web/themes/ventuno/src/scss/components/_homepage.scss +++ b/web/themes/ventuno/src/scss/components/_homepage.scss @@ -49,24 +49,26 @@ // Region Featured .region-featured { - background-color: $gray-200; - background: radial-gradient(circle at top, white 94%, $gray-300 6%); - @include media-breakpoint-up(md) { - background: none; - background-color: $gray-300; - position: relative; - overflow: hidden; - z-index: 0; - &:before { - content: ""; - position: absolute; - background-color: $gray-100; - width: 100%; - height: 350%; - border-radius: 50%; - top: -200%; - transform: translate(-50%, 0); - z-index: -1; - } - } + background: url(../images/homepage-banner.svg) no-repeat #082330; // Custom IOP-EU color + background-size: cover; + // background-color: $gray-200; + // background: radial-gradient(circle at top, white 94%, $gray-300 6%); + // @include media-breakpoint-up(md) { + // background: none; + // background-color: $gray-300; + // position: relative; + // overflow: hidden; + // z-index: 0; + // &:before { + // content: ""; + // position: absolute; + // background-color: $gray-100; + // width: 100%; + // height: 350%; + // border-radius: 50%; + // top: -200%; + // transform: translate(-50%, 0); + // z-index: -1; + // } + // } } diff --git a/web/themes/ventuno/templates/form/joinup-search-global-search--homepage.html.twig b/web/themes/ventuno/templates/form/joinup-search-global-search--homepage.html.twig index d4b92bba9a..6e6ca81ff0 100644 --- a/web/themes/ventuno/templates/form/joinup-search-global-search--homepage.html.twig +++ b/web/themes/ventuno/templates/form/joinup-search-global-search--homepage.html.twig @@ -12,7 +12,15 @@ {% set search_url = path('view.search.page_1') %} -

{{ 'Find the interoperability
resources you need'|trans }}

+{#

{{ 'Find the interoperability
resources you need'|trans }}

#} +
+
+ +
+
+

welcomes

+
+
@@ -20,8 +28,8 @@ {% endfor %}
- - + +
From 2a17ae56ad6629daa707ea515632221dc5f25ee6 Mon Sep 17 00:00:00 2001 From: Theo Suja Date: Thu, 28 Oct 2021 15:44:20 +0200 Subject: [PATCH 06/10] ISAICP-6763: Banner for Joinup welcomes Interoperable Europe. --- web/themes/ventuno/bcl-builder.config.js | 10 ++++ .../ventuno/src/images/homepage-banner-md.svg | 1 + web/themes/ventuno/src/images/iop-eu-logo.svg | 2 +- .../scss/components/_global-search-block.scss | 48 +++++++++++-------- .../src/scss/components/_homepage.scss | 29 ++--------- ...p-search-global-search--homepage.html.twig | 42 +++++++++------- .../templates/layout/page--home.html.twig | 12 +++-- 7 files changed, 78 insertions(+), 66 deletions(-) create mode 100644 web/themes/ventuno/src/images/homepage-banner-md.svg diff --git a/web/themes/ventuno/bcl-builder.config.js b/web/themes/ventuno/bcl-builder.config.js index 5403ef314e..77e4e33ed6 100644 --- a/web/themes/ventuno/bcl-builder.config.js +++ b/web/themes/ventuno/bcl-builder.config.js @@ -124,6 +124,16 @@ module.exports = { to: path.resolve(outputFolder, "assets/images"), options: { up: true }, }, + { + from: [ + path.resolve( + __dirname, + "src/images/homepage-banner-md.svg" + ), + ], + to: path.resolve(outputFolder, "assets/images"), + options: { up: true }, + }, { from: [ path.resolve( diff --git a/web/themes/ventuno/src/images/homepage-banner-md.svg b/web/themes/ventuno/src/images/homepage-banner-md.svg new file mode 100644 index 0000000000..530b8a92f7 --- /dev/null +++ b/web/themes/ventuno/src/images/homepage-banner-md.svg @@ -0,0 +1 @@ + diff --git a/web/themes/ventuno/src/images/iop-eu-logo.svg b/web/themes/ventuno/src/images/iop-eu-logo.svg index 53598e5b61..1491d24adb 100644 --- a/web/themes/ventuno/src/images/iop-eu-logo.svg +++ b/web/themes/ventuno/src/images/iop-eu-logo.svg @@ -1 +1 @@ - + diff --git a/web/themes/ventuno/src/scss/components/_global-search-block.scss b/web/themes/ventuno/src/scss/components/_global-search-block.scss index 4e6f1131fe..3d2f633e76 100644 --- a/web/themes/ventuno/src/scss/components/_global-search-block.scss +++ b/web/themes/ventuno/src/scss/components/_global-search-block.scss @@ -1,23 +1,31 @@ -.block-joinup-search-global-search { - padding-top: $spacer * 3; // 48px @extend .pt-5; - padding-bottom: $spacer * .5; // 8px @extend .pb-2; - @include media-breakpoint-up(lg) { - margin-right: $spacer; // 16px @extend .me-3; - // flex: 1 0 0%; // @extend .col-lg; - max-width: calc(50% - $spacer * .5) +.region-featured { + background-size: 100% auto; + background-position: center; + background-image: url(../images/homepage-banner.svg), linear-gradient($primary 0%, $primary 50%, #082330 50%, #082330 100%); + background-repeat: no-repeat; + @include media-breakpoint-up(md) { + background-size: auto 100%; + background-image: url(../images/homepage-banner-md.svg), linear-gradient(to right, $primary 0%, $primary 30%, #082330 30%, #082330 100%); } - .search-bar { - .search-bar__input { - border-style: none; - border-top-left-radius: $border-radius-pill; - border-bottom-left-radius: $border-radius-pill; + .block-joinup-search-global-search { + padding-bottom: $spacer * .5; // 8px + @include media-breakpoint-up(lg) { + margin-right: $spacer; // 16px + } + .search-bar { + .search-bar__input { + font-size: $font-size-base; + border-style: none; + border-top-left-radius: $border-radius-pill; + border-bottom-left-radius: $border-radius-pill; + } + .btn-search { + @include font-icon-before("\E805", 1.2rem, $primary, inherit, 0); + border-top-right-radius: $border-radius-pill; + border-bottom-right-radius: $border-radius-pill; + color: $dark; + background-color: $white; + } + } } - .btn-search { - @include font-icon-before("\E805", 1.2rem, inherit, inherit, 0); - border-top-right-radius: $border-radius-pill; - border-bottom-right-radius: $border-radius-pill; - color: $dark; - background-color: $white; - } - } } diff --git a/web/themes/ventuno/src/scss/components/_homepage.scss b/web/themes/ventuno/src/scss/components/_homepage.scss index 922a86626d..035a8da198 100644 --- a/web/themes/ventuno/src/scss/components/_homepage.scss +++ b/web/themes/ventuno/src/scss/components/_homepage.scss @@ -47,28 +47,9 @@ } } -// Region Featured -.region-featured { - background: url(../images/homepage-banner.svg) no-repeat #082330; // Custom IOP-EU color - background-size: cover; - // background-color: $gray-200; - // background: radial-gradient(circle at top, white 94%, $gray-300 6%); - // @include media-breakpoint-up(md) { - // background: none; - // background-color: $gray-300; - // position: relative; - // overflow: hidden; - // z-index: 0; - // &:before { - // content: ""; - // position: absolute; - // background-color: $gray-100; - // width: 100%; - // height: 350%; - // border-radius: 50%; - // top: -200%; - // transform: translate(-50%, 0); - // z-index: -1; - // } - // } +.iop-gradient { + // background: linear-gradient(to right, #278ebf 0%, #44bfb8 32%, #50c1b0 37%, #70c89a 45%, #a4d377 56%, #c2d962 62%, #f6921e 100%); // Full IOP gradient + background: linear-gradient(to right, #c2d962 0%, #f6921e 100%); // Only last 2 colors + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; } diff --git a/web/themes/ventuno/templates/form/joinup-search-global-search--homepage.html.twig b/web/themes/ventuno/templates/form/joinup-search-global-search--homepage.html.twig index 6e6ca81ff0..251ebe5c31 100644 --- a/web/themes/ventuno/templates/form/joinup-search-global-search--homepage.html.twig +++ b/web/themes/ventuno/templates/form/joinup-search-global-search--homepage.html.twig @@ -12,25 +12,31 @@ {% set search_url = path('view.search.page_1') %} -{#

{{ 'Find the interoperability
resources you need'|trans }}

#} -
-
+
+
-
-

welcomes

-
-
-
- -
- {% for id, filter in filters %} - - {% endfor %} -
- - +
+
+ + + {% for id, filter in filters %} + + {% endfor %} +
+ + +
+
- +

{% trans %} + Need more search options? + + Use our advanced search + {% endtrans %}

+
+
+

{{ 'welcomes'|trans }}

+
+
-

{% trans %}Need more search options? Use our advanced search{% endtrans %}

diff --git a/web/themes/ventuno/templates/layout/page--home.html.twig b/web/themes/ventuno/templates/layout/page--home.html.twig index ac5c918946..5dbe83b2ab 100644 --- a/web/themes/ventuno/templates/layout/page--home.html.twig +++ b/web/themes/ventuno/templates/layout/page--home.html.twig @@ -101,10 +101,16 @@ {% endif %}
-
+
-
- {{ page.featured }} +
+
+ {{ page.featured }} +
+
+ + {{ 'Discover more'|trans }} ... +
From 9cb184d172037e2920232f0ad64e33645c635a2f Mon Sep 17 00:00:00 2001 From: Theo Suja Date: Fri, 29 Oct 2021 12:34:24 +0200 Subject: [PATCH 07/10] ISAICP-6763: Make navbar sticky. --- web/themes/ventuno/bcl-builder.config.js | 8 +++++++ web/themes/ventuno/src/js/sticky-menu.js | 24 +++++++++++++++++++ .../ventuno/src/scss/components/_navbar.scss | 24 +++++++++++++------ .../templates/navigation/navbar.html.twig | 2 +- web/themes/ventuno/ventuno.libraries.yml | 2 ++ 5 files changed, 52 insertions(+), 8 deletions(-) create mode 100644 web/themes/ventuno/src/js/sticky-menu.js diff --git a/web/themes/ventuno/bcl-builder.config.js b/web/themes/ventuno/bcl-builder.config.js index 77e4e33ed6..bd1a242068 100644 --- a/web/themes/ventuno/bcl-builder.config.js +++ b/web/themes/ventuno/bcl-builder.config.js @@ -26,6 +26,14 @@ module.exports = { sourceMap: true, }, }, + { + entry: path.resolve(outputFolder, "src/js/sticky-menu.js"), + dest: path.resolve(outputFolder, "assets/js/sticky-menu.js"), + options: { + minify: true, + sourceMap: true, + }, + }, ], styles: [ { diff --git a/web/themes/ventuno/src/js/sticky-menu.js b/web/themes/ventuno/src/js/sticky-menu.js new file mode 100644 index 0000000000..29c9e8eff2 --- /dev/null +++ b/web/themes/ventuno/src/js/sticky-menu.js @@ -0,0 +1,24 @@ +/** + * Sticky menu. + */ +Drupal.behaviors.stickyMenu = { + attach: function () { + // Wait for Webtools to finish their job modifying the DOM + window.addEventListener('wtReady', function () { + const + navbar = document.getElementById('joinup-navbar'), + navbarInitialOffsetTop = navbar.offsetTop; + window.addEventListener('scroll', function() { + if (window.pageYOffset > navbarInitialOffsetTop) { + navbar.classList.add('js-is--sticky'); + // add the required padding top to show content behind navbar + document.body.style.paddingTop = navbar.offsetHeight + 'px'; + } else { + navbar.classList.remove('js-is--sticky'); + // remove padding top from body + document.body.style.paddingTop = '0'; + } + }); + }); + } +}; diff --git a/web/themes/ventuno/src/scss/components/_navbar.scss b/web/themes/ventuno/src/scss/components/_navbar.scss index cb7c677249..a78f19ffac 100644 --- a/web/themes/ventuno/src/scss/components/_navbar.scss +++ b/web/themes/ventuno/src/scss/components/_navbar.scss @@ -1,8 +1,10 @@ .joinup-navbar { + z-index: 100; background-color: $primary; box-shadow: $box-shadow; padding: 0; min-height: 46px; + border-bottom: .5px solid white; @include media-breakpoint-up(sm) { min-height: 72px; } @@ -53,7 +55,7 @@ position: absolute; right: $spacer*.75; z-index: 1; - background: $primary; + background: $white; box-shadow: $box-shadow; margin-top: 1px; padding: $spacer; // 16px @@ -123,7 +125,7 @@ } } .accordion-cta-link { - color: $white; + color: $brand; text-decoration: none; &:hover { color: $gray-200; @@ -201,9 +203,10 @@ } } .accordion-list-link { - color: $white; + color: $brand; + font-weight: $font-weight-bold; &:hover { - color: $white; + color: $brand; text-decoration: none; } } @@ -221,7 +224,7 @@ .navbar__popover { border-radius: 0 0 $border-radius $border-radius; border: none; - background-color: $primary; + background-color: $white; .popover-arrow { display: none; @@ -231,14 +234,14 @@ font-weight: $font-weight-bold; font-size: $font-size-base; // 16px margin-bottom: 0; - color: $white; + color: $brand; @include font-icon-after("\E801", 1rem); } .popover__description { font-size: $font-size-xs; // 12px margin-bottom: 0; - color: $white; + color: $brand; } } @@ -247,4 +250,11 @@ .btn-light:hover { color: $primary; } + + &.js-is--sticky { + position: fixed; + top: 0; + width: 100% + } } + diff --git a/web/themes/ventuno/templates/navigation/navbar.html.twig b/web/themes/ventuno/templates/navigation/navbar.html.twig index 1c44899d0c..478777b740 100644 --- a/web/themes/ventuno/templates/navigation/navbar.html.twig +++ b/web/themes/ventuno/templates/navigation/navbar.html.twig @@ -70,7 +70,7 @@ {% set list_item_attributes = create_attribute() %} {% endif %} -{% set nav_attributes = nav_attributes.addClass(_nav_classes) %} +{% set nav_attributes = nav_attributes.addClass(_nav_classes).setAttribute('id', 'joinup-navbar') %} {% set navbar_toggler_attributes = navbar_toggler_attributes.addClass(_navbar_toggler_classes) %} {% set navbar_toggler_attributes = navbar_toggler_attributes.setAttribute('type', 'button') %} {% set navbar_toggler_attributes = navbar_toggler_attributes.setAttribute('data-bs-toggle', 'collapse') %} diff --git a/web/themes/ventuno/ventuno.libraries.yml b/web/themes/ventuno/ventuno.libraries.yml index 24b7ced3fe..870df01cd5 100644 --- a/web/themes/ventuno/ventuno.libraries.yml +++ b/web/themes/ventuno/ventuno.libraries.yml @@ -2,6 +2,8 @@ homepage: css: theme: assets/css/homepage.css: {} + js: + assets/js/sticky-menu.js: { minified: true, attributes: { defer: true } } slick: js: From f662538b3f5f403ea2ff80b8f4c35a3bd1f7f857 Mon Sep 17 00:00:00 2001 From: Theo Suja Date: Fri, 29 Oct 2021 13:52:13 +0200 Subject: [PATCH 08/10] ISAICP-6763: Add mobile banner images and style it. --- web/themes/ventuno/bcl-builder.config.js | 22 ++++++++++++++++++- .../ventuno/src/images/homepage-banner.svg | 1 - .../src/images/homepage-banner/background.svg | 1 + .../banner-md.svg} | 0 .../src/images/homepage-banner/wave.svg | 1 + .../scss/components/_global-search-block.scss | 7 +++--- .../ventuno/src/scss/components/_navbar.scss | 2 +- ...p-search-global-search--homepage.html.twig | 10 +++++---- 8 files changed, 34 insertions(+), 10 deletions(-) delete mode 100644 web/themes/ventuno/src/images/homepage-banner.svg create mode 100644 web/themes/ventuno/src/images/homepage-banner/background.svg rename web/themes/ventuno/src/images/{homepage-banner-md.svg => homepage-banner/banner-md.svg} (100%) create mode 100644 web/themes/ventuno/src/images/homepage-banner/wave.svg diff --git a/web/themes/ventuno/bcl-builder.config.js b/web/themes/ventuno/bcl-builder.config.js index bd1a242068..387f4be5f7 100644 --- a/web/themes/ventuno/bcl-builder.config.js +++ b/web/themes/ventuno/bcl-builder.config.js @@ -136,7 +136,27 @@ module.exports = { from: [ path.resolve( __dirname, - "src/images/homepage-banner-md.svg" + "src/images/homepage-banner/background.svg" + ), + ], + to: path.resolve(outputFolder, "assets/images"), + options: { up: true }, + }, + { + from: [ + path.resolve( + __dirname, + "src/images/homepage-banner/wave.svg" + ), + ], + to: path.resolve(outputFolder, "assets/images"), + options: { up: true }, + }, + { + from: [ + path.resolve( + __dirname, + "src/images/homepage-banner/banner-md.svg" ), ], to: path.resolve(outputFolder, "assets/images"), diff --git a/web/themes/ventuno/src/images/homepage-banner.svg b/web/themes/ventuno/src/images/homepage-banner.svg deleted file mode 100644 index 530b8a92f7..0000000000 --- a/web/themes/ventuno/src/images/homepage-banner.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/web/themes/ventuno/src/images/homepage-banner/background.svg b/web/themes/ventuno/src/images/homepage-banner/background.svg new file mode 100644 index 0000000000..d5826e162e --- /dev/null +++ b/web/themes/ventuno/src/images/homepage-banner/background.svg @@ -0,0 +1 @@ + diff --git a/web/themes/ventuno/src/images/homepage-banner-md.svg b/web/themes/ventuno/src/images/homepage-banner/banner-md.svg similarity index 100% rename from web/themes/ventuno/src/images/homepage-banner-md.svg rename to web/themes/ventuno/src/images/homepage-banner/banner-md.svg diff --git a/web/themes/ventuno/src/images/homepage-banner/wave.svg b/web/themes/ventuno/src/images/homepage-banner/wave.svg new file mode 100644 index 0000000000..b8dc28b01c --- /dev/null +++ b/web/themes/ventuno/src/images/homepage-banner/wave.svg @@ -0,0 +1 @@ + diff --git a/web/themes/ventuno/src/scss/components/_global-search-block.scss b/web/themes/ventuno/src/scss/components/_global-search-block.scss index 3d2f633e76..115d4c8883 100644 --- a/web/themes/ventuno/src/scss/components/_global-search-block.scss +++ b/web/themes/ventuno/src/scss/components/_global-search-block.scss @@ -1,11 +1,12 @@ .region-featured { background-size: 100% auto; - background-position: center; - background-image: url(../images/homepage-banner.svg), linear-gradient($primary 0%, $primary 50%, #082330 50%, #082330 100%); + background-position: 0 55%, 0 55%; + background-image: url(../images/wave.svg), url(../images/background.svg), linear-gradient($primary 0%, $primary 50%, #082330 50%, #082330 100%); background-repeat: no-repeat; @include media-breakpoint-up(md) { background-size: auto 100%; - background-image: url(../images/homepage-banner-md.svg), linear-gradient(to right, $primary 0%, $primary 30%, #082330 30%, #082330 100%); + background-position: center; + background-image: url(../images/banner-md.svg), linear-gradient(to right, $primary 0%, $primary 30%, #082330 30%, #082330 100%); } .block-joinup-search-global-search { padding-bottom: $spacer * .5; // 8px diff --git a/web/themes/ventuno/src/scss/components/_navbar.scss b/web/themes/ventuno/src/scss/components/_navbar.scss index a78f19ffac..2a453ef83c 100644 --- a/web/themes/ventuno/src/scss/components/_navbar.scss +++ b/web/themes/ventuno/src/scss/components/_navbar.scss @@ -4,7 +4,7 @@ box-shadow: $box-shadow; padding: 0; min-height: 46px; - border-bottom: .5px solid white; + border-bottom: 1px solid rgba(255, 255, 255, .5); @include media-breakpoint-up(sm) { min-height: 72px; } diff --git a/web/themes/ventuno/templates/form/joinup-search-global-search--homepage.html.twig b/web/themes/ventuno/templates/form/joinup-search-global-search--homepage.html.twig index 251ebe5c31..b009880591 100644 --- a/web/themes/ventuno/templates/form/joinup-search-global-search--homepage.html.twig +++ b/web/themes/ventuno/templates/form/joinup-search-global-search--homepage.html.twig @@ -29,11 +29,13 @@
-

{% trans %} - Need more search options? +

+

{% trans %} + Need more search options? - Use our advanced search - {% endtrans %}

+ Use our advanced search + {% endtrans %}

+

{{ 'welcomes'|trans }}

From 045c84d35701ccc7c0d02a23a9ae82e6e53e1efe Mon Sep 17 00:00:00 2001 From: gingapa Date: Wed, 3 Nov 2021 10:44:26 +0000 Subject: [PATCH 09/10] ISAICP-6763: Use Polyfill classes for IE fallback colours. --- .../scss/components/_global-search-block.scss | 46 +++++++++++-------- .../src/scss/components/_homepage.scss | 19 ++++++-- 2 files changed, 42 insertions(+), 23 deletions(-) diff --git a/web/themes/ventuno/src/scss/components/_global-search-block.scss b/web/themes/ventuno/src/scss/components/_global-search-block.scss index 115d4c8883..d12665812b 100644 --- a/web/themes/ventuno/src/scss/components/_global-search-block.scss +++ b/web/themes/ventuno/src/scss/components/_global-search-block.scss @@ -1,32 +1,40 @@ .region-featured { background-size: 100% auto; background-position: 0 55%, 0 55%; - background-image: url(../images/wave.svg), url(../images/background.svg), linear-gradient($primary 0%, $primary 50%, #082330 50%, #082330 100%); + background-image: url(../images/wave.svg), url(../images/background.svg), + linear-gradient($primary 0%, $primary 50%, #082330 50%, #082330 100%); background-repeat: no-repeat; @include media-breakpoint-up(md) { background-size: auto 100%; background-position: center; - background-image: url(../images/banner-md.svg), linear-gradient(to right, $primary 0%, $primary 30%, #082330 30%, #082330 100%); + background-image: url(../images/banner-md.svg), + linear-gradient( + to right, + $primary 0%, + $primary 30%, + #082330 30%, + #082330 100% + ); } .block-joinup-search-global-search { - padding-bottom: $spacer * .5; // 8px - @include media-breakpoint-up(lg) { - margin-right: $spacer; // 16px + padding-bottom: $spacer * 0.5; // 8px + @include media-breakpoint-up(lg) { + margin-right: $spacer; // 16px + } + .search-bar { + .search-bar__input { + font-size: $font-size-base; + border-style: none; + border-top-left-radius: $border-radius-pill; + border-bottom-left-radius: $border-radius-pill; } - .search-bar { - .search-bar__input { - font-size: $font-size-base; - border-style: none; - border-top-left-radius: $border-radius-pill; - border-bottom-left-radius: $border-radius-pill; - } - .btn-search { - @include font-icon-before("\E805", 1.2rem, $primary, inherit, 0); - border-top-right-radius: $border-radius-pill; - border-bottom-right-radius: $border-radius-pill; - color: $dark; - background-color: $white; - } + .btn-search { + @include font-icon-before("\E805", 1.2rem, $primary, inherit, 0); + border-top-right-radius: $border-radius-pill; + border-bottom-right-radius: $border-radius-pill; + color: $dark; + background-color: $white; } } + } } diff --git a/web/themes/ventuno/src/scss/components/_homepage.scss b/web/themes/ventuno/src/scss/components/_homepage.scss index 035a8da198..47532d6474 100644 --- a/web/themes/ventuno/src/scss/components/_homepage.scss +++ b/web/themes/ventuno/src/scss/components/_homepage.scss @@ -48,8 +48,19 @@ } .iop-gradient { - // background: linear-gradient(to right, #278ebf 0%, #44bfb8 32%, #50c1b0 37%, #70c89a 45%, #a4d377 56%, #c2d962 62%, #f6921e 100%); // Full IOP gradient - background: linear-gradient(to right, #c2d962 0%, #f6921e 100%); // Only last 2 colors - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; + // background: linear-gradient(to right, #278ebf 0%, #44bfb8 32%, #50c1b0 37%, #70c89a 45%, #a4d377 56%, #c2d962 62%, #f6921e 100%); // Full IOP gradient + background: linear-gradient( + to right, + #c2d962 0%, + #f6921e 100% + ); // Only last 2 colors + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +// Use Polyfill classes for IE fallback colours. +.iecp-u1 { + .text-light { + color: $white; + } } From 25255b6ef97479e1c9fb4172a5e9d1587aa1ef07 Mon Sep 17 00:00:00 2001 From: Theo Suja Date: Thu, 4 Nov 2021 10:15:03 +0100 Subject: [PATCH 10/10] ISAICP-6763: Make sticky navbar handle cookie banner. Remove also event listeners when they are not needed anymore. --- web/themes/ventuno/src/js/sticky-menu.js | 23 +++++++++++++++++------ 1 file changed, 17 insertions(+), 6 deletions(-) diff --git a/web/themes/ventuno/src/js/sticky-menu.js b/web/themes/ventuno/src/js/sticky-menu.js index 29c9e8eff2..4e99212b02 100644 --- a/web/themes/ventuno/src/js/sticky-menu.js +++ b/web/themes/ventuno/src/js/sticky-menu.js @@ -3,13 +3,24 @@ */ Drupal.behaviors.stickyMenu = { attach: function () { - // Wait for Webtools to finish their job modifying the DOM + // Make sure Webtools is done modifying the DOM window.addEventListener('wtReady', function () { - const - navbar = document.getElementById('joinup-navbar'), - navbarInitialOffsetTop = navbar.offsetTop; + const navbar = document.getElementById('joinup-navbar'); + let navbarOffsetTop = navbar.offsetTop; + function recalculateOffset() { + navbarOffsetTop = navbar.offsetTop; + // Remove events related to cookie banner interaction + window.removeEventListener('cck_all_accepted', recalculateOffset) + window.removeEventListener('cck_technical_accepted', recalculateOffset) + window.removeEventListener('cck_banner_hidden', recalculateOffset) + } + // Add events related to cookie banner interaction + window.addEventListener('cck_all_accepted', recalculateOffset) + window.addEventListener('cck_technical_accepted', recalculateOffset) + window.addEventListener('cck_banner_hidden', recalculateOffset) + // Run function on user scroll window.addEventListener('scroll', function() { - if (window.pageYOffset > navbarInitialOffsetTop) { + if (window.pageYOffset > navbarOffsetTop) { navbar.classList.add('js-is--sticky'); // add the required padding top to show content behind navbar document.body.style.paddingTop = navbar.offsetHeight + 'px'; @@ -19,6 +30,6 @@ Drupal.behaviors.stickyMenu = { document.body.style.paddingTop = '0'; } }); - }); + }, { once: true }); } };