From 36f50bb773c3086dc3424ada52f1f67f3237e93f Mon Sep 17 00:00:00 2001 From: Quy_FE Date: Wed, 25 Jun 2025 17:23:33 +0700 Subject: [PATCH] =?UTF-8?q?Refactor=20:=20icon=20back=20v=C3=A0=20header,?= =?UTF-8?q?=20th=C3=AAm=20responsive=20cho=20m=C3=A0n=20th=E1=BB=91ng=20k?= =?UTF-8?q?=C3=AA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/assets/css/all.css | 204 ++++++++---------- src/_components/Header/index.js | 37 ++-- .../boxChart/BoxDoughnutBarChart.js | 1 + src/_components/boxChart/boxChart.scss | 2 +- src/_components/renderIcon/index.js | 4 +- .../home/detail-room-education/index.js | 4 +- .../educationDepartmentHome.style.scss | 20 +- .../home/outstanding-teacher/index.js | 2 +- .../outstandingTeacher.style.scss | 11 +- 9 files changed, 147 insertions(+), 138 deletions(-) diff --git a/public/assets/css/all.css b/public/assets/css/all.css index 1cc8b62..aee67f5 100644 --- a/public/assets/css/all.css +++ b/public/assets/css/all.css @@ -50,14 +50,17 @@ font-family: "AvertaStdCY-Black"; src: url(../fonts/AvertaStdCY-Black_1.otf); } + @font-face { font-family: "AvertaStdCY-ExtraBold"; src: url(../fonts/AvertaStdCY-Extrabold_1.otf); } + @font-face { font-family: "AvertaStdCY-ExtraBoldItalic"; src: url(../fonts/AvertaStdCY-ExtraboldItalic_1.otf); } + @font-face { font-family: "AvertaStdCY-Bold"; src: url(../fonts/AvertaStdCY-Bold_1.otf); @@ -72,6 +75,7 @@ font-family: "AvertaStdCY"; src: url(../fonts/AvertaStdCY-Regular_3.otf); } + @font-face { font-family: "AvertaStdCY-Italic"; src: url(../fonts/AvertaStdCY-RegularItalic_1.otf); @@ -97,7 +101,7 @@ html { font-size: 62.5%; } -@media screen and (max-height: 800px) { +@media screen and (max-height: 800px) { :root { --height-header: 42px; --width-sidebar: 68px; @@ -193,6 +197,7 @@ video { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } + html, body { /* height: 100%; */ @@ -324,7 +329,7 @@ a:hover { background: #fff; } -body > iframe[style*="2147483647"] { +body>iframe[style*="2147483647"] { display: none; } @@ -866,19 +871,19 @@ a:hover { transform: translateY(-50%) translateY(0px); } -.slider-custom .uk-dotnav > * > * { +.slider-custom .uk-dotnav>*>* { width: 14px; height: 14px; border: 1px solid #00bbb6; } -.slider-custom .uk-dotnav > .uk-active > * { +.slider-custom .uk-dotnav>.uk-active>* { background-color: #00bbb6; border-color: transparent; } -.slider-custom .uk-dotnav > * > :focus, -.slider-custom .uk-dotnav > * > :hover { +.slider-custom .uk-dotnav>*> :focus, +.slider-custom .uk-dotnav>*> :hover { background-color: #00bbb6; } @@ -1105,7 +1110,7 @@ a:hover { background-position: bottom; } -.bg-auth-img{ +.bg-auth-img { width: 100%; height: 100vh; background-image: url("./../imgs/bg/bg_auth.png"); @@ -1117,7 +1122,7 @@ a:hover { background-size: cover; } -.bg-main-img{ +.bg-main-img { width: 100%; height: 100%; background-image: url("./../imgs/bg/bg_main.png"); @@ -1241,19 +1246,19 @@ a:hover { left: calc(100% - 30px); } -.slider-custom-2 .uk-dotnav > * > * { +.slider-custom-2 .uk-dotnav>*>* { width: 14px; height: 14px; border: 1px solid #00bbb6; } -.slider-custom-2 .uk-dotnav > .uk-active > * { +.slider-custom-2 .uk-dotnav>.uk-active>* { background-color: #00bbb6; border-color: transparent; } -.slider-custom-2 .uk-dotnav > * > :focus, -.slider-custom-2 .uk-dotnav > * > :hover { +.slider-custom-2 .uk-dotnav>*> :focus, +.slider-custom-2 .uk-dotnav>*> :hover { background-color: #00bbb6; } @@ -1412,6 +1417,7 @@ a:hover { overflow: hidden; height: 80px; } + .personal.plan-item { border-left: 20px solid #8dc63f; } @@ -1697,7 +1703,7 @@ a:hover { padding-top: 40px; } -.sunE-class-content .uk-grid > * { +.sunE-class-content .uk-grid>* { padding-left: 20px; padding-bottom: 20px; } @@ -2104,9 +2110,11 @@ a:hover { height: 100%; object-fit: cover; } + .item-student-name-container { max-width: 65%; } + .item-student-name { padding: 0 0 0 20px; } @@ -2727,13 +2735,11 @@ a:hover { margin: -2px 10px 0 0; } -.laplai p > input[type="radio"]:checked + *::before { - background: radial-gradient( - #84c241 0%, - #84c241 40%, - transparent 50%, - transparent - ); +.laplai p>input[type="radio"]:checked+*::before { + background: radial-gradient(#84c241 0%, + #84c241 40%, + transparent 50%, + transparent); } .apdung label { @@ -3211,6 +3217,7 @@ a:hover { .box-select-file-full { flex: 1; } + .box-select-file-full p { flex: 1; text-align: left; @@ -3589,8 +3596,8 @@ a:hover { overflow: auto; padding: 0 25px 0 20px; - @media screen and (max-height: 800px){ - max-height: calc(100vh - 130px); + @media screen and (max-height: 800px) { + max-height: calc(100vh - 130px); } } @@ -3820,9 +3827,7 @@ a:hover { border-bottom: 1px solid #777777; } -.giaotrinh.pad-t-0 - .sunE-giaotrinh-resuft-filter - .sunE-giaotrinh-item:last-child { +.giaotrinh.pad-t-0 .sunE-giaotrinh-resuft-filter .sunE-giaotrinh-item:last-child { border-bottom: none; } @@ -4153,6 +4158,7 @@ a:hover { .sunE-right-container:has(.__text_empty) { overflow: initial; } + .chambai.writing { margin: 0 0 15px; } @@ -5132,15 +5138,13 @@ a:hover { color: #fff; font-size: 18px; font-family: "Myriadpro-Bold"; - background-image: linear-gradient( - 45deg, - #b0853a, - #f8efa5, - #9d7033, - #e7bf55, - #faf4ac, - #9d7033 - ); + background-image: linear-gradient(45deg, + #b0853a, + #f8efa5, + #9d7033, + #e7bf55, + #faf4ac, + #9d7033); text-align: center; border-radius: 15px; margin: 0 auto 5px; @@ -5154,14 +5158,12 @@ a:hover { color: #fff; font-size: 18px; font-family: "Myriadpro-Bold"; - background-image: linear-gradient( - 45deg, - #c0c0c0, - #ebeaea, - #b8b8b8, - #6f6f6f, - #ebeaea - ); + background-image: linear-gradient(45deg, + #c0c0c0, + #ebeaea, + #b8b8b8, + #6f6f6f, + #ebeaea); text-align: center; border-radius: 15px; margin: 0 auto 5px; @@ -5175,14 +5177,12 @@ a:hover { color: #fff; font-size: 18px; font-family: "Myriadpro-Bold"; - background-image: linear-gradient( - 40deg, - #a3bee3, - #7da6d7, - #dde5f4, - #b5c9e7, - #174d6b - ); + background-image: linear-gradient(40deg, + #a3bee3, + #7da6d7, + #dde5f4, + #b5c9e7, + #174d6b); text-align: center; border-radius: 15px; margin: 0 auto 5px; @@ -5277,7 +5277,7 @@ a:hover { margin-bottom: 20px; } -.vinhdanh-content .uk-grid > * { +.vinhdanh-content .uk-grid>* { padding-left: 20px !important; } @@ -5679,8 +5679,7 @@ a:hover { content: ""; width: 17px; height: 10px; - background: url(./../images/tinnhan/ico_dropdown.png) 98% / 17px no-repeat - transparent; + background: url(./../images/tinnhan/ico_dropdown.png) 98% / 17px no-repeat transparent; position: absolute; top: 18px; right: 30px; @@ -5976,6 +5975,7 @@ a:hover { justify-content: space-between; padding-left: 3rem; } + .phieudiem .diemdanh-item .phieudiem-info p { font-family: "Myriadpro-Bold"; font-size: 18px; @@ -6158,7 +6158,7 @@ a:hover { box-sizing: border-box; } -.btn-on-off.active .checkbox:checked + .knobs:before { +.btn-on-off.active .checkbox:checked+.knobs:before { left: 24px; background-image: linear-gradient(to right, #fadb3a, #f5d030, #ebb318); } @@ -6620,8 +6620,7 @@ a:hover { font-family: "Myriadpro-Bold"; } -.student-khht .sunE-calendar { -} +.student-khht .sunE-calendar {} .sunE-plan.khht-tkb, .sunE-plan.khht-cn { @@ -7215,14 +7214,12 @@ p.text-center.f-18 { } .top-k-item.b .top-k-score { - background-image: linear-gradient( - to right, - #b8b8b8, - #cfcfcf, - #ebeaea, - #c0c0c0, - #ebeaea - ); + background-image: linear-gradient(to right, + #b8b8b8, + #cfcfcf, + #ebeaea, + #c0c0c0, + #ebeaea); } .top-k-item p { @@ -7691,6 +7688,7 @@ p.text-center.f-18 { .fix_text_cut_chart::after { background: none !important; } + .box-s { padding: 0 5px 0 30px; } @@ -8021,8 +8019,7 @@ p.text-center.f-18 { appearance: none; /* Remove default arrow */ color: #fff; - background: url("./../images/icon/ico_dropdown_border_white.png") 98% / 30px - no-repeat #00ceab; + background: url("./../images/icon/ico_dropdown_border_white.png") 98% / 30px no-repeat #00ceab; /* Add custom arrow */ } @@ -8309,7 +8306,7 @@ p.text-center.f-18 { padding-top: 10px; } -.unit-list .uk-grid > * { +.unit-list .uk-grid>* { padding-left: 25px; } @@ -8360,7 +8357,7 @@ p.text-center.f-18 { margin-top: -1px; } -.chk-custom-gr input:checked + label:after { +.chk-custom-gr input:checked+label:after { content: ""; display: block; position: absolute; @@ -8377,7 +8374,7 @@ p.text-center.f-18 { padding: 9px; } -.wh20.chk-custom-gr input:checked + label:after { +.wh20.chk-custom-gr input:checked+label:after { top: -3px; left: 6px; width: 6px; @@ -8387,7 +8384,7 @@ p.text-center.f-18 { transform: rotate(36deg); } -.wh20.chk-custom-gr-selected input:checked + label:after { +.wh20.chk-custom-gr-selected input:checked+label:after { top: -6px; left: 8px; } @@ -8479,21 +8476,13 @@ p.text-center.f-18 { border-radius: 50% !important; } -.react-datepicker__time-container - .react-datepicker__time - .react-datepicker__time-box - ul.react-datepicker__time-list - li.react-datepicker__time-list-item--selected { +.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected { background-image: linear-gradient(to right, #00e1a0, #00b9b7); color: white; font-weight: bold; } -.react-datepicker__time-container - .react-datepicker__time - .react-datepicker__time-box - ul.react-datepicker__time-list - li.react-datepicker__time-list-item:hover { +.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover { background-image: linear-gradient(to right, #00e1a0, #00b9b7); } @@ -8523,16 +8512,20 @@ p.text-center.f-18 { color: #fff !important; } -.react-datepicker__month .react-datepicker__month-text:hover, .react-datepicker__month .react-datepicker__quarter-text:hover { +.react-datepicker__month .react-datepicker__month-text:hover, +.react-datepicker__month .react-datepicker__quarter-text:hover { border-radius: 8px !important; border: none !important; } -.react-datepicker__month .react-datepicker__month-text, .react-datepicker__month .react-datepicker__quarter-text { +.react-datepicker__month .react-datepicker__month-text, +.react-datepicker__month .react-datepicker__quarter-text { width: auto !important; } -.react-datepicker__current-month, .react-datepicker-time__header, .react-datepicker-year-header { +.react-datepicker__current-month, +.react-datepicker-time__header, +.react-datepicker-year-header { font-size: 1.6rem !important; } @@ -8548,7 +8541,10 @@ p.text-center.f-18 { display: flex !important; } -.react-datepicker__day--today, .react-datepicker__month-text--today, .react-datepicker__quarter-text--today, .react-datepicker__year-text--today { +.react-datepicker__day--today, +.react-datepicker__month-text--today, +.react-datepicker__quarter-text--today, +.react-datepicker__year-text--today { border-radius: 8px !important; } @@ -8751,8 +8747,7 @@ ul.pagination li:hover a { content: ""; width: 18px; height: 9px; - background: url(./../images/teacher/diemdanh/ico_dropdown_green.png) 96% / - 18px no-repeat transparent; + background: url(./../images/teacher/diemdanh/ico_dropdown_green.png) 96% / 18px no-repeat transparent; position: absolute; top: 12px; right: 10px; @@ -8762,8 +8757,7 @@ ul.pagination li:hover a { content: ""; width: 18px; height: 9px; - background: url(./../images/teacher/diemdanh/ico_dropdown_orange.png) 96% / - 18px no-repeat transparent; + background: url(./../images/teacher/diemdanh/ico_dropdown_orange.png) 96% / 18px no-repeat transparent; position: absolute; top: 12px; right: 10px; @@ -8774,8 +8768,7 @@ ul.pagination li:hover a { content: ""; width: 18px; height: 9px; - background: url(./../images/teacher/diemdanh/ico_dropdown_red.png) 96% / 18px - no-repeat transparent; + background: url(./../images/teacher/diemdanh/ico_dropdown_red.png) 96% / 18px no-repeat transparent; position: absolute; top: 12px; right: 10px; @@ -8959,16 +8952,14 @@ ul.pagination li:hover a { content: ""; width: 24px; height: 14px; - background: url(./../images/teacher/diemdanh/ico_dropdown_blue.png) 90% / 24px - no-repeat transparent; + background: url(./../images/teacher/diemdanh/ico_dropdown_blue.png) 90% / 24px no-repeat transparent; position: absolute; top: 19px; right: 8px; } .btn-ob .select-styled.active:after { - background: url(./../images/teacher/diemdanh/ico_dropup_blue.png) 90% / 24px - no-repeat transparent; + background: url(./../images/teacher/diemdanh/ico_dropup_blue.png) 90% / 24px no-repeat transparent; } .hoc-ky.btn-ob { @@ -8994,6 +8985,7 @@ ul.pagination li:hover a { .he-so.btn-ob .select-options { z-index: 5; } + .uk-modal { z-index: 99999; } @@ -9034,7 +9026,7 @@ ul.pagination li:hover a { margin-top: -4px; } -.medium-title .wh20.chk-custom-gr input:checked + label:after { +.medium-title .wh20.chk-custom-gr input:checked+label:after { top: -10px; } @@ -9163,14 +9155,14 @@ ul.pagination li:hover a { margin-right: 0; } -.checbox-right .wh20.chk-custom-gr input:checked + label:after { +.checbox-right .wh20.chk-custom-gr input:checked+label:after { left: auto; right: 5px; top: -6px; } /* Check box assigned */ -.wh20.check-assigned input:checked + label:after { +.wh20.check-assigned input:checked+label:after { /* top: -5px; */ top: -8px; left: 8px; @@ -9180,7 +9172,7 @@ ul.pagination li:hover a { } /* Check box student */ -.wh20.check-select-student input:checked + label:after { +.wh20.check-select-student input:checked+label:after { /* top: -5px; */ top: -6px; left: 8px; @@ -9190,7 +9182,7 @@ ul.pagination li:hover a { } /* Check box select all */ -.checbox-right .wh20.check-select-student input:checked + label:after { +.checbox-right .wh20.check-select-student input:checked+label:after { left: auto; right: 2px; top: -8px; @@ -9240,10 +9232,7 @@ ul.pagination li:hover a { border-top-left-radius: 35px; } -.giaotrinh.unit.student - .unit-list - .unit-giaotrinh-content.active - .unit-more-info { +.giaotrinh.unit.student .unit-list .unit-giaotrinh-content.active .unit-more-info { border-bottom: none; } @@ -9456,7 +9445,7 @@ ul.pagination li:hover a { cursor: pointer; } -.laplai p > input[type="radio"]:checked + *::before { +.laplai p>input[type="radio"]:checked+*::before { border-color: #84c241; } @@ -10443,10 +10432,7 @@ ul.pagination li:hover a { padding: 30px 20px 0; } -.ldjas - .giaotrinh.teacher-giaobai - .giaotrinh.filter - .sunE-giaotrinh-resuft-filter { +.ldjas .giaotrinh.teacher-giaobai .giaotrinh.filter .sunE-giaotrinh-resuft-filter { height: calc(100vh - 290px); } @@ -11279,7 +11265,7 @@ strong { #keepReviewPersonal[type="checkbox"] { accent-color: #00a69c !important; - } +} .container-page-header { height: calc(100vh - var(--height-header)); diff --git a/src/_components/Header/index.js b/src/_components/Header/index.js index a096c58..304077d 100644 --- a/src/_components/Header/index.js +++ b/src/_components/Header/index.js @@ -9,30 +9,37 @@ export default function Header({ icon, title, subtitles = [], manager = false, i const authentication = useSelector((state) => state.authentication); const { fullname, organization_name, role } = authentication?.user || {}; const hasFullName = fullname || organization_name; + const isSGD = authentication?.user?.organization_name?.toLowerCase().includes('sở'); + const organizationName = authentication?.user?.organization_name?.toLowerCase() || ''; + const keywords = ['sở', 'phòng']; + const isManager = keywords.some(keyword => organizationName.includes(keyword)); - const handleFullName = () =>{ - let fullName - if(manager){ - fullName = 'Giám đốc ' + hasFullName - }else{ - fullName = role === "organization_admin" - ? `${organization_name ? 'Hiệu trưởng ' : ''}${hasFullName}` - : fullname; + + + const handleFullName = () => { + if (manager || isManager) { + return `${isSGD ? 'Giám đốc' : 'Trưởng phòng'} ${hasFullName}`; } - return fullName + + if (role === "organization_admin") { + return `${organization_name ? 'Hiệu trưởng ' : ''}${hasFullName}`; + } + + return fullname; } + return (
{isBack && ( -
- +
+
{ history.goBack() }}> + {renderIconButtonLeft(24, 24, "#FFA500")} +
)} {icon} diff --git a/src/_components/boxChart/BoxDoughnutBarChart.js b/src/_components/boxChart/BoxDoughnutBarChart.js index b123ac9..eefe2db 100644 --- a/src/_components/boxChart/BoxDoughnutBarChart.js +++ b/src/_components/boxChart/BoxDoughnutBarChart.js @@ -131,6 +131,7 @@ export default function BoxDoughnutBarChart({ popperPlacement='top' typeErrText='underAbsolute' isMonthPicker + style={{padding:'0 10px'}} />
diff --git a/src/_components/boxChart/boxChart.scss b/src/_components/boxChart/boxChart.scss index 7ed3da6..0653ade 100644 --- a/src/_components/boxChart/boxChart.scss +++ b/src/_components/boxChart/boxChart.scss @@ -12,7 +12,7 @@ } @media (max-width: 1599px) { - max-width: 260px; + max-width: 233px; } .box-chart-title { diff --git a/src/_components/renderIcon/index.js b/src/_components/renderIcon/index.js index 2529d78..a0df989 100644 --- a/src/_components/renderIcon/index.js +++ b/src/_components/renderIcon/index.js @@ -145,7 +145,7 @@ export const renderIconButton = (width = 24, height = 24) => { ) } -export const renderIconButtonLeft = (width = 24, height = 24) => { +export const renderIconButtonLeft = (width = 24, height = 24, color = '#fff') => { return ( { viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" > - + diff --git a/src/_screens/home/detail-room-education/index.js b/src/_screens/home/detail-room-education/index.js index 46a9829..c587dae 100644 --- a/src/_screens/home/detail-room-education/index.js +++ b/src/_screens/home/detail-room-education/index.js @@ -330,7 +330,7 @@ export default function DetailRoomEducation() { const getDataTeacher = async () => { try { setIsLoading(true); - const endPoint = `/api_teacher/get_teacher_info?search=${searchText}`; + const endPoint = `/api_teacher/get_teacher_info?search=${searchText}&organization_id=${authentication.user.organization_id}`; const res = await apiCaller(endPoint, "GET"); setIsLoading(false); if (res?.status) { @@ -372,7 +372,7 @@ export default function DetailRoomEducation() {
{data ? (<> -
+
diff --git a/src/_screens/home/education-department/educationDepartmentHome.style.scss b/src/_screens/home/education-department/educationDepartmentHome.style.scss index 8aab48c..e28aa9e 100644 --- a/src/_screens/home/education-department/educationDepartmentHome.style.scss +++ b/src/_screens/home/education-department/educationDepartmentHome.style.scss @@ -5,7 +5,7 @@ overflow: hidden; .education-department-statistic-container { - flex: 0.7; + flex: 0.6; height: calc(100vh - var(--height-header)); padding: 2rem; @@ -18,7 +18,7 @@ } .education-department-home-list-container { - flex: 0.3; + flex: 0.4; height: calc(100vh - var(--height-header)); overflow: hidden; padding: 2rem 0; @@ -35,24 +35,30 @@ // height: 34px; // } // } - .education-department-home-header{ + .education-department-home-header { width: 100%; padding: 0 32px; - .detail-education-department-list-header{ - justify-content: space-around; + + .detail-education-department-list-header { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; margin: 1.2rem 0; - gap: 32px; + @media (max-width: 1650px) { flex-direction: column; } + .criteria-manage-search-input { height: 46px; border-radius: 40px; + @include screen_pc_sm { height: 36px; } } - + .criteria-manage-item { min-width: fit-content; flex: 1; diff --git a/src/_screens/home/outstanding-teacher/index.js b/src/_screens/home/outstanding-teacher/index.js index 4607f3f..bf2b987 100644 --- a/src/_screens/home/outstanding-teacher/index.js +++ b/src/_screens/home/outstanding-teacher/index.js @@ -147,7 +147,7 @@ export default function OutstandingTeacher() {
{!isLoading && !listTeacher?.length && (

- Không còn giáo viên nào để hiển thị + Không còn giáo viên nào

)} {listTeacher.map((item, index) => { diff --git a/src/_screens/home/outstanding-teacher/outstandingTeacher.style.scss b/src/_screens/home/outstanding-teacher/outstandingTeacher.style.scss index 9392bad..f0c10e6 100644 --- a/src/_screens/home/outstanding-teacher/outstandingTeacher.style.scss +++ b/src/_screens/home/outstanding-teacher/outstandingTeacher.style.scss @@ -42,7 +42,16 @@ max-height: 290px; .outstanding-teacher-best-avatar-box { - height: 90%; + height: 250px; + + @media (max-width: 1650px) { + height: 210px; + } + + @media (max-width: 1300px) { + height: 70px; + } + aspect-ratio: 1; padding: 0.8rem; border-radius: 50%;