From 8715f65602f5fede9c789eedca49438a24d81953 Mon Sep 17 00:00:00 2001
From: Nazar Kanaev <nkanaev@live.com>
Date: Mon, 27 Jul 2020 14:56:52 +0100
Subject: [PATCH] ui tweaks

---
 template/index.html                 | 27 +++++++++++----------------
 template/static/stylesheets/app.css | 21 ++++++++++++++++++++-
 2 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/template/index.html b/template/index.html
index 90cba1a..5bf28f1 100644
--- a/template/index.html
+++ b/template/index.html
@@ -173,7 +173,8 @@
         </div>
         <b-modal id="settings-modal" hide-header hide-footer lazy>
             <div v-if="settings=='create'">
-                <form action="" @submit.prevent="createFeed(event)">
+                <p class="cursor-default"><b>New Feed</b></p>
+                <form action="" @submit.prevent="createFeed(event)" class="mt-4">
                     <label for="feed-url">URL</label>
                     <input id="feed-url" name="url" type="url" class="form-control" required autocomplete="off">
                     <label for="feed-folder" class="mt-3">Folder</label>
@@ -185,20 +186,13 @@
                 </form>
             </div>
             <div v-else-if="settings=='manage'">
-                <div class="mb-5">
-                    <form action="" @submit.prevent="createFolder(event)">
-                        <label for="settings-new-folder">New Folder</label>
-                        <div class="input-group">
-                            <input id="settings-new-folder" type="text" class="form-control" name="title" required autocomplete="off">
-                            <div class="input-group-append">
-                                <button class="btn btn-default" type="submit">Add</button>
-                            </div>
+                <p class="cursor-default"><b>Manage Feeds</b></p>
+                <div v-for="folder in foldersWithFeeds" class="mt-4" :key="folder.id">
+                    <div class="list-row d-flex align-items-center">
+                        <div class="w-100 text-truncate" v-if="folder.id">
+                            <span class="icon mr-2">{% inline "folder.svg" %}</span>
+                            {{ folder.title }}
                         </div>
-                    </form>
-                </div>
-                <div v-for="folder in foldersWithFeeds" class="mb-4" :key="folder.id">
-                    <div class="d-flex align-items-center">
-                        <div class="w-100" v-if="folder.id"><b>{{ folder.title }}</b></div>
                         <div class="flex-shrink-0" v-if="folder.id">
                             <b-dropdown right no-caret lazy="true" variant="link" class="settings-dropdown" toggle-class="text-decoration-none">
                                 <template v-slot:button-content>
@@ -214,8 +208,9 @@
                             </b-dropdown>
                         </div>
                     </div>
-                    <div v-for="feed in folder.feeds" class="d-flex align-items-center" :key="feed.id">
-                        <div class="w-100">
+                    <div v-for="feed in folder.feeds" class="list-row d-flex align-items-center" :key="feed.id">
+                        <div class="w-100 text-truncate">
+                            <span class="icon mr-2">{% inline "rss.svg" %}</span>
                             {{ feed.title }}
                         </div>
                         <div class="flex-shrink-0">
diff --git a/template/static/stylesheets/app.css b/template/static/stylesheets/app.css
index f54fe90..be486d2 100644
--- a/template/static/stylesheets/app.css
+++ b/template/static/stylesheets/app.css
@@ -30,13 +30,15 @@ select.form-control {
 }
 
 select.form-control:not([multiple]):not([size]) {
+  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
   background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right .35rem center/.6rem .6rem;
   padding-right: 1.2rem;
+  cursor: pointer;
 }
 
 .form-control:focus {
   border-color: var(--color-primary);
-  box-shadow: 0 0 0 2px rgba(0,123,255,.25), inset 0 1px 1px rgba(16,22,26,.2);
+  box-shadow: none;  /*0 0 0 2px rgba(0,123,255,.25), inset 0 1px 1px rgba(16,22,26,.2);*/
 }
 
 .btn:focus {
@@ -226,6 +228,23 @@ select.form-control:not([multiple]):not([size]) {
   box-shadow: none;
 }
 
+.btn-default:focus {
+  border-color: var(--color-primary);
+}
+
+.list-row {
+  padding-left: .5rem;
+  padding-right: .5rem;
+  margin-left: -.5rem;
+  margin-right: -.5rem;
+  border-radius: 3px;
+  cursor: default;
+}
+
+.list-row:hover {
+  background-color: #f8f9fa;
+}
+
 .toolbar {
   min-height: 2rem !important;
   max-height: 2rem !important;