Merge pull request #1236 from greenpeace/planet-5585

PLANET-5585: Normalize action search results appearance with other results
greenpeace · Nov 25, 2020 · 2a6d8b8 · 2a6d8b8
2 parents f9e0eb7 + cef4fd9
commit 2a6d8b8
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 89 deletions.
diff --git a/assets/src/scss/pages/search/_search-results.scss b/assets/src/scss/pages/search/_search-results.scss
@@ -23,27 +23,12 @@
   }
 
   ul {
-    border-top: 1px solid $grey-20;
-
-    @include small-and-up {
-      border-top: 0;
-    }
-
     li {
-      padding: 15px 0;
-      margin: 0 $n15;
+      padding: 0 24px 32px 24px;
+      margin: 0 auto 24px;
       border-bottom: 1px solid $grey-20;
       position: relative;
 
-      @include small-and-up {
-        margin: 0 auto 32px;
-        padding-bottom: 32px;
-      }
-
-      @include mobile-only {
-        margin: 0;
-      }
-
       .search-hover {
         text-decoration: underline;
       }
@@ -56,12 +41,11 @@
 
         @include small-and-up {
           width: 25%;
-          margin-right: 30px;
+          margin: 0 32px 0 0;
           visibility: visible;
 
           html[dir="rtl"] & {
-            margin-right: 0;
-            margin-left: 30px;
+            margin: 0 0 0 32px;
           }
         }
 
@@ -70,49 +54,11 @@
         }
       }
 
-      &.search-result-list-item-bg {
-        @include background("/images/search-list.jpg");
-        padding: 24px 15px $n30;
-        margin: $n15;
-        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
-        border-bottom: 0;
+      .btn {
+        margin-top: 24px;
 
         @include small-and-up {
-          padding-top: 32px;
-          padding-bottom: 32px;
-          margin: $n15 0;
-        }
-
-        .search-result-item-headline {
-          font-size: 1.5rem;
-          margin-bottom: 40px;
-
-          @include small-and-up {
-            margin-bottom: 24px;
-          }
-
-          &:hover {
-            cursor: pointer;
-            text-decoration: underline;
-          }
-        }
-
-        .search-result-item-content {
-          display: block;
-        }
-
-        .btn {
-          width: auto;
-          margin-top: 32px;
-          cursor: pointer;
-          font-size: 0.85rem;
-          height: 40px;
-          padding: 0 20px;
-          overflow: hidden;
-
-          @include small-and-up {
-            width: max-content;
-          }
+          width: max-content;
         }
       }
     }
@@ -252,7 +198,6 @@
   font-family: $lora;
   line-height: 1.6;
   margin: $n10 0 0;
-  width: 80%;
 
   @include large-and-up {
     font-size: 1.125rem;

diff --git a/templates/tease-search.twig b/templates/tease-search.twig
@@ -16,23 +16,16 @@
 {% elseif ( first_of_the_page and loop.index0 is divisible by(5) ) %}
 	<div class="search-results-load row-hidden" style="display: none;">
 {% endif %}
-	{% if ( is_action ) %}
-		<li id="result-row-{{ post.ID }}" class="media search-result-list-item search-result-list-item-bg" style="background-image:linear-gradient(180deg, rgba(213, 239, 242, 1), rgba(255, 255, 255, 0.3)), url('{{ post.thumbnail }}');">
-			<div class="blank-block"></div>
-	{% else %}
 		<li id="result-row-{{ post.ID }}" class="media search-result-list-item">
-	{% endif %}
 
-		{% if ( not is_action ) %}
-			<img
-				class="d-flex search-result-item-image"
-				src="{{ post.thumbnail ?: dummy_thumbnail }}"
-				loading="lazy"
-				alt="{{ fn('esc_attr', post.thumbnail_alt|default( post.post_title ) )|raw }}"
-				data-ga-category="Search Results"
-				data-ga-action="Image"
-				data-ga-label="{{ ga_page_type }}" />
-		{% endif %}
+		<img
+			class="d-flex search-result-item-image"
+			src="{{ post.thumbnail ?: dummy_thumbnail }}"
+			loading="lazy"
+			alt="{{ fn('esc_attr', post.thumbnail_alt|default( post.post_title ) )|raw }}"
+			data-ga-category="Search Results"
+			data-ga-action="Image"
+			data-ga-label="{{ ga_page_type }}" />
 
 		<div id="tease-{{ post.ID }}" class="media-body search-result-item-body tease tease-{{ post.post_type }}">
 			<div class="search-result-item-flex-title">
@@ -47,6 +40,7 @@
 						</div>
 					{% endif %}
 
+					{% if ( post.p4_page_types or post.tags ) %}
 					<div class="search-result-tags top-page-tags">
 						{% for page_type in post.p4_page_types %}
 							<a
@@ -74,6 +68,7 @@
 							</div>
 						{% endif %}
 					</div>
+					{% endif %}
 
 					{% if ( is_document ) %}
 						{% set title = post.post_title|e('wp_kses_post') %}
@@ -113,17 +108,7 @@
 					{% endif %}
 				</div>
 				<div>
-					{% if ( is_action ) %}
-						{%  set link_text = settings['take_action_covers_button_text'] %}
-						<a
-							href="{{ post.link }}"
-							class="btn btn-primary btn-small"
-							data-ga-category="Search Results"
-							data-ga-action="Call to Action"
-							data-ga-label="{{ ga_page_type }}">
-								{{ link_text ?: __( 'Take action', 'planet4-master-theme' ) }}
-						</a>
-					{% elseif ( is_document ) %}
+					{% if ( is_document ) %}
 						<a href="{{ fn('wp_get_attachment_url', post.id) }}" download class="btn btn-small btn-secondary">
 							{{ __( 'Download', 'planet4-master-theme' ) }}
 						</a>
@@ -139,7 +124,26 @@
 				</div>
 			</div>
 
-			<p class="search-result-item-content">{{ post.post_excerpt|default(post.post_content)|excerpt( 30 )|raw }}</p>
+			{% if ( post.post_excerpt|striptags|trim ) %}
+			<p class="search-result-item-content">
+				{{ post.post_excerpt|default(post.post_content)|excerpt( 30 )|raw }}
+			</p>
+			{% endif %}
+
+			{% if ( is_action ) %}
+			<div>
+				{%  set link_text = settings['take_action_covers_button_text'] %}
+				<a
+					href="{{ post.link }}"
+					class="btn btn-primary btn-small"
+					data-ga-category="Search Results"
+					data-ga-action="Call to Action"
+					data-ga-label="{{ ga_page_type }}">
+						{{ link_text ?: __( 'Take action', 'planet4-master-theme' ) }}
+				</a>
+			</div>
+			{% endif %}
+
 			{% if post.edit_link %}
 				<a href="{{ post.edit_link|raw }}">{{ __('Manage', 'planet4-master-theme') }}</a>
 			{% endif %}