LOOP-737: Search form improvements

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

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";

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;
+  }
 }

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;
+    }
+  }
+}

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'];
 }

web/profiles/custom/os2loop/themes/os2loop_theme/templates/content-entities/comment--post.html.twig

@@ -85,6 +85,10 @@
 
   <a href="{{ comment_url }}">{{ 'View comment in context'|t }}</a>
 {% else %}
+  {# Remove comment id from element id on top comment #}
+  {% if attributes.hasClass('top-comment') %}
+    {% set attributes = attributes.setAttribute('id', 'top-comment') %}
+  {% endif %}
   <article{{ attributes.addClass('js-comment os2loop-comment') }}>
   {#
     Hide the "new" indicator by default, let a piece of JavaScript ask the

web/profiles/custom/os2loop/themes/os2loop_theme/templates/content-entities/comment--question-answers.html.twig

@@ -84,6 +84,10 @@
 
   <a href="{{ comment_url }}">{{ 'View answer in context'|t }}</a>
 {% else %}
+{# Remove comment id from element id on top comment #}
+{% if attributes.hasClass('top-comment') %}
+  {% set attributes = attributes.setAttribute('id', 'top-comment') %}
+{% endif %}
 <article{{ attributes.addClass('js-comment os2loop-comment') }}>
   {#
     Hide the "new" indicator by default, let a piece of JavaScript ask the

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 #}
+<form{{ attributes.setAttribute('role', 'search') }}>
+  {{ children }}
+</form>

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 #}
+<form{{ attributes.setAttribute('role', 'search') }}>
+  {{ children }}
+</form>

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',
+  ] %}
+<div{{ attributes.addClass(classes) }}>
+  {# .input-group-prepend must be first child for Bootstrap styling to work #}
+  <div class="input-group-prepend"><span class="input-group-text input-group-icon"><i class="bi bi-search"></i></span></div>
+  {% if label_display in ['before', 'invisible'] %}
+    {{ label }}
+  {% endif %}
+  {% if prefix is not empty %}
+    <span class="field-prefix">{{ prefix }}</span>
+  {% endif %}
+  {% if description_display == 'before' and description.content %}
+    <div{{ description.attributes }}>
+      {{ description.content }}
+    </div>
+  {% endif %}
+  {{ children }}
+  {% if suffix is not empty %}
+    <span class="field-suffix">{{ suffix }}</span>
+  {% endif %}
+  {% if label_display == 'after' %}
+    {{ label }}
+  {% endif %}
+  {% if errors %}
+    <div class="form-item--error-message">
+      {{ errors }}
+    </div>
+  {% endif %}
+  {% if description_display in ['after', 'invisible'] and description.content %}
+    <div{{ description.attributes.addClass(description_classes) }}>
+      {{ description.content }}
+    </div>
+  {% endif %}
+</div>

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 %}
+<input{{ attributes.addClass('form-control') }}/>