staff chnages and customer chnages
This commit is contained in:
File diff suppressed because it is too large
Load Diff
@@ -4,7 +4,47 @@
|
||||
|
||||
@section('content')
|
||||
<style>
|
||||
|
||||
|
||||
/* Hide scrollbar but keep scroll functionality */
|
||||
html,
|
||||
body {
|
||||
overflow-x: hidden !important;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
scrollbar-width: none; /* Firefox */
|
||||
-ms-overflow-style: none; /* IE & Edge */
|
||||
}
|
||||
|
||||
html::-webkit-scrollbar,
|
||||
body::-webkit-scrollbar {
|
||||
display: none; /* Chrome, Safari */
|
||||
}
|
||||
|
||||
/* GLOBAL scrollbar hide – keeps scrolling */
|
||||
html,
|
||||
body,
|
||||
.staff-add-container,
|
||||
.staff-add-card {
|
||||
scrollbar-width: none; /* Firefox */
|
||||
-ms-overflow-style: none; /* IE / Edge */
|
||||
}
|
||||
|
||||
html::-webkit-scrollbar,
|
||||
body::-webkit-scrollbar,
|
||||
.staff-add-container::-webkit-scrollbar,
|
||||
.staff-add-card::-webkit-scrollbar {
|
||||
display: none; /* Chrome / Safari */
|
||||
}
|
||||
|
||||
:root {
|
||||
--primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
--secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
||||
@@ -15,11 +55,16 @@
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
}
|
||||
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
padding: clamp(12px, 2vw, 30px);
|
||||
box-sizing: border-box;
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
overflow-x: hidden; /* hide horizontal only */
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Main Container - FLUID LIKE SHIPMENT PAGE */
|
||||
.staff-add-container {
|
||||
@@ -29,16 +74,7 @@
|
||||
|
||||
/* Decorative Elements */
|
||||
.decorative-circle {
|
||||
position: absolute;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
border-radius: 50%;
|
||||
background: var(--secondary-gradient);
|
||||
opacity: 0.05;
|
||||
filter: blur(40px);
|
||||
z-index: 0;
|
||||
top: -100px;
|
||||
right: -100px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Main Card - FLUID BEHAVIOR */
|
||||
@@ -950,6 +986,23 @@
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
.header-flex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
text-align: left; /* override center */
|
||||
}
|
||||
|
||||
.header-icon {
|
||||
flex-shrink: 0;
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
.header-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div class="staff-add-container">
|
||||
@@ -960,13 +1013,18 @@
|
||||
<div class="staff-add-card">
|
||||
<!-- Header -->
|
||||
<div class="staff-add-header">
|
||||
<div class="header-content">
|
||||
<div class="header-icon">👨💼</div>
|
||||
<div class="header-content header-flex">
|
||||
<div class="header-icon">👨💼</div>
|
||||
<div class="header-text">
|
||||
<h1 class="header-title">Add New Staff Member</h1>
|
||||
<p class="header-subtitle">Complete all the steps below to add a new staff member to your team</p>
|
||||
<p class="header-subtitle">
|
||||
Complete all the steps below to add a new staff member to your team
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Progress Steps -->
|
||||
<div class="progress-steps">
|
||||
<div class="step active" data-step="1">
|
||||
|
||||
@@ -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