From ec3ee46088cb6b20d9bc8b96d36da672dc100039 Mon Sep 17 00:00:00 2001
From: Nazar Kanaev <nkanaev@live.com>
Date: Wed, 29 Jul 2020 11:22:31 +0100
Subject: [PATCH] search ui

---
 template/index.html                 |  9 ++++-----
 template/static/stylesheets/app.css | 31 +++++++++++++++++++++++++++++
 2 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/template/index.html b/template/index.html
index d8f20bc..e1f2ac4 100644
--- a/template/index.html
+++ b/template/index.html
@@ -123,12 +123,11 @@
         <div class="vh-100 position-relative d-flex flex-column border-right flex-shrink-0"  :style="{width: itemListWidth+'px'}">
             <drag :width="itemListWidth" @resize="resizeItemList"></drag>
             <div class="px-2 toolbar d-flex align-items-center">
-                <button class="toolbar-item">
+                <div class="input-icon flex-grow-1">
                     <span class="icon">{% inline "search.svg" %}</span>
-                </button>
-                <input class="d-block toolbar-search" type="" v-model="itemSearch">
-                <div class="flex-grow-1 noselect">&nbsp;</div>
-                <button class="toolbar-item" @click="markItemsRead()" v-if="filterSelected == 'unread'">
+                    <input class="d-block toolbar-search" type="" v-model="itemSearch">
+                </div>
+                <button class="toolbar-item ml-2" @click="markItemsRead()" v-if="filterSelected == 'unread'">
                     <span class="icon">{% inline "check.svg" %}</span>
                 </button>
             </div>
diff --git a/template/static/stylesheets/app.css b/template/static/stylesheets/app.css
index 9ae4352..a5a1b60 100644
--- a/template/static/stylesheets/app.css
+++ b/template/static/stylesheets/app.css
@@ -313,6 +313,37 @@ select.form-control:not([multiple]):not([size]) {
   cursor: col-resize;
 }
 
+.input-icon {
+  position: relative;
+}
+
+.input-icon .icon {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  height: 100%;
+  width: 2rem;
+  justify-content: center;
+  pointer-events: none;
+}
+
+.input-icon input {
+  padding-left: 2rem !important;
+  width: 100%;
+}
+
+.toolbar-search {
+  border: none;
+  border-radius: 3px;
+  padding: .25rem .5rem;
+  line-height: 1;
+}
+
+.toolbar-search:hover, .toolbar-search:focus {
+  background-color: #f3f3f3;
+  outline: none;
+}
+
 /* content */
 
 .content {