Polish UI elements and fix styling issues.

- Change global font to Inter. - Introduce global top nav bar. - Restyle form inputs to have inline labels. - Restyle form inputs to have inline lengt counters. - Override glitchy Buefy animations (sidebar, toast etc.) - Fix tag alignment inside tables in responsive view. - Refactor import page UI. - Miscellaneous styling fixes. - Add missing Fontello icons.
an0nfunc · Jul 26, 2020 · e2e65b1 · e2e65b1
1 parent 942eb7c
commit e2e65b1
Show file tree

Hide file tree

Showing 21 changed files with 589 additions and 422 deletions.
diff --git a/README.md b/README.md
@@ -9,9 +9,10 @@ listmonk is a standalone, self-hosted, newsletter and mailing list manager. It i
 ### Installation and use
 
 - Download the [latest release](https://github.com/knadh/listmonk/releases) for your platform and extract the listmonk binary. For example: `tar -C $HOME/listmonk -xzf listmonk_$VERSION_$OS_$ARCH.tar.gz`
-- Navigate to the directory containing the binary (`cd $HOME/listmonk`) and run `./listmonk --new-config` to generate a sample `config.toml` and add your configuration (SMTP and Postgres DB credentials primarily).
+- Navigate to the directory containing the binary (`cd $HOME/listmonk`) and run `./listmonk --new-config` to generate a sample `config.toml` and add the DB configuration.
 - `./listmonk --install` to setup the DB.
 - Run `./listmonk` and visit `http://localhost:9000`.
+- Visit the `Settings` page to configure your instance.
 - Since there is no user auth yet, it's best to put listmonk behind a proxy like Nginx and setup basicauth on all endpoints except for the few endpoints that need to be public. Here is a [sample nginx config](https://github.com/knadh/listmonk/wiki/Production-Nginx-config) for production use.
 
 ### Configuration and customization

diff --git a/frontend/fontello/config.json b/frontend/fontello/config.json
@@ -440,6 +440,48 @@
         "content-save-outline"
       ]
     },
+    {
+      "uid": "80491c76df0c066833e0f8211903d37c",
+      "css": "minus",
+      "code": 59423,
+      "src": "custom_icons",
+      "selected": true,
+      "svg": {
+        "path": "M791 541H209V459H791V541Z",
+        "width": 1000
+      },
+      "search": [
+        "minus"
+      ]
+    },
+    {
+      "uid": "a7a02467d65aabd7cd61903ea3e855b6",
+      "css": "arrow-up",
+      "code": 59424,
+      "src": "custom_icons",
+      "selected": true,
+      "svg": {
+        "path": "M541 834H459V334L228.5 562.5 169.9 503.9 500 173.8 830.1 503.9 771.5 562.5 541 334V834Z",
+        "width": 1000
+      },
+      "search": [
+        "arrow-up"
+      ]
+    },
+    {
+      "uid": "a9b97a98d1427ca1c4f90b2f8f4f03c1",
+      "css": "arrow-down",
+      "code": 59425,
+      "src": "custom_icons",
+      "selected": true,
+      "svg": {
+        "path": "M459 166H541V666L771.5 437.5 830.1 496.1 500 826.2 169.9 496.1 228.5 437.5 459 666V166Z",
+        "width": 1000
+      },
+      "search": [
+        "arrow-down"
+      ]
+    },
     {
       "uid": "f4ad3f6d071a0bfb3a8452b514ed0892",
       "css": "vector-square",
@@ -1364,20 +1406,6 @@
         "arrow-collapse-all"
       ]
     },
-    {
-      "uid": "a9b97a98d1427ca1c4f90b2f8f4f03c1",
-      "css": "arrow-down",
-      "code": 983109,
-      "src": "custom_icons",
-      "selected": false,
-      "svg": {
-        "path": "M459 166H541V666L771.5 437.5 830.1 496.1 500 826.2 169.9 496.1 228.5 437.5 459 666V166Z",
-        "width": 1000
-      },
-      "search": [
-        "arrow-down"
-      ]
-    },
     {
       "uid": "578692c5a0b505985bf797ee8ebce545",
       "css": "arrow-down-thick",
@@ -1686,20 +1714,6 @@
         "arrow-top-left"
       ]
     },
-    {
-      "uid": "a7a02467d65aabd7cd61903ea3e855b6",
-      "css": "arrow-up",
-      "code": 983133,
-      "src": "custom_icons",
-      "selected": false,
-      "svg": {
-        "path": "M541 834H459V334L228.5 562.5 169.9 503.9 500 173.8 830.1 503.9 771.5 562.5 541 334V834Z",
-        "width": 1000
-      },
-      "search": [
-        "arrow-up"
-      ]
-    },
     {
       "uid": "00e74cb9bfa86a1b90b39d2d8132c3b1",
       "css": "arrow-up-thick",
@@ -12774,20 +12788,6 @@
         "minecraft"
       ]
     },
