From a29e148753afeec005ce398641ae81bacf3edc3b Mon Sep 17 00:00:00 2001 From: MahanCh Date: Sat, 3 May 2025 14:45:13 +0330 Subject: [PATCH] fix edit employee bug in admin --- .../Admin/Pages/Company/Employees/Edit.cshtml | 3 +- .../wwwroot/AdminTheme/css/personelEdit.css | 827 ++++++++++++++++++ 2 files changed, 829 insertions(+), 1 deletion(-) create mode 100644 ServiceHost/wwwroot/AdminTheme/css/personelEdit.css diff --git a/ServiceHost/Areas/Admin/Pages/Company/Employees/Edit.cshtml b/ServiceHost/Areas/Admin/Pages/Company/Employees/Edit.cshtml index a5fe04a0..bcba05d6 100644 --- a/ServiceHost/Areas/Admin/Pages/Company/Employees/Edit.cshtml +++ b/ServiceHost/Areas/Admin/Pages/Company/Employees/Edit.cshtml @@ -16,7 +16,8 @@ } - +@* *@ +
diff --git a/ServiceHost/wwwroot/AdminTheme/css/personelEdit.css b/ServiceHost/wwwroot/AdminTheme/css/personelEdit.css new file mode 100644 index 00000000..e8dac4f0 --- /dev/null +++ b/ServiceHost/wwwroot/AdminTheme/css/personelEdit.css @@ -0,0 +1,827 @@ +.modal-dialog { + width: 55%; + margin: 30px auto; +} + +#MainModal { + backdrop-filter: blur(8px); +} + +.modal .modal-dialog .modal-content { + padding: 0; +} + +@media(min-width: 1650px) { + .modal-dialog { + margin: auto; + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%) !important; + width: 50%; + } +} + +@media (max-width: 1580px) { + .modal-dialog { + width: 60%; + } +} + +.modal .modal-dialog .modal-content { + border-radius: 18px; + min-height: 68rem; + background: #ebebeb; +} + +@media (max-width: 1200px) { + .modal .modal-dialog .modal-content { + min-height: 80rem; + } +} + +.form-box { + position: relative; + padding: 40px 20px; + top: 5rem; + border: 1px solid #d1d1d1; + position: relative; + border-radius: 1rem; + overflow: hidden; + min-height: 57rem; +} + +.main-title { + position: absolute; + width: 17rem; + font-size: 1.7rem; + background-color: inherit; + left: 49%; + top: 7px; + margin-left: -100px; + text-align: center; + color: black; + border: 1px solid #00000030; + border-radius: 9px; + padding: 2px 0px; +} + +.ltr { + direction: ltr; +} + +.close { + margin-top: 12px; + margin-left: -19px; + font-size: 26px; + position: absolute; + right: 25px; +} + +.form { + position: absolute; + font-size: 1.2rem; + width: 100%; +} + +.input-type { + padding: 0px 8px; +} + +.nationality-type { + padding: 0.7px 4px; +} + +.duty-condition { + position: relative; + top: -5px; +} + +.loc-box { + margin-top: 10px; +} + +.loc-text { + height: 182px; +} + +.insInput { + background-color: #d4e9ff; +} + +.insInputDate label { + font-size: 10px; +} + +.content-fieldset { + width: 95%; + margin: auto; +} + +.radio-sections { + padding: 15px 7px !important; + background: #ffffff6b; + border-radius: 7px; + border: 1px solid #0000004a; + display: flex; + flex-wrap: nowrap; + justify-content: space-evenly; + align-items: flex-start; +} + +.form1 .form-group, .listForm1 .form-group { + justify-content: space-around; + padding: 15px 5px 15px 0; + border: 1px solid #e3e3e3; + box-shadow: 0px 0px 4px 0px #a7a7a7; + background: #e5e5e5; + border-radius: 7px; + margin: 0; + margin-bottom: 15px !important; + width: 100% !important; +} + +.form1, .listForm1 { + margin-top: 30px; + width: 96%; +} + +.form2, .listForm2 { + left: 1200px; + margin-top: 30px; +} + +.form3, .listForm3 { + right: 1200px; + padding: 0 10px; + margin: 0; + margin-top: 30px; +} + +.flexible-wrap { + display: flex; + flex-wrap: wrap; +} + +.form3 legend, .listForm3 legend { + margin-bottom: 5px; + font-size: 16px; + border-bottom: 0px; + color: #505458; + width: 130px; + text-align: center; +} + +.form3 fieldset, .listForm3 fieldset { + border: 1px solid #999797; + border-radius: 10px; + padding: 5px 0; + width: 100%; +} + +.steps { + display: flex; + align-items: center; + flex-direction: row-reverse; + width: 100%; + position: absolute; + top: 0px; + left: 0; + height: 42px; + border: 1px solid #36292947; + border-top-right-radius: 7px; + border-top-left-radius: 7px; + box-shadow: 0 2px 5px 0 rgb(104 106 106 / 49%), 0 2px 10px 0 rgba(0, 0, 0, 0.12); +} + +.step { + padding: 7px; + text-align: center; + margin: 0 3px 0 3px; + width: 33.33%; + z-index: 9; +} + +.progressBar { + position: absolute; + width: 33.33%; + background: linear-gradient(90deg, rgba(15,149,0,1) 0%, rgba(53,189,37,1) 18%, rgba(68,207,52,1) 47%, rgba(73,214,57,1) 82%, rgba(15,149,0,1) 100%); + height: 103%; + right: -1px; + top: -1px; + transition: 1s; +} + + .progressBar:after { + content: ''; + border-top: 20px solid transparent; + border-bottom: 20px solid transparent; + position: absolute; + left: -19px; + top: 1px; + border-right: 20px solid #0f9500; + } + +.radio-box { + font-size: 12px; + border-radius: 10px; + align-items: center; + width: 100%; + display: grid; + grid-template-columns: repeat(15, 1fr); +} + +.radio-label { + grid-column: 1/7; + grid-row: 1; + margin-bottom: 0; +} + +.radio-input { + grid-column: 7 / 16; + grid-row: 1; + text-align: left; + display: grid; + grid-template-columns: repeat(15, 1fr); +} + + .radio-input label:first-child { + grid-column: 1 / 8; + } + + .radio-input label:nth-child(2) { + grid-column: 8 / 16; + } + + .radio-input.nationality { + grid-column: 5 / 16; + } + + .radio-input.nationality label:first-child { + grid-column: 1 / 7; + } + + .radio-input.nationality label:nth-child(2) { + grid-column: 7 / 16; + } + +.form-box input[type="radio"] { + margin: 2px 0px; +} + +.form-box .radio-input input[type="radio"] { + margin: 0 4px 0px 4px; + transform: translate(0px,4px); +} + +.inputs-box { + float: left; + display: flex; + align-items: center; +} + +.inputs { + padding: 10px; +} + +.input { + border: 1px solid #0000004a; + border-radius: 7px; + padding: 7px; + width: 100%; +} + + .input:focus { + box-shadow: 0 2px 5px 0 rgb(136 137 141), 0 2px 10px 0 rgba(0, 0, 0, 0.12); + } + + +#save { + background-color: #0f9500; + color: white; + cursor: pointer; +} + +#close { + background-color: white; + color: #323030; +} + +.btn-modal { + padding: 1rem 0; + border-radius: 20px; + border: none; + font-size: 12px; + width: 9rem; +} + +.btns { + position: absolute; + display: inline-flex; + bottom: 12px; + width: 100%; + justify-content: flex-end; + margin-right: 50px; +} + +.btns-2 { + bottom: 15px; + margin-right: 17px; +} + +.btn-modal.pre, .btn-modal.listPrev { + border-top-left-radius: 0px; + border-bottom-left-radius: 0px; + background-color: #c7c0c0ba; + color: #000000b8; + margin-left: -4px; +} + +.btn-modal.next, .btn-modal.listNext { + border-top-right-radius: 0px; + border-bottom-right-radius: 0px; + margin-left: -4px; + border-right: 1px solid #817b7b; + background-color: white; + color: #1e88b3; +} + +.btns-left { + float: left; +} + +.btn-rounded { + border-radius: 2em; + padding: 6px 10px; +} + +.form-footer-btns { + position: absolute; + bottom: 5px; + left: 40%; +} + +.form-footer { + padding: 15px; + text-align: right; + float: left; + border-top: 0; + position: absolute; + bottom: -5px; + left: 5px; +} + +#divEdit .form-footer { + bottom: 5px; +} + +.btn:hover { + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); +} + +.children-box { + position: relative; + display: flex; + flex-direction: column; +} + +#children-container { + position: relative; + display: flex; + flex-direction: column; + height: 18rem; + overflow-y: auto; + scrollbar-width: thin; + scrollbar-color: #f2f2f2 transparent; + direction: ltr; + border: 1px solid #9b97976e; + border-radius: 10px 10px 7px 7px; + padding: 10px 0; + background-color: #dbdadaba; + margin-top: 10px; + margin-bottom: 5px; +} + +#children { + border-collapse: separate !important; + position: relative; + top: -10px; + width: 100%; + background: whitesmoke; + text-align: center; + border-radius: 10px; + border: none !important; + margin-bottom: 0 !important; +} + + #children th { + text-align: center; + color: white; + position: sticky; + top: -10px; + z-index: 20; + background-color: #404040; + font-size: 13px; + } + + #children th, td { + padding: 8px; + } + + #children th:nth-child(2n) { + border-left: 1px solid #fff; + } + + #children tr:nth-child(2n) { + background-color: #e3e3e3; + } + + #children th:nth-child(2n) { + border-left: 1px solid #fff; + } + + + #children td:nth-child(2n) { + border-left: 1px solid #fff; + border-right: 1px solid #9b979721; + } + + #children td:nth-child(2n+1) { + border-left: 1px solid #9b979721; + display: flex; + flex-direction: row-reverse; + justify-content: center; + } + + #children td { + text-align: center; + } + + #children th:first-child { + border-radius: 7px 0px 0px 0px; + -moz-border-radius: 7px 0px 0px 0px; + -webkit-border-radius: 7px 0px 0px 0px; + } + + #children th:last-child { + border-left: 1px solid #fff; + border-radius: 0px 7px 0 0; + -moz-border-radius: 0px 7px 0 0; + -webkit-border-radius: 0px 7px 0 0; + } + + #children tbody tr { + min-height: 68px; + } + +#children-container.hide-scrollbar::-webkit-scrollbar { + width: 0px; +} + +#children-container::-webkit-scrollbar { + width: 7px; + height: 5px; +} + +#children-container::-webkit-scrollbar-track { + background-color: #f2f2f2; + border-radius: 5px; +} + +#children-container::-webkit-scrollbar-thumb { + background-color: #ccc; + border-radius: 5px; +} + + #children-container::-webkit-scrollbar-thumb:hover { + background-color: #aaa; + } + +.children-box .add { + cursor: pointer; + padding: 8px 6px; + border-radius: 16px; + border: 2px solid #0f9500; + background: white; + color: #0f9500; + font-size: 10px; + width: 9rem; +} + +.d-flex { + display: flex; + flex-wrap: wrap; +} + +.trash { + color: #c91d1d; + font-size: 22px; + position: relative; + left: -7px; + top: 5px; +} + +.add:hover { + background: #0f9500; + color: white; + border: 2px solid #0f9500; + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); +} + +.items, .items1 { + border: 1px solid #c7c7c7; + border-radius: 5px; + padding: 5px 0px; + background-color: white; + text-align: center; +} + +.green { + background-color: #e0ffe0; +} + +.modal-content2 { + background-color: whitesmoke; + border: 1px solid #a5a5a59e; + border-radius: 18px; + margin-top: 300px; + padding: 0px 30px; +} + +.modal .modal-dialoge .modal-content2 .modal-body { + padding: 50px 20px; + font-size: 17px; +} + +.modal-dialoge { + padding: 0px 180px; +} + +.error-icon { + position: absolute; + left: 15px; + top: 40px; + font-size: 16px; + color: red; +} + +.error-message { + font-size: 1rem; + color: red; + position: absolute; +} + +.input-div { + display: flex; +} + +.education { + height: 36px; +} + +.errored, .patternMisMatch { + animation: shake 300ms; + box-shadow: inset 0 0 2px #eb3434, 0 0 5px #eb3434 !important; + border: 1px solid #eb3434 !important; + border-radius: 8px; +} + +@media (max-width: 1550px) and (min-width:1441px) { + .education { + height: 33px; + } +} + +@media (max-width: 1550px) { + .modal-content { + height: 680px !important; + } + + .box { + font-size: 12px; + height: 575px; + top: 40px; + } + + .inputs { + padding: 6px 8px; + } + + .btn-modal { + font-size: 12px; + } + + .main-title { + width: 185px; + font-size: 17px; + left: 52%; + top: 5px; + } + + .trash { + font-size: 18px; + } +} + + +@media (max-width: 1440px) { + + #progress:after { + border-top: 17px solid transparent; + border-bottom: 17px solid transparent; + } + + .inputs { + padding: 8px 10px; + } + + .education { + height: 29px; + } + + .btn-modal { + font-size: 10px; + } + + .main-title { + width: 169px; + font-size: 15px; + left: 53%; + top: 3px; + } + + .radio-sections { + padding: 8px 5px !important; + display: flex; + align-items: center; + } + + .nationality-type { + padding: 0px 2px; + } + + .input-type { + padding: 0px 5px; + } + + .duty-condition { + top: -9px; + } + + .loc-box { + margin-top: 9px; + } + + #children-container, .loc-text { + height: 136px; + } + + #children th, td { + padding: 5px 8px; + } + + #children th { + font-size: 11px; + } + + .radio-box { + font-size: 10px; + } +} + +@media (max-width: 1200px) { + .form-box { + min-height: 69rem; + } + + .form1, .listForm1 { + width: 93%; + } + + .radio-input.nationality label:first-child { + grid-column: 1 / 9; + } + + .radio-input.nationality label:nth-child(2) { + grid-column: 9 / 16; + } + + #employee-panel .name-th { + max-width: 55px; + } + + #employee-panel .Lname-th { + max-width: 85px; + } + + #employee-panel .code-th { + max-width: 55px; + } + + #employee-panel .insurance-th { + max-width: 50px; + } + + #employee-panel #datatable tbody tr td { + font-size: 1rem; + } +} + +@media (max-width: 900px) { + .modal-dialog { + width: 75%; + } + /* .operationBtns a { + width: 3.8rem; + height: 3.6rem; + }*/ + #employee-panel .code-th { + max-width: 65px; + } + + #employee-panel .Lname-th { + max-width: 75px; + } + + .Lname-td .fulltext { + max-width: 68px; + } +} + +@media (max-width: 768px) { + .form-box { + min-height: 85rem; + padding: 40px 10px; + } + + .radio-box, .step { + font-size: 10px; + } + + .modal .modal-dialog .modal-content { + min-height: 96rem; + } + + .form1 .form-group, .listForm1 .form-group { + padding: 8px 5px 8px 0; + } + + .modal-dialog { + width: 90%; + } + + .form3 fieldset, .listForm3 fieldset { + margin: 10px 0; + } + + .form { + font-size: 1rem; + } + + .input-type { + padding: 0px 3px; + } + + .loc-text { + height: 60px; + } + + .radio-input.nationality, .radio-input { + grid-column: 5 / 16; + } + + .radio-input.nationality label:first-child { + grid-column: 1 / 8; + } +} + +@media (max-width: 768px) and (min-width:490px ) { + .Lname-td .fulltext { + max-width: 80px; + } +} + +@media (max-width: 450px) { + .form-box { + min-height: 86rem; + } + + .form-footer-btns { + left: 25%; + } + + .name-td .fulltext { + max-width: 75px; + } + + .modal .modal-dialog .modal-content { + min-height: 96rem; + } +} + +@media (max-width: 390px) { + + .name-td .fulltext { + max-width: 65px; + } +}