Add search bar to create question page and fix display of search results

AndreasEngelmark · AndreasEngelmark · commit c76ced45a650 · 2022-06-01T13:25:07.000+03:00
diff --git a/config/sync/language/da/views.view.os2loop_search_db.yml b/config/sync/language/da/views.view.os2loop_search_db.yml
@@ -11,6 +11,7 @@ display:
       filters:
         search_api_fulltext:
           expose:
+            label: 'Søg'
             placeholder: 'Søg efter indhold eller emner'
       title: Søg
       header:
diff --git a/config/sync/views.view.os2loop_search_db.yml b/config/sync/views.view.os2loop_search_db.yml
@@ -153,7 +153,7 @@ display:
           exposed: true
           expose:
             operator_id: search_api_fulltext_op
-            label: 'Fulltext search'
+            label: 'Search'
             description: ''
             use_operator: false
             operator: search_api_fulltext_op
diff --git a/web/profiles/custom/os2loop/themes/os2loop_theme/assets/bootstrap-custom/typography/typography.scss b/web/profiles/custom/os2loop/themes/os2loop_theme/assets/bootstrap-custom/typography/typography.scss
@@ -1,7 +1,7 @@
 @import "../../signifly-variables/colors.scss";
 
 .text-sm {
-	color: $gray-600;
+	color: $gray-500;
 	font-size: 14px;
 }
 
diff --git a/web/profiles/custom/os2loop/themes/os2loop_theme/assets/search.scss b/web/profiles/custom/os2loop/themes/os2loop_theme/assets/search.scss
@@ -25,11 +25,15 @@ $search-icon: bg-icon($search-icon-bg, $icon-color);
 #block-os2loop-search-db-search,
 #views-exposed-form-os2loop-search-db-page-search-form {
 	// Hide submit button and search field label.
