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

up

Browse Source
This commit is contained in:
Tieptk
2025-02-10 16:51:19 +07:00
parent cc0f195bee
commit 961e92b965
11 changed files with 302 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
assets/script/global.js
View File

@@ -30,9 +30,6 @@ const AdminFunction = (() => {
$("#js-status-hottype-" + e).html("");
}, 1e3);
}
function a(e) {
$(e).select2();
}
function i(e) {
$("#overlay").addClass("active"), $(".status-notificatiom").addClass("active"), !0 === e ? $(".status-notificatiom .content").html('<i class="fa fa-check"></i> <b>Cập nhật thành công</b>\n <p>Đơn hàng #000-368 đã được cập nhật thành công</p>') : $(".status-notificatiom .content").html('<i class="fa-solid fa-triangle-exclamation"></i> <b>Lỗi cập nhật</b><p>Có một số vấn đề với hoạt động của bạn.</p>');
}

103
assets/script/pc_style.css
View File

@@ -1,4 +1,5 @@
@charset "UTF-8";
@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css";
*,
::after,
::before {
@@ -128,34 +129,22 @@ a {
width: 16%;
padding: 20px 0;
line-height: 20px;
}
.admin-menu-container.active {
overflow-y: auto;
overflow-x: hidden;
}
.admin-menu-container a {
color: #fff;
}
.admin-menu-container .menu-logo {
display: table;
margin-bottom: 50px;
margin-bottom: 25px;
margin-left: 16px;
}
.admin-menu-container .menu-logo img {
height: 22px;
}
.admin-menu-container details[open] svg {
transform: rotate(90deg);
}
.admin-menu-container details[open] summary {
background: #81b5e4;
}
.admin-menu-container details[open] summary a {
font-weight: 700;
}
.admin-menu-container details[open] .icons {
filter: brightness(100);
}
.admin-menu-container details[open] .fa-angle-right {
transform: rotate(90deg);
}
.admin-menu-container svg {
position: absolute;
right: 16px;
@@ -173,7 +162,7 @@ a {
.admin-menu-container .item:hover .icons {
filter: brightness(100);
}
.admin-menu-container .item:hover .sub-hover {
.admin-menu-container .item:hover .hover-menu {
display: block;
}
.admin-menu-container .item .icons {
@@ -184,8 +173,17 @@ a {
.admin-menu-container .title-main {
width: 100%;
}
.admin-menu-container .box-item:hover .hover-menu {
visibility: visible;
opacity: 1;
left: calc(100% + 10px);
}
.admin-menu-container .box-item:hover .hover-menu::before {
display: block;
}
.admin-menu-container .sub-menu {
position: relative;
display: none;
}
.admin-menu-container .sub-menu a {
display: block;
@@ -204,6 +202,73 @@ a {
.admin-menu-container .sub-menu a:last-child {
margin: 0;
}
.admin-menu-container .hover-menu {
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;
z-index: -1;
transition: 0.2s all;
position: absolute;
left: calc(100% + 30px);
top: 0;
opacity: 0;
visibility: hidden;
min-width: 200px;
z-index: 999;
max-height: 400px;
overflow: auto;
}
.admin-menu-container .hover-menu.bottom {
bottom: -30px;
top: unset;
}
.admin-menu-container .hover-menu::before {
position: absolute;
left: -15px;
top: 0;
width: 30px;
height: 100%;
content: "";
display: none;
}
.admin-menu-container .hover-menu a {
display: block;
line-height: 18px;
position: relative;
padding-bottom: 12px;
padding-left: 20px;
}
.admin-menu-container .hover-menu a::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: #79b0e2;
position: absolute;
top: 4px;
left: 0;
z-index: 9;
}
.admin-menu-container .hover-menu a::after {
content: "";
width: 1px;
height: 100%;
background: #fff;
position: absolute;
top: 4px;
left: 4px;
}
.admin-menu-container .hover-menu a:last-child {
padding-bottom: 0;
}
.admin-menu-container .hover-menu a:last-child::after {
display: none;
}
.admin-menu-container .hover-menu a:hover {
text-decoration: underline;
}
.admin-menu-container .icon-home {
background-position: -9px -7px;
}
@@ -263,10 +328,6 @@ a {
.admin-content-container {
width: calc(100% - 50px);
}
.admin-content-container.show-large-menu {
width: 82%;
margin-left: 0;
}
.admin-content-container .note-list {
min-width: 144px;
}

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

File diff suppressed because one or more lines are too long

115
assets/script/pc_style.scss
View File

@@ -1,3 +1,5 @@
@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css";
*,
::after,
::before {
@@ -111,37 +113,21 @@ a {
width: 16%;
padding: 20px 0;
line-height: 20px;
overflow-y: auto;
&.active {
overflow-y: auto;
overflow-x: hidden;
}
a {
color: #fff;
}
.menu-logo {
display: table;
margin-bottom: 50px;
margin-bottom: 25px;
margin-left: 16px;
img {
height: 22px;
}
}
details {
&[open] {
svg {
transform: rotate(90deg);
}
summary {
background: #81b5e4;
a {
font-weight: 700;
}
}
.icons {
filter: brightness(100);
}
.fa-angle-right {
transform: rotate(90deg);
}
}
}
svg {
position: absolute;
@@ -160,7 +146,7 @@ a {
.icons {
filter: brightness(100);
}
.sub-hover {
.hover-menu {
display: block;
}
}
@@ -174,8 +160,21 @@ a {
.title-main {
width: 100%;
}
.box-item {
&:hover {
.hover-menu {
visibility: visible;
opacity: 1;
left: calc(100% + 10px);
&::before {
display: block;
}
}
}
}
.sub-menu {
position: relative;
display: none;
a {
display: block;
padding: 10px 10px 10px 45px;
@@ -194,6 +193,74 @@ a {
}
}
}
.hover-menu {
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;
z-index: -1;
transition: 0.2s all;
position: absolute;
left: calc(100% + 30px);
top: 0;
opacity: 0;
visibility: hidden;
min-width: 200px;
z-index: 999;
max-height: 400px;
overflow: auto;
&.bottom {
bottom: -30px;
top: unset;
}
&::before {
position: absolute;
left: -15px;
top: 0;
width: 30px;
height: 100%;
content: "";
display: none;
}
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-home {
background-position: -9px -7px;
}
@@ -253,10 +320,6 @@ a {
.admin-content-container {
width: calc(100% - 50px);
&.show-large-menu {
width: 82%;
margin-left: 0;
}
.note-list {
min-width: 144px;
a {

44
assets/typescript/main.js
View File

@@ -1,10 +1,10 @@
"use strict";
const AdminFunctions = (() => {
var AdminFunctions = (function () {
function toggleMenuVisibility(hideLargeMenu) {
const contentContainer = $('#js-admin-content-container');
const largeMenu = $('#js-menu-big');
const smallMenu = $('#js-menu-small');
const searchForm = $('#js-form-search');
var contentContainer = $('#js-admin-content-container');
var largeMenu = $('#js-menu-big');
var smallMenu = $('#js-menu-small');
var searchForm = $('#js-form-search');
contentContainer.toggleClass('show-large-menu', !hideLargeMenu);
largeMenu.toggleClass('hidden', hideLargeMenu);
smallMenu.toggleClass('hidden', !hideLargeMenu);
@@ -13,15 +13,19 @@ const AdminFunctions = (() => {
localStorage.removeItem(hideLargeMenu ? 'menu_small' : 'menu_big');
}
function debounce(func, wait, immediate) {
let timeout = null;
return function (...args) {
const context = this;
const later = function () {
var timeout = null;
return function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
var context = this;
var later = function () {
timeout = null;
if (!immediate)
func.apply(context, args);
};
const callNow = immediate && !timeout;
var callNow = immediate && !timeout;
if (timeout !== null) {
clearTimeout(timeout);
}
@@ -31,9 +35,9 @@ const AdminFunctions = (() => {
};
}
function addProductToCategory(productId) {
const statusElement = $('#status_' + productId);
var statusElement = $('#status_' + productId);
statusElement.html('<span class="loading loading-bars loading-sm"></span><span class="ml-[3px]">Processing...</span>');
setTimeout(() => {
setTimeout(function () {
statusElement.html('');
}, 1000);
}
@@ -46,20 +50,16 @@ const AdminFunctions = (() => {
});
}
function markProductAsHot(productId) {
const statusElement = $('#js-status-hottype-' + productId);
var statusElement = $('#js-status-hottype-' + productId);
statusElement.html('<span class="loading loading-bars loading-sm"></span><span class="ml-[3px]">Processing...</span>');
setTimeout(() => {
setTimeout(function () {
statusElement.html('');
}, 1000);
}
function initializeSearchDropdown(selector) {
$(selector).select2();
}
return {
toggleMenuVisibility,
addProductToCategory,
searchSuggestions,
initializeSearchDropdown,
markProductAsHot
toggleMenuVisibility: toggleMenuVisibility,
addProductToCategory: addProductToCategory,
searchSuggestions: searchSuggestions,
markProductAsHot: markProductAsHot
};
})();

6
assets/typescript/main.ts
View File

@@ -4,7 +4,6 @@ interface AdminFunctions {
toggleMenuVisibility(hideLargeMenu: boolean): void;
addProductToCategory(productId: string): void;
searchSuggestions(inputSelector: string): void;
initializeSearchDropdown(selector: string): void;
markProductAsHot(productId: string): void;
}
@@ -68,15 +67,10 @@ const AdminFunctions: AdminFunctions = (() => {
}, 1000);
}
function initializeSearchDropdown(selector: string): void {
$(selector).select2();
}
return {
toggleMenuVisibility,
addProductToCategory,
searchSuggestions,
initializeSearchDropdown,
markProductAsHot
};
})();