From aaca1c73b1afee66755b09087a0c3e4571fece76 Mon Sep 17 00:00:00 2001
From: sauls8t <saul@documize.com>
Date: Tue, 31 Jul 2018 13:13:29 -0400
Subject: [PATCH] Improve examples for search screen

---
 gui/app/pods/search/template.hbs | 21 ++++++++++++++++++---
 gui/app/styles/view/search.scss  | 19 +++++++++++++++++++
 2 files changed, 37 insertions(+), 3 deletions(-)

diff --git a/gui/app/pods/search/template.hbs b/gui/app/pods/search/template.hbs
index b8073d06..23a73fe1 100644
--- a/gui/app/pods/search/template.hbs
+++ b/gui/app/pods/search/template.hbs
@@ -9,9 +9,24 @@
 	{{#layout/middle-zone-sidebar}}
 		<div id="sidebar" class="sidebar">
 			<h1>Search</h1>
-			<p>a OR b</p>
-			<p>x AND y</p>
-			<p>"phrase mat*"</p>
+			<div class="view-search">
+				<div class="syntax">
+					<div class="example">apple banana</div>
+					<div class="explain">Find rows that contain at least one of the two words</div>
+					<div class="example">+apple +banana</div>
+					<div class="explain">Find rows that contain both words</div>
+					<div class="example">+apple macintosh</div>
+					<div class="explain">Find rows that contain the word "apple", but rank rows higher if they also contain "macintosh"</div>
+					<div class="example">+apple -macintosh</div>
+					<div class="explain">Find rows that contain the word "apple" but not "macintosh"</div>
+					<div class="example">+apple +(&gt;turnover &lt;strudel)</div>
+					<div class="explain">Find rows that contain the words "apple" and "turnover", or "apple" and "strudel" (in any order), but rank "apple turnover" higher than "apple strudel"</div>
+					<div class="example">apple*</div>
+					<div class="explain">Find rows that contain words such as "apple", "apples", "applesauce", or "applet"</div>
+					<div class="example">"some words"</div>
+					<div class="explain">Find rows that contain the exact phrase "some words" (for example, rows that contain "some words of wisdom" but not "some noise words")</div>
+				</div>
+			</div>
 		</div>
 	{{/layout/middle-zone-sidebar}}
 {{/layout/middle-zone}}
diff --git a/gui/app/styles/view/search.scss b/gui/app/styles/view/search.scss
index fbceb6f0..e1d84197 100644
--- a/gui/app/styles/view/search.scss
+++ b/gui/app/styles/view/search.scss
@@ -104,4 +104,23 @@
 			}
 		}
 	}
+
+
+	> .syntax {
+		margin: 20px;
+
+		> .example {
+			margin-top: 10px;
+			font-weight: 600;
+			font-size: 1.1rem;
+			font-style: italic;
+			color: $color-dark;
+		}
+
+		> .explain {
+			margin: 10px 0 20px 0px;
+			font-size: 1.2rem;
+			color: $color-gray;
+		}
+	}
 }