diff --git a/src/package.json b/src/package.json --- a/src/package.json +++ b/src/package.json @@ -11,7 +11,6 @@ "lint": "eslint --ext .js,.vue resources && stylelint \"resources/sass/*.scss\" \"resources/vue/*.vue\"" }, "devDependencies": { - "@deveodk/vue-toastr": "^1.1.0", "axios": "^0.19", "bootstrap": "^4.4.1", "cross-env": "^5.1", @@ -24,7 +23,6 @@ "@fortawesome/vue-fontawesome": "^0.1.9", "jquery": "^3.4.1", "laravel-mix": "^4.0.7", - "lodash": "^4.17.13", "popper.js": "^1.12", "resolve-url-loader": "^2.3.1", "sass": "^1.15.2", diff --git a/src/resources/js/app.js b/src/resources/js/app.js --- a/src/resources/js/app.js +++ b/src/resources/js/app.js @@ -7,14 +7,14 @@ require('./bootstrap') import AppComponent from '../vue/App' -import MenuComponent from '../vue/Menu' +import MenuComponent from '../vue/Widgets/Menu' import store from './store' const app = new Vue({ el: '#app', components: { - 'app-component': AppComponent, - 'menu-component': MenuComponent + AppComponent, + MenuComponent, }, store, router: window.router, @@ -258,7 +258,7 @@ error_msg = error.request ? error.request.statusText : error.message } - app.$toastr('error', error_msg || "Server Error", 'Error') + app.$toast.error(error_msg || "Server Error") // Pass the error as-is return Promise.reject(error) diff --git a/src/resources/js/bootstrap.js b/src/resources/js/bootstrap.js --- a/src/resources/js/bootstrap.js +++ b/src/resources/js/bootstrap.js @@ -1,17 +1,13 @@ -window._ = require('lodash') - /** * We'll load jQuery and the Bootstrap jQuery plugin which provides support * for JavaScript based Bootstrap features such as modals and tabs. This * code may be modified to fit the specific needs of your application. */ -try { - window.Popper = require('popper.js').default - window.$ = window.jQuery = require('jquery') +window.Popper = require('popper.js').default +window.$ = window.jQuery = require('jquery') - require('bootstrap') -} catch (e) {} +require('bootstrap') /** * We'll load Vue, VueRouter and global components @@ -19,18 +15,13 @@ import FontAwesomeIcon from './fontawesome' import VueRouter from 'vue-router' -import VueToastr from '@deveodk/vue-toastr' +import Toast from '../vue/Widgets/Toast' import store from './store' window.Vue = require('vue') Vue.component('svg-icon', FontAwesomeIcon) -Vue.use(VueToastr, { - defaultPosition: 'toast-bottom-right', - defaultTimeout: 5000 -}) - const vTooltip = (el, binding) => { const t = [] @@ -55,6 +46,7 @@ } }) +Vue.use(Toast) Vue.use(VueRouter) diff --git a/src/resources/js/fontawesome.js b/src/resources/js/fontawesome.js --- a/src/resources/js/fontawesome.js +++ b/src/resources/js/fontawesome.js @@ -9,7 +9,9 @@ import { faCheck, + faCheckCircle, faGlobe, + faExclamationCircle, faInfoCircle, faLock, faKey, @@ -26,8 +28,10 @@ // Register only these icons we need library.add( - faCheckSquare, faCheck, + faCheckCircle, + faCheckSquare, + faExclamationCircle, faGlobe, faInfoCircle, faLock, diff --git a/src/resources/sass/_variables.scss b/src/resources/sass/_variables.scss --- a/src/resources/sass/_variables.scss +++ b/src/resources/sass/_variables.scss @@ -20,3 +20,4 @@ // App colors $menu-bg-color: #f6f5f3; +$main-color: #f1a539; diff --git a/src/resources/sass/app.scss b/src/resources/sass/app.scss --- a/src/resources/sass/app.scss +++ b/src/resources/sass/app.scss @@ -6,22 +6,39 @@ // Bootstrap @import '~bootstrap/scss/bootstrap'; -// Toastr -@import '~@deveodk/vue-toastr/dist/@deveodk/vue-toastr.css'; - -// Fixes Toastr incompatibility with Bootstrap -.toast-container > .toast { - opacity: 1; -} - @import 'menu'; +@import 'toast'; +@import 'forms'; -nav + .container { - margin-top: 120px; +html, +body, +body > .outer-container { + height: 100%; } #app { - margin-bottom: 2rem; + display: flex; + flex-direction: column; + min-height: 100%; + + & > nav { + flex-shrink: 0; + z-index: 1; + } + + & > div.container { + flex-grow: 1; + margin-top: 2rem; + margin-bottom: 2rem; + } + + & > .filler { + flex-grow: 1; + } + + & > div.container + .filler { + display: none; + } } #error-page { @@ -79,40 +96,6 @@ font-weight: bold; } -.list-input { - & > div { - &:not(:last-child) { - margin-bottom: -1px; - - input, - a.btn { - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; - } - } - - &:not(:first-child) { - input, - a.btn { - border-top-right-radius: 0; - border-top-left-radius: 0; - } - } - } - - input.is-invalid { - z-index: 2; - } -} - -.range-input { - display: flex; - - label { - margin-right: 0.5em; - } -} - tfoot.table-fake-body { background-color: #f8f8f8; color: grey; diff --git a/src/resources/sass/forms.scss b/src/resources/sass/forms.scss new file mode 100644 --- /dev/null +++ b/src/resources/sass/forms.scss @@ -0,0 +1,34 @@ + +.list-input { + & > div { + &:not(:last-child) { + margin-bottom: -1px; + + input, + a.btn { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + } + } + + &:not(:first-child) { + input, + a.btn { + border-top-right-radius: 0; + border-top-left-radius: 0; + } + } + } + + input.is-invalid { + z-index: 2; + } +} + +.range-input { + display: flex; + + label { + margin-right: 0.5em; + } +} diff --git a/src/resources/sass/menu.scss b/src/resources/sass/menu.scss --- a/src/resources/sass/menu.scss +++ b/src/resources/sass/menu.scss @@ -1,5 +1,5 @@ -#primary-menu { - background-color: #f6f5f3; +#header-menu { + background-color: $menu-bg-color; padding: 0; line-height: 85px; @@ -25,7 +25,7 @@ } &:hover { - color: #f1a539; + color: $main-color; text-decoration: underline; } @@ -35,11 +35,22 @@ } } +#footer-menu { + background-color: $main-color; + height: 100px; + + .navbar-brand { + img { + width: 170px; + } + } +} + @include media-breakpoint-up(lg) { - #primary-menu { + #header-menu { a.menulogin { text-transform: uppercase; - border: 2px solid #f1a539; + border: 2px solid $main-color; border-radius: 21px; line-height: 21px; letter-spacing: 1px; @@ -49,16 +60,22 @@ &:focus, &:hover { text-decoration: none; - background-color: #f1a539; + background-color: $main-color; color: #fff; font-weight: normal; } } } + + .navbar { + .navbar { + justify-content: flex-end; + } + } } @include media-breakpoint-down(md) { - #primary-menu { + #header-menu { .navbar-nav { padding-bottom: 1em; } @@ -71,13 +88,13 @@ } @include media-breakpoint-down(sm) { - #primary-menu { + #header-menu { padding: 0 1em; } } @media (max-width: 340px) { - #primary-menu { + #header-menu { .navbar-brand img { width: 160px; } diff --git a/src/resources/sass/toast.scss b/src/resources/sass/toast.scss new file mode 100644 --- /dev/null +++ b/src/resources/sass/toast.scss @@ -0,0 +1,46 @@ +.toast-container { + position: fixed; + bottom: 0; + right: 0; + margin: 0.5rem; + width: 320px; + z-index: 10; +} + +.toast { + background-color: rgba(52, 58, 64, 0.95); + + &:not(:last-child) { + margin-bottom: 0.3rem; + } +} + +.toast-header { + background-color: #343a40; + border-color: #555; + color: #fff; + + strong { + flex: 1; + } + + svg { + font-size: 1.2em; + margin-right: 0.5rem; + } + + button.close { + color: #eee; + opacity: 1 !important; + text-shadow: none; + font-size: 1.2rem; + + &:hover { + color: #fff; + } + } +} + +.toast-body { + color: #fff; +} diff --git a/src/resources/views/root.blade.php b/src/resources/views/root.blade.php --- a/src/resources/views/root.blade.php +++ b/src/resources/views/root.blade.php @@ -2,7 +2,9 @@ @section('title', "Home") @section('content')
- + +
+
@endsection diff --git a/src/resources/vue/Admin/Dashboard.vue b/src/resources/vue/Admin/Dashboard.vue --- a/src/resources/vue/Admin/Dashboard.vue +++ b/src/resources/vue/Admin/Dashboard.vue @@ -71,7 +71,7 @@ } if (response.data.message) { - this.$toastr('info', response.data.message) + this.$toast.info(response.data.message) } this.users = response.data.list diff --git a/src/resources/vue/Admin/User.vue b/src/resources/vue/Admin/User.vue --- a/src/resources/vue/Admin/User.vue +++ b/src/resources/vue/Admin/User.vue @@ -382,7 +382,7 @@ axios.put('/api/v4/wallets/' + this.user.wallets[0].id, { discount: this.wallet_discount_id }) .then(response => { if (response.data.status == 'success') { - this.$toastr('success', response.data.message) + this.$toast.success(response.data.message) this.wallet_discount = response.data.discount this.wallet_discount_id = response.data.discount_id || '' this.wallet_discount_description = response.data.discount_description diff --git a/src/resources/vue/Domain/Info.vue b/src/resources/vue/Domain/Info.vue --- a/src/resources/vue/Domain/Info.vue +++ b/src/resources/vue/Domain/Info.vue @@ -87,7 +87,7 @@ if (response.data.status == 'success') { this.domain.isConfirmed = true this.parseStatusInfo(response.data.statusInfo) - this.$toastr('success', response.data.message) + this.$toast.success(response.data.message) } }) }, diff --git a/src/resources/vue/Login.vue b/src/resources/vue/Login.vue --- a/src/resources/vue/Login.vue +++ b/src/resources/vue/Login.vue @@ -1,5 +1,5 @@