From 8b5dd24a1440494c3c45fcbec871545d48014e17 Mon Sep 17 00:00:00 2001 From: weichien00 Date: Fri, 30 Jul 2021 02:10:37 +0800 Subject: [PATCH] update: integrate header,side menu to blade+vuejs. --- resources/assets/sass/_custom.scss | 113 ++++++++++++++++++ resources/assets/sass/main.scss | 2 + .../accounts/forms/LogOutFormComponent.vue | 4 +- .../general/elements/LoadingComponent.vue | 2 +- resources/views/layouts/base_portal.blade.php | 1 + .../pages/{ => templates}/dashboard.blade.php | 0 resources/views/partials/header.blade.php | 102 ++-------------- resources/views/partials/menu.blade.php | 89 ++++++++++++++ resources/views/vendor/head.blade.php | 2 +- routes/template.php | 10 ++ routes/web.php | 4 +- 11 files changed, 234 insertions(+), 95 deletions(-) create mode 100644 resources/assets/sass/_custom.scss rename resources/views/pages/{ => templates}/dashboard.blade.php (100%) create mode 100644 resources/views/partials/menu.blade.php create mode 100644 routes/template.php diff --git a/resources/assets/sass/_custom.scss b/resources/assets/sass/_custom.scss new file mode 100644 index 00000000..d5520287 --- /dev/null +++ b/resources/assets/sass/_custom.scss @@ -0,0 +1,113 @@ +@page { + header: page-header; + footer: page-footer; +} + +body { + font-family: sun-extA; +} + +.header { + margin-top: 5em; +} + +.sidebar { + width: 285px; + position: fixed; + top: 0; + bottom: 0; + left: 0; + z-index: 100; + padding: 0 15px 0 15px; /* Height of navbar */ + /* box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1); */ +} + +.sidebar-sticky { + position: relative; + top: 0; + height: calc(100vh - 48px); + padding-top: .5rem; + overflow-x: hidden; + overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */ +} + +@supports ((position: -webkit-sticky) or (position: sticky)) { +.sidebar-sticky { + position: -webkit-sticky; + position: sticky; + } +} + +.sidebar .nav-link { + font-weight: 500; + color: #333; +} + +.sidebar .nav-link .feather { + margin-right: 4px; + color: #999; +} + +.sidebar .nav-link.active { + color: #007bff; +} + +.sidebar .nav-link:hover .feather, +.sidebar .nav-link.active .feather { + color: inherit; +} + +.sidebar-heading { + font-size: .75rem; + text-transform: uppercase; +} + +.navbar-brand { + padding-top: .75rem; + padding-bottom: .75rem; + font-size: 1rem; + background-color: rgba(0, 0, 0, .25); + box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25); +} + +.navbar .navbar-toggler { + top: .25rem; + right: 1rem; +} + +.navbar .form-control { + padding: .75rem 1rem; + border-width: 0; + border-radius: 0; +} + +.form-control-dark { + color: #fff; + background-color: rgba(255, 255, 255, .1); + border-color: rgba(255, 255, 255, .1); +} + +.form-control-dark:focus { + border-color: transparent; + box-shadow: 0 0 0 3px rgba(255, 255, 255, .25); +} + +.text-menu { + color: #a6a6a6; + font-size: 16px; +} + +.board { + width: 100%; + height: 180px; + background: -webkit-linear-gradient(#503C93, #912873); + background: linear-gradient(#503C93, #912873); +} + +.text-small { + font-size: 12px; +} + +.btn-white { + background-color: #ffffff !important; +} \ No newline at end of file diff --git a/resources/assets/sass/main.scss b/resources/assets/sass/main.scss index 6c8a8703..d606b5f9 100644 --- a/resources/assets/sass/main.scss +++ b/resources/assets/sass/main.scss @@ -32,6 +32,8 @@ @import "modules"; // Responsive Util @import "responsive"; +// Import custom +@import "custom"; diff --git a/resources/assets/vue/components/accounts/forms/LogOutFormComponent.vue b/resources/assets/vue/components/accounts/forms/LogOutFormComponent.vue index b32d8912..de1c6443 100644 --- a/resources/assets/vue/components/accounts/forms/LogOutFormComponent.vue +++ b/resources/assets/vue/components/accounts/forms/LogOutFormComponent.vue @@ -2,8 +2,8 @@
-
- +
+ Sign Out
diff --git a/resources/assets/vue/components/general/elements/LoadingComponent.vue b/resources/assets/vue/components/general/elements/LoadingComponent.vue index 77668ce3..e4180dca 100644 --- a/resources/assets/vue/components/general/elements/LoadingComponent.vue +++ b/resources/assets/vue/components/general/elements/LoadingComponent.vue @@ -24,7 +24,7 @@ case 'primary': return '#912873'; case 'success': - return '#349128'; + return '#912873'; case 'danger': return '#F3201F'; case 'white': diff --git a/resources/views/layouts/base_portal.blade.php b/resources/views/layouts/base_portal.blade.php index 583dcc37..cadf3ee4 100644 --- a/resources/views/layouts/base_portal.blade.php +++ b/resources/views/layouts/base_portal.blade.php @@ -2,6 +2,7 @@ @section('content') @include('partials.header') + @include('partials.menu')
diff --git a/resources/views/pages/dashboard.blade.php b/resources/views/pages/templates/dashboard.blade.php similarity index 100% rename from resources/views/pages/dashboard.blade.php rename to resources/views/pages/templates/dashboard.blade.php diff --git a/resources/views/partials/header.blade.php b/resources/views/partials/header.blade.php index cc2ccd7d..ba63175b 100644 --- a/resources/views/partials/header.blade.php +++ b/resources/views/partials/header.blade.php @@ -1,90 +1,12 @@ -
-
-
-
-
-
- -
-
-
-
- {{-- logo --}} -
-
-
-
-
Shipping Management
-
-
- -
-
-
-
-
-
-
Dashboard
 -
- {{--
- -
Payments & Billing
- -
-
- -
Transfers
- -
-
- -
Urgent List
- -
-
-
Bank Accounts
 -
--}} -
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
Hi, !
-
-
-
- -
-
-
-
-
- {{-- -
-
- -
-
- --}} -
-
- -
-
-
-
-
-
-
-
\ No newline at end of file +
+ + +
    +
  • + +
    • +
+
diff --git a/resources/views/partials/menu.blade.php b/resources/views/partials/menu.blade.php new file mode 100644 index 00000000..e1b8a017 --- /dev/null +++ b/resources/views/partials/menu.blade.php @@ -0,0 +1,89 @@ + diff --git a/resources/views/vendor/head.blade.php b/resources/views/vendor/head.blade.php index 994929c5..d51cea64 100644 --- a/resources/views/vendor/head.blade.php +++ b/resources/views/vendor/head.blade.php @@ -1,6 +1,6 @@ -Exchange - Overseas Money Transfers +IZYIM Shipping diff --git a/routes/template.php b/routes/template.php new file mode 100644 index 00000000..980da02a --- /dev/null +++ b/routes/template.php @@ -0,0 +1,10 @@ + 'template'], function () { + Route::get('/dashboard', function () { + return view('pages.templates.dashboard'); + })->name('template.dashboard'); +}); diff --git a/routes/web.php b/routes/web.php index 3c26200a..6fc5897b 100644 --- a/routes/web.php +++ b/routes/web.php @@ -13,6 +13,8 @@ use Illuminate\Support\Facades\Route; | */ +require __DIR__ . '/template.php'; + Route::get('/', function () { return view('welcome'); }); @@ -39,5 +41,5 @@ Route::get('/account/password/reset/{token}', function ($token) { })->name('account.password.reset'); Route::get('/dashboard', function () { - return view('pages.dashboard'); + return view('pages.dashboards.index'); })->name('dashboard');