-    {
-      "uid": "80491c76df0c066833e0f8211903d37c",
-      "css": "minus",
-      "code": 983924,
-      "src": "custom_icons",
-      "selected": false,
-      "svg": {
-        "path": "M791 541H209V459H791V541Z",
-        "width": 1000
-      },
-      "search": [
-        "minus"
-      ]
-    },
     {
       "uid": "4dae8d34e12ee29474c244f25a6cbc1c",
       "css": "minus-box",

diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
     <link rel="icon" href="<%= BASE_URL %>frontend/favicon.png" />
-    <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,600" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css?family=Inter:400,600" rel="stylesheet" />
     <title><%= htmlWebpackPlugin.options.title %></title>
     <script src="<%= BASE_URL %>api/config.js"></script>
   </head>

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -1,93 +1,103 @@
 <template>
   <div id="app">
-    <section class="sidebar">
-      <b-sidebar
-        type="is-white"
-        position="static"
-        mobile="reduce"
-        :fullheight="true"
-        :open="true"
-        :can-cancel="false"
-      >
-        <div>
+    <b-navbar :fixed-top="true">
+        <template slot="brand">
           <div class="logo">
-            <a href="/"><img class="full" src="@/assets/logo.svg"/></a>
-            <img class="favicon" src="@/assets/favicon.png"/>
-            <p class="is-size-7 has-text-grey version">{{ version }}</p>
+            <router-link :to="{name: 'dashboard'}">
+              <img class="full" src="@/assets/logo.svg"/>
+              <img class="favicon" src="@/assets/favicon.png"/>
+            </router-link>
+          </div>
+        </template>
+        <template slot="end">
+            <b-navbar-item tag="div"></b-navbar-item>
+        </template>
+    </b-navbar>
+
+    <div class="wrapper">
+      <section class="sidebar">
+        <b-sidebar
+          position="static"
+          mobile="reduce"
+          :fullheight="true"
+          :open="true"
+          :can-cancel="false"
+        >
+          <div>
+            <b-menu :accordion="false">
+              <b-menu-list>
+                <b-menu-item :to="{name: 'dashboard'}" tag="router-link"
+                  :active="activeItem.dashboard"
+                  icon="view-dashboard-variant-outline" label="Dashboard">
+                </b-menu-item><!-- dashboard -->
+
+                <b-menu-item :expanded="activeGroup.lists"
+                  icon="format-list-bulleted-square" label="Lists">
+                  <b-menu-item :to="{name: 'lists'}" tag="router-link"
+                    :active="activeItem.lists"
+                    icon="format-list-bulleted-square" label="All lists"></b-menu-item>
+
+                  <b-menu-item :to="{name: 'forms'}" tag="router-link"
+                    :active="activeItem.forms"
+                    icon="newspaper-variant-outline" label="Forms"></b-menu-item>
+                </b-menu-item><!-- lists -->
+
+                <b-menu-item :expanded="activeGroup.subscribers"
+                  icon="account-multiple" label="Subscribers">
+                  <b-menu-item :to="{name: 'subscribers'}" tag="router-link"
+                    :active="activeItem.subscribers"
+                    icon="account-multiple" label="All subscribers"></b-menu-item>
+
+                  <b-menu-item :to="{name: 'import'}" tag="router-link"
+                    :active="activeItem.import"
+                    icon="file-upload-outline" label="Import"></b-menu-item>
+                </b-menu-item><!-- subscribers -->
+
+                <b-menu-item :expanded="activeGroup.campaigns"
+                    icon="rocket-launch-outline" label="Campaigns">
+                  <b-menu-item :to="{name: 'campaigns'}" tag="router-link"
+                    :active="activeItem.campaigns"
+                    icon="rocket-launch-outline" label="All campaigns"></b-menu-item>
+
+                  <b-menu-item :to="{name: 'campaign', params: {id: 'new'}}" tag="router-link"
+                    :active="activeItem.campaign"
+                    icon="plus" label="Create new"></b-menu-item>
+
+                  <b-menu-item :to="{name: 'media'}" tag="router-link"
+                    :active="activeItem.media"
+                    icon="image-outline" label="Media"></b-menu-item>
+
+                  <b-menu-item :to="{name: 'templates'}" tag="router-link"
+                    :active="activeItem.templates"
+                    icon="file-image-outline" label="Templates"></b-menu-item>
+                </b-menu-item><!-- campaigns -->
+
+                <b-menu-item :to="{name: 'settings'}" tag="router-link"
+                  :active="activeItem.settings"
+                  icon="cog-outline" label="Settings"></b-menu-item>
+              </b-menu-list>
+            </b-menu>
+          </div>
+        </b-sidebar>
+      </section>
+      <!-- sidebar-->
+
+      <!-- body //-->
+      <div class="main">
+        <div class="global-notices" v-if="serverConfig.needsRestart">
+          <div v-if="serverConfig.needsRestart" class="notification is-danger">
+            Settings have changed. Pause all running campaigns and restart the app
+             &mdash;
+            <b-button class="is-primary" size="is-small"
+              @click="$utils.confirm(
+                'Ensure running campaigns are paused. Restart?', reloadApp)">
+                Restart
+            </b-button>
           </div>
