HoangLaoTa
/
gk_se_web_report
2
1
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor : icon back và header, thêm responsive cho màn thống kê

Browse Source
quy_fe
Quy_FE 4 weeks ago
parent b1674a9ce9
commit 36f50bb773
9 changed files with 147 additions and 138 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 162
      public/assets/css/all.css
  2. 37
      src/_components/Header/index.js
  3. 1
      src/_components/boxChart/BoxDoughnutBarChart.js
  4. 2
      src/_components/boxChart/boxChart.scss
  5. 4
      src/_components/renderIcon/index.js
  6. 4
      src/_screens/home/detail-room-education/index.js
  7. 18
      src/_screens/home/education-department/educationDepartmentHome.style.scss
  8. 2
      src/_screens/home/outstanding-teacher/index.js
  9. 11
      src/_screens/home/outstanding-teacher/outstandingTeacher.style.scss

162
public/assets/css/all.css
Unescape View File

@ -50,14 +50,17 @@
font-family: "AvertaStdCY-Black"; font-family: "AvertaStdCY-Black";
src: url(../fonts/AvertaStdCY-Black_1.otf); src: url(../fonts/AvertaStdCY-Black_1.otf);
} }
@font-face { @font-face {
font-family: "AvertaStdCY-ExtraBold"; font-family: "AvertaStdCY-ExtraBold";
src: url(../fonts/AvertaStdCY-Extrabold_1.otf); src: url(../fonts/AvertaStdCY-Extrabold_1.otf);
} }
@font-face { @font-face {
font-family: "AvertaStdCY-ExtraBoldItalic"; font-family: "AvertaStdCY-ExtraBoldItalic";
src: url(../fonts/AvertaStdCY-ExtraboldItalic_1.otf); src: url(../fonts/AvertaStdCY-ExtraboldItalic_1.otf);
} }
@font-face { @font-face {
font-family: "AvertaStdCY-Bold"; font-family: "AvertaStdCY-Bold";
src: url(../fonts/AvertaStdCY-Bold_1.otf); src: url(../fonts/AvertaStdCY-Bold_1.otf);
@ -72,6 +75,7 @@
font-family: "AvertaStdCY"; font-family: "AvertaStdCY";
src: url(../fonts/AvertaStdCY-Regular_3.otf); src: url(../fonts/AvertaStdCY-Regular_3.otf);
} }
@font-face { @font-face {
font-family: "AvertaStdCY-Italic"; font-family: "AvertaStdCY-Italic";
src: url(../fonts/AvertaStdCY-RegularItalic_1.otf); src: url(../fonts/AvertaStdCY-RegularItalic_1.otf);
@ -193,6 +197,7 @@ video {
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
} }
html, html,
body { body {
/* height: 100%; */ /* height: 100%; */
@ -324,7 +329,7 @@ a:hover {
background: #fff; background: #fff;
} }
body > iframe[style*="2147483647"] { body>iframe[style*="2147483647"] {
display: none; display: none;
} }
@ -866,19 +871,19 @@ a:hover {
transform: translateY(-50%) translateY(0px); transform: translateY(-50%) translateY(0px);
} }
.slider-custom .uk-dotnav > * > * { .slider-custom .uk-dotnav>*>* {
width: 14px; width: 14px;
height: 14px; height: 14px;
border: 1px solid #00bbb6; border: 1px solid #00bbb6;
} }
.slider-custom .uk-dotnav > .uk-active > * { .slider-custom .uk-dotnav>.uk-active>* {
background-color: #00bbb6; background-color: #00bbb6;
border-color: transparent; border-color: transparent;
} }
.slider-custom .uk-dotnav > * > :focus, .slider-custom .uk-dotnav>*> :focus,
.slider-custom .uk-dotnav > * > :hover { .slider-custom .uk-dotnav>*> :hover {
background-color: #00bbb6; background-color: #00bbb6;
} }
@ -1105,7 +1110,7 @@ a:hover {
background-position: bottom; background-position: bottom;
} }
.bg-auth-img{ .bg-auth-img {
width: 100%; width: 100%;
height: 100vh; height: 100vh;
background-image: url("./../imgs/bg/bg_auth.png"); background-image: url("./../imgs/bg/bg_auth.png");
@ -1117,7 +1122,7 @@ a:hover {
background-size: cover; background-size: cover;
} }
.bg-main-img{ .bg-main-img {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-image: url("./../imgs/bg/bg_main.png"); background-image: url("./../imgs/bg/bg_main.png");
@ -1241,19 +1246,19 @@ a:hover {
left: calc(100% - 30px); left: calc(100% - 30px);
} }
.slider-custom-2 .uk-dotnav > * > * { .slider-custom-2 .uk-dotnav>*>* {
width: 14px; width: 14px;
height: 14px; height: 14px;
border: 1px solid #00bbb6; border: 1px solid #00bbb6;
} }
.slider-custom-2 .uk-dotnav > .uk-active > * { .slider-custom-2 .uk-dotnav>.uk-active>* {
background-color: #00bbb6; background-color: #00bbb6;
border-color: transparent; border-color: transparent;
} }
.slider-custom-2 .uk-dotnav > * > :focus, .slider-custom-2 .uk-dotnav>*> :focus,
.slider-custom-2 .uk-dotnav > * > :hover { .slider-custom-2 .uk-dotnav>*> :hover {
background-color: #00bbb6; background-color: #00bbb6;
} }
@ -1412,6 +1417,7 @@ a:hover {
overflow: hidden; overflow: hidden;
height: 80px; height: 80px;
} }
.personal.plan-item { .personal.plan-item {
border-left: 20px solid #8dc63f; border-left: 20px solid #8dc63f;
} }
@ -1697,7 +1703,7 @@ a:hover {
padding-top: 40px; padding-top: 40px;
} }
.sunE-class-content .uk-grid > * { .sunE-class-content .uk-grid>* {
padding-left: 20px; padding-left: 20px;
padding-bottom: 20px; padding-bottom: 20px;
} }
@ -2104,9 +2110,11 @@ a:hover {
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
} }
.item-student-name-container { .item-student-name-container {
max-width: 65%; max-width: 65%;
} }
.item-student-name { .item-student-name {
padding: 0 0 0 20px; padding: 0 0 0 20px;
} }
@ -2727,13 +2735,11 @@ a:hover {
margin: -2px 10px 0 0; margin: -2px 10px 0 0;
} }
.laplai p > input[type="radio"]:checked + *::before { .laplai p>input[type="radio"]:checked+*::before {
background: radial-gradient( background: radial-gradient(#84c241 0%,
#84c241 0%,
#84c241 40%, #84c241 40%,
transparent 50%, transparent 50%,
transparent transparent);
);
} }
.apdung label { .apdung label {
@ -3211,6 +3217,7 @@ a:hover {
.box-select-file-full { .box-select-file-full {
flex: 1; flex: 1;
} }
.box-select-file-full p { .box-select-file-full p {
flex: 1; flex: 1;
text-align: left; text-align: left;
@ -3589,7 +3596,7 @@ a:hover {
overflow: auto; overflow: auto;
padding: 0 25px 0 20px; padding: 0 25px 0 20px;
@media screen and (max-height: 800px){ @media screen and (max-height: 800px) {
max-height: calc(100vh - 130px); max-height: calc(100vh - 130px);
} }
@ -3820,9 +3827,7 @@ a:hover {
border-bottom: 1px solid #777777; border-bottom: 1px solid #777777;
} }
.giaotrinh.pad-t-0 .giaotrinh.pad-t-0 .sunE-giaotrinh-resuft-filter .sunE-giaotrinh-item:last-child {
.sunE-giaotrinh-resuft-filter
.sunE-giaotrinh-item:last-child {
border-bottom: none; border-bottom: none;
} }
@ -4153,6 +4158,7 @@ a:hover {
.sunE-right-container:has(.__text_empty) { .sunE-right-container:has(.__text_empty) {
overflow: initial; overflow: initial;
} }
.chambai.writing { .chambai.writing {
margin: 0 0 15px; margin: 0 0 15px;
} }
@ -5132,15 +5138,13 @@ a:hover {
color: #fff; color: #fff;
font-size: 18px; font-size: 18px;
font-family: "Myriadpro-Bold"; font-family: "Myriadpro-Bold";
background-image: linear-gradient( background-image: linear-gradient(45deg,
45deg,
#b0853a, #b0853a,
#f8efa5, #f8efa5,
#9d7033, #9d7033,
#e7bf55, #e7bf55,
#faf4ac, #faf4ac,
#9d7033 #9d7033);
);
text-align: center; text-align: center;
border-radius: 15px; border-radius: 15px;
margin: 0 auto 5px; margin: 0 auto 5px;
@ -5154,14 +5158,12 @@ a:hover {
color: #fff; color: #fff;
font-size: 18px; font-size: 18px;
font-family: "Myriadpro-Bold"; font-family: "Myriadpro-Bold";
background-image: linear-gradient( background-image: linear-gradient(45deg,
45deg,
#c0c0c0, #c0c0c0,
#ebeaea, #ebeaea,
#b8b8b8, #b8b8b8,
#6f6f6f, #6f6f6f,
#ebeaea #ebeaea);
);
text-align: center; text-align: center;
border-radius: 15px; border-radius: 15px;
margin: 0 auto 5px; margin: 0 auto 5px;
@ -5175,14 +5177,12 @@ a:hover {
color: #fff; color: #fff;
font-size: 18px; font-size: 18px;
font-family: "Myriadpro-Bold"; font-family: "Myriadpro-Bold";
background-image: linear-gradient( background-image: linear-gradient(40deg,
40deg,
#a3bee3, #a3bee3,
#7da6d7, #7da6d7,
#dde5f4, #dde5f4,
#b5c9e7, #b5c9e7,
#174d6b #174d6b);
);
text-align: center; text-align: center;
border-radius: 15px; border-radius: 15px;
margin: 0 auto 5px; margin: 0 auto 5px;
@ -5277,7 +5277,7 @@ a:hover {
margin-bottom: 20px; margin-bottom: 20px;
} }
.vinhdanh-content .uk-grid > * { .vinhdanh-content .uk-grid>* {
padding-left: 20px !important; padding-left: 20px !important;
} }
@ -5679,8 +5679,7 @@ a:hover {
content: ""; content: "";
width: 17px; width: 17px;
height: 10px; height: 10px;
background: url(./../images/tinnhan/ico_dropdown.png) 98% / 17px no-repeat background: url(./../images/tinnhan/ico_dropdown.png) 98% / 17px no-repeat transparent;
transparent;
position: absolute; position: absolute;
top: 18px; top: 18px;
right: 30px; right: 30px;
@ -5976,6 +5975,7 @@ a:hover {
justify-content: space-between; justify-content: space-between;
padding-left: 3rem; padding-left: 3rem;
} }
.phieudiem .diemdanh-item .phieudiem-info p { .phieudiem .diemdanh-item .phieudiem-info p {
font-family: "Myriadpro-Bold"; font-family: "Myriadpro-Bold";
font-size: 18px; font-size: 18px;
@ -6158,7 +6158,7 @@ a:hover {
box-sizing: border-box; box-sizing: border-box;
} }
.btn-on-off.active .checkbox:checked + .knobs:before { .btn-on-off.active .checkbox:checked+.knobs:before {
left: 24px; left: 24px;
background-image: linear-gradient(to right, #fadb3a, #f5d030, #ebb318); background-image: linear-gradient(to right, #fadb3a, #f5d030, #ebb318);
} }
@ -6620,8 +6620,7 @@ a:hover {
font-family: "Myriadpro-Bold"; font-family: "Myriadpro-Bold";
} }
.student-khht .sunE-calendar { .student-khht .sunE-calendar {}
}
.sunE-plan.khht-tkb, .sunE-plan.khht-tkb,
.sunE-plan.khht-cn { .sunE-plan.khht-cn {
@ -7215,14 +7214,12 @@ p.text-center.f-18 {
} }
.top-k-item.b .top-k-score { .top-k-item.b .top-k-score {
background-image: linear-gradient( background-image: linear-gradient(to right,
to right,
#b8b8b8, #b8b8b8,
#cfcfcf, #cfcfcf,
#ebeaea, #ebeaea,
#c0c0c0, #c0c0c0,
#ebeaea #ebeaea);
);
} }
.top-k-item p { .top-k-item p {
@ -7691,6 +7688,7 @@ p.text-center.f-18 {
.fix_text_cut_chart::after { .fix_text_cut_chart::after {
background: none !important; background: none !important;
} }
.box-s { .box-s {
padding: 0 5px 0 30px; padding: 0 5px 0 30px;
} }
@ -8021,8 +8019,7 @@ p.text-center.f-18 {
appearance: none; appearance: none;
/* Remove default arrow */ /* Remove default arrow */
color: #fff; color: #fff;
background: url("./../images/icon/ico_dropdown_border_white.png") 98% / 30px background: url("./../images/icon/ico_dropdown_border_white.png") 98% / 30px no-repeat #00ceab;
no-repeat #00ceab;
/* Add custom arrow */ /* Add custom arrow */
} }
@ -8309,7 +8306,7 @@ p.text-center.f-18 {
padding-top: 10px; padding-top: 10px;
} }
.unit-list .uk-grid > * { .unit-list .uk-grid>* {
padding-left: 25px; padding-left: 25px;
} }
@ -8360,7 +8357,7 @@ p.text-center.f-18 {
margin-top: -1px; margin-top: -1px;
} }
.chk-custom-gr input:checked + label:after { .chk-custom-gr input:checked+label:after {
content: ""; content: "";
display: block; display: block;
position: absolute; position: absolute;
@ -8377,7 +8374,7 @@ p.text-center.f-18 {
padding: 9px; padding: 9px;
} }
.wh20.chk-custom-gr input:checked + label:after { .wh20.chk-custom-gr input:checked+label:after {
top: -3px; top: -3px;
left: 6px; left: 6px;
width: 6px; width: 6px;
@ -8387,7 +8384,7 @@ p.text-center.f-18 {
transform: rotate(36deg); transform: rotate(36deg);
} }
.wh20.chk-custom-gr-selected input:checked + label:after { .wh20.chk-custom-gr-selected input:checked+label:after {
top: -6px; top: -6px;
left: 8px; left: 8px;
} }
@ -8479,21 +8476,13 @@ p.text-center.f-18 {
border-radius: 50% !important; border-radius: 50% !important;
} }
.react-datepicker__time-container .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
.react-datepicker__time-box
ul.react-datepicker__time-list
li.react-datepicker__time-list-item--selected {
background-image: linear-gradient(to right, #00e1a0, #00b9b7); background-image: linear-gradient(to right, #00e1a0, #00b9b7);
color: white; color: white;
font-weight: bold; font-weight: bold;
} }
.react-datepicker__time-container .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
.react-datepicker__time-box
ul.react-datepicker__time-list
li.react-datepicker__time-list-item:hover {
background-image: linear-gradient(to right, #00e1a0, #00b9b7); background-image: linear-gradient(to right, #00e1a0, #00b9b7);
} }
@ -8523,16 +8512,20 @@ p.text-center.f-18 {
color: #fff !important; 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-radius: 8px !important;
border: none !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; 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; font-size: 1.6rem !important;
} }
@ -8548,7 +8541,10 @@ p.text-center.f-18 {
display: flex !important; 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; border-radius: 8px !important;
} }
@ -8751,8 +8747,7 @@ ul.pagination li:hover a {
content: ""; content: "";
width: 18px; width: 18px;
height: 9px; height: 9px;
background: url(./../images/teacher/diemdanh/ico_dropdown_green.png) 96% / background: url(./../images/teacher/diemdanh/ico_dropdown_green.png) 96% / 18px no-repeat transparent;
18px no-repeat transparent;
position: absolute; position: absolute;
top: 12px; top: 12px;
right: 10px; right: 10px;
@ -8762,8 +8757,7 @@ ul.pagination li:hover a {
content: ""; content: "";
width: 18px; width: 18px;
height: 9px; height: 9px;
background: url(./../images/teacher/diemdanh/ico_dropdown_orange.png) 96% / background: url(./../images/teacher/diemdanh/ico_dropdown_orange.png) 96% / 18px no-repeat transparent;
18px no-repeat transparent;
position: absolute; position: absolute;
top: 12px; top: 12px;
right: 10px; right: 10px;
@ -8774,8 +8768,7 @@ ul.pagination li:hover a {
content: ""; content: "";
width: 18px; width: 18px;
height: 9px; height: 9px;
background: url(./../images/teacher/diemdanh/ico_dropdown_red.png) 96% / 18px background: url(./../images/teacher/diemdanh/ico_dropdown_red.png) 96% / 18px no-repeat transparent;
no-repeat transparent;
position: absolute; position: absolute;
top: 12px; top: 12px;
right: 10px; right: 10px;
@ -8959,16 +8952,14 @@ ul.pagination li:hover a {
content: ""; content: "";
width: 24px; width: 24px;
height: 14px; height: 14px;
background: url(./../images/teacher/diemdanh/ico_dropdown_blue.png) 90% / 24px background: url(./../images/teacher/diemdanh/ico_dropdown_blue.png) 90% / 24px no-repeat transparent;
no-repeat transparent;
position: absolute; position: absolute;
top: 19px; top: 19px;
right: 8px; right: 8px;
} }
.btn-ob .select-styled.active:after { .btn-ob .select-styled.active:after {
background: url(./../images/teacher/diemdanh/ico_dropup_blue.png) 90% / 24px background: url(./../images/teacher/diemdanh/ico_dropup_blue.png) 90% / 24px no-repeat transparent;
no-repeat transparent;
} }
.hoc-ky.btn-ob { .hoc-ky.btn-ob {
@ -8994,6 +8985,7 @@ ul.pagination li:hover a {
.he-so.btn-ob .select-options { .he-so.btn-ob .select-options {
z-index: 5; z-index: 5;
} }
.uk-modal { .uk-modal {
z-index: 99999; z-index: 99999;
} }
@ -9034,7 +9026,7 @@ ul.pagination li:hover a {
margin-top: -4px; 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; top: -10px;
} }
@ -9163,14 +9155,14 @@ ul.pagination li:hover a {
margin-right: 0; 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; left: auto;
right: 5px; right: 5px;
top: -6px; top: -6px;
} }
/* Check box assigned */ /* Check box assigned */
.wh20.check-assigned input:checked + label:after { .wh20.check-assigned input:checked+label:after {
/* top: -5px; */ /* top: -5px; */
top: -8px; top: -8px;
left: 8px; left: 8px;
@ -9180,7 +9172,7 @@ ul.pagination li:hover a {
} }
/* Check box student */ /* Check box student */
.wh20.check-select-student input:checked + label:after { .wh20.check-select-student input:checked+label:after {
/* top: -5px; */ /* top: -5px; */
top: -6px; top: -6px;
left: 8px; left: 8px;
@ -9190,7 +9182,7 @@ ul.pagination li:hover a {
} }
/* Check box select all */ /* 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; left: auto;
right: 2px; right: 2px;
top: -8px; top: -8px;
@ -9240,10 +9232,7 @@ ul.pagination li:hover a {
border-top-left-radius: 35px; border-top-left-radius: 35px;
} }
.giaotrinh.unit.student .giaotrinh.unit.student .unit-list .unit-giaotrinh-content.active .unit-more-info {
.unit-list
.unit-giaotrinh-content.active
.unit-more-info {
border-bottom: none; border-bottom: none;
} }
@ -9456,7 +9445,7 @@ ul.pagination li:hover a {
cursor: pointer; cursor: pointer;
} }
.laplai p > input[type="radio"]:checked + *::before { .laplai p>input[type="radio"]:checked+*::before {
border-color: #84c241; border-color: #84c241;
} }
@ -10443,10 +10432,7 @@ ul.pagination li:hover a {
padding: 30px 20px 0; padding: 30px 20px 0;
} }
.ldjas .ldjas .giaotrinh.teacher-giaobai .giaotrinh.filter .sunE-giaotrinh-resuft-filter {
.giaotrinh.teacher-giaobai
.giaotrinh.filter
.sunE-giaotrinh-resuft-filter {
height: calc(100vh - 290px); height: calc(100vh - 290px);
} }
@ -11279,7 +11265,7 @@ strong {
#keepReviewPersonal[type="checkbox"] { #keepReviewPersonal[type="checkbox"] {
accent-color: #00a69c !important; accent-color: #00a69c !important;
} }
.container-page-header { .container-page-header {
height: calc(100vh - var(--height-header)); height: calc(100vh - var(--height-header));

37
src/_components/Header/index.js
Unescape View File

@ -9,30 +9,37 @@ export default function Header({ icon, title, subtitles = [], manager = false, i
const authentication = useSelector((state) => state.authentication); const authentication = useSelector((state) => state.authentication);
const { fullname, organization_name, role } = authentication?.user || {}; const { fullname, organization_name, role } = authentication?.user || {};
const hasFullName = fullname || organization_name; 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){ const handleFullName = () => {
fullName = 'Giám đốc ' + hasFullName if (manager || isManager) {
}else{ return `${isSGD ? 'Giám đốc' : 'Trưởng phòng'} ${hasFullName}`;
fullName = role === "organization_admin"
? `${organization_name ? 'Hiệu trưởng ' : ''}${hasFullName}`
: fullname;
} }
return fullName
if (role === "organization_admin") {
return `${organization_name ? 'Hiệu trưởng ' : ''}${hasFullName}`;
} }
return fullname;
}
return ( return (
<div className="header-container"> <div className="header-container">
<div className="header-left-side"> <div className="header-left-side">
{isBack && ( {isBack && (
<div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}> <div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', cursor:'pointer' }}>
<button className="header-back-button" onClick={()=>{ <div
history.goBack() style={{marginRight: 8, paddingBottom: 4}}
}}> onClick={()=>{ history.goBack() }}>
<div style={{marginRight: 8, paddingBottom: 4}}>{renderIconButtonLeft()}</div> {renderIconButtonLeft(24, 24, "#FFA500")}
</button> </div>
</div> </div>
)} )}
{icon} {icon}

1
src/_components/boxChart/BoxDoughnutBarChart.js vendored
Unescape View File

@ -131,6 +131,7 @@ export default function BoxDoughnutBarChart({
popperPlacement='top' popperPlacement='top'
typeErrText='underAbsolute' typeErrText='underAbsolute'
isMonthPicker isMonthPicker
style={{padding:'0 10px'}}
/> />
</div> </div>
<Btn icon={renderIconButton()} isDisabled={isDisabledNext} onClick={handleClickNext} /> <Btn icon={renderIconButton()} isDisabled={isDisabledNext} onClick={handleClickNext} />

2
src/_components/boxChart/boxChart.scss
Unescape View File

@ -12,7 +12,7 @@
} }
@media (max-width: 1599px) { @media (max-width: 1599px) {
max-width: 260px; max-width: 233px;
} }
.box-chart-title { .box-chart-title {

4
src/_components/renderIcon/index.js
Unescape View File

@ -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 ( return (
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -154,7 +154,7 @@ export const renderIconButtonLeft = (width = 24, height = 24) => {
viewBox="0 0 24 24" viewBox="0 0 24 24"
preserveAspectRatio="xMidYMid meet" preserveAspectRatio="xMidYMid meet"
> >
<g fill="none" stroke="#fff" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" transform="rotate(180 12 12)"> <g fill="none" stroke={color} strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" transform="rotate(180 12 12)">
<path strokeDasharray="20" strokeDashoffset="20" d="M3 12h17.5"> <path strokeDasharray="20" strokeDashoffset="20" d="M3 12h17.5">
<animate fill="freeze" attributeName="stroke-dashoffset" dur="0.2s" values="20;0" /> <animate fill="freeze" attributeName="stroke-dashoffset" dur="0.2s" values="20;0" />
</path> </path>

4
src/_screens/home/detail-room-education/index.js
Unescape View File

@ -330,7 +330,7 @@ export default function DetailRoomEducation() {
const getDataTeacher = async () => { const getDataTeacher = async () => {
try { try {
setIsLoading(true); 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"); const res = await apiCaller(endPoint, "GET");
setIsLoading(false); setIsLoading(false);
if (res?.status) { if (res?.status) {
@ -372,7 +372,7 @@ export default function DetailRoomEducation() {
<div className="d-flex flex-1 gap-16" style={{ flexDirection: 'column'}}> <div className="d-flex flex-1 gap-16" style={{ flexDirection: 'column'}}>
{data ? {data ?
(<> (<>
<div className="flex flex-m gap-16" style={{height: '23%'}}> <div className="flex flex-m gap-16">
<BoxDoughnutChart data={[data?.school_join, data?.total_school]} title={'Số trường đã tham gia'} /> <BoxDoughnutChart data={[data?.school_join, data?.total_school]} title={'Số trường đã tham gia'} />
<BoxDoughnutChart data={[data?.class_join, data?.total_class]} title={'Số lớp đã tham gia'} /> <BoxDoughnutChart data={[data?.class_join, data?.total_class]} title={'Số lớp đã tham gia'} />
</div> </div>

18
src/_screens/home/education-department/educationDepartmentHome.style.scss
Unescape View File

@ -5,7 +5,7 @@
overflow: hidden; overflow: hidden;
.education-department-statistic-container { .education-department-statistic-container {
flex: 0.7; flex: 0.6;
height: calc(100vh - var(--height-header)); height: calc(100vh - var(--height-header));
padding: 2rem; padding: 2rem;
@ -18,7 +18,7 @@
} }
.education-department-home-list-container { .education-department-home-list-container {
flex: 0.3; flex: 0.4;
height: calc(100vh - var(--height-header)); height: calc(100vh - var(--height-header));
overflow: hidden; overflow: hidden;
padding: 2rem 0; padding: 2rem 0;
@ -35,19 +35,25 @@
// height: 34px; // height: 34px;
// } // }
// } // }
.education-department-home-header{ .education-department-home-header {
width: 100%; width: 100%;
padding: 0 32px; 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; margin: 1.2rem 0;
gap: 32px;
@media (max-width: 1650px) { @media (max-width: 1650px) {
flex-direction: column; flex-direction: column;
} }
.criteria-manage-search-input { .criteria-manage-search-input {
height: 46px; height: 46px;
border-radius: 40px; border-radius: 40px;
@include screen_pc_sm { @include screen_pc_sm {
height: 36px; height: 36px;
} }

2
src/_screens/home/outstanding-teacher/index.js
Unescape View File

@ -147,7 +147,7 @@ export default function OutstandingTeacher() {
<div className="outstanding-teacher-list"> <div className="outstanding-teacher-list">
{!isLoading && !listTeacher?.length && ( {!isLoading && !listTeacher?.length && (
<p style={{fontSize: '1.8rem', fontWeight: 700}}> <p style={{fontSize: '1.8rem', fontWeight: 700}}>
Không còn giáo viên nào để hiển thị Không còn giáo viên nào
</p> </p>
)} )}
{listTeacher.map((item, index) => { {listTeacher.map((item, index) => {

11
src/_screens/home/outstanding-teacher/outstandingTeacher.style.scss
Unescape View File

@ -42,7 +42,16 @@
max-height: 290px; max-height: 290px;
.outstanding-teacher-best-avatar-box { .outstanding-teacher-best-avatar-box {
height: 90%; height: 250px;
@media (max-width: 1650px) {
height: 210px;
}
@media (max-width: 1300px) {
height: 70px;
}
aspect-ratio: 1; aspect-ratio: 1;
padding: 0.8rem; padding: 0.8rem;
border-radius: 50%; border-radius: 50%;

Write Preview
Loading…
Cancel
Save