From 8574c7ddb5126b3478aac9957694f5a9f52e90a8 Mon Sep 17 00:00:00 2001 From: Nazar Kanaev Date: Mon, 27 Jul 2020 12:43:06 +0100 Subject: [PATCH] redesign --- template/index.html | 150 +++++++++--------- .../images/{plus-square.svg => download.svg} | 2 +- template/static/images/plus.svg | 1 + template/static/javascripts/app.js | 4 + template/static/stylesheets/app.css | 38 ++++- 5 files changed, 116 insertions(+), 79 deletions(-) rename template/static/images/{plus-square.svg => download.svg} (51%) create mode 100644 template/static/images/plus.svg diff --git a/template/index.html b/template/index.html index b86e70f..90cba1a 100644 --- a/template/index.html +++ b/template/index.html @@ -9,17 +9,44 @@
+
-
+
+ {% inline "anchor.svg" %} +
 
+ + + + + {% inline "plus.svg" %} + New Feed + + + {% inline "list.svg" %} + Manage Feeds + + + + + + + + {% inline "upload.svg" %} + Export + + +
+
- +
+
 
-
@@ -101,29 +137,24 @@
+
-
-
- - - - {% inline "external-link.svg" %} - - -
-
 
- + + + {% inline "external-link.svg" %} + +
@@ -141,26 +172,6 @@
-
@@ -174,6 +185,17 @@
+
+
+ +
+ +
+ +
+
+
+
{{ folder.title }}
@@ -182,6 +204,7 @@ + {{folder.title}} Rename {% inline "more-vertical.svg" %} + {{feed.title}} Rename Move to... @@ -222,28 +246,6 @@
-
-
- -
- -
- -
-
-
-
- -
-
- - -
- Export subscriptions
diff --git a/template/static/images/plus-square.svg b/template/static/images/download.svg similarity index 51% rename from template/static/images/plus-square.svg rename to template/static/images/download.svg index c380e24..76767a9 100644 --- a/template/static/images/plus-square.svg +++ b/template/static/images/download.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/template/static/images/plus.svg b/template/static/images/plus.svg new file mode 100644 index 0000000..703c5b7 --- /dev/null +++ b/template/static/images/plus.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/template/static/javascripts/app.js b/template/static/javascripts/app.js index 824958a..688479a 100644 --- a/template/static/javascripts/app.js +++ b/template/static/javascripts/app.js @@ -355,5 +355,9 @@ var vm = new Vue({ }) } }, + showSettings: function(settings) { + this.settings = settings + this.$bvModal.show('settings-modal') + }, } }) diff --git a/template/static/stylesheets/app.css b/template/static/stylesheets/app.css index d08ca4c..6c01fa3 100644 --- a/template/static/stylesheets/app.css +++ b/template/static/stylesheets/app.css @@ -11,7 +11,7 @@ body { } .wrapper { - max-width: 1368px; + max-width: 1440px; margin: 0 auto; } @@ -45,6 +45,10 @@ select.form-control:not([multiple]):not([size]) { .dropdown-header { cursor: default; + max-width: 180px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } .dropdown-toggle-no-caret:after { @@ -69,6 +73,14 @@ select.form-control:not([multiple]):not([size]) { padding-right: 1rem; } +.settings-dropdown .dropdown-item:focus { + outline: none; +} + +.settings-dropdown.large .dropdown-item { + padding: .5rem 1rem; +} + .dropdown-danger .dropdown-item { color: #dc3545!important; } @@ -100,17 +112,23 @@ select.form-control:not([multiple]):not([size]) { background-color: transparent; } +.b-dropdown-form:focus { + outline: none; +} + /* custom elements */ .icon { height: 1rem; width: 1rem; + line-height: 1; + max-height: 1rem; } .icon > svg { width: 1rem; height: 1rem; - display: block; + vertical-align: text-top; } .feed-icon { @@ -209,8 +227,8 @@ select.form-control:not([multiple]):not([size]) { } .toolbar { - height: 2rem !important; min-height: 2rem !important; + max-height: 2rem !important; } .toolbar-item { @@ -221,8 +239,8 @@ select.form-control:not([multiple]):not([size]) { border: 1px solid transparent; padding: .25rem .5rem; font-size: 1rem; - line-height: 2; border-radius: .25rem; + line-height: 1; color: inherit; text-align: center; @@ -245,12 +263,24 @@ select.form-control:not([multiple]):not([size]) { cursor: not-allowed; } +.cursor-pointer { + cursor: pointer; +} + +.cursor-default { + cursor: default; +} + /* content */ .content { line-height: 1.5; } +.content img { + max-width: 100%; +} + .content a:hover { text-decoration: none; }