-          <b-menu :accordion="false">
-            <b-menu-list>
-              <b-menu-item :to="{name: 'dashboard'}" tag="router-link"
-                :active="activeItem.dashboard"
-                icon="view-dashboard-variant-outline" label="Dashboard">
-              </b-menu-item><!-- dashboard -->
-
-              <b-menu-item :expanded="activeGroup.lists"
-                icon="format-list-bulleted-square" label="Lists">
-                <b-menu-item :to="{name: 'lists'}" tag="router-link"
-                  :active="activeItem.lists"
-                  icon="format-list-bulleted-square" label="All lists"></b-menu-item>
-
-                <b-menu-item :to="{name: 'forms'}" tag="router-link"
-                  :active="activeItem.forms"
-                  icon="newspaper-variant-outline" label="Forms"></b-menu-item>
-              </b-menu-item><!-- lists -->
-
-              <b-menu-item :expanded="activeGroup.subscribers"
-                icon="account-multiple" label="Subscribers">
-                <b-menu-item :to="{name: 'subscribers'}" tag="router-link"
-                  :active="activeItem.subscribers"
-                  icon="account-multiple" label="All subscribers"></b-menu-item>
-
-                <b-menu-item :to="{name: 'import'}" tag="router-link"
-                  :active="activeItem.import"
-                  icon="file-upload-outline" label="Import"></b-menu-item>
-              </b-menu-item><!-- subscribers -->
-
-              <b-menu-item :expanded="activeGroup.campaigns"
-                  icon="rocket-launch-outline" label="Campaigns">
-                <b-menu-item :to="{name: 'campaigns'}" tag="router-link"
-                  :active="activeItem.campaigns"
-                  icon="rocket-launch-outline" label="All campaigns"></b-menu-item>
-
-                <b-menu-item :to="{name: 'campaign', params: {id: 'new'}}" tag="router-link"
-                  :active="activeItem.campaign"
-                  icon="plus" label="Create new"></b-menu-item>
-
-                <b-menu-item :to="{name: 'media'}" tag="router-link"
-                  :active="activeItem.media"
-                  icon="image-outline" label="Media"></b-menu-item>
-
-                <b-menu-item :to="{name: 'templates'}" tag="router-link"
-                  :active="activeItem.templates"
-                  icon="file-image-outline" label="Templates"></b-menu-item>
-              </b-menu-item><!-- campaigns -->
-
-              <b-menu-item :to="{name: 'settings'}" tag="router-link"
-                :active="activeItem.settings"
-                icon="cog-outline" label="Settings"></b-menu-item>
-            </b-menu-list>
-          </b-menu>
-        </div>
-      </b-sidebar>
-    </section>
-    <!-- sidebar-->
-
-    <!-- body //-->
-    <div class="main">
-      <div class="global-notices" v-if="serverConfig.needsRestart">
-        <div v-if="serverConfig.needsRestart" class="notification is-danger">
-          Settings have changed. Pause all running campaigns and restart the app
-           &mdash;
-          <b-button class="is-primary" size="is-small"
-            @click="$utils.confirm(
-              'Ensure running campaigns are paused. Restart?', reloadApp)">
-              Restart
-          </b-button>
         </div>
-      </div>
 
-      <router-view :key="$route.fullPath" />
+        <router-view :key="$route.fullPath" />
+      </div>
     </div>
 
     <b-loading v-if="!isLoaded" active>

diff --git a/frontend/src/assets/buefy.scss b/frontend/src/assets/buefy.scss
@@ -6,6 +6,7 @@
 @import "~bulma/sass/components/menu";
 @import "~bulma/sass/components/message";
 @import "~bulma/sass/components/modal";
+@import "~bulma/sass/components/navbar";
 @import "~bulma/sass/components/pagination";
 @import "~bulma/sass/components/tabs";
 @import "~bulma/sass/form/_all";

diff --git a/frontend/src/assets/icons/fontello.css b/frontend/src/assets/icons/fontello.css
@@ -71,3 +71,6 @@
 .mdi-chevron-right:before { content: '\e81c'; } /* '' */
 .mdi-chevron-left:before { content: '\e81d'; } /* '' */
 .mdi-content-save-outline:before { content: '\e81e'; } /* '' */
+.mdi-minus:before { content: '\e81f'; } /* '' */
+.mdi-arrow-up:before { content: '\e820'; } /* '' */
+.mdi-arrow-down:before { content: '\e821'; } /* '' */
diff --git a/frontend/src/assets/icons/fontello.woff2 b/frontend/src/assets/icons/fontello.woff2