Fix issues with Buefy responsive styles.

- Fix button and input sizing and alignments. - Make settings tabs responsive. - Fix toast and modal overlay issues. - Fix Buefy table top-left/right controls. - Fix 'New' buttons across pages. - Fix search and bulk-select controls on subscribers page.
knadh · Sep 26, 2021 · d3f543c · d3f543c
1 parent e0bf1f1
commit d3f543c
Show file tree

Hide file tree

Showing 9 changed files with 287 additions and 170 deletions.
diff --git a/frontend/src/assets/style.scss b/frontend/src/assets/style.scss
@@ -95,9 +95,6 @@ section {
     background-color: #efefef;
   }
 
-.page-header {
-  min-height: 60px;
-}
 
 /* Two column sidebar+body layout */
 #app {
@@ -209,6 +206,9 @@ body.is-noscroll {
 .editor {
   margin-bottom: 30px;
 
+  .tox .tox-dialog-wrap {
+    z-index: 950;
+  }
   .tox-tinymce {
     box-shadow: 2px 2px 0 #f3f3f3;
     border: 1px solid #e6e6e6;
@@ -266,8 +266,14 @@ body.is-noscroll {
 }
 
 /* Modal */
-.modal {
-  z-index: 1350; // Needs to get above the TinyMCE modal
+.modal-background {
+  background: rgba(255, 255, 255, 0.7);
+}
+.modal-content, .modal.dialog .modal-card {
+  background: $white;
+  box-shadow: 2px 2px 3px #e4e4e4;
+  border: 1px solid #e5e5e5;
+  padding: 0;
 }
 .modal-card-head {
   display: block;
@@ -279,21 +285,45 @@ body.is-noscroll {
   display: none;
 }
 
+/* Table */
+.b-table .level-left {
+  min-width: 60%;
+  display: block;
+
+  .actions .a {
+    display: inline-block;
+    margin-right: 30px;
+  }
+}
+
 
 /* Fix for input colours */
-.button.is-primary {
-  background: $primary;
+.button {
+  &.is-primary {
+    background: $primary;
+
+    &:hover {
+      background: darken($primary, 15%);
+    }
+    &:disabled {
+      background: $grey-light;
+    }
+  }
 
   &:not(.is-small) {
     height: auto;
     padding: 10px 20px;
   }
+}
 
-  &:hover {
-    background: darken($primary, 15%);
+.has-addons {
+  .controls .button.is-primary {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
   }
-  &:disabled {
-    background: $grey-light;
+
+  .input:hover {
+    box-shadow: none;
   }
 }
 
@@ -323,7 +353,11 @@ body.is-noscroll {
   border: 1px solid $grey-lighter;
 }
 
-.input {
+.select:not(.is-multiple) {
+  height: auto;
+}
+
+.input, .select select {
   height: auto;
   padding: 10px 12px;
 }
@@ -442,6 +476,13 @@ body.is-noscroll {
   }
 }
 
+/* Page header */
+.page-header {
+  .buttons {
+    justify-content: flex-end;
+  }
+}
+
 /* Dashboard */
 section.dashboard {
   .title {
@@ -496,13 +537,17 @@ section.lists {
 }
 
 /* Subscribers page */
-.subscribers-controls {
-  padding-bottom: 15px;
-}
-.subscribers-bulk {
-  .actions a {
-    display: inline-block;
-    margin-right: 30px;
+.subscribers {
+  .subscribers-controls .buttons {
+    margin-top: 15px;
+  }
+
+  .toggle-advanced {
+    margin-top: 10px;
+  }
+
+  .b-table {
+    margin-top: 25px;
   }
 }
 
@@ -620,13 +665,6 @@ section.analytics {
   }
 }
 
-/* Campaign */
-section.campaign {
-  header .buttons {
-    justify-content: flex-end;
-  }
-}
-
 /* Media gallery */
 .media-files {
   .thumbs {
@@ -805,25 +843,20 @@ section.campaign {
   }
 }
 
-@media screen and (max-width: 1450px) and (min-width: 769px) {
-  section.campaigns {
-    /* Fold the stats labels until the card view */
-    table tbody td {
-      .fields {
-        label {
-          margin: 0;
-          display: block;
-          text-align: left;
-        }
-        p {
-          margin-bottom: 10px !important;
-        }
-      }
+@media screen and (max-width: 1500px) {
+  .b-table {
+    .top.level {
+      display: block;
     }
   }
+  .b-table .level-left {
+    display: block;
+    width: 100%;
+    min-width: 0;
+  }
 }
 
-@media screen and (max-width: 1023px) {
+@media screen and (max-width: 1100px) {
   html, body {
     overflow-x: auto;
   }
@@ -869,20 +902,58 @@ section.campaign {
     }
   }
 
-  td .tags {
-    display: block;
+  .navbar-burger {
+    display: none;
+  }
 
+  td .tags {
     .tag:not(:last-child) {
       margin-right: 0;
     }
   }
-}
 
-@media screen and (max-width: 840px) {
   section.dashboard label {
     min-width: auto;
   }
-  .table-mobile-sort {
-    margin-top: 15px;
+
+  /* Tabs */
+  nav.tabs.is-boxed ul {
+    display: block;
+    text-align: left;
+    flex-grow: 1;
+
+    li {
+      a {
+        justify-content: left;
+        border: 1px solid $grey-lighter !important;
+      }
+
+      &.is-active a {
+        border-bottom: 1px solid $grey-lighter !important;
+        padding-left: 30px;
+      }
+    }
+  }
+
+  /* Table top-left controls */
+  .b-table .level-left {
+    .actions .a {
+      display: block;
+      margin: 0 0 5px 0;
+    }
+  }
+}
+
+@media screen and (max-width: 850px) {
+  .page-header .buttons {
+    display: block;
+  }
+}
+
+/* On big sizes, keep the header buttons small and non-expanded. */
+@media screen and (min-width: 769px) {
+  .page-header .button {
+    display: inline-block;
+    width: auto;
   }
 }
diff --git a/frontend/src/components/ListSelector.vue b/frontend/src/components/ListSelector.vue
@@ -113,5 +113,11 @@ export default {
       this.selectedItems = JSON.parse(JSON.stringify(this.selected));
     },
   },
+
+  mounted() {
+    if (this.selected) {
+      this.selectedItems = JSON.parse(JSON.stringify(this.selected));
+    }
+  },
 };
 </script>
diff --git a/frontend/src/views/Campaign.vue b/frontend/src/views/Campaign.vue
@@ -1,7 +1,7 @@
 <template>
   <section class="campaign">
-    <header class="columns">
-      <div class="column is-8">
+    <header class="columns page-header">
+      <div class="column is-6">
         <p v-if="isEditing" class="tags">
           <b-tag v-if="isEditing" :class="data.status">
             {{ $t(`campaigns.status.${data.status}`) }}
@@ -18,20 +18,29 @@
         <h4 v-else class="title is-4">{{ $t('campaigns.newCampaign') }}</h4>
       </div>
 
-      <div class="column">
-        <div class="buttons" v-if="isEditing && canEdit">
-          <b-button @click="onSubmit" :loading="loading.campaigns"
-            type="is-primary" icon-left="content-save-outline" data-cy="btn-save">
-            {{ $t('globals.buttons.saveChanges') }}
-          </b-button>
-          <b-button v-if="canStart" @click="startCampaign" :loading="loading.campaigns"
-            type="is-primary" icon-left="rocket-launch-outline" data-cy="btn-start">
-              {{ $t('campaigns.start') }}
-          </b-button>
-          <b-button v-if="canSchedule" @click="startCampaign" :loading="loading.campaigns"
-            type="is-primary" icon-left="clock-start" data-cy="btn-schedule">
-              {{ $t('campaigns.schedule') }}
-          </b-button>
+      <div class="column is-6">
+        <div class="buttons">
+          <b-field grouped v-if="isEditing && canEdit">
+            <b-field expanded>
+              <b-button  expanded @click="onSubmit" :loading="loading.campaigns"
+                type="is-primary" icon-left="content-save-outline" data-cy="btn-save">
+                {{ $t('globals.buttons.saveChanges') }}
+              </b-button>
+            </b-field>
+            <b-field expanded v-if="canStart">
+              <b-button  expanded @click="startCampaign" :loading="loading.campaigns"
+                type="is-primary" icon-left="rocket-launch-outline" data-cy="btn-start">
+                {{ $t('campaigns.start') }}
+              </b-button>
+            </b-field>
+            <b-field expanded v-if="canSchedule">
+              <b-button  expanded @click="startCampaign"
+                :loading="loading.campaigns"
+                type="is-primary" icon-left="clock-start" data-cy="btn-schedule">
+                {{ $t('campaigns.schedule') }}
+              </b-button>
+            </b-field>
+          </b-field>
         </div>
       </div>
     </header>

diff --git a/frontend/src/views/Campaigns.vue b/frontend/src/views/Campaigns.vue
@@ -1,34 +1,48 @@
 <template>
   <section class="campaigns">
-    <header class="columns">
-      <div class="column is-two-thirds">
+    <header class="columns page-header">
+      <div class="column is-10">
         <h1 class="title is-4">{{ $t('globals.terms.campaigns') }}
           <span v-if="!isNaN(campaigns.total)">({{ campaigns.total }})</span>
         </h1>
       </div>
       <div class="column has-text-right">
-        <b-button :to="{name: 'campaign', params:{id: 'new'}}" tag="router-link"
-          type="is-primary" icon-left="plus" data-cy="btn-new">
-          {{ $t('globals.buttons.new') }}
-        </b-button>
+        <b-field expanded>
+          <b-button expanded :to="{name: 'campaign', params:{id: 'new'}}"
+            tag="router-link" class="btn-new"
+            type="is-primary" icon-left="plus" data-cy="btn-new">
+            {{ $t('globals.buttons.new') }}
+          </b-button>
+        </b-field>
       </div>
     </header>
 
-    <form @submit.prevent="getCampaigns">
-      <b-field grouped>
-          <b-input v-model="queryParams.query" name="query"
-            :placeholder="$t('campaigns.queryPlaceholder')" icon="magnify" ref="query"></b-input>
-          <b-button native-type="submit" type="is-primary" icon-left="magnify"></b-button>
-      </b-field>
-    </form>
-
     <b-table
       :data="campaigns.results"
       :loading="loading.campaigns"
       :row-class="highlightedRow"
       paginated backend-pagination pagination-position="both" @page-change="onPageChange"
       :current-page="queryParams.page" :per-page="campaigns.perPage" :total="campaigns.total"
       hoverable backend-sorting @sort="onSort">
+
+      <template #top-left>
+        <div class="columns">
+          <div class="column is-6">
+            <form @submit.prevent="getCampaigns">
+              <div>
+                <b-field>
+                  <b-input v-model="queryParams.query" name="query" expanded
+                    :placeholder="$t('campaigns.queryPlaceholder')" icon="magnify" ref="query" />
+                  <p class="controls">
+                    <b-button native-type="submit" type="is-primary" icon-left="magnify" />
+                  </p>
+                </b-field>
+              </div>
+            </form>
+          </div>
+        </div>
+      </template>
+
       <b-table-column v-slot="props" cell-class="status" field="status"
         :label="$t('globals.fields.status')" width="10%" sortable
         :td-attrs="$utils.tdID" header-class="cy-status">

diff --git a/frontend/src/views/Import.vue b/frontend/src/views/Import.vue
@@ -348,6 +348,13 @@ export default Vue.extend({
 
   mounted() {
     this.pollStatus();
+
+    const ids = this.$utils.parseQueryIDs(this.$route.query.list_id);
+    if (ids.length > 0 && this.lists.results) {
+      this.$nextTick(() => {
+        this.form.lists = this.lists.results.filter((l) => ids.indexOf(l.id) > -1);
+      });
+    }
   },
 });
 </script>