-	.form-actions,
-	.form-type-search-api-autocomplete label {
+	.form-actions {
 		display: none;
 	}
 
+	// Use label as fake header for block
+	.form-type-search-api-autocomplete label {
+		@extend .h2, .mb-20;
+	}
+
 	.form-autocomplete {
 		padding-left: 53px;
 
@@ -169,11 +173,26 @@ input[type="search"]::-webkit-search-results-decoration {
 	display: none;
 }
 
-// Adding a highligt color for search_api_excerpt
-.search_api_excerpt strong {
-	background-color: $warning;
-	padding-left: 1px;
-	padding-right: 1px;
+.search-api-excerpt {
+	// Add a box around results from comments
+	&.searched-comment {
+		@extend .block-base, .px-15, .py-10;
+
+		background-color: $loop-white;
+		border: 1px solid $gray-200;
+	}
+
+	// Adding a highligt color for search_api_excerpt
+	strong {
+		background-color: rgba(
+			red($loop-green-400),
+			green($loop-green-400),
+			blue($loop-green-400),
+			0.5
+		);
+		padding-left: 1px;
+		padding-right: 1px;
+	}
 }
 
 // Hide title on content type filters on search results page
diff --git a/web/profiles/custom/os2loop/themes/os2loop_theme/assets/signifly-custom/custom-index.scss b/web/profiles/custom/os2loop/themes/os2loop_theme/assets/signifly-custom/custom-index.scss
@@ -5,10 +5,12 @@
 @import "layout/block.scss";
 @import "layout/title.scss";
 @import "layout/list-display.scss";
+@import "layout/search-result.scss";
 @import "layout/user.scss";
 @import "layout/container-fluid-addition.scss"; // TODO: move this to bootstrap
 @import "layout/body.scss";
 @import "layout/entity.scss";
+@import "layout/views-element-container.scss";
 
 // blocks
 @import "blocks/messages.scss";
@@ -36,11 +38,10 @@
 // search
 @import "search/filter-types.scss";
 @import "search/search-input.scss";
-@import "search/search-result-item.scss";
 
 // pages
 @import "pages/section-page.scss";
-@import "pages/add-question-page.scss";
+@import "pages/node-add-osloop-question.scss";
 @import "pages/view-profile-page.scss";
 @import "pages/edit-profile-page.scss";
 @import "pages/contact-page.scss";
diff --git a/web/profiles/custom/os2loop/themes/os2loop_theme/assets/signifly-custom/layout/search-result.scss b/web/profiles/custom/os2loop/themes/os2loop_theme/assets/signifly-custom/layout/search-result.scss
@@ -0,0 +1,17 @@
+.search-result {
+	.search-result-icon {
+		svg {
+			height: 35px;
+			width: 35px;
+		}
+	}
+
+	.search-api-excerpt {
+		font-size: $font-size-base;
+	}
+
+	.comment-count {
+		color: black;
+		font-weight: $badge-font-weight;
+	}
+}
diff --git a/web/profiles/custom/os2loop/themes/os2loop_theme/assets/signifly-custom/layout/views-element-container.scss b/web/profiles/custom/os2loop/themes/os2loop_theme/assets/signifly-custom/layout/views-element-container.scss
@@ -0,0 +1,5 @@
+.views-element-container {
+	.views-row:last-of-type {
+		@extend .mb-0;
+	}
+}
diff --git a/web/profiles/custom/os2loop/themes/os2loop_theme/assets/signifly-custom/pages/node-add-osloop-question.scss b/web/profiles/custom/os2loop/themes/os2loop_theme/assets/signifly-custom/pages/node-add-osloop-question.scss
@@ -1,3 +1,3 @@
-.add-question-page > .content-wrapper {
+.node-add-osloop-question > .content-wrapper {
 	@extend .block-primary-gray, .position-relative;
 }
diff --git a/web/profiles/custom/os2loop/themes/os2loop_theme/assets/signifly-custom/search/search-result-item.scss b/web/profiles/custom/os2loop/themes/os2loop_theme/assets/signifly-custom/search/search-result-item.scss
diff --git a/web/profiles/custom/os2loop/themes/os2loop_theme/templates/content/node--list-display.html.twig b/web/profiles/custom/os2loop/themes/os2loop_theme/templates/content/node--list-display.html.twig
@@ -94,12 +94,12 @@
     <div class="row no-gutters">
       <div class="col list-display-text{{ display_inline_view ? ' d-inline-flex' }} mx-30">
         {# text #}
-        <div class="h5 m-0">
+        <div class="list-display-header h5 m-0">
           <a class="link-unstyled" href="{{ url }}">{{ label }}</a>
         </div>
         {% if not display_inline_view %}
           {% if body_text %}
-            <div class="line-clamp-3">
+            <div class="list-display-body line-clamp-3">
               {{ body_text }}
             </div>
           {% endif %}
@@ -116,7 +116,7 @@
           <div class="badge badge-primary {{ badge_class }} mr-20 align-self-start">{{ node.type.entity.label }}</div>
         {% endif %}
         {# date #}
-        <div class="list-display-date small">
+        <div class="list-display-date text-sm">
           {{ node.createdtime|date('d-m-Y') }}
         </div>
       </div>
diff --git a/web/profiles/custom/os2loop/themes/os2loop_theme/templates/content/node--search-result.html.twig b/web/profiles/custom/os2loop/themes/os2loop_theme/templates/content/node--search-result.html.twig
@@ -1,27 +1,59 @@
 {% set node = elements['#node'] %}
-<div class="search-result search-result--node search-result--node--{{ node.bundle|clean_class }} icon-list {{ node.bundle|clean_class }} d-flex w-100">
-  <div class="d-block ml-30 w-100">
-    <div class="d-flex justify-content-between align-items-start">
-      <h2 class="h5 search-header"><a href="{{ url }}">{{ label }}</a></h2>
-      <div class="text-sm ">{{ (node.createdtime|date("d-m-Y")) }}</div>
-    </div>
-    {% if (searchedComment.comment) %}
-      <div class="search_api_excerpt border">
-        <div class="text-sm">{{ searchedComment.comment.bundle == 'os2loop_question_answer' ? 'Reply'|t : 'Comment'|t }}:</div>
-        {{ searchedComment.comment_text|raw }}
+{% set short_type = node.bundle|split('_')|last %}
+
+{% set badge_class = 'badge-' ~ short_type %}
+{% set icon_source = directory ~ '/assets/svg/' ~ short_type ~ '.svg' %}
+{% set comment_icon_source = directory ~ '/assets/svg/comment.svg' %}
+
+<div class="search-result search-result--node search-result--node--{{ node.bundle|clean_class }} d-flex w-100">
+  {# icon #}
+  <div class="search-result-icon">
+    {{- source(icon_source, ignore_missing=true) -}}
+  </div>
+  <div class="container px-0 search-result-information">
+    <div class="row no-gutters">
+      <div class="col search-result-text mx-30">
+        {# text: header #}
+        <h2 class="search-result-header h5 mb-10">
+          <a class="link-unstyled" href="{{ url }}">{{- label -}}</a>
+        </h2>
+        {# text: body #}
+        {% if (searchedComment.comment) %}
+          <div class="search-api-excerpt searched-comment d-flex align-items-top">
+            <div class="font-weight-bold">
+              {{- (searchedComment.comment.bundle == 'os2loop_question_answer' ? 'Reply'|t : 'Comment'|t) ~ ':' -}}
+            </div>
+            <div class="ml-20">
+              {{- searchedComment.comment_text|raw -}}
+            </div>
+          </div>
+        {% else %}
+          <div class="search-api-excerpt mb-0">
+            {{- elements['#search_api_excerpt']|raw -}}
+          </div>
+        {% endif %}
+        {# badges #}
+        <div class="search-result-badges d-flex mt-10">
+          <span class="badge badge-primary {{ badge_class }}">{{ node.type.entity.label }}</span>
+            {% if node.os2loop_question_answers or node.os2loop_post_comments %}
+              {% set reply_field = node.os2loop_question_answers ?: node.os2loop_post_comments %}
+              <div class="d-inline-flex align-items-center text-sm ml-15">
+                {# comment: icon #}
+                {{- source(comment_icon_source, ignore_missing=true) -}}
+                {# comment: count #}
+                <div class="comment-count ml-10">
+                  {{- reply_field.comment_count -}}
+                </div>
+              </div>
+            {% endif %}
+        </div>
+      </div>
+      <div class="col-auto ml-auto">
+        {# date #}
+        <div class="search-result-date text-sm">
+          {{- (node.createdtime|date("d-m-Y")) -}}
+        </div>
       </div>
-    {% else %}
-      <div class="search_api_excerpt mb-0">{{ elements['#search_api_excerpt']|raw }}</div>
-    {% endif %}
-    <div class="d-flex align-items-center">
-      <span class="badge badge-primary badge-{{ node.getType|clean_class }}">{{ node.type.entity.label }}</span>
-      {% if (node.os2loop_question_answers) %}
-        <span class="d-flex align-items-center subject answer text-sm font-weight-bold">{{ node.get('os2loop_question_answers').comment_count }}</span>
-      {% endif %}
-      {% if (node.os2loop_post_comments) %}
-        <span class="d-flex align-items-center subject comment text-sm font-weight-bold">{{ node.get('os2loop_post_comments').comment_count }}</span>
-      {% endif %}
     </div>
   </div>
 </div>
-
diff --git a/web/profiles/custom/os2loop/themes/os2loop_theme/templates/field/user-info.html.twig b/web/profiles/custom/os2loop/themes/os2loop_theme/templates/field/user-info.html.twig
@@ -37,7 +37,7 @@
   </div>
 </div>
 {% if date %}
-  <div class="ml-auto user-reply-date small">
+  <div class="ml-auto user-reply-date text-sm">
     {# date #}
     {{ date|striptags|trim|slice(5, 10)|replace({'/': '-'}) }}
   </div>
diff --git a/web/profiles/custom/os2loop/themes/os2loop_theme/templates/layout/page.html.twig b/web/profiles/custom/os2loop/themes/os2loop_theme/templates/layout/page.html.twig
@@ -44,24 +44,34 @@
  */
 #}
 
+{% set cleaned_url = path('<current>')|clean_class|preg_replace('/[0-9]+[-]?/', '')|trim('-') %}
+
 {% set classes = [
   os2loop_container_class,
   is_front ? 'front-page',
+  cleaned_url,
+  node.bundle ? node.bundle|clean_class,
   path('<current>') == '/contacts' ? 'contact-page',
-  path('<current>') == '/node/add/os2loop_question' ? 'add-question-page',
   path('<current>') matches '/^\\/user\\/\\d+$/' ? 'view-profile-page',
   path('<current>') matches '/^\\/user\\/\\d+\\/edit$/' ? 'edit-profile-page',
-  node.bundle ? node.bundle|clean_class,
-  path('<current>')|clean_class|preg_replace('/[0-9]+[-]?/', '')|trim('-'),
   'my-90'
 ] %}
 
+{% set pages_with_search_bar = [
+  'node-add-osloop-question'
+] %}
+
 {{ page.header }}
 {# <main role="main" class="bg-secondary-white"> #}
 <main role="main">
   <a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}
 
   <div class="{{ classes|filter(c => c is not empty)|join(' ') }}">
+    {% if cleaned_url in pages_with_search_bar %}
+      <div class="search-wrapper block-primary-gray mb-30">
+        {{ drupal_block('views_exposed_filter_block:os2loop_search_db-page_search_form', wrapper=false) }}
+      </div>
+    {% endif %}
     {{ page.content }}
   </div>{# /.layout-content #}
 
diff --git a/web/profiles/custom/os2loop/themes/os2loop_theme/templates/macros.html.twig b/web/profiles/custom/os2loop/themes/os2loop_theme/templates/macros.html.twig
@@ -104,7 +104,7 @@
                   {% endif %}
                 </div>
               </div>
-              <div class="col-auto ml-auto list-display-date small">
+              <div class="col-auto ml-auto list-display-date text-sm">
                 {# date #}
                 {{ document.createdtime|date('d-m-Y') }}
               </div>
diff --git a/web/profiles/custom/os2loop/themes/os2loop_theme/templates/views/views-view--os2loop-search-db.html.twig b/web/profiles/custom/os2loop/themes/os2loop_theme/templates/views/views-view--os2loop-search-db.html.twig
@@ -45,7 +45,7 @@
     <header>
       <div class="row">
         <div class="col-md-5">
-          <h2>{{ 'Search results'|t }}</h2>
+          <h2 class="mb-20">{{ 'Search results'|t }}</h2>
         </div>
         <div class="col-md-6 ml-auto">
           <div>

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`@import "../../signifly-variables/colors.scss";`
`2`	`2`
`3`	`3`	`.text-sm {`
`4`		`- color: $gray-600;`
	`4`	`+ color: $gray-500;`
`5`	`5`	`font-size: 14px;`
`6`	`6`	`}`
`7`	`7`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,3 @@`
`1`		`-.add-question-page > .content-wrapper {`
	`1`	`+.node-add-osloop-question > .content-wrapper {`
`2`	`2`	`@extend .block-primary-gray, .position-relative;`
`3`	`3`	`}`