ske087/quality_recticel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

lets add settings new to css

Browse Source
This commit is contained in:
Scheianu Ionut
2025-10-09 00:34:52 +03:00
parent a8811b94b7
commit b0e17b69e7
18 changed files with 1816 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
py_app/app/static/css/base.css Normal file
View File

@@ -0,0 +1,149 @@
/* Global Base Styles - Common across all pages */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f9;
}
.main-content {
width: 100vw;
max-width: 100vw;
margin: 0;
padding: 0;
background: none;
border-radius: 0;
box-shadow: none;
}
/* Header Styles */
header {
padding: 10px 20px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #ccc;
}
.header-content {
display: flex;
justify-content: space-between;
width: 100%;
align-items: center;
}
.left-header {
display: flex;
align-items: center;
}
.left-header .logo {
width: 60px;
height: auto;
margin-right: 10px;
}
.left-header .page-title {
font-size: 1.5em;
font-weight: bold;
}
.right-header {
display: flex;
align-items: center;
}
.right-header .user-info {
margin-right: 15px;
font-size: 1em;
color: #333;
}
.right-header .logout-button {
padding: 5px 10px;
font-size: 1em;
background-color: #007bff;
color: #fff;
text-decoration: none;
border-radius: 5px;
border: none;
cursor: pointer;
}
.right-header .logout-button:hover {
background-color: #0056b3;
color: #fff;
}
/* Common Button Styles */
.btn {
padding: 8px 16px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
text-decoration: none;
display: inline-block;
font-size: 14px;
}
.btn:hover {
background-color: #0056b3;
}
.btn-success {
background-color: #28a745;
}
.btn-success:hover {
background-color: #218838;
}
.btn-danger {
background-color: #dc3545;
}
.btn-danger:hover {
background-color: #c82333;
}
.btn-info {
background-color: #17a2b8;
}
.btn-info:hover {
background-color: #138496;
}
/* Theme Toggle */
.theme-toggle {
background-color: #6c757d;
color: white;
border: none;
padding: 8px 12px;
border-radius: 4px;
cursor: pointer;
margin-right: 10px;
font-size: 12px;
}
.theme-toggle:hover {
background-color: #5a6268;
}
/* Dark Mode Base Styles */
body.dark-mode {
background-color: #121212;
color: #e0e0e0;
}
body.dark-mode header {
background-color: #1e1e1e;
color: #fff;
}
body.dark-mode .user-info {
color: #ccc;
}

67
py_app/app/static/css/dashboard.css Normal file
View File

@@ -0,0 +1,67 @@
/* Dashboard and General Page Styles */
.dashboard-container {
padding: 20px;
max-width: 1200px;
margin: 0 auto;
}
.module-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin-top: 20px;
}
.module-card {
background: #fff;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
transition: transform 0.2s, box-shadow 0.2s;
}
.module-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.module-card h3 {
margin: 0 0 15px 0;
color: #333;
font-size: 1.2em;
}
.module-card p {
color: #666;
margin-bottom: 15px;
line-height: 1.5;
}
.module-card a {
display: inline-block;
padding: 8px 16px;
background-color: #007bff;
color: #fff;
text-decoration: none;
border-radius: 4px;
transition: background-color 0.2s;
}
.module-card a:hover {
background-color: #0056b3;
}
/* Dark mode for dashboard */
body.dark-mode .module-card {
background: #2d2d2d;
color: #e0e0e0;
}
body.dark-mode .module-card h3 {
color: #fff;
}
body.dark-mode .module-card p {
color: #ccc;
}

216
py_app/app/static/css/login.css Normal file
View File

@@ -0,0 +1,216 @@
/* Login Page Specific Styles */
.login-page {
display: flex;
align-items: center;
justify-content: space-between;
height: 100vh;
background-color: #f4f4f9;
padding: 0 20px;
}
.logo-container {
width: 100%;
text-align: center;
margin-bottom: 10px;
}
.login-logo {
max-height: 90vh;
width: auto;
}
.form-container {
width: 600px;
background: #fff;
padding: 15px 30px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
margin: 0;
align-self: center;
}
.form-container h2 {
text-align: center;
margin-bottom: 15px;
}
.form-container form {
display: flex;
flex-direction: column;
}
.form-container label {
margin-bottom: 5px;
font-weight: bold;
}
.form-container input {
margin-bottom: 10px;
padding: 8px;
border: 1px solid #ccc;
border-radius: 3px;
font-size: 16px; /* Prevents zoom on iOS */
}
.form-container button {
padding: 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
font-size: 16px;
}
.form-container button:hover {
background-color: #0056b3;
}
/* Hide the header only on the login page */
body.light-mode.login-page header,
body.dark-mode.login-page header {
display: none;
}
/* Mobile Responsive Design */
/* Tablet styles (768px and down) */
@media screen and (max-width: 768px) {
.login-page {
flex-direction: column;
justify-content: center;
padding: 20px 15px;
gap: 20px;
}
.logo-container {
margin-bottom: 0;
}
.login-logo {
max-height: 30vh;
max-width: 80vw;
}
.form-container {
width: 100%;
max-width: 400px;
padding: 20px 25px;
}
}
/* Mobile styles (480px and down) */
@media screen and (max-width: 480px) {
.login-page {
padding: 15px 10px;
gap: 15px;
}
.login-logo {
max-height: 25vh;
max-width: 85vw;
}
.form-container {
padding: 20px 20px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.form-container h2 {
font-size: 1.5em;
margin-bottom: 20px;
}
.form-container input {
padding: 12px;
font-size: 16px;
border-radius: 5px;
margin-bottom: 15px;
}
.form-container button {
padding: 12px;
font-size: 16px;
border-radius: 5px;
font-weight: 600;
}
.form-container label {
font-size: 14px;
margin-bottom: 8px;
}
}
/* Small mobile styles (320px and down) */
@media screen and (max-width: 320px) {
.login-page {
padding: 10px 8px;
}
.login-logo {
max-height: 20vh;
max-width: 90vw;
}
.form-container {
padding: 15px;
width: calc(100% - 16px);
}
.form-container h2 {
font-size: 1.3em;
}
}
/* Landscape orientation adjustments */
@media screen and (max-height: 500px) and (orientation: landscape) {
.login-page {
flex-direction: row;
justify-content: space-around;
align-items: center;
gap: 20px;
}
.logo-container {
flex: 1;
margin-bottom: 0;
}
.login-logo {
max-height: 80vh;
max-width: 40vw;
}
.form-container {
flex: 1;
max-width: 350px;
align-self: center;
}
}
/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
.form-container input {
min-height: 44px; /* Apple's recommended touch target size */
}
.form-container button {
min-height: 44px;
font-weight: 600;
}
.form-container button:active {
background-color: #004494;
transform: translateY(1px);
}
}
/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.login-logo {
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}
}

759
py_app/app/static/css/warehouse.css Normal file
View File

@@ -0,0 +1,759 @@
/* Ensure .main-content is full width for warehouse pages */
/* Fix horizontal overflow: use 100% width, not 100vw */
.main-content {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/* Normalize box-sizing for all elements */
*, *::before, *::after {
box-sizing: border-box;
}
/* WAREHOUSE PAGE CSS - FRESH START */
/* Reset and override all base styles for warehouse pages */
.main-content {
width: 100% !important;
height: calc(100vh - 60px) !important; /* Full height minus header */
margin: 0 !important;
padding: 10px !important; /* 10px margin from page edges */
background: #f4f4f9 !important; /* Match body background */
border: none !important;
box-shadow: none !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
}
/* Main warehouse container - full width with 10px padding */
.warehouse-page-container {
width: 100%;
height: 100%;
display: flex;
gap: 10px; /* 10px between containers */
box-sizing: border-box;
}
/* The 3 main containers with 1:2:1 ratio */
.warehouse-container-1 {
flex: 1; /* 1 part */
background: #f8fafc; /* Theme card background */
color: #1e293b; /* Theme text color */
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
box-sizing: border-box;
overflow-y: auto;
align-self: flex-start;
max-height: 640px;
min-height: 320px;
}
.warehouse-container-2 {
flex: 2; /* 2 parts */
background: #f8fafc; /* Theme card background */
color: #1e293b; /* Theme text color */
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
box-sizing: border-box;
overflow-y: auto;
max-height: 640px;
}
.warehouse-container-3 {
flex: 1; /* 1 part */
background: #f8fafc; /* Theme card background */
color: #1e293b; /* Theme text color */
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
box-sizing: border-box;
overflow-y: auto;
max-height: 640px;
}
/* Form and table styles for warehouse components */
form {
display: flex;
flex-direction: column;
gap: 4px; /* Reduced gap for compactness */
}
form label {
font-weight: bold;
margin-bottom: 2px; /* Reduced margin for compactness */
}
form input, form select {
padding: 8px 12px;
border: 1px solid #cbd5e1;
border-radius: 4px;
font-size: 14px;
background: #e2e8f0; /* Theme input background */
color: #1e293b; /* Theme input text */
}
.btn {
padding: 8px 16px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
text-decoration: none;
display: inline-block;
font-size: 14px;
}
.btn:hover {
background-color: #0056b3;
}
.btn-success {
background-color: #28a745;
}
.btn-info {
background-color: #17a2b8;
}
.btn-danger {
background-color: #dc3545;
}
/* Table styles */
.scan-table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
font-size: 12px;
}
.scan-table th, .scan-table td {
border: 1px solid #cbd5e1; /* Theme border color */
padding: 8px;
text-align: left;
}
.scan-table th {
background-color: #e2e8f0; /* Theme input background for headers */
font-weight: bold;
color: #334155; /* Theme label color */
}
.location-row {
cursor: pointer;
transition: background-color 0.2s;
}
.location-row:hover {
background-color: #e2e8f0; /* Theme hover background */
}
.location-row.selected {
background-color: #ffb300 !important;
color: #222 !important;
font-weight: bold;
}
/* Edit/Delete card styles */
.edit-delete-card {
margin-bottom: 20px;
}
.selection-message {
color: #64748b; /* Slightly lighter theme text */
font-style: italic;
margin-bottom: 10px;
}
.selection-info {
margin-bottom: 10px;
}
.button-group {
display: flex;
gap: 10px;
margin-top: 10px;
}
/* Barcode preview */
#barcode-label-preview {
width: 8cm;
height: 4cm;
border: 2px solid #333;
background: white;
display: flex;
align-items: center;
justify-content: center;
margin: 10px auto;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
#barcode-label-preview .location-text {
font-size: 12px;
font-weight: bold;
text-align: center;
margin-bottom: 10px;
}
/* Modal styles */
.modal {
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
display: flex;
justify-content: center;
align-items: center;
}
.modal-content {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
width: 90%;
max-width: 500px;
max-height: 90vh;
overflow-y: auto;
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
border-bottom: 1px solid #ddd;
background-color: #f8f9fa;
}
.modal-body {
padding: 20px;
}
.close {
font-size: 24px;
font-weight: bold;
cursor: pointer;
color: #666;
}
.close:hover {
color: #333;
}
.confirm-table {
width: 100%;
border-collapse: collapse;
margin: 15px 0;
}
.confirm-table td {
padding: 8px 12px;
border-bottom: 1px solid #eee;
}
.confirm-table td:first-child {
width: 30%;
background-color: #f8f9fa;
font-weight: bold;
}
.modal-buttons {
display: flex;
gap: 10px;
justify-content: flex-end;
margin-top: 20px;
padding-top: 15px;
border-top: 1px solid #eee;
}
html, body {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.scan-container {
width: 100vw !important;
margin: 0 !important;
padding: 0 !important;
display: block !important; /* Override any grid from style.css */
grid-template-columns: unset !important; /* Remove any grid columns */
gap: unset !important; /* Remove any gap */
max-width: 100vw !important; /* Override max-width from style.css */
box-shadow: none !important; /* Remove box shadow */
border-radius: 0 !important; /* Remove border radius */
}
/* Full-width container for warehouse pages - avoids scan-container restrictions */
.warehouse-full-container {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
box-sizing: border-box;
background: transparent !important;
}
/* Container card with left/right margins */
.warehouse-container-card {
margin-left: 15px;
margin-right: 15px;
background: #fff;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
width: calc(100% - 30px);
box-sizing: border-box;
}
/* 3-column layout for warehouse create locations */
.warehouse-grid {
display: grid !important;
grid-template-columns: 1fr 2fr 1fr !important;
gap: 20px;
margin: 0;
min-height: auto;
width: 100%;
box-sizing: border-box;
}
/* Make cards equal height in grid with higher specificity */
.warehouse-grid .card {
height: fit-content;
align-self: start;
width: 100% !important;
max-width: none !important;
margin-left: 8px;
margin-right: 8px;
}
/* Responsive grid - collapse to single column on smaller screens */
@media (max-width: 1024px) {
.warehouse-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.warehouse-grid {
gap: 15px;
}
.scan-container {
padding: 15px;
}
}
.card {
background: #fff;
border-radius: 8px;
padding: 20px;
margin: 0;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.scan-form-card {
max-width: 600px;
margin: 0 auto 20px auto;
}
.scan-table-card {
overflow-x: auto;
}
.scan-table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
font-size: 11px;
}
.scan-table th, .scan-table td {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
}
.scan-table th {
background-color: #f4f4f4;
font-weight: bold;
}
/* Location row selection styles */
.location-row {
cursor: pointer;
transition: background-color 0.2s;
}
.location-row:hover {
background-color: #f8f9fa;
}
tr.location-row.selected, .location-row.selected td {
background-color: #ffb300 !important;
color: #222 !important;
font-weight: bold;
box-shadow: 0 2px 8px rgba(255,179,0,0.12);
border-left: 4px solid #ff9800;
transition: background 0.2s, color 0.2s;
}
/* Print section styles */
.print-section {
margin-top: 24px;
padding: 16px;
border: 1px solid #ddd;
border-radius: 5px;
background-color: #f9f9f9;
}
/* Edit/Delete card styles - compact version */
.edit-delete-card {
margin-top: 16px;
padding: 12px 16px;
border: 1px solid #ddd;
border-radius: 5px;
background-color: #f8f9fa;
}
.edit-delete-card h3 {
font-size: 1.05em;
margin: 0 0 8px 0;
color: #333;
}
.edit-delete-card .selection-message {
color: #666;
font-style: italic;
margin-bottom: 8px;
font-size: 0.9em;
}
.edit-delete-card .selection-info {
margin-bottom: 8px;
font-size: 0.9em;
}
.edit-delete-card .button-group {
display: flex;
gap: 10px;
justify-content: center;
margin-top: 8px;
}
.edit-delete-card .btn {
font-size: 11px;
padding: 5px 12px;
}
/* Barcode label preview */
#barcode-label-preview {
width: 8cm;
height: 4cm;
border: 2px solid #333;
background: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 10px auto;
position: relative;
box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}
#barcode-label-preview .location-text {
font-size: 12px;
font-weight: bold;
text-align: center;
margin-bottom: 10px;
}
#barcode-label-preview #location-barcode {
display: block;
margin: 0 auto;
max-width: 90%;
max-height: 70%;
}
#barcode-label-preview #barcode-placeholder {
text-align: center;
width: 100%;
}
/* Dark mode for warehouse */
body.dark-mode .card {
background: #2d2d2d;
color: #e0e0e0;
}
body.dark-mode .scan-table {
background-color: #1e1e1e;
color: #fff;
}
body.dark-mode .scan-table th {
background-color: #333;
}
body.dark-mode .scan-table td {
color: #ddd;
}
body.dark-mode .scan-table tr:nth-child(even) {
background-color: #2a2a2a;
}
body.dark-mode .print-section {
background-color: #333;
border-color: #555;
}
body.dark-mode .edit-delete-card {
background-color: #333;
border-color: #555;
}
body.dark-mode .edit-delete-card h3 {
color: #fff;
}
body.dark-mode .edit-delete-card .selection-message {
color: #ccc;
}
/* Modal Styles */
.modal {
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
display: flex;
justify-content: center;
align-items: center;
}
.modal-content {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
width: 90%;
max-width: 500px;
max-height: 90vh;
overflow-y: auto;
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
border-bottom: 1px solid #ddd;
background-color: #f8f9fa;
border-radius: 8px 8px 0 0;
}
.modal-header h3 {
margin: 0;
color: #333;
}
.close {
font-size: 24px;
font-weight: bold;
cursor: pointer;
color: #666;
line-height: 1;
}
.close:hover {
color: #333;
}
.modal-body {
padding: 20px;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #333;
}
.form-group input {
width: 100%;
padding: 8px 12px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
box-sizing: border-box;
}
.modal-buttons {
display: flex;
gap: 10px;
justify-content: flex-end;
margin-top: 20px;
padding-top: 15px;
border-top: 1px solid #eee;
}
.confirm-table {
width: 100%;
border-collapse: collapse;
margin: 15px 0;
}
.confirm-table td {
padding: 8px 12px;
border-bottom: 1px solid #eee;
}
.confirm-table td:first-child {
width: 30%;
background-color: #f8f9fa;
font-weight: bold;
}
.btn-secondary {
background-color: #6c757d;
}
.btn-secondary:hover {
background-color: #5a6268;
}
/* Dark mode for modals */
body.dark-mode .modal-content {
background-color: #2d2d2d;
color: #e0e0e0;
}
body.dark-mode .modal-header {
background-color: #333;
border-bottom-color: #555;
}
body.dark-mode .modal-header h3 {
color: #fff;
}
body.dark-mode .close {
color: #ccc;
}
body.dark-mode .close:hover {
color: #fff;
}
body.dark-mode .form-group input {
background-color: #333;
border-color: #555;
color: #e0e0e0;
}
body.dark-mode .confirm-table td:first-child {
background-color: #333;
}
body.dark-mode .modal-buttons {
border-top-color: #555;
}
/* ENHANCED DARK MODE SUPPORT FOR NEW WAREHOUSE LAYOUT */
body.dark-mode .main-content {
background: #121212 !important; /* Match body dark background */
}
body.dark-mode .warehouse-container-1,
body.dark-mode .warehouse-container-2,
body.dark-mode .warehouse-container-3 {
background: #1e1e1e !important; /* Match header dark background */
color: #e0e0e0 !important; /* Match body dark text */
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
body.dark-mode form label {
color: #e0e0e0 !important; /* Match body dark text */
}
body.dark-mode form input,
body.dark-mode form select {
background: #2d2d2d !important; /* Slightly lighter than containers */
color: #e0e0e0 !important; /* Match body dark text */
border: 1px solid #444 !important;
}
body.dark-mode .btn {
background-color: #4299e1 !important;
}
body.dark-mode .btn:hover {
background-color: #3182ce !important;
}
body.dark-mode .btn-success {
background-color: #48bb78 !important;
}
body.dark-mode .btn-info {
background-color: #38b2ac !important;
}
body.dark-mode .btn-danger {
background-color: #f56565 !important;
}
body.dark-mode .scan-table {
background-color: #1e1e1e !important; /* Match header background */
color: #e0e0e0 !important; /* Match body dark text */
}
body.dark-mode .scan-table th {
background-color: #2d2d2d !important; /* Slightly lighter */
color: #e0e0e0 !important; /* Match body dark text */
border: 1px solid #444 !important;
}
body.dark-mode .scan-table td {
color: #e0e0e0 !important; /* Match body dark text */
border: 1px solid #444 !important;
}
body.dark-mode .location-row:hover {
background-color: #2d2d2d !important; /* Slightly lighter than table */
}
body.dark-mode .location-row.selected {
background-color: #ed8936 !important;
color: #1a202c !important;
}
body.dark-mode .selection-message {
color: #999 !important; /* Lighter gray for secondary text */
}
body.dark-mode .selection-info {
color: #e0e0e0 !important; /* Match body dark text */
}
body.dark-mode #barcode-label-preview {
background: #f8fafc !important; /* Keep white for readability */
border: 2px solid #444 !important;
}