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>
<html lang="en">
<head>
<head>
<!-- Required meta tags -->
<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, minimum-scale=1, maximum-scale=1">
<title>CMS-Laravel
</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!----css3---->
<link rel="stylesheet" href="css/custom.css">
<!-- SLIDER REVOLUTION 4.x CSS SETTINGS -->
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<title>CMS-Laravel
</title>
<link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}">
<link rel="stylesheet" href="{{ asset('css/custom.css') }}">
<link rel="preconnect" href="https://fonts.googleapis.com">
<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 rel="preconnect" href="https://fonts.googleapis.com">
<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 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>
<body>
</head>
<body>
<div class="wrapper">
<div class="wrapper">
<div class="body-overlay"></div>
<div class="body-overlay"></div>
@php
$memberManagement = ['card-member', 'locked-accounts'];
$homePage = ['photo-slider'];
$aboutUs = ['card-types', 'terms-and-privacy'];
$reports = ['registration-report', 'top-up-usage-report', 'mobile-usage-report', 'station-rating-report'];
$stationLocator = ['branches', 'stations', 'fuels'];
@endphp
@php
$memberManagement = ['card-member', 'locked-accounts'];
$homePage = ['photo-slider'];
$aboutUs = ['card-types', 'terms-and-privacy'];
$reports = ['registration-report', 'top-up-usage-report', 'mobile-usage-report', 'station-rating-report'];
$stationLocator = ['branches', 'stations', 'fuels'];
@endphp
<!-- Sidebar -->
<nav id="sidebar">
<div class="sidebar-header">
<h3><img src="img/logo.png" class="img-fluid"/><span></span></h3>
</div>
<!-- Sidebar -->
<nav id="sidebar">
<div class="sidebar-header">
<h3><img src="img/logo.png" class="img-fluid" /><span></span></h3>
</div>
<ul class="list-unstyled components">
<ul class="list-unstyled components">
<!-- Static Items -->
<li class="{{ Request::is('user-management') ? 'active' : '' }}">
<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>
</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>
<!-- Static Items -->
<li class="{{ Request::is('user-management') ? 'active' : '' }}">
<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>
</a>
</li>
<li class="{{ Request::is('locked-accounts') ? 'active' : '' }}">
<a href="{{ route('locked-accounts') }}">Locked Accounts</a>
<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 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>
</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>
</ul>
</nav>
</nav>
@ -167,85 +182,91 @@
<!-- Page Content -->
<div id="content">
<div class="top-navbar" >
<nav class="navbar navbar-expand-lg" style="background-color:rgba(231, 70, 16, 0.84)">
<div class="container-fluid">
<div class="top-navbar">
<nav class="navbar navbar-expand-lg" style="background-color:rgba(231, 70, 16, 0.84)">
<div class="container-fluid">
<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>
</button>
<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>
</button>
<button class="d-inline-block d-lg-none ml-auto more-button" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-ellipsis-v"></i>
</button>
<button class="d-inline-block d-lg-none ml-auto more-button" type="button"
data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false"
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">
<ul class="nav navbar-nav ml-auto">
<div class="collapse navbar-collapse d-lg-block d-xl-block d-sm-none d-md-none d-none"
id="navbarSupportedContent">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle d-flex align-items-center gap-2" href="#" role="button" data-toggle="dropdown" >
<span style="margin-right:5px">LBTek Systems</span>
<i class="fa-solid fa-user-circle" style="padding-right:5px"></i>
</a>
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-sm">
<li>
<a class="dropdown-item d-flex align-items-center gap-2" href="{{ route('my-profile') }}">
<i class="fa-solid fa-user" style="font-size:16px; color:gray;"></i>
<span>My Profile</span>
</a>
</li>
<li>
<a class="dropdown-item d-flex align-items-center gap-2" href="{{ route('login') }}">
<i class="fa-solid fa-right-from-bracket" style="font-size:16px; color:gray;"></i>
<span>Logout</span>
</a>
</li>
</ul>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle d-flex align-items-center gap-2" href="#"
role="button" data-toggle="dropdown">
<span style="margin-right:5px">LBTek Systems</span>
<i class="fa-solid fa-user-circle" style="padding-right:5px"></i>
</a>
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-sm">
<li>
<a class="dropdown-item d-flex align-items-center gap-2"
href="{{ route('my-profile') }}">
<i class="fa-solid fa-user" style="font-size:16px; color:gray;"></i>
<span>My Profile</span>
</a>
</li>
<li>
<a class="dropdown-item d-flex align-items-center gap-2"
href="{{ route('login') }}">
<i class="fa-solid fa-right-from-bracket"
style="font-size:16px; color:gray;"></i>
<span>Logout</span>
</a>
</li>
</ul>
</li>
</li>
</ul>
</ul>
</div>
</div>
</div>
</nav>
</div>
</nav>
</div>
<div class="main-content">
<div class="row ">
<div class="col-lg-7 col-md-12">
<div class="card" style="min-height: 500px; ">
<div class="card-header ">
<div class="main-content container-xxl">
<div class="row">
<div class="col-12">
<div class="card" style="min-height: 500px;">
<div class="card-header">
@yield('content')
</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 -->
<script src="js/jquery-3.3.1.slim.min.js"></script>
<script src="js/popper.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.slim.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
<script type="text/javascript">
$(document).ready(function() {
$('#sidebarCollapse').on('click', function() {
$('#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');
});
});
</script>
</script>
</body>
</html>
</body>
</html>

View File

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