Merge lp:~barry-mcgee/ubuntu-brand-guidelines/search-ui-improvements into lp:ubuntu-brand-guidelines

[Barry McGee]

## Done

Updated search page to make it clearer to the user where the different search results are coming from.

## Qa
Run code, try and search - make sure layout is not broken.

## Note
It looks like searching for examples is broken. I'll raise another bug for this as it's outside the scope of this bug.

[Graham Bancroft (gbancroft-canonical)]

Lgtm +1

review: Approve

=== modified file 'css/scratch.css'
--- css/scratch.css	2016-01-27 10:34:32 +0000
+++ css/scratch.css	2016-02-05 17:57:30 +0000
@@ -310,8 +310,6 @@
  */
 .loop-results {
     margin-left: 0;
-
-    border-top: 1px dotted #aea79f;
 }
 .loop-results li {
     font-size: 13px;
@@ -328,6 +326,12 @@
 .loop-results li.loop-error {
     width: auto;
 }
+
+.loop-error {
+    font-size: .825rem;
+    color: #888;  
+}
+
 /* END loop results */
 
 #loop-examples .loop-results li a:first-child,
@@ -404,6 +408,48 @@
 #form-filter-search input[type='submit']:hover {
     background: url('../img/button-form-filter-search.png') 0 0 no-repeat transparent;
 }
+
+
+.search-section {
+    margin-bottom: 3rem;
+}
+
+.search-results {
+    border-top: 0;
+}
+
+.search-result {
+    margin-bottom: 1rem;
+    padding-bottom: 1rem;
+}
+
+.search-result-title {
+    margin-bottom: .25rem;
+}
+
+.search-result-link {
+    display: block;
+    margin-bottom: .5rem;
+    font-size: .825rem;
+}
+
+.search-result-last-updated {
+    display: block;
+    margin-bottom: .5rem;
+    font-size: .825rem;
+    color: #888;
+}
+
+
+.search-result-link a:hover {
+    text-decoration: none;
+}
+
+.search-result-subtitle {
+    margin-bottom: 2rem;
+}
+
+
 /* END search styles */
 
 /*
@@ -837,7 +883,7 @@
 }
 
 .cookie-policy .link-cta {
-    background-image: url(../img/icons/close-orange.svg);
+    background-image: url(https://assets.ubuntu.com/v1/3f057022-close-orange.svg);
     background-repeat: no-repeat;
     color: #fff;
     float: right;

=== modified file 'loop-search-downloads.php'
--- loop-search-downloads.php	2014-10-21 16:38:46 +0000
+++ loop-search-downloads.php	2016-02-05 17:57:30 +0000
@@ -1,24 +1,22 @@
+<ul class="loop-results search-downloads clearfix">
+<h2 class="search-result-subtitle">Results in Downloads:</h2>
 <?php
-// Get posts
-$args = array();
+
 $args['post_type'] = 'downloads';
-if (!empty($search)) {
-	$args['s'] = $search;
-}
 $query = new WP_Query($args);
-?>
-<ul class="loop-results search-downloads clearfix">
-<?php
+
 if ($query->have_posts()) : while ($query->have_posts()) : $query->the_post();
 // Get post attachments
 $args = array();
 $args['post_type'] = 'attachment';
 $args['post_parent'] = $post->ID;
 $attachments = get_posts($args);
+?>
+<?php
 foreach ($attachments as $attachment) :
 if ($attachment->ID != get_post_thumbnail_id($post->ID)) :
 ?>
-	<li>
+	<div class="search-result">
 		<a href="<?php echo wp_get_attachment_url($attachment->ID, false); ?>"<?php $terms = (wp_get_post_terms($post->ID, 'metadata')); foreach ($terms as $term) : if ($term->slug == 'colour-white') : echo ' class="colour-white"'; endif; endforeach; ?>>
 		    <?php if (preg_match('/image/i', $attachment->post_mime_type)) : ?>
 		    	<img src="<?php echo wp_get_attachment_thumb_url($attachment->ID); ?>" width="66" height="66" title="<?php echo $attachment->post_excerpt; ?>" alt="<?php echo $attachment->post_excerpt; ?>" />
@@ -34,15 +32,15 @@
 		<a href="<?php echo wp_get_attachment_url($attachment->ID, false); ?>">
 			Download <?php echo getPostAttachmentExtension($attachment->post_mime_type) . ' (' . getPostAttachmentFilesize(get_attached_file($attachment->ID)) . ')'; ?>
 		</a>
-	</li>
+	</div>
 <?php
 endif;
 endforeach;
 endwhile;
 else :
 ?>
-	<li class="loop-error">Sorry, no results have been found</li>
+	<span class="loop-error">Sorry, no results in Downloads have been found.</span>
 <?php
 endif;
 ?>
-</ul>
\ No newline at end of file
+</ul>

=== modified file 'loop-search-examples.php'
--- loop-search-examples.php	2014-10-21 16:38:46 +0000
+++ loop-search-examples.php	2016-02-05 17:57:30 +0000
@@ -1,36 +1,31 @@
+<h2 class="search-result-subtitle">Results in Examples:</h2>
+<ul class="loop-results search-examples clearfix">
 <?php
-// Get posts
-$args = array();
+
 $args['post_type'] = 'examples';
-if (!empty($search)) {
-	$args['s'] = $search;
-}
 $query = new WP_Query($args);
-?>
-<ul class="loop-results search-examples clearfix">
-<?php
+
 if ($query->have_posts()) : while ($query->have_posts()) : $query->the_post();
 // Get post attachments
 $args = array();
 $args['post_type'] = 'attachment';
 $args['post_parent'] = $post->ID;
 $attachments = get_posts($args);
-echo 'HELLO';
 foreach ($attachments as $attachment) :
 ?>
-	<li>
+	<div class="search-result">
 		<a class="pretty-photo" href="<?php echo wp_get_attachment_url($attachment->ID, false); ?>">
 			<img src="<?php echo wp_get_attachment_thumb_url($attachment->ID); ?>" width="66" height="66" title="<?php echo $attachment->post_excerpt; ?>" alt="<?php echo $attachment->post_excerpt; ?>" />
 		</a>
 		<?php echo $attachment->post_excerpt; ?>
-	</li>
+	</div>
 <?php
 endforeach;
 endwhile;
 else :
 ?>
-	<li class="loop-error">Sorry, no results have been found</li>
+	<span class="loop-error">Sorry, no results in examples have been found.</span>
 <?php
 endif;
 ?>
-</ul>
\ No newline at end of file
+</ul>

=== modified file 'loop-search-guidelines.php'
--- loop-search-guidelines.php	2014-10-21 16:38:46 +0000
+++ loop-search-guidelines.php	2016-02-05 17:57:30 +0000
@@ -1,23 +1,21 @@
+<h2 class="search-result-subtitle">Results in Guidelines:</h2>
 <?php
-// Get posts
-$args = array();
+
 $args['post_type'] = 'page';
-if (!empty($search)) {
-	$args['s'] = $search;
-}
 $query = new WP_Query($args);
-?>
-<ul class="loop-results search-guidelines">
-<?php
-if ($query->have_posts()) : while ($query->have_posts()) : $query->the_post();
-?>
-	<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?> &rsaquo;</a></li>
+
+if ($query->have_posts()) : while ($query->have_posts()) : $query->the_post(); ?>
+	<div class="search-result">
+		<h3 class="search-result-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?> &rsaquo;</a></h3>
+		<span class="search-result-link"><a href="<?php the_permalink(); ?>"><?php the_permalink(); ?></a></span>
+		<span class="search-result-last-updated">Last updated: <?php the_modified_time('F jS, Y');?></span>
+	</div>
+
 <?php
 endwhile;
 else :
 ?>
-	<li class="loop-error">Sorry, no results have been found</li>
+	<span class="loop-error">Sorry, no results in guidelines have been found.</span>
 <?php
 endif;
 ?>
-</ul>
\ No newline at end of file

=== modified file 'template-search.php'
--- template-search.php	2014-10-21 16:38:46 +0000
+++ template-search.php	2016-02-05 17:57:30 +0000
@@ -4,30 +4,37 @@
 */
 $template_body_id = 'search';
 $template_body_class = 'search';
+$args = array();
+if (!empty($search)) {
+	$args['s'] = $search;
+}
 ?>
 
 <?php get_header(); ?>
-<div class="row no-border">
+<div class="row no-border search-results">
 	<div class="twelve-col">
-		<h1>Your search:</h1>
-	</div>
-
-	<div class="four-col">
-		<h2>Guidelines</h2>
-
-		<?php get_template_part('loop', 'search-guidelines'); ?>
-	</div>
-
-	<div class="four-col">
-		<h2>Examples</h2>
-
-		<?php get_template_part('loop', 'search-examples'); ?>
-	</div>
-
-	<div class="four-col last-col">
-		<h2>Downloads</h2>
-
-		<?php get_template_part('loop', 'search-downloads'); ?>
-	</div>
+		<h1>Your search for: "<?php echo $search ?>"</h1>
+	</div>
+
+
+	<section class="search-section twelve-col">
+		<?php
+			get_template_part('loop', 'search-guidelines');
+		?>
+	</section>
+
+	<section class="search-section twelve-col">
+		<?php
+			get_template_part('loop', 'search-examples');
+		?>
+	</section>
+
+	<section class="search-section last-col">
+		<?php
+			get_template_part('loop', 'search-downloads');
+		?>
+	</section>
+
+
 </div>
 <?php get_footer(); ?>