diff --git a/config/sync/block.block.os2loop_search_db_search_form.yml b/config/sync/block.block.os2loop_search_db_search_form.yml index 1a3f691a2..9a870aa05 100644 --- a/config/sync/block.block.os2loop_search_db_search_form.yml +++ b/config/sync/block.block.os2loop_search_db_search_form.yml @@ -6,6 +6,7 @@ dependencies: - views.view.os2loop_search_db module: - node + - system - views theme: - os2loop_theme @@ -33,3 +34,7 @@ visibility: negate: false context_mapping: node: '@node.node_route_context:node' + request_path: + id: request_path + pages: "# Show only on node view page (works with \"Hide for the listed pages\" and selected content types)\r\n/node/*/*" + negate: true diff --git a/web/profiles/custom/os2loop/themes/os2loop_theme/assets/app.scss b/web/profiles/custom/os2loop/themes/os2loop_theme/assets/app.scss index 61f532bda..672dd697b 100644 --- a/web/profiles/custom/os2loop/themes/os2loop_theme/assets/app.scss +++ b/web/profiles/custom/os2loop/themes/os2loop_theme/assets/app.scss @@ -79,6 +79,7 @@ a { @import "bootstrap"; @import "./comment"; @import "./teasers"; +@import "./search"; @import "./search_api_autocomplete"; @import "./document-collection"; @import "./title"; diff --git a/web/profiles/custom/os2loop/themes/os2loop_theme/assets/comment.scss b/web/profiles/custom/os2loop/themes/os2loop_theme/assets/comment.scss index ce9a18173..de147481b 100644 --- a/web/profiles/custom/os2loop/themes/os2loop_theme/assets/comment.scss +++ b/web/profiles/custom/os2loop/themes/os2loop_theme/assets/comment.scss @@ -33,4 +33,10 @@ } .os2loop-comment { position: relative; + + &:target { + // Highlight comment + // @todo Design + outline: solid 1px $primary-color; + } } diff --git a/web/profiles/custom/os2loop/themes/os2loop_theme/assets/search.scss b/web/profiles/custom/os2loop/themes/os2loop_theme/assets/search.scss new file mode 100644 index 000000000..2c1d21920 --- /dev/null +++ b/web/profiles/custom/os2loop/themes/os2loop_theme/assets/search.scss @@ -0,0 +1,38 @@ +#block-os2loop-search-db-search-form, #block-os2loop-search-db-search { + // Hide submit button and search field label. + .form-actions, + .form-type-search-api-autocomplete label { + display: none; + } + + .input-group-icon { + color: $grey; + background: none; + border-right-color: transparent; + + i { + // Squash the search icon. + line-height: 0; + } + } + + .form-control { + border-left-color: transparent; + } + + // Rounded corners. + .input-group-text { + border-top-left-radius: 1em; + border-bottom-left-radius: 1em; + } + + .form-autocomplete { + border-top-right-radius: 1em; + border-bottom-right-radius: 1em; + + // Hide throbber when not loading. + &:not(.ui-autocomplete-loading) { + background-image: none; + } + } +} diff --git a/web/profiles/custom/os2loop/themes/os2loop_theme/os2loop_theme.theme b/web/profiles/custom/os2loop/themes/os2loop_theme/os2loop_theme.theme index b0d2e4fc5..4e3b566eb 100644 --- a/web/profiles/custom/os2loop/themes/os2loop_theme/os2loop_theme.theme +++ b/web/profiles/custom/os2loop/themes/os2loop_theme/os2loop_theme.theme @@ -62,10 +62,17 @@ function os2loop_theme_theme_suggestions_comment_alter(array &$suggestions, arra $suggestions[] = 'comment__' . $sanitized_view_mode; } +/** + * Implements hook_theme_suggestions_form_alter(). + */ +function os2loop_theme_theme_suggestions_form_alter(array &$suggestions, array $variables, $hook) { + $suggestions[] = $hook . '__' . str_replace('-', '_', $variables['element']['#id']); +} + /** * Implements hook_theme_suggestions_form_element_alter(). */ function os2loop_theme_theme_suggestions_form_element_alter(array &$suggestions, array $variables, $hook) { - $suggestions[] = $hook . '__' . $variables['element']['#id']; + $suggestions[] = $hook . '__' . str_replace('-', '_', $variables['element']['#id']); $suggestions[] = $hook . '__' . $variables['element']['#type']; } diff --git a/web/profiles/custom/os2loop/themes/os2loop_theme/templates/content-entities/comment--post.html.twig b/web/profiles/custom/os2loop/themes/os2loop_theme/templates/content-entities/comment--post.html.twig index 48f10d51d..938cc9cfb 100644 --- a/web/profiles/custom/os2loop/themes/os2loop_theme/templates/content-entities/comment--post.html.twig +++ b/web/profiles/custom/os2loop/themes/os2loop_theme/templates/content-entities/comment--post.html.twig @@ -85,6 +85,10 @@ {{ 'View comment in context'|t }} {% else %} + {# Remove comment id from element id on top comment #} + {% if attributes.hasClass('top-comment') %} + {% set attributes = attributes.setAttribute('id', 'top-comment') %} + {% endif %} {# Hide the "new" indicator by default, let a piece of JavaScript ask the diff --git a/web/profiles/custom/os2loop/themes/os2loop_theme/templates/content-entities/comment--question-answers.html.twig b/web/profiles/custom/os2loop/themes/os2loop_theme/templates/content-entities/comment--question-answers.html.twig index 50c58f3c7..008baad58 100644 --- a/web/profiles/custom/os2loop/themes/os2loop_theme/templates/content-entities/comment--question-answers.html.twig +++ b/web/profiles/custom/os2loop/themes/os2loop_theme/templates/content-entities/comment--question-answers.html.twig @@ -84,6 +84,10 @@ {{ 'View answer in context'|t }} {% else %} +{# Remove comment id from element id on top comment #} +{% if attributes.hasClass('top-comment') %} + {% set attributes = attributes.setAttribute('id', 'top-comment') %} +{% endif %} {# Hide the "new" indicator by default, let a piece of JavaScript ask the diff --git a/web/profiles/custom/os2loop/themes/os2loop_theme/templates/form/form--views-exposed-form-os2loop-search-db-page-search-form.html.twig b/web/profiles/custom/os2loop/themes/os2loop_theme/templates/form/form--views-exposed-form-os2loop-search-db-page-search-form.html.twig new file mode 100644 index 000000000..3b81afb67 --- /dev/null +++ b/web/profiles/custom/os2loop/themes/os2loop_theme/templates/form/form--views-exposed-form-os2loop-search-db-page-search-form.html.twig @@ -0,0 +1,18 @@ +{# + /** + * @file + * Default theme implementation for a 'form' element. + * + * Available variables + * - attributes: A list of HTML attributes for the wrapper element. + * - children: The child elements of the form. + * + * @see template_preprocess_form() + * + * @ingroup themeable + */ + #} +{# @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Search_role#examples #} + + {{ children }} + diff --git a/web/profiles/custom/os2loop/themes/os2loop_theme/templates/form/form--views-exposed-form-os2loop-search-db-page-search.html.twig b/web/profiles/custom/os2loop/themes/os2loop_theme/templates/form/form--views-exposed-form-os2loop-search-db-page-search.html.twig new file mode 100644 index 000000000..3b81afb67 --- /dev/null +++ b/web/profiles/custom/os2loop/themes/os2loop_theme/templates/form/form--views-exposed-form-os2loop-search-db-page-search.html.twig @@ -0,0 +1,18 @@ +{# + /** + * @file + * Default theme implementation for a 'form' element. + * + * Available variables + * - attributes: A list of HTML attributes for the wrapper element. + * - children: The child elements of the form. + * + * @see template_preprocess_form() + * + * @ingroup themeable + */ + #} +{# @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Search_role#examples #} + + {{ children }} + diff --git a/web/profiles/custom/os2loop/themes/os2loop_theme/templates/form/form-element--search-api-autocomplete.html.twig b/web/profiles/custom/os2loop/themes/os2loop_theme/templates/form/form-element--search-api-autocomplete.html.twig new file mode 100644 index 000000000..2bb1a5d29 --- /dev/null +++ b/web/profiles/custom/os2loop/themes/os2loop_theme/templates/form/form-element--search-api-autocomplete.html.twig @@ -0,0 +1,97 @@ +{# + /** + * @file + * Default theme implementation for a form element. + * + * 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 = [ + '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', + type == 'checkbox' ? 'form-check' : 'form-type-' ~ type|clean_class, + 'form-group', + 'input-group', + ] %} +{% set description_classes = [ + 'description', + description_display == 'invisible' ? 'visually-hidden', + ] %} + + {# .input-group-prepend must be first child for Bootstrap styling to work #} +
+ {% 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/profiles/custom/os2loop/themes/os2loop_theme/templates/form/input--textfield.html.twig b/web/profiles/custom/os2loop/themes/os2loop_theme/templates/form/input--textfield.html.twig new file mode 100644 index 000000000..8dd77af18 --- /dev/null +++ b/web/profiles/custom/os2loop/themes/os2loop_theme/templates/form/input--textfield.html.twig @@ -0,0 +1,18 @@ +{# +/** + * @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() + */ +#} + +{# Apparently using hook_form_alter to set the input type to "search" breaks autocompleting #} +{% if 'search_api_autocomplete' == element['#type'] %} + {% set attributes = attributes.removeClass('form-text').setAttribute('type', 'search') %} +{% endif %} +