From dea4d185ae4eb1bf40805444e341fe6385c3d87e Mon Sep 17 00:00:00 2001 From: Kailash Nadh Date: Sun, 23 May 2021 14:32:56 +0530 Subject: [PATCH] Upgrade Vue and Buefy UI lib. - Vue 2.6 introduces "v-slot" which Buefy 0.9.7 uses. - Refactor all `` and `` instances to work with the new `v-slot` snytax. - Refactor `` and class attributes to work wit hthe new syntax. - Fix Buefy scss setup to work with the update. - Fix sidebar responsive view to work with the update. --- frontend/package.json | 2 +- frontend/src/assets/buefy.scss | 44 ---- frontend/src/assets/style.scss | 9 +- frontend/src/utils.js | 4 + frontend/src/views/Campaigns.vue | 332 ++++++++++++++--------------- frontend/src/views/Lists.vue | 147 ++++++------- frontend/src/views/Subscribers.vue | 137 ++++++------ frontend/src/views/Templates.vue | 119 ++++++----- frontend/yarn.lock | 18 +- 9 files changed, 386 insertions(+), 426 deletions(-) delete mode 100644 frontend/src/assets/buefy.scss diff --git a/frontend/package.json b/frontend/package.json index 50667926..34aec1ed 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -10,7 +10,7 @@ }, "dependencies": { "axios": "^0.21.1", - "buefy": "^0.8.20", + "buefy": "^0.9.7", "c3": "^0.7.18", "codeflask": "^1.4.1", "core-js": "^3.6.5", diff --git a/frontend/src/assets/buefy.scss b/frontend/src/assets/buefy.scss deleted file mode 100644 index 375b7f7e..00000000 --- a/frontend/src/assets/buefy.scss +++ /dev/null @@ -1,44 +0,0 @@ -@import "~bulma/sass/base/_all"; -@import "~bulma/sass/elements/_all"; -@import "~bulma/sass/components/card"; -@import "~bulma/sass/components/dropdown"; -@import "~bulma/sass/components/level"; -@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"; -@import "~bulma/sass/grid/columns"; -@import "~bulma/sass/grid/tiles"; -@import "~bulma/sass/layout/section"; -@import "~bulma/sass/layout/footer"; - -@import "~buefy/src/scss/utils/_all"; -@import "~buefy/src/scss/components/_autocomplete"; -@import "~buefy/src/scss/components/_carousel"; -@import "~buefy/src/scss/components/_checkbox"; -@import "~buefy/src/scss/components/_datepicker"; -@import "~buefy/src/scss/components/_dialog"; -@import "~buefy/src/scss/components/_dropdown"; -@import "~buefy/src/scss/components/_form"; -@import "~buefy/src/scss/components/_icon"; -@import "~buefy/src/scss/components/_loading"; -@import "~buefy/src/scss/components/_menu"; -@import "~buefy/src/scss/components/_message"; -@import "~buefy/src/scss/components/_modal"; -@import "~buefy/src/scss/components/_pagination"; -@import "~buefy/src/scss/components/_notices"; -@import "~buefy/src/scss/components/_progress"; -@import "~buefy/src/scss/components/_radio"; -@import "~buefy/src/scss/components/_select"; -@import "~buefy/src/scss/components/_sidebar"; -@import "~buefy/src/scss/components/_switch"; -@import "~buefy/src/scss/components/_table"; -@import "~buefy/src/scss/components/_tabs"; -@import "~buefy/src/scss/components/_tag"; -@import "~buefy/src/scss/components/_taginput"; -@import "~buefy/src/scss/components/_timepicker"; -@import "~buefy/src/scss/components/_tooltip"; -@import "~buefy/src/scss/components/_upload"; diff --git a/frontend/src/assets/style.scss b/frontend/src/assets/style.scss index b9ec9164..55242e6b 100644 --- a/frontend/src/assets/style.scss +++ b/frontend/src/assets/style.scss @@ -30,10 +30,11 @@ $modal-background-background-color: rgba(0, 0, 0, .30); $speed-slow: 25ms !default; $speed-slower: 50ms !default; -/* Import full Bulma and Buefy to override styles. */ -// @import "~bulma"; -@import "./buefy"; +/* Import full Bulma and Buefy */ +@import "~bulma"; +@import "~buefy/src/scss/buefy"; +/* Custom style overrides */ html, body { height: 100%; } @@ -752,6 +753,7 @@ section.campaign { /* Hide sidebar menu captions on mobile */ .b-sidebar .sidebar-content.is-mini-mobile { + max-width: 90px; .menu-list { li { margin-bottom: 30px; @@ -773,7 +775,6 @@ section.campaign { td .tags { display: block; - text-align: right; .tag:not(:last-child) { margin-right: 0; diff --git a/frontend/src/utils.js b/frontend/src/utils.js index 74ea9135..47e6b0f9 100644 --- a/frontend/src/utils.js +++ b/frontend/src/utils.js @@ -118,4 +118,8 @@ export default class Utils { duration: duration || 2000, }); }; + + // Takes a props.row from a Buefy b-column template and + // returns a `data-id` attribute which Buefy then applies to the td. + tdID = (row) => ({ 'data-id': row.id.toString() }); } diff --git a/frontend/src/views/Campaigns.vue b/frontend/src/views/Campaigns.vue index 3b7db767..52cdec2b 100644 --- a/frontend/src/views/Campaigns.vue +++ b/frontend/src/views/Campaigns.vue @@ -29,175 +29,173 @@ 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"> - - + + + + + - + +
+ + + + + + + + + + + + + + + +
+ - + diff --git a/frontend/src/views/Subscribers.vue b/frontend/src/views/Subscribers.vue index cd643aa6..cdcdc08c 100644 --- a/frontend/src/views/Subscribers.vue +++ b/frontend/src/views/Subscribers.vue @@ -108,86 +108,85 @@ paginated backend-pagination pagination-position="both" @page-change="onPageChange" :current-page="queryParams.page" :per-page="subscribers.perPage" :total="subscribers.total" hoverable checkable backend-sorting @sort="onSort"> -