redesign

template/static/images/download.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-square"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-download"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>

template/static/images/plus.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>

template/static/javascripts/app.js

@@ -355,5 +355,9 @@ var vm = new Vue({
         })
       }
     },
+    showSettings: function(settings) {
+      this.settings = settings
+      this.$bvModal.show('settings-modal')
+    },
   }
 })

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;
 }