From a4262951680ff4a34ab0b7a557e38ef06bc268f2 Mon Sep 17 00:00:00 2001
From: Rares Visalom <rares.visalom@gmail.com>
Date: Tue, 20 Jun 2017 22:13:48 +0300
Subject: [PATCH] search: Make the results take more horizontal space

In order to make gnome-shell search functionality fit on
smaller screens, like those of devices, search results
need to take advantage of more horizontal space so that
any extra space can be used efficiently.

In order to do so, change the layout of the ListSearchResult
class from a vertical one, to a horizontal one and also
decrease the padding of the list-search-result-content css
class.

https://bugzilla.gnome.org/show_bug.cgi?id=749957
---
 data/theme/gnome-shell-high-contrast.css |  6 ++--
 data/theme/gnome-shell-sass              |  2 +-
 data/theme/gnome-shell.css               |  6 ++--
 js/ui/search.js                          | 35 ++++++++++++------------
 4 files changed, 25 insertions(+), 24 deletions(-)

diff --git a/data/theme/gnome-shell-high-contrast.css b/data/theme/gnome-shell-high-contrast.css
index a388ef041..d639e3094 100644
--- a/data/theme/gnome-shell-high-contrast.css
+++ b/data/theme/gnome-shell-high-contrast.css
@@ -1179,12 +1179,12 @@ StScrollBar {
   height: 1px; }
 
 .list-search-result-content {
-  spacing: 12px;
-  padding: 12px; }
+  spacing: 30px; }
 
 .list-search-result-title {
   font-size: 1.5em;
-  color: #e2e2df; }
+  color: #e2e2df;
+  spacing: 12px; }
 
 .list-search-result-description {
   color: #cacac4; }
diff --git a/data/theme/gnome-shell-sass b/data/theme/gnome-shell-sass
index 4de529843..6a5935538 160000
--- a/data/theme/gnome-shell-sass
+++ b/data/theme/gnome-shell-sass
@@ -1 +1 @@
-Subproject commit 4de529843779532db8e5aa76b4e8a74f163e79c5
+Subproject commit 6a5935538568835462fa853f746620967d047bcf
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 6f9f20132..6d5559a2d 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -1179,12 +1179,12 @@ StScrollBar {
   height: 1px; }
 
 .list-search-result-content {
-  spacing: 12px;
-  padding: 12px; }
+  spacing: 30px; }
 
 .list-search-result-title {
   font-size: 1.5em;
-  color: #e2e2df; }
+  color: #e2e2df;
+  spacing: 12px; }
 
 .list-search-result-description {
   color: #cacac4; }
diff --git a/js/ui/search.js b/js/ui/search.js
index 4d29e59ef..0dd4870ff 100644
--- a/js/ui/search.js
+++ b/js/ui/search.js
@@ -84,33 +84,34 @@ const ListSearchResult = new Lang.Class({
                                          vertical: false });
         this.actor.set_child(content);
 
+        let titleBox = new St.BoxLayout({ style_class: 'list-search-result-title' });
+
+        content.add(titleBox, { x_fill: true,
+                                y_fill: false,
+                                x_align: St.Align.START,
+                                y_align: St.Align.MIDDLE });
+
         // An icon for, or thumbnail of, content
         let icon = this.metaInfo['createIcon'](this.ICON_SIZE);
         if (icon) {
-            content.add(icon);
+            titleBox.add(icon);
         }
 
-        let details = new St.BoxLayout({ vertical: true });
-        content.add(details, { x_fill: true,
-                               y_fill: false,
-                               x_align: St.Align.START,
-                               y_align: St.Align.MIDDLE });
-
-        let title = new St.Label({ style_class: 'list-search-result-title',
-                                   text: this.metaInfo['name'] })
-        details.add(title, { x_fill: false,
-                             y_fill: false,
-                             x_align: St.Align.START,
-                             y_align: St.Align.START });
+        let title = new St.Label({ text: this.metaInfo['name'] });
+        titleBox.add(title, { x_fill: false,
+                              y_fill: false,
+                              x_align: St.Align.START,
+                              y_align: St.Align.MIDDLE });
         this.actor.label_actor = title;
 
         if (this.metaInfo['description']) {
-            let description = new St.Label({ style_class: 'list-search-result-description' });
-            description.clutter_text.set_markup(this.metaInfo['description']);
-            details.add(description, { x_fill: false,
+            let description = new St.Label({ style_class: 'list-search-result-description',
+                                             text: this.metaInfo['description'] });
+
+            content.add(description, { x_fill: false,
                                        y_fill: false,
                                        x_align: St.Align.START,
-                                       y_align: St.Align.END });
+                                       y_align: St.Align.MIDDLE });
         }
     }
 });