staff chnages and customer chnages
This commit is contained in:
divya abdar
@@ -11,6 +11,79 @@
|
||||
--shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
/* Hide scrollbar but allow scroll */
|
||||
.hide-scrollbar {
|
||||
overflow-y: auto;
|
||||
scrollbar-width: none; /* Firefox */
|
||||
-ms-overflow-style: none; /* IE & Edge */
|
||||
}
|
||||
|
||||
.hide-scrollbar::-webkit-scrollbar {
|
||||
display: none; /* Chrome, Safari */
|
||||
}
|
||||
|
||||
/* =========================================== */
|
||||
/* HORIZONTAL SCROLL FIXES */
|
||||
/* =========================================== */
|
||||
html, body {
|
||||
overflow-x: hidden !important;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.staff-edit-container,
|
||||
.staff-edit-card,
|
||||
.form-section,
|
||||
.form-grid,
|
||||
.permissions-container {
|
||||
max-width: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Fix grid overflow issues */
|
||||
.form-grid,
|
||||
.permissions-container {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* Fix transform hover effects */
|
||||
.permission-group:hover,
|
||||
.status-option:hover {
|
||||
transform: translateY(-2px) !important;
|
||||
}
|
||||
|
||||
.permission-item:hover {
|
||||
transform: translateX(3px) !important;
|
||||
}
|
||||
|
||||
/* Ensure containers don't exceed viewport */
|
||||
@media (min-width: 1200px) {
|
||||
.staff-edit-card {
|
||||
max-width: 95vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
.staff-edit-card {
|
||||
max-width: 97vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1600px) {
|
||||
.staff-edit-card {
|
||||
max-width: 98vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1920px) {
|
||||
.staff-edit-card {
|
||||
max-width: 99vw;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
@@ -46,21 +119,26 @@
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* Fluid Header */
|
||||
/* =========================================== */
|
||||
/* UPDATED HEADER LAYOUT */
|
||||
/* =========================================== */
|
||||
.staff-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
text-align: left;
|
||||
background: var(--primary-gradient);
|
||||
padding: 30px 25px;
|
||||
/* padding: 16px 20px; */
|
||||
color: white;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.staff-avatar {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border-radius: 50%;
|
||||
background: white;
|
||||
margin: 0 auto 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -68,6 +146,7 @@
|
||||
color: #667eea;
|
||||
border: 3px solid white;
|
||||
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.staff-avatar-initials {
|
||||
@@ -78,6 +157,11 @@
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.staff-header-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.staff-title {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 700;
|
||||
@@ -102,6 +186,68 @@
|
||||
border: 1px solid rgba(255,255,255,0.2);
|
||||
}
|
||||
|
||||
/* Mobile responsive for header */
|
||||
@media (max-width: 768px) {
|
||||
.staff-header {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
gap: 15px;
|
||||
padding: 20px 15px;
|
||||
}
|
||||
|
||||
.staff-avatar {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.staff-header-content {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* Adjust avatar sizes for larger screens */
|
||||
@media (min-width: 1200px) {
|
||||
.staff-header {
|
||||
gap: 30px;
|
||||
padding: 40px 35px;
|
||||
}
|
||||
|
||||
.staff-avatar {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
.staff-header {
|
||||
gap: 35px;
|
||||
padding: 45px 40px;
|
||||
}
|
||||
|
||||
.staff-avatar {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1600px) {
|
||||
.staff-header {
|
||||
gap: 40px;
|
||||
padding: 50px 45px;
|
||||
}
|
||||
|
||||
.staff-avatar {
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1920px) {
|
||||
.staff-header {
|
||||
gap: 45px;
|
||||
padding: 60px 50px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Fluid Form Sections */
|
||||
.form-section {
|
||||
padding: 25px;
|
||||
@@ -479,7 +625,7 @@
|
||||
@media (min-width: 1200px) {
|
||||
.staff-edit-card {
|
||||
margin: 0 auto;
|
||||
max-width: 95%;
|
||||
max-width: 95vw;
|
||||
}
|
||||
|
||||
.form-grid {
|
||||
@@ -532,7 +678,7 @@
|
||||
/* Extra large desktop - 1440px+ */
|
||||
@media (min-width: 1440px) {
|
||||
.staff-edit-card {
|
||||
max-width: 97%;
|
||||
max-width: 97vw;
|
||||
}
|
||||
|
||||
.form-grid {
|
||||
@@ -604,7 +750,7 @@
|
||||
/* Ultra wide desktop - 1600px+ */
|
||||
@media (min-width: 1600px) {
|
||||
.staff-edit-card {
|
||||
max-width: 98%;
|
||||
max-width: 98vw;
|
||||
}
|
||||
|
||||
.form-grid {
|
||||
@@ -676,7 +822,7 @@
|
||||
}
|
||||
|
||||
.staff-edit-card {
|
||||
max-width: 99%;
|
||||
max-width: 99vw;
|
||||
}
|
||||
|
||||
.form-grid {
|
||||
@@ -788,9 +934,11 @@
|
||||
{{ strtoupper(substr($staff->name, 0, 2)) }}
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="staff-title">Edit Staff Profile</h1>
|
||||
<div class="staff-subtitle">{{ $staff->name }}</div>
|
||||
<div class="employee-id-badge">{{ $staff->employee_id }}</div>
|
||||
<div class="staff-header-content">
|
||||
<h1 class="staff-title">Edit Staff Profile</h1>
|
||||
<div class="staff-subtitle">{{ $staff->name }}</div>
|
||||
<div class="employee-id-badge">{{ $staff->employee_id }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Error Messages -->
|
||||
|
||||
Reference in New Issue
Block a user