This commit is contained in:
2024-01-27 11:19:25 +07:00
parent 31aaee0dcd
commit 7217f8b92f
5 changed files with 246 additions and 229 deletions

View File

@@ -141,7 +141,7 @@ a {
overflow: auto; overflow: auto;
background: #004e99; background: #004e99;
color: #fff; color: #fff;
width: 20%; width: 18%;
padding: 20px 0; padding: 20px 0;
line-height: 20px; line-height: 20px;
} }
@@ -494,6 +494,12 @@ a {
line-height: 20px; line-height: 20px;
} }
.admin-content-container {
width: calc(100% - 50px);
}
.admin-content-container.show-large-menu {
width: 82%;
}
.admin-content-container .note-list { .admin-content-container .note-list {
min-width: 144px; min-width: 144px;
} }
@@ -719,6 +725,9 @@ input[type=radio]:focus:before {
.order-page .order-page-table td { .order-page .order-page-table td {
padding: 14px 8px; padding: 14px 8px;
} }
.order-page .order-page-table td:nth-child(4), .order-page .order-page-table td:nth-child(10) {
text-align: left;
}
.order-page .order-page-table .icons { .order-page .order-page-table .icons {
width: 30px; width: 30px;
height: 30px; height: 30px;
@@ -751,6 +760,7 @@ input[type=radio]:focus:before {
.order-page-table thead { .order-page-table thead {
background: #F6F6F6; background: #F6F6F6;
font-weight: 600; font-weight: 600;
text-align: center;
} }
.order-page-table thead td { .order-page-table thead td {
padding: 8px; padding: 8px;

File diff suppressed because one or more lines are too long

View File

@@ -121,7 +121,7 @@ a {
overflow: auto; overflow: auto;
background: #004e99; background: #004e99;
color: #fff; color: #fff;
width: 20%; width: 18%;
padding: 20px 0; padding: 20px 0;
line-height: 20px; line-height: 20px;
a { a {
@@ -483,6 +483,10 @@ a {
} }
} }
.admin-content-container { .admin-content-container {
width: calc(100% - 50px);
&.show-large-menu {
width: 82%;
}
.note-list { .note-list {
min-width: 144px; min-width: 144px;
a { a {
@@ -734,6 +738,9 @@ input[type="radio"] {
} }
td{ td{
padding: 14px 8px; padding: 14px 8px;
&:nth-child(4), &:nth-child(10){
text-align: left;
}
} }
.icons { .icons {
width: 30px; width: 30px;
@@ -767,6 +774,7 @@ input[type="radio"] {
thead { thead {
background: #F6F6F6; background: #F6F6F6;
font-weight: 600; font-weight: 600;
text-align: center;
td{ td{
padding: 8px; padding: 8px;
} }

View File

@@ -20,6 +20,13 @@
// Hàm để cập nhật trạng thái hiển thị menu và localStorage // Hàm để cập nhật trạng thái hiển thị menu và localStorage
function capNhatTrangThaiMenu(hideMenuBig) { function capNhatTrangThaiMenu(hideMenuBig) {
if(hideMenuBig === false){
$('#js-admin-content-container').addClass('show-large-menu')
} else {
$('#js-admin-content-container').removeClass('show-large-menu')
}
$('#js-menu-big').toggleClass('hidden', hideMenuBig); $('#js-menu-big').toggleClass('hidden', hideMenuBig);
$('#js-menu-small').toggleClass('hidden', !hideMenuBig); $('#js-menu-small').toggleClass('hidden', !hideMenuBig);
$('#js-form-search').toggleClass('menu-hide', hideMenuBig); $('#js-form-search').toggleClass('menu-hide', hideMenuBig);

View File

@@ -22,13 +22,12 @@
<script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
</head> </head>
<body> <body>
{{global|show_var}} {{ global | show_var }}
{{page|show_var}} {{ page | show_var }}
<div class="admin-global-container"> <div class="admin-global-container">
<!-- Menu cũ --> <!-- Menu cũ -->
<div class="admin-menu-container box-menu sticky top-0 bottom-0 h-[100vh] hidden" id="js-menu-big"> <div class="admin-menu-container box-menu sticky top-0 bottom-0 h-[100vh] hidden" id="js-menu-big">
@@ -108,15 +107,12 @@
<i class="icons icon-logout"></i> <i class="icons icon-logout"></i>
<span class="title"> Thoát quản trị </span> <span class="title"> Thoát quản trị </span>
</a> </a>
</div> </div>
<!-- Menu mới --> <!-- Menu mới -->
<div class="admin-menu box-menu sticky top-0 bg-[#004E99] flex flex-col justify-between pb-[20px] min-h-[100vh]" <div class="admin-menu box-menu sticky top-0 bg-[#004E99] flex flex-col justify-between pb-[20px] min-h-[100vh]" id="js-menu-small">
id="js-menu-small">
<div> <div>
<div <div class="logo item items-center justify-center border-[rgba(255,255,255,0.15)] border-b p-[20px_0_38px_!important]">
class="logo item items-center justify-center border-[rgba(255,255,255,0.15)] border-b p-[20px_0_38px_!important]">
<a href="/" class=""> <a href="/" class="">
<img src="../assets/images/logo_small.png" alt=""> <img src="../assets/images/logo_small.png" alt="">
</a> </a>
@@ -223,7 +219,7 @@
</div> </div>
</div> </div>
<div class="admin-content-container w-[100%]"> <div class="admin-content-container" id="js-admin-content-container">
<!-- Header --> <!-- Header -->
<div class="admin-header-container flex items-center justify-between bg-white px-4 py-3"> <div class="admin-header-container flex items-center justify-between bg-white px-4 py-3">
<form class="max-w-[420px] relative w-[100%] menu-hide" id="js-form-search"> <form class="max-w-[420px] relative w-[100%] menu-hide" id="js-form-search">
@@ -239,8 +235,7 @@
<i class="icons header-support"></i> <i class="icons header-support"></i>
</a> </a>
<div <div class="group relative cursor-pointer ml-[20px] mr-[35px] group [&_summary::-webkit-details-marker]:hidden">
class="group relative cursor-pointer ml-[20px] mr-[35px] group [&_summary::-webkit-details-marker]:hidden">
<div class="relative flex"> <div class="relative flex">
<i class="icons icon-notification"></i> <i class="icons icon-notification"></i>
@@ -250,8 +245,7 @@
</span> </span>
</div> </div>
<div <div class="group-hover:opacity-[1] group-hover:z-[1] opacity-0 absolute bg-white leading-[30px] note-list shadow whitespace-nowrap z-[-1] rounded-[4px] right-[-10px]">
class="group-hover:opacity-[1] group-hover:z-[1] opacity-0 absolute bg-white leading-[30px] note-list shadow whitespace-nowrap z-[-1] rounded-[4px] right-[-10px]">
<a href=""> Menu title </a> <a href=""> Menu title </a>
<a href=""> Menu title </a> <a href=""> Menu title </a>
<a href=""> Menu title </a> <a href=""> Menu title </a>
@@ -268,8 +262,7 @@
<i class="fa-solid fa-sort-down text-[#C9C9C9] mb-[3px]"></i> <i class="fa-solid fa-sort-down text-[#C9C9C9] mb-[3px]"></i>
</div> </div>
<div <div class="group-hover:opacity-[1] group-hover:z-[1] opacity-0 absolute bg-white leading-[30px] note-list shadow whitespace-nowrap z-[-1] rounded-[4px] right-0">
class="group-hover:opacity-[1] group-hover:z-[1] opacity-0 absolute bg-white leading-[30px] note-list shadow whitespace-nowrap z-[-1] rounded-[4px] right-0">
<a href="">Đổi mật khẩu</a> <a href="">Đổi mật khẩu</a>
<a href="">Thoát quản trị</a> <a href="">Thoát quản trị</a>
</div> </div>
@@ -278,13 +271,12 @@
</div> </div>
<!-- Content --> <!-- Content -->
{{page_content}} {{ page_content }}
</div>
</div> </div>
</div>
{% include javascript/index %} {% include javascript/index %}
</body> </body>
</html> </html>