tieptk/admin_hura_8
2
1
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

update menu, hover

Browse Source
This commit is contained in:
Tieptk
2025-02-24 10:09:33 +07:00
parent dd8de9838f
commit d20a20684d
7 changed files with 177 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
assets/script/full.min.css → assets/script/daisyui.css
View File

109
assets/script/pc_style.css → assets/script/extension_daisyui.css
View File

@@ -68,6 +68,7 @@ body {
line-height: 1.5;
margin: auto;
min-height: 100vh;
min-width: 1200px;
}
img {
@@ -313,6 +314,68 @@ a {
.admin-menu-container .icon-home {
background-position: -9px -7px;
}
.admin-menu-container .box-hover {
padding: 10px 22px 10px 15px;
border-radius: 6px;
background: #004e99;
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
white-space: nowrap;
position: fixed;
left: 240px;
top: 0;
display: none;
min-width: 200px;
z-index: 999;
max-height: 400px;
overflow: auto;
}
.admin-menu-container .box-hover.active {
display: block;
}
.admin-menu-container .box-hover::after {
position: absolute;
content: "";
left: -29px;
top: 0;
width: 37px;
height: 100%;
}
.admin-menu-container .box-hover a {
display: block;
line-height: 18px;
position: relative;
padding-bottom: 12px;
padding-left: 20px;
}
.admin-menu-container .box-hover a::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: #79b0e2;
position: absolute;
top: 4px;
left: 0;
z-index: 9;
}
.admin-menu-container .box-hover a::after {
content: "";
width: 1px;
height: 100%;
background: #fff;
position: absolute;
top: 4px;
left: 4px;
}
.admin-menu-container .box-hover a:last-child {
padding-bottom: 0;
}
.admin-menu-container .box-hover a:last-child::after {
display: none;
}
.admin-menu-container .box-hover a:hover {
text-decoration: underline;
}
.admin-menu-container .icon-order {
background-position: -45px -7px;
}
@@ -368,7 +431,7 @@ a {
.admin-content-container {
width: calc(100% - 245px);
overflow-y: auto;
overflow: auto;
}
.admin-content-container .note-list {
min-width: 144px;
@@ -826,46 +889,4 @@ a {
.admin-menu-container {
display: block;
}
}
@media (min-width: 1600px) {
.admin-menu-container {
display: block;
}
}
@media (min-width: 1366px) {
.admin-menu-container {
display: block;
}
}
@media screen and (max-width: 1365px) and (min-width: 1024px) {
.admin-menu-container {
display: block;
}
}
@media (max-width: 1023px) {
.admin-menu-container {
display: none;
}
.admin-content-container {
margin-left: 0;
width: 100%;
}
}
@media (max-width: 767px) {
.admin-content-container {
width: 100%;
margin-left: 0;
}
.admin-content-container .content-holder {
padding: 10px;
}
.admin-content-container .item-stat {
grid-column: span 2/span 2;
}
.admin-content-container .item-chart {
grid-column: span 4/span 4;
}
#js-form-search {
display: none;
}
}/*# sourceMappingURL=pc_style.css.map */
}/*# sourceMappingURL=extension_daisyui.css.map */

1
assets/script/extension_daisyui.css.map Normal file
View File

File diff suppressed because one or more lines are too long

114
assets/script/pc_style.scss → assets/script/extension_daisyui.scss
View File

@@ -61,6 +61,7 @@ body {
line-height: 1.5;
margin: auto;
min-height: 100vh;
min-width: 1200px;
}
img {
max-width: 100%;
@@ -306,6 +307,70 @@ a {
.icon-home {
background-position: -9px -7px;
}
.box-hover {
padding: 10px 22px 10px 15px;
border-radius: 6px;
background: #004e99;
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
white-space: nowrap;
position: fixed;
left: 240px;
top: 0;
display: none;
min-width: 200px;
z-index: 999;
max-height: 400px;
overflow: auto;
&.active {
display: block;
}
&::after {
position: absolute;
content: "";
left: -29px;
top: 0;
width: 37px;
height: 100%;
}
a {
display: block;
line-height: 18px;
position: relative;
padding-bottom: 12px;
padding-left: 20px;
&::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: #79b0e2;
position: absolute;
top: 4px;
left: 0;
z-index: 9;
}
&::after {
content: "";
width: 1px;
height: 100%;
background: #fff;
position: absolute;
top: 4px;
left: 4px;
}
&:last-child {
padding-bottom: 0;
&::after {
display: none;
}
}
&:hover {
text-decoration: underline;
}
}
}
.icon-order {
background-position: -45px -7px;
}
@@ -362,7 +427,7 @@ a {
.admin-content-container {
width: calc(100% - 245px);
overflow-y: auto;
overflow: auto;
.note-list {
min-width: 144px;
a {
@@ -834,50 +899,3 @@ a {
display: block;
}
}
@media (min-width: 1600px) {
.admin-menu-container {
display: block;
}
}
@media (min-width: 1366px) {
.admin-menu-container {
display: block;
}
}
@media screen and (max-width: 1365px) and (min-width: 1024px) {
.admin-menu-container {
display: block;
}
}
@media (max-width: 1023px) {
.admin-menu-container {
display: none;
}
.admin-content-container {
margin-left: 0;
width: 100%;
}
}
@media (max-width: 767px) {
.admin-content-container {
width: 100%;
margin-left: 0;
.content-holder {
padding: 10px;
}
.item-stat {
grid-column: span 2 / span 2;
}
.item-chart {
grid-column: span 4 / span 4;
}
}
#js-form-search {
display: none;
}
}

1
assets/script/pc_style.css.map
View File

File diff suppressed because one or more lines are too long

40
template/javascript/global.html
View File

@@ -7,6 +7,9 @@
$('#overlay').addClass('active');
});
// hover show danh muc con
HoverShowMenu();
AdminFunctions.searchSuggestions('#js-input-search')
})
@@ -17,6 +20,43 @@
}
function HoverShowMenu() {
$("#js-menu-big .box-item .item").on("mousemove", function () {
let $checkMenu = $('#js-menu-big').hasClass('active');
if ($checkMenu) {
let $hoverMenu = $('#js-hover-menu');
let $this = $(this).parents('.box-item');
let $hoverContent = $this.find('.hover-menu');
if ($hoverContent.length) {
let offset = $this.offset();
let x = offset.left + $("#js-menu-big").width();
let y = offset.top;
// Kiểm tra nếu hoverContent bị tràn màn hình ở dưới
let hoverHeight = $hoverContent.outerHeight();
let windowHeight = $(window).height();
let maxY = $(window).scrollTop() + windowHeight; // Vị trí Y tối đa có thể hiển thị
let newY = y;
if (y + hoverHeight > maxY) {
newY = maxY - hoverHeight - 10;
}
$hoverMenu.addClass('active')
.html($hoverContent.html())
.css({ left: x, top: newY });
}
}
});
$("#js-hover-menu").on("mouseleave", function () {
$("#js-hover-menu").removeClass("active");
});
}
function formatCurrency(a) {
var b = parseFloat(a).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1.").toString();
var len = b.length;

16
template/theme.html
View File

@@ -11,18 +11,13 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap"
rel="stylesheet">
<link rel="stylesheet" media="screen" href="{{ 'full.min.css' | asset_url }}?v12.11" />
<link rel="stylesheet" media="screen" href="{{ 'pc_style.css' | asset_url }}?v2025.02" />
<link rel="stylesheet" media="screen" href="{{ 'daisyui.css' | asset_url }}?v12.11" />
<link rel="stylesheet" media="screen" href="{{ 'extension_daisyui.css' | asset_url }}?v2025.02" />
<script src="{{ 'tailwindcss.js' | asset_url }}"></script>
</head>
<body>
<div id="overlay" onclick="clickBackground()"></div>
<div class="admin-global-container">
@@ -104,6 +99,9 @@
<span class="title text-[14px]"> Cài đặt </span>
</a>
</div>
<div class="box-hover" id="js-hover-menu">
</div>
</div>
<div class="admin-content-container h-screen" id="js-admin-content-container">
@@ -111,10 +109,6 @@
<div
class="admin-header-container flex items-center justify-between bg-white px-4 py-3 sticky top-0 z-[99] border-b-[1px] border-[#eef0f2]">
<div class="flex items-center">
<a href="javascript:void(0)" title="Mở menu"
class="icon-close lg:hidden md:block mr-[10px] 2xl:hidden sm:block" id="js-show-menu">
<i class="fa fa-bars text-[25px]"></i>
</a>
<form class="w-[420px] relative w-[100%] menu-hide" id="js-form-search">
<div
class="content w-[100%] flex items-center border-[#ECECEC] border-[1px] rounded-[5px] focus-within:border-[#0041E8]">