From 9583b4b8d7ae0007ea606768625e92880babfd52 Mon Sep 17 00:00:00 2001
From: Nazar Kanaev <nkanaev@live.com>
Date: Fri, 10 Jul 2020 21:17:01 +0100
Subject: [PATCH] ui style tweaks

---
 template/index.html                 | 21 ++++++++++-----------
 template/static/javascripts/app.js  |  5 ++++-
 template/static/stylesheets/app.css |  5 +++++
 3 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/template/index.html b/template/index.html
index 6d4f012..fb8590c 100644
--- a/template/index.html
+++ b/template/index.html
@@ -85,7 +85,7 @@
                     <input type="radio" name="item" :value="item.id" v-model="itemSelected">
                     <div class="menu-item p-2">
                         <div class="d-flex flex-column">
-                            <div style="line-height: 1" class="d-flex text-muted">
+                            <div style="line-height: 1.2; opacity: .6;" class="d-flex">
                                 <small class="flex-fill text-truncate mr-1">{{feedsById[item.feed_id].title}}</small>
                                 <small class="flex-shrink-0">{{formatDate(item.date)}}</small>
                             </div>
@@ -120,7 +120,7 @@
                     <img src="./static/images/settings.svg" alt="" style="width: 20px; height: 20px;">
                 </button>
             </div>
-            <div v-if="itemSelected" class="px-3 pt-3 pb-5 border-top overflow-auto">
+            <div v-if="itemSelected" class="px-5 pt-3 pb-5 border-top overflow-auto">
                 <h3>{{itemSelectedDetails.title}}</h3>
                 <div class="text-muted">
                     <div>{{ feedsById[itemSelectedDetails.feed_id].title }}</div>
@@ -228,16 +228,15 @@
                 </div>
             </div>
             <div v-else-if="settings=='import'">
-                <form id="opml-import-form" enctype="multipart/form-data">
-                    <label for="opml-import">Import Subscription</label>
-                    <div class="custom-file">
-                        <input type="file" class="custom-file-input" id="opml-import" @change="importOPML" name="opml">
-                        <label class="custom-file-label" for="opml-import">Choose file</label>
-                    </div>
+                <form class="d-inline-block m" id="opml-import-form" enctype="multipart/form-data" style="position: relative;">
+                    <input type="file"
+                           id="opml-import"
+                           @change="importOPML"
+                           name="opml"
+                           style="opacity: 0; width: 1px; height: 0; position: absolute;">
+                    <label class="btn btn-default m-0" for="opml-import">Import subscriptions</label>
                 </form>
-                <label class="mt-3">Export Subscriptions</label>
-                <br>
-                <a class="btn btn-default" href="/opml/export" target="_blank">Download</a>
+                <a class="btn btn-default" href="/opml/export">Export subscriptions</a>
             </div>
         </div>
     </div>
diff --git a/template/static/javascripts/app.js b/template/static/javascripts/app.js
index 394ad23..ec273d9 100644
--- a/template/static/javascripts/app.js
+++ b/template/static/javascripts/app.js
@@ -241,8 +241,11 @@ var vm = new Vue({
       api.items.update(item.id, {status: item.status})
     },
     importOPML: function(event) {
+      var input = event.target
       var form = document.querySelector('#opml-import-form')
-      api.upload_opml(form)
+      api.upload_opml(form).then(function() {
+        input.value = ''
+      })
     },
   }
 })
diff --git a/template/static/stylesheets/app.css b/template/static/stylesheets/app.css
index 9607d67..4088250 100644
--- a/template/static/stylesheets/app.css
+++ b/template/static/stylesheets/app.css
@@ -203,6 +203,11 @@ select.form-control:not([multiple]):not([size]) {
   box-shadow: none;
 }
 
+.content {
+  font-size: 1.2rem;
+  line-height: 1.6;
+}
+
 .content a:hover {
   text-decoration: none;
 }