From ed6478ae23a62795857597f4fa116bba134ec153 Mon Sep 17 00:00:00 2001 From: Sam Poyigi <6567634+sampoyigi@users.noreply.github.com> Date: Sat, 29 Jul 2023 15:47:32 +0100 Subject: [PATCH] Improve admin UI Signed-off-by: Sam Poyigi <6567634+sampoyigi@users.noreply.github.com> --- resources/css/widgets/mediamanager.css | 5 +- resources/js/partials/flashmessage.js | 3 - resources/lang/en/system.php | 2 - resources/scss/app.scss | 26 ++++--- resources/scss/components/_alert.scss | 1 - resources/scss/components/_forms.scss | 18 ++--- resources/scss/components/_logos.scss | 4 +- resources/scss/components/_mainmenu.scss | 33 ++++----- resources/scss/components/_sidenav.scss | 21 ++---- resources/scss/helpers/_+import-helpers.scss | 2 - .../scss/helpers/_bootstrap-components.scss | 38 ++++++++++ .../_bootstrap-helpers.scss | 1 - .../_bootstrap-replace.scss} | 0 .../helpers/{_utilities.scss => _maps.scss} | 0 resources/scss/helpers/_variables.scss | 24 +++---- resources/scss/utilities/_utilities.scss | 68 ++++++++++++++++-- .../scss/vendor/_bootstrap-components.scss | 38 ---------- .../views/admin/_components/aside.blade.php | 69 +++++++++++++------ .../views/admin/_components/header.blade.php | 31 +-------- .../views/admin/_layouts/default.blade.php | 14 ++-- .../widgets/form/form_tabs.blade.php | 2 +- .../mailtemplates/form/form_tabs.blade.php | 2 +- .../views/system/settings/index.blade.php | 48 +++++++------ 23 files changed, 242 insertions(+), 208 deletions(-) delete mode 100644 resources/scss/helpers/_+import-helpers.scss create mode 100644 resources/scss/helpers/_bootstrap-components.scss rename resources/scss/{vendor => helpers}/_bootstrap-helpers.scss (79%) rename resources/scss/{utilities/_replace.scss => helpers/_bootstrap-replace.scss} (100%) rename resources/scss/helpers/{_utilities.scss => _maps.scss} (100%) delete mode 100644 resources/scss/vendor/_bootstrap-components.scss diff --git a/resources/css/widgets/mediamanager.css b/resources/css/widgets/mediamanager.css index ade33a10..7de78141 100644 --- a/resources/css/widgets/mediamanager.css +++ b/resources/css/widgets/mediamanager.css @@ -1,15 +1,14 @@ .media-modal { - padding: 0 !important; + padding: 20px !important; } .media-modal .modal-dialog { - max-width: 100%; + max-width: 99%; margin-top: 0; margin-bottom: 0; } .media-modal .modal-content { - border-radius: unset; margin-bottom: 0; border: 0 none; } diff --git a/resources/js/partials/flashmessage.js b/resources/js/partials/flashmessage.js index 86dc88b0..7a4cee4a 100644 --- a/resources/js/partials/flashmessage.js +++ b/resources/js/partials/flashmessage.js @@ -86,9 +86,6 @@ toast.addEventListener('mouseenter', Swal.stopTimer) toast.addEventListener('mouseleave', Swal.resumeTimer) }, - customClass: { - popup: 'bg-light', - }, } FlashMessage.SWAL_DEFAULTS = { diff --git a/resources/lang/en/system.php b/resources/lang/en/system.php index 50f00a4d..2910fdd7 100644 --- a/resources/lang/en/system.php +++ b/resources/lang/en/system.php @@ -426,8 +426,6 @@ 'label_default_geocoder' => 'Default Geocoder', 'label_menus_page' => 'Menu Items Page', 'label_reservation_page' => 'Reservation Page', - 'label_allow_registration' => 'Allow customer registration', - 'label_registration_email' => 'Send Registration Email', 'label_mail_logo' => 'Logo', 'label_sender_name' => 'Sender Name', 'label_sender_email' => 'Sender Email', diff --git a/resources/scss/app.scss b/resources/scss/app.scss index 6ceb0ca4..1117c1b2 100644 --- a/resources/scss/app.scss +++ b/resources/scss/app.scss @@ -1,24 +1,28 @@ // ======================================================================== // -// Tastyigniter's Admin UI +// TastyIgniter Admin UI // ======================================================================== // // // Helpers -@import "helpers/+import-helpers"; +@import "../../node_modules/bootstrap/scss/functions"; // -// Bootstrap Helpers -@import "vendor/bootstrap-helpers"; +// Variables, Mixins +@import "helpers/variables"; +@import "helpers/mixins"; // -// Helpers: Utilities -@import "helpers/utilities"; +// Vendors: Bootstrap Helpers +@import "helpers/bootstrap-helpers"; // -// Vendors: Bootstrap, FontAwesome, SweetAlert +// Helpers: Maps +@import "helpers/maps"; +// +// Vendors: FontAwesome, SweetAlert @import "vendor/+import_vendors"; // -// Bootstrap components -@import "vendor/bootstrap-components"; +// Vendors: Bootstrap components +@import "helpers/bootstrap-components"; // -// Bootstrap components -@import "utilities/replace"; +// Bootstrap backward compatibility +@import "helpers/bootstrap-replace"; // // Components @import "components/+import-components"; diff --git a/resources/scss/components/_alert.scss b/resources/scss/components/_alert.scss index aee5126d..85ef7fbe 100644 --- a/resources/scss/components/_alert.scss +++ b/resources/scss/components/_alert.scss @@ -53,7 +53,6 @@ body:not(.swal2-toast-shown) { } .swal2-popup { - background-color: $gray-200; border: 0; &.swal2-toast { diff --git a/resources/scss/components/_forms.scss b/resources/scss/components/_forms.scss index 4be0ebf6..3acbb965 100644 --- a/resources/scss/components/_forms.scss +++ b/resources/scss/components/_forms.scss @@ -135,29 +135,21 @@ // .form-nav { &.nav-tabs { - .nav-item { - } - .nav-link { - border-width: 0 0 4px; - border-color: transparent; - color: $body-color; + border: 0 none; + font-weight: $font-weight-semibold; padding: $form-nav-link-padding-y $form-nav-link-padding-x; - font-weight: 500; - border-radius: 0; } .nav-link.active { - border-width: 0 0 4px; - border-style: solid; - border-color: $gray-300; background-color: transparent; + color: $primary; + font-weight: $font-weight-bold; } .nav-link:hover, .nav-link:focus { - background-color: $gray-200; - border-color: transparent; + color: $primary; } } } diff --git a/resources/scss/components/_logos.scss b/resources/scss/components/_logos.scss index e51f0211..85ec141b 100644 --- a/resources/scss/components/_logos.scss +++ b/resources/scss/components/_logos.scss @@ -1,5 +1,5 @@ .logo-svg { - height: 42px; + height: $logo-line-height; display: block; - width: 42px; + width: $logo-line-height; } diff --git a/resources/scss/components/_mainmenu.scss b/resources/scss/components/_mainmenu.scss index 456c4fe1..40a0b9be 100644 --- a/resources/scss/components/_mainmenu.scss +++ b/resources/scss/components/_mainmenu.scss @@ -1,8 +1,6 @@ .navbar-top { - background-color: $white; + background-color: $sidenav-bg; padding: 0; - border-bottom: 1px solid $gray-400; - box-shadow: 0 1px 1px rgba(0, 0, 0, .075); &.navbar-expand { .navbar { @@ -10,8 +8,11 @@ } .navbar-nav { + > .nav-item { + line-height: $mainmenu-line-height; + } + .nav-link { - line-height: $page-top-line-height; color: $body-color; padding: $mainmenu-padding-x $mainmenu-padding-y; position: relative; @@ -29,13 +30,15 @@ position: relative; } - li.nav-item > a img { - max-width: 32px; - max-height: 32px; - } + .nav-link { + img { + max-width: $logo-line-height; + max-height: $logo-line-height; + } - .nav-link > .fa { - vertical-align: middle; + > .fa { + vertical-align: middle; + } } .nav-link > .badge { @@ -252,17 +255,9 @@ } .page-title { - margin: 0px; - padding-left: 15px; - font-size: $mainmenu-font-size; - .small, small { - color: $gray-600; - } - - span { - vertical-align: text-top; + color: $text-muted; } } diff --git a/resources/scss/components/_sidenav.scss b/resources/scss/components/_sidenav.scss index cc0e7e8b..9ccf1390 100644 --- a/resources/scss/components/_sidenav.scss +++ b/resources/scss/components/_sidenav.scss @@ -1,4 +1,5 @@ .sidebar { + background-color: darken($sidenav-bg, 2.5%); position: fixed; top: $page-top; bottom: 0; @@ -6,7 +7,6 @@ } .nav-sidebar { - background-color: $sidenav-bg; overflow-x: hidden; overflow-y: scroll; table-layout: fixed; @@ -16,7 +16,6 @@ bottom: 0; left: 0; right: 0; - padding-top: 20px; &::-webkit-scrollbar { display: none; @@ -36,29 +35,24 @@ > li > a { display: block; - color: rgba($white, .8); line-height: $sidenav-line-height; padding: $sidenav-padding-x $sidenav-padding-y; - font-weight: $sidenav-font-weight; + font-weight: $font-weight-semibold; font-size: $sidenav-font-size; - } - > li > a:focus, - > li > a:hover { - color: $white; + .fa { + color: $sidenav-icon-color; + } } li.active > a, .nav li.active > a, .nav li > a.active { background-color: transparent; - color: $white; - font-weight: $sidenav-font-size-bold; + font-weight: $font-weight-bold; } .nav { - background-color: lighten($sidenav-bg, 1%); - &.show { display: block; } @@ -67,9 +61,8 @@ padding-left: 48px; line-height: $sidenav-line-height-sm; text-transform: none; - font-weight: $font-weight-normal; + font-weight: $font-weight-semibold; font-size: $sidenav-submenu-font-size; - color: rgba($white, .75); } li > a:hover, diff --git a/resources/scss/helpers/_+import-helpers.scss b/resources/scss/helpers/_+import-helpers.scss deleted file mode 100644 index 8cc02d61..00000000 --- a/resources/scss/helpers/_+import-helpers.scss +++ /dev/null @@ -1,2 +0,0 @@ -@import "variables"; -@import "mixins"; diff --git a/resources/scss/helpers/_bootstrap-components.scss b/resources/scss/helpers/_bootstrap-components.scss new file mode 100644 index 00000000..9a765d1c --- /dev/null +++ b/resources/scss/helpers/_bootstrap-components.scss @@ -0,0 +1,38 @@ +@import "../../../node_modules/bootstrap/scss/root"; +@import "../../../node_modules/bootstrap/scss/reboot"; +@import "../../../node_modules/bootstrap/scss/type"; +@import "../../../node_modules/bootstrap/scss/images"; +@import "../../../node_modules/bootstrap/scss/containers"; +@import "../../../node_modules/bootstrap/scss/grid"; +@import "../../../node_modules/bootstrap/scss/tables"; +@import "../../../node_modules/bootstrap/scss/forms"; +@import "../../../node_modules/bootstrap/scss/buttons"; +@import "../../../node_modules/bootstrap/scss/transitions"; +@import "../../../node_modules/bootstrap/scss/dropdown"; +@import "../../../node_modules/bootstrap/scss/button-group"; +@import "../../../node_modules/bootstrap/scss/nav"; +@import "../../../node_modules/bootstrap/scss/navbar"; +@import "../../../node_modules/bootstrap/scss/card"; +@import "../../../node_modules/bootstrap/scss/accordion"; +@import "../../../node_modules/bootstrap/scss/breadcrumb"; +@import "../../../node_modules/bootstrap/scss/pagination"; +@import "../../../node_modules/bootstrap/scss/badge"; +@import "../../../node_modules/bootstrap/scss/alert"; +@import "../../../node_modules/bootstrap/scss/progress"; +@import "../../../node_modules/bootstrap/scss/list-group"; +@import "../../../node_modules/bootstrap/scss/close"; +@import "../../../node_modules/bootstrap/scss/toasts"; +@import "../../../node_modules/bootstrap/scss/modal"; +@import "../../../node_modules/bootstrap/scss/tooltip"; +@import "../../../node_modules/bootstrap/scss/popover"; +@import "../../../node_modules/bootstrap/scss/carousel"; +@import "../../../node_modules/bootstrap/scss/spinners"; +@import "../../../node_modules/bootstrap/scss/offcanvas"; +@import "../../../node_modules/bootstrap/scss/placeholders"; + +// Helpers +@import "../../../node_modules/bootstrap/scss/helpers"; + +// Utilities +@import "../../../node_modules/bootstrap/scss/utilities/api"; +// scss-docs-end import-stack diff --git a/resources/scss/vendor/_bootstrap-helpers.scss b/resources/scss/helpers/_bootstrap-helpers.scss similarity index 79% rename from resources/scss/vendor/_bootstrap-helpers.scss rename to resources/scss/helpers/_bootstrap-helpers.scss index 308bfd19..9a3e2d41 100644 --- a/resources/scss/vendor/_bootstrap-helpers.scss +++ b/resources/scss/helpers/_bootstrap-helpers.scss @@ -1,4 +1,3 @@ -@import "../../../node_modules/bootstrap/scss/functions"; @import "../../../node_modules/bootstrap/scss/variables"; @import "../../../node_modules/bootstrap/scss/maps"; @import "../../../node_modules/bootstrap/scss/mixins"; diff --git a/resources/scss/utilities/_replace.scss b/resources/scss/helpers/_bootstrap-replace.scss similarity index 100% rename from resources/scss/utilities/_replace.scss rename to resources/scss/helpers/_bootstrap-replace.scss diff --git a/resources/scss/helpers/_utilities.scss b/resources/scss/helpers/_maps.scss similarity index 100% rename from resources/scss/helpers/_utilities.scss rename to resources/scss/helpers/_maps.scss diff --git a/resources/scss/helpers/_variables.scss b/resources/scss/helpers/_variables.scss index c2690a0f..2bf249b2 100644 --- a/resources/scss/helpers/_variables.scss +++ b/resources/scss/helpers/_variables.scss @@ -1,8 +1,8 @@ $white: #FFFFFF !default; $gray-100: #FCFDFF !default; $gray-200: #E8E9EF !default; -$gray-300: #D2D4DF !default; -$gray-400: #C0C2CE !default; +$gray-300: #d9dbe5 !default; +$gray-400: darken(#d9dbe5, 5%) !default; $gray-500: #9194A6 !default; $gray-600: #6F7B9C !default; $gray-700: #48557B !default; @@ -12,7 +12,7 @@ $black: #000329 !default; // // Colors // -$primary: #2170C0 !default; +$primary: darken(#3F80EA, 5%) !default; $secondary: $gray-700 !default; $success: #28A745 !default; $info: #5A67D8 !default; @@ -44,7 +44,7 @@ $icon-font-path: '../fonts/'; $fa-font-path: $icon-font-path+'FontAwesome'; // Body // -$body-bg: $gray-200 !default; +$body-bg: $gray-300 !default; $body-color: $gray-800 !default; $link-hover-decoration: none !default; @@ -83,8 +83,6 @@ $table-hover-bg: $gray-200 !default; // Buttons + Forms // // Shared variables that are reassigned to `$input-` and `$btn-` specific variables. -$input-btn-padding-y: .5rem !default; -$input-btn-padding-x: .75rem !default; $input-spacer: 6px !default; $input-font-size: 0.9375rem !default; // @@ -112,8 +110,8 @@ $input-height-border: 3px !default; $form-check-input-width: 1.25em; $form-fields-padding: 1.25rem .725rem !default; $form-fields-padding-x: 20px !default; -$form-nav-link-padding-y: .52rem !default; -$form-nav-link-padding-x: 1.2rem !default; +$form-nav-link-padding-y: .75rem !default; +$form-nav-link-padding-x: 1rem !default; $custom-control-indicator-border-color: $gray-200 !default; $custom-control-indicator-disabled-bg: $gray-300 !default; @@ -174,8 +172,7 @@ $badge-color: inherit !default; // $page-padding-x: 20px !default; $page-padding-y: 30px !default; -$page-top: 64px !default; -$page-top-line-height: 48px !default; +$page-top: 0 !default; $page-bottom: 0 !default; $page-margin-left: 230px !default; $logo-font-size: 3rem !default; @@ -183,7 +180,7 @@ $logo-line-height: 32px !default; // // Main menu // -$mainmenu-font-size: 24px !default; +$mainmenu-line-height: 42px !default; $mainmenu-dropdown-width: 300px !default; $mainmenu-menu-max-height: 60vh !default; $mainmenu-padding-x: 0.5rem !default; @@ -191,11 +188,10 @@ $mainmenu-padding-y: 1rem !default; // // Side nav // -$sidenav-bg: $gray-900 !default; +$sidenav-bg: $gray-300 !default; +$sidenav-icon-color: $text-muted !default; $sidenav-font-size: 15px !default; $sidenav-submenu-font-size: $font-size-base !default; -$sidenav-font-weight: 500 !default; -$sidenav-font-size-bold: 600 !default; $sidenav-line-height: 50px !default; $sidenav-line-height-sm: 42px !default; $sidenav-padding-x: 0 !default; diff --git a/resources/scss/utilities/_utilities.scss b/resources/scss/utilities/_utilities.scss index 4adec238..c832f337 100644 --- a/resources/scss/utilities/_utilities.scss +++ b/resources/scss/utilities/_utilities.scss @@ -11,127 +11,185 @@ body.page { height: 100%; overflow: hidden; } + .page-x-spacer { padding-right: $page-padding-x; padding-left: $page-padding-x; } + .page-y-spacer { padding-top: $page-padding-y; padding-bottom: $page-padding-y; } + html, html a { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } + +@include media-breakpoint-up(md) { + div, main, ol, pre, span, ul { + scrollbar-width: thin; + scrollbar-color: $gray-400 transparent; + } +} + .hide { display: none; } + a:focus, a:hover { text-decoration: none; outline: 0; } + [role="button"], a[data-request] { cursor: pointer; } + .text-green { color: $green; } + .text-red { color: $red; } + .text-blue { color: $blue; } + .text-yellow { color: $yellow; } + .text-draggable { -webkit-user-select: all; /* for Safari */ user-select: all; cursor: move; } + .bg-white { background-color: $white; } + .bg-green { background-color: $green; } + .bg-red { background-color: $red; } + .bg-blue { background-color: $blue; } + .bg-yellow { background-color: $yellow; } -.text-w-300 { font-weight: 300; } -.text-w-400 { font-weight: 400; } -.text-w-500 { font-weight: 500; } -.text-w-700 { font-weight: 700; } -.text-w-900 { font-weight: 900; } + +.text-w-300 { + font-weight: 300; +} + +.text-w-400 { + font-weight: 400; +} + +.text-w-500 { + font-weight: 500; +} + +.text-w-700 { + font-weight: 700; +} + +.text-w-900 { + font-weight: 900; +} + .text-sm { font-size: 12px; } + .text-nowrap { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } + .border-none { border: 0 none; } + .radius-none { border-radius: 0; } + .wrap-all { padding: 15px; } + .wrap-none { padding: 0; } + .wrap-vertical { padding-left: 15px; padding-right: 15px; } + .wrap-horizontal { padding-top: 15px; padding-bottom: 15px; } + .wrap-top { padding-top: 15px; } + .wrap-bottom { padding-bottom: 15px; } + .wrap-left { padding-left: 15px; } + .wrap-right { padding-right: 15px; } + .no-margin { margin: 0; } + .no-margin-top { margin-top: 0; } + .no-margin-bottom { margin-bottom: 0; } + .margin-top { margin-bottom: 15px; } + .margin-bottom { margin-bottom: 15px; } + .inline-block { display: inline-block; } + .center-block { float: none; } + .sortable-placeholder { border: 1px solid $gray-800; margin: 10px auto; diff --git a/resources/scss/vendor/_bootstrap-components.scss b/resources/scss/vendor/_bootstrap-components.scss deleted file mode 100644 index 819552e2..00000000 --- a/resources/scss/vendor/_bootstrap-components.scss +++ /dev/null @@ -1,38 +0,0 @@ -@import "bootstrap/scss/root"; -@import "bootstrap/scss/reboot"; -@import "bootstrap/scss/type"; -@import "bootstrap/scss/images"; -@import "bootstrap/scss/containers"; -@import "bootstrap/scss/grid"; -@import "bootstrap/scss/tables"; -@import "bootstrap/scss/forms"; -@import "bootstrap/scss/buttons"; -@import "bootstrap/scss/transitions"; -@import "bootstrap/scss/dropdown"; -@import "bootstrap/scss/button-group"; -@import "bootstrap/scss/nav"; -@import "bootstrap/scss/navbar"; -@import "bootstrap/scss/card"; -@import "bootstrap/scss/accordion"; -@import "bootstrap/scss/breadcrumb"; -@import "bootstrap/scss/pagination"; -@import "bootstrap/scss/badge"; -@import "bootstrap/scss/alert"; -@import "bootstrap/scss/progress"; -@import "bootstrap/scss/list-group"; -@import "bootstrap/scss/close"; -@import "bootstrap/scss/toasts"; -@import "bootstrap/scss/modal"; -@import "bootstrap/scss/tooltip"; -@import "bootstrap/scss/popover"; -@import "bootstrap/scss/carousel"; -@import "bootstrap/scss/spinners"; -@import "bootstrap/scss/offcanvas"; -@import "bootstrap/scss/placeholders"; - -// Helpers -@import "bootstrap/scss/helpers"; - -// Utilities -@import "bootstrap/scss/utilities/api"; -// scss-docs-end import-stack diff --git a/resources/views/admin/_components/aside.blade.php b/resources/views/admin/_components/aside.blade.php index 4831c95b..2e516422 100644 --- a/resources/views/admin/_components/aside.blade.php +++ b/resources/views/admin/_components/aside.blade.php @@ -1,6 +1,32 @@ @props(['navItems']) @if(AdminAuth::isLogged())