fix main-content for component

This commit is contained in:
armiejean 2025-04-15 13:36:31 +08:00
parent 6280c135cb
commit 4281e1dc99
2 changed files with 275 additions and 244 deletions

View File

@ -1,165 +1,180 @@
<!Doctype html> <!Doctype html>
<html lang="en"> <html lang="en">
<head>
<head>
<!-- Required meta tags --> <!-- Required meta tags -->
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<title>CMS-Laravel <title>CMS-Laravel
</title> </title>
<!-- Bootstrap CSS --> <link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}">
<link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="{{ asset('css/custom.css') }}">
<!----css3---->
<link rel="stylesheet" href="css/custom.css">
<!-- SLIDER REVOLUTION 4.x CSS SETTINGS -->
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet">
<link rel="icon" type="image/png" href="{{ asset('img/favicon_unioil.ico') }}"> <link rel="icon" type="image/png" href="{{ asset('img/favicon_unioil.ico') }}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" integrity="sha512-..." crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
integrity="sha512-..." crossorigin="anonymous" referrerpolicy="no-referrer" />
</head> </head>
<body>
<body>
<div class="wrapper"> <div class="wrapper">
<div class="body-overlay"></div> <div class="body-overlay"></div>
@php @php
$memberManagement = ['card-member', 'locked-accounts']; $memberManagement = ['card-member', 'locked-accounts'];
$homePage = ['photo-slider']; $homePage = ['photo-slider'];
$aboutUs = ['card-types', 'terms-and-privacy']; $aboutUs = ['card-types', 'terms-and-privacy'];
$reports = ['registration-report', 'top-up-usage-report', 'mobile-usage-report', 'station-rating-report']; $reports = ['registration-report', 'top-up-usage-report', 'mobile-usage-report', 'station-rating-report'];
$stationLocator = ['branches', 'stations', 'fuels']; $stationLocator = ['branches', 'stations', 'fuels'];
@endphp @endphp
<!-- Sidebar --> <!-- Sidebar -->
<nav id="sidebar"> <nav id="sidebar">
<div class="sidebar-header"> <div class="sidebar-header">
<h3><img src="img/logo.png" class="img-fluid"/><span></span></h3> <h3><img src="img/logo.png" class="img-fluid" /><span></span></h3>
</div> </div>
<ul class="list-unstyled components"> <ul class="list-unstyled components">
<!-- Static Items --> <!-- Static Items -->
<li class="{{ Request::is('user-management') ? 'active' : '' }}"> <li class="{{ Request::is('user-management') ? 'active' : '' }}">
<a href="{{ route('user.management') }}" class="dashboard" style="display:flex"> <a href="{{ route('user.management') }}" class="dashboard" style="display:flex">
<i class="fa-solid fa-users" style="padding-top:3px"></i><span>User Management</span> <i class="fa-solid fa-users" style="padding-top:3px"></i><span>User Management</span>
</a> </a>
</li>
<li class="{{ Request::is('notification') ? 'active' : '' }}">
<a href="{{ route('notification') }}" class="dashboard" style="display:flex">
<i class="fa-solid fa-bell" style="padding-top:3px"></i><span>Notifications</span>
</a>
</li>
<!-- Member Management -->
<li class="dropdown {{ in_array(Request::path(), $memberManagement) }}">
<a href="#homeSubmenu1" data-toggle="collapse" aria-expanded="{{ in_array(Request::path(), $memberManagement) ? 'true' : 'false' }}" class="dropdown-toggle" style="display:flex">
<i class="fa-solid fa-users-gear" style="padding-top:3px"></i><span>Member Management</span>
</a>
<ul class="collapse list-unstyled menu {{ in_array(Request::path(), $memberManagement) ? 'show' : '' }}" id="homeSubmenu1">
<li class="{{ Request::is('card-member') ? 'active' : '' }}">
<a href="{{ route('card-member') }}">Card Member</a>
</li> </li>
<li class="{{ Request::is('locked-accounts') ? 'active' : '' }}"> <li class="{{ Request::is('notification') ? 'active' : '' }}">
<a href="{{ route('locked-accounts') }}">Locked Accounts</a> <a href="{{ route('notification') }}" class="dashboard" style="display:flex">
<i class="fa-solid fa-bell" style="padding-top:3px"></i><span>Notifications</span>
</a>
</li>
<!-- Member Management -->
<li class="dropdown {{ in_array(Request::path(), $memberManagement) }}">
<a href="#homeSubmenu1" data-toggle="collapse"
aria-expanded="{{ in_array(Request::path(), $memberManagement) ? 'true' : 'false' }}"
class="dropdown-toggle" style="display:flex">
<i class="fa-solid fa-users-gear" style="padding-top:3px"></i><span>Member Management</span>
</a>
<ul class="collapse list-unstyled menu {{ in_array(Request::path(), $memberManagement) ? 'show' : '' }}"
id="homeSubmenu1">
<li class="{{ Request::is('card-member') ? 'active' : '' }}">
<a href="{{ route('card-member') }}">Card Member</a>
</li>
<li class="{{ Request::is('locked-accounts') ? 'active' : '' }}">
<a href="{{ route('locked-accounts') }}">Locked Accounts</a>
</li>
</ul>
</li>
<!-- Home Page -->
<li class="dropdown {{ in_array(Request::path(), $homePage) }}">
<a href="#pageSubmenu2" data-toggle="collapse"
aria-expanded="{{ in_array(Request::path(), $homePage) ? 'true' : 'false' }}"
class="dropdown-toggle" style="display:flex">
<i class="fa-solid fa-mobile-screen" style="padding-top:3px"></i><span>Home Page (Mobile)</span>
</a>
<ul class="collapse list-unstyled menu {{ in_array(Request::path(), $homePage) ? 'show' : '' }}"
id="pageSubmenu2">
<li class="{{ Request::is('photo-slider') ? 'active' : '' }}">
<a href="{{ route('photo-slider') }}">Photo Slider</a>
</li>
</ul>
</li>
<!-- Static -->
<li class="{{ Request::is('promotions') ? 'active' : '' }}">
<a href="{{ route('promotions') }}" class="dashboard" style="display:flex">
<i class="fa-solid fa-tag" style="padding-top:3px"></i><span>Promotions</span>
</a>
</li>
<li class="{{ Request::is('top-up') ? 'active' : '' }}">
<a href="{{ route('top-up') }}" class="dashboard" style="display:flex">
<i class="fa-solid fa-wallet" style="padding-top:3px"></i><span>Top-Up</span>
</a>
</li>
<!-- About Us -->
<li class="dropdown {{ in_array(Request::path(), $aboutUs) }}">
<a href="#pageSubmenu3" data-toggle="collapse"
aria-expanded="{{ in_array(Request::path(), $aboutUs) ? 'true' : 'false' }}"
class="dropdown-toggle" style="display:flex">
<i class="fa-solid fa-circle-info" style="padding-top:3px"></i><span>About Us</span>
</a>
<ul class="collapse list-unstyled menu {{ in_array(Request::path(), $aboutUs) ? 'show' : '' }}"
id="pageSubmenu3">
<li class="{{ Request::is('card-types') ? 'active' : '' }}">
<a href="{{ route('card-types') }}">Card Types</a>
</li>
<li class="{{ Request::is('terms-and-privacy') ? 'active' : '' }}">
<a href="{{ route('terms-and-privacy') }}">Terms & Privacy</a>
</li>
</ul>
</li>
<!-- Reports -->
<li class="dropdown {{ in_array(Request::path(), $reports) }}">
<a href="#pageSubmenu4" data-toggle="collapse"
aria-expanded="{{ in_array(Request::path(), $reports) ? 'true' : 'false' }}"
class="dropdown-toggle" style="display:flex">
<i class="fa-solid fa-chart-column" style="padding-top:3px"></i><span>Reports</span>
</a>
<ul class="collapse list-unstyled menu {{ in_array(Request::path(), $reports) ? 'show' : '' }}"
id="pageSubmenu4">
<li class="{{ Request::is('registration-report') ? 'active' : '' }}">
<a href="{{ route('registration-report') }}">Registration Report</a>
</li>
<li class="{{ Request::is('top-up-usage-report') ? 'active' : '' }}">
<a href="{{ route('top-up-usage-report') }}">Top-Up Usage Report</a>
</li>
<li class="{{ Request::is('mobile-usage-report') ? 'active' : '' }}">
<a href="{{ route('mobile-usage-report') }}">Mobile Usage Report</a>
</li>
<li class="{{ Request::is('station-rating-report') ? 'active' : '' }}">
<a href="{{ route('station-rating-report') }}">Station Rating Report</a>
</li>
</ul>
</li>
<!-- Static -->
<li class="{{ Request::is('system-parameters') ? 'active' : '' }}">
<a href="{{ route('system-parameters') }}" style="display:flex">
<i class="fa-solid fa-sliders" style="padding-top:3px"></i><span>System Parameters</span>
</a>
</li>
<!-- Station Locator -->
<li class="dropdown {{ in_array(Request::path(), $stationLocator) }}">
<a href="#pageSubmenu5" data-toggle="collapse"
aria-expanded="{{ in_array(Request::path(), $stationLocator) ? 'true' : 'false' }}"
class="dropdown-toggle" style="display:flex">
<i class="fa-solid fa-location-dot" style="padding-top:3px"></i><span>Station Locator</span>
</a>
<ul class="collapse list-unstyled menu {{ in_array(Request::path(), $stationLocator) ? 'show' : '' }}"
id="pageSubmenu5">
<li class="{{ Request::is('branches') ? 'active' : '' }}">
<a href="{{ route('branches') }}">Branches</a>
</li>
<li class="{{ Request::is('stations') ? 'active' : '' }}">
<a href="{{ route('stations') }}">Stations</a>
</li>
<li class="{{ Request::is('fuels') ? 'active' : '' }}">
<a href="{{ route('fuels') }}">Fuels</a>
</li>
</ul>
</li> </li>
</ul> </ul>
</li> </nav>
<!-- Home Page -->
<li class="dropdown {{ in_array(Request::path(), $homePage) }}">
<a href="#pageSubmenu2" data-toggle="collapse" aria-expanded="{{ in_array(Request::path(), $homePage) ? 'true' : 'false' }}" class="dropdown-toggle" style="display:flex">
<i class="fa-solid fa-mobile-screen" style="padding-top:3px"></i><span>Home Page (Mobile)</span>
</a>
<ul class="collapse list-unstyled menu {{ in_array(Request::path(), $homePage) ? 'show' : '' }}" id="pageSubmenu2">
<li class="{{ Request::is('photo-slider') ? 'active' : '' }}">
<a href="{{ route('photo-slider') }}">Photo Slider</a>
</li>
</ul>
</li>
<!-- Static -->
<li class="{{ Request::is('promotions') ? 'active' : '' }}">
<a href="{{ route('promotions') }}" class="dashboard" style="display:flex">
<i class="fa-solid fa-tag" style="padding-top:3px"></i><span>Promotions</span>
</a>
</li>
<li class="{{ Request::is('top-up') ? 'active' : '' }}">
<a href="{{ route('top-up') }}" class="dashboard" style="display:flex">
<i class="fa-solid fa-wallet" style="padding-top:3px"></i><span>Top-Up</span>
</a>
</li>
<!-- About Us -->
<li class="dropdown {{ in_array(Request::path(), $aboutUs) }}">
<a href="#pageSubmenu3" data-toggle="collapse" aria-expanded="{{ in_array(Request::path(), $aboutUs) ? 'true' : 'false' }}" class="dropdown-toggle" style="display:flex">
<i class="fa-solid fa-circle-info" style="padding-top:3px"></i><span>About Us</span>
</a>
<ul class="collapse list-unstyled menu {{ in_array(Request::path(), $aboutUs) ? 'show' : '' }}" id="pageSubmenu3">
<li class="{{ Request::is('card-types') ? 'active' : '' }}">
<a href="{{ route('card-types') }}">Card Types</a>
</li>
<li class="{{ Request::is('terms-and-privacy') ? 'active' : '' }}">
<a href="{{ route('terms-and-privacy') }}">Terms & Privacy</a>
</li>
</ul>
</li>
<!-- Reports -->
<li class="dropdown {{ in_array(Request::path(), $reports) }}">
<a href="#pageSubmenu4" data-toggle="collapse" aria-expanded="{{ in_array(Request::path(), $reports) ? 'true' : 'false' }}" class="dropdown-toggle" style="display:flex">
<i class="fa-solid fa-chart-column" style="padding-top:3px"></i><span>Reports</span>
</a>
<ul class="collapse list-unstyled menu {{ in_array(Request::path(), $reports) ? 'show' : '' }}" id="pageSubmenu4">
<li class="{{ Request::is('registration-report') ? 'active' : '' }}">
<a href="{{ route('registration-report') }}">Registration Report</a>
</li>
<li class="{{ Request::is('top-up-usage-report') ? 'active' : '' }}">
<a href="{{ route('top-up-usage-report') }}">Top-Up Usage Report</a>
</li>
<li class="{{ Request::is('mobile-usage-report') ? 'active' : '' }}">
<a href="{{ route('mobile-usage-report') }}">Mobile Usage Report</a>
</li>
<li class="{{ Request::is('station-rating-report') ? 'active' : '' }}">
<a href="{{ route('station-rating-report') }}">Station Rating Report</a>
</li>
</ul>
</li>
<!-- Static -->
<li class="{{ Request::is('system-parameters') ? 'active' : '' }}">
<a href="{{ route('system-parameters') }}" style="display:flex">
<i class="fa-solid fa-sliders" style="padding-top:3px"></i><span>System Parameters</span>
</a>
</li>
<!-- Station Locator -->
<li class="dropdown {{ in_array(Request::path(), $stationLocator) }}">
<a href="#pageSubmenu5" data-toggle="collapse" aria-expanded="{{ in_array(Request::path(), $stationLocator) ? 'true' : 'false' }}" class="dropdown-toggle" style="display:flex">
<i class="fa-solid fa-location-dot" style="padding-top:3px"></i><span>Station Locator</span>
</a>
<ul class="collapse list-unstyled menu {{ in_array(Request::path(), $stationLocator) ? 'show' : '' }}" id="pageSubmenu5">
<li class="{{ Request::is('branches') ? 'active' : '' }}">
<a href="{{ route('branches') }}">Branches</a>
</li>
<li class="{{ Request::is('stations') ? 'active' : '' }}">
<a href="{{ route('stations') }}">Stations</a>
</li>
<li class="{{ Request::is('fuels') ? 'active' : '' }}">
<a href="{{ route('fuels') }}">Fuels</a>
</li>
</ul>
</li>
</ul>
</nav>
@ -167,85 +182,91 @@
<!-- Page Content --> <!-- Page Content -->
<div id="content"> <div id="content">
<div class="top-navbar" > <div class="top-navbar">
<nav class="navbar navbar-expand-lg" style="background-color:rgba(231, 70, 16, 0.84)"> <nav class="navbar navbar-expand-lg" style="background-color:rgba(231, 70, 16, 0.84)">
<div class="container-fluid"> <div class="container-fluid">
<button type="button" id="sidebarCollapse" class="d-xl-block d-lg-block d-md-mone d-none"> <button type="button" id="sidebarCollapse" class="d-xl-block d-lg-block d-md-mone d-none">
<span class="fa-solid fa-arrow-left"></span> <span class="fa-solid fa-arrow-left"></span>
</button> </button>
<button class="d-inline-block d-lg-none ml-auto more-button" type="button" data-toggle="collapse" <button class="d-inline-block d-lg-none ml-auto more-button" type="button"
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> data-toggle="collapse" data-target="#navbarSupportedContent"
<i class="fas fa-ellipsis-v"></i> aria-controls="navbarSupportedContent" aria-expanded="false"
</button> aria-label="Toggle navigation">
<i class="fas fa-ellipsis-v"></i>
</button>
<div class="collapse navbar-collapse d-lg-block d-xl-block d-sm-none d-md-none d-none" id="navbarSupportedContent"> <div class="collapse navbar-collapse d-lg-block d-xl-block d-sm-none d-md-none d-none"
<ul class="nav navbar-nav ml-auto"> id="navbarSupportedContent">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle d-flex align-items-center gap-2" href="#" role="button" data-toggle="dropdown" > <a class="nav-link dropdown-toggle d-flex align-items-center gap-2" href="#"
<span style="margin-right:5px">LBTek Systems</span> role="button" data-toggle="dropdown">
<i class="fa-solid fa-user-circle" style="padding-right:5px"></i> <span style="margin-right:5px">LBTek Systems</span>
</a> <i class="fa-solid fa-user-circle" style="padding-right:5px"></i>
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-sm"> </a>
<li> <ul class="dropdown-menu dropdown-menu-end dropdown-menu-sm">
<a class="dropdown-item d-flex align-items-center gap-2" href="{{ route('my-profile') }}"> <li>
<i class="fa-solid fa-user" style="font-size:16px; color:gray;"></i> <a class="dropdown-item d-flex align-items-center gap-2"
<span>My Profile</span> href="{{ route('my-profile') }}">
</a> <i class="fa-solid fa-user" style="font-size:16px; color:gray;"></i>
</li> <span>My Profile</span>
<li> </a>
<a class="dropdown-item d-flex align-items-center gap-2" href="{{ route('login') }}"> </li>
<i class="fa-solid fa-right-from-bracket" style="font-size:16px; color:gray;"></i> <li>
<span>Logout</span> <a class="dropdown-item d-flex align-items-center gap-2"
</a> href="{{ route('login') }}">
</li> <i class="fa-solid fa-right-from-bracket"
</ul> style="font-size:16px; color:gray;"></i>
<span>Logout</span>
</a>
</li>
</ul>
</li> </li>
</ul> </ul>
</div>
</div> </div>
</div> </nav>
</nav> </div>
</div>
<div class="main-content"> <div class="main-content container-xxl">
<div class="row ">
<div class="col-lg-7 col-md-12">
<div class="card" style="min-height: 500px; ">
<div class="card-header ">
<div class="row">
<div class="col-12">
<div class="card" style="min-height: 500px;">
<div class="card-header">
@yield('content') @yield('content')
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
</div>
</div> </div>
</div>
</div> </div>
@ -255,39 +276,32 @@
<!-- Optional JavaScript --> <!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS --> <!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="js/jquery-3.3.1.slim.min.js"></script> <script src="js/jquery-3.3.1.slim.min.js"></script>
<script src="js/popper.min.js"></script> <script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script> <script src="js/bootstrap.min.js"></script>
<script src="js/jquery-3.3.1.min.js"></script> <script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function () { $(document).ready(function() {
$('#sidebarCollapse').on('click', function () { $('#sidebarCollapse').on('click', function() {
$('#sidebar').toggleClass('active'); $('#sidebar').toggleClass('active');
$('#content').toggleClass('active'); $('#content').toggleClass('active');
}); });
$('.more-button,.body-overlay').on('click', function () { $('.more-button,.body-overlay').on('click', function() {
$('#sidebar,.body-overlay').toggleClass('show-nav'); $('#sidebar,.body-overlay').toggleClass('show-nav');
}); });
}); });
</script>
</script> </body>
</body>
</html>
</html>

View File

@ -3,12 +3,29 @@
@section('page_title', 'User Management') @section('page_title', 'User Management')
@section('content') @section('content')
<div class="card" style="min-height: 500px;"> <div class="card" style="min-height: 500px;">
<div class="card-header"> <div class="card-header">
<i class="fa-solid fa-users" style="color:gray;"> User Management</i> <i class="fa-solid fa-users" style="color:gray;"> User Management</i>
</div>
<div class="card-body">
<p>This is the User Management page content.This is the User Management page content.This is the User Management
page content.This is the User Management page content.This is the User Management page content.This is the
User Management page content.This is the User Management page content.This is the User Management page
content.This is the User Management page content.This is the User Management page content.This is the User
Management page content.This is the User Management page content.This is the User Management page
content.This is the User Management page content.This is the User Management page content.This is the User
Management page content.This is the User Management page content.This is the User Management page
content.This is the User Management page content.This is the User Management page content.This is the User
Management page content.This is the User Management page content.This is the User Management page
content.This is the User Management page content.This is the User Management page content.This is the User
Management page content.This is the User Management page content.This is the User Management page
content.This is the User Management page content.This is the User Management page content.This is the User
Management page content.This is the User Management page content.This is the User Management page
content.This is the User Management page content.This is the User Management page content.This is the User
Management page content.This is the User Management page content.This is the User Management page
content.This is the User Management page content.This is the User Management page content.This is the User
Management page content.This is the User Management page content.This is the User Management page content.
</p>
</div>
</div> </div>
<div class="card-body">
<p>This is the User Management page content.</p>
</div>
</div>
@endsection @endsection