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

quy_fe
Quy_FE 4 weeks ago
parent b1674a9ce9
commit 36f50bb773
  1. 204
      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. 20
      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

@ -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));

@ -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 (
<div className="header-container">
<div className="header-left-side">
{isBack && (
<div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
<button className="header-back-button" onClick={()=>{
history.goBack()
}}>
<div style={{marginRight: 8, paddingBottom: 4}}>{renderIconButtonLeft()}</div>
</button>
<div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', cursor:'pointer' }}>
<div
style={{marginRight: 8, paddingBottom: 4}}
onClick={()=>{ history.goBack() }}>
{renderIconButtonLeft(24, 24, "#FFA500")}
</div>
</div>
)}
{icon}

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

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

@ -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 (
<svg
xmlns="http://www.w3.org/2000/svg"
@ -154,7 +154,7 @@ export const renderIconButtonLeft = (width = 24, height = 24) => {
viewBox="0 0 24 24"
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">
<animate fill="freeze" attributeName="stroke-dashoffset" dur="0.2s" values="20;0" />
</path>

@ -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() {
<div className="d-flex flex-1 gap-16" style={{ flexDirection: 'column'}}>
{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?.class_join, data?.total_class]} title={'Số lớp đã tham gia'} />
</div>

@ -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;

@ -147,7 +147,7 @@ export default function OutstandingTeacher() {
<div className="outstanding-teacher-list">
{!isLoading && !listTeacher?.length && (
<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>
)}
{listTeacher.map((item, index) => {

@ -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%;

Loading…
Cancel
Save