diff --git a/py_app/CSS_MODULAR_GUIDE.md b/py_app/CSS_MODULAR_GUIDE.md new file mode 100644 index 0000000..f9d069c --- /dev/null +++ b/py_app/CSS_MODULAR_GUIDE.md @@ -0,0 +1,152 @@ +# CSS Modular Structure Guide + +## Overview +This guide explains how to migrate from a monolithic CSS file to a modular CSS structure for better maintainability and organization. + +## New CSS Structure + +``` +app/static/css/ +├── base.css # Global styles, header, buttons, theme +├── login.css # Login page specific styles +├── dashboard.css # Dashboard and module cards +├── warehouse.css # Warehouse module styles +├── etichete.css # Labels/etiquette module styles (to be created) +├── quality.css # Quality module styles (to be created) +└── scan.css # Scan module styles (to be created) +``` + +## Implementation Strategy + +### Phase 1: Setup Modular Structure ✅ +- [x] Created `css/` directory +- [x] Created `base.css` with global styles +- [x] Created `login.css` for login page +- [x] Created `warehouse.css` for warehouse module +- [x] Updated `base.html` to include modular CSS +- [x] Updated `login.html` to use new structure + +### Phase 2: Migration Plan (Next Steps) + +1. **Extract module-specific styles from style.css:** + - Etiquette/Labels module → `etichete.css` + - Quality module → `quality.css` + - Scan module → `scan.css` + +2. **Update templates to use modular CSS:** + ```html + {% block head %} + + {% endblock %} + ``` + +3. **Clean up original style.css:** + - Remove extracted styles + - Keep only legacy/common styles temporarily + - Eventually eliminate when all modules migrated + +## Template Usage Pattern + +### Standard Template Structure: +```html +{% extends "base.html" %} +{% block title %}Page Title{% endblock %} + +{% block head %} + + + + +{% endblock %} + +{% block content %} + +{% endblock %} +``` + +## CSS Loading Order + +1. `base.css` - Global styles, header, buttons, theme +2. `style.css` - Legacy styles (temporary, for backward compatibility) +3. Module-specific CSS (e.g., `warehouse.css`) +4. Inline ` +{% endblock %} +``` + +### After: +1. Move styles to `css/module-name.css` +2. Update template: +```html +{% block head %} + +{% endblock %} +``` + +## Best Practices + +1. **Use semantic naming:** `warehouse.css`, `login.css`, not `page1.css` +2. **Keep base.css minimal:** Only truly global styles +3. **Avoid deep nesting:** Keep CSS selectors simple +4. **Use consistent naming:** Follow existing patterns +5. **Document changes:** Update this guide when adding new modules + +## Next Steps + +1. Extract etiquette module styles to `etichete.css` +2. Update all etiquette templates to use new CSS +3. Extract quality module styles to `quality.css` +4. Extract scan module styles to `scan.css` +5. Gradually remove migrated styles from `style.css` +6. Eventually remove `style.css` dependency from `base.html` \ No newline at end of file diff --git a/py_app/MOBILE_LOGIN_GUIDE.md b/py_app/MOBILE_LOGIN_GUIDE.md new file mode 100644 index 0000000..4cf9d32 --- /dev/null +++ b/py_app/MOBILE_LOGIN_GUIDE.md @@ -0,0 +1,133 @@ +# Mobile-Responsive Login Page + +## Overview +The login page has been enhanced with comprehensive mobile-responsive CSS to provide an optimal user experience across all device types and screen sizes. + +## Mobile-Responsive Features Added + +### 1. **Responsive Breakpoints** +- **Tablet (≤768px)**: Column layout, optimized logo and form sizing +- **Mobile (≤480px)**: Enhanced touch targets, better spacing +- **Small Mobile (≤320px)**: Minimal padding, compact design +- **Landscape (height ≤500px)**: Horizontal layout for landscape phones + +### 2. **Layout Adaptations** + +#### Desktop (>768px) +- Side-by-side logo and form layout +- Large logo (90vh height) +- Fixed form width (600px) + +#### Tablet (≤768px) +- Vertical stacked layout +- Logo height reduced to 30vh +- Form width becomes responsive (100%, max 400px) + +#### Mobile (≤480px) +- Optimized touch targets (44px minimum) +- Increased padding and margins +- Better visual hierarchy +- Enhanced shadows and border radius + +#### Small Mobile (≤320px) +- Minimal padding to maximize space +- Compact logo (20vh height) +- Reduced font sizes where appropriate + +### 3. **Touch Optimizations** + +#### iOS/Safari Specific +- `font-size: 16px` on inputs prevents automatic zoom +- Proper touch target sizing (44px minimum) + +#### Touch Device Enhancements +- Active states for button presses +- Optimized image rendering for high DPI screens +- Hover effects disabled on touch devices + +### 4. **Accessibility Improvements** +- Proper contrast ratios maintained +- Touch targets meet accessibility guidelines +- Readable font sizes across all devices +- Smooth transitions and animations + +### 5. **Performance Considerations** +- CSS-only responsive design (no JavaScript required) +- Efficient media queries +- Optimized image rendering for retina displays + +## Key CSS Features + +### Flexible Layout +```css +.login-page { + display: flex; + flex-direction: column; /* Mobile */ + justify-content: center; +} +``` + +### Responsive Images +```css +.login-logo { + max-height: 25vh; /* Mobile */ + max-width: 85vw; +} +``` + +### Touch-Friendly Inputs +```css +.form-container input { + padding: 12px; + font-size: 16px; /* Prevents iOS zoom */ + min-height: 44px; /* Touch target size */ +} +``` + +### Landscape Optimization +```css +@media screen and (max-height: 500px) and (orientation: landscape) { + .login-page { + flex-direction: row; /* Back to horizontal */ + } +} +``` + +## Testing Recommendations + +### Device Testing +- [ ] iPhone (various sizes) +- [ ] Android phones (various sizes) +- [ ] iPad/Android tablets +- [ ] Desktop browsers with responsive mode + +### Orientation Testing +- [ ] Portrait mode on all devices +- [ ] Landscape mode on phones +- [ ] Landscape mode on tablets + +### Browser Testing +- [ ] Safari (iOS) +- [ ] Chrome (Android/iOS) +- [ ] Firefox Mobile +- [ ] Samsung Internet +- [ ] Desktop browsers (Chrome, Firefox, Safari, Edge) + +## Browser Support +- Modern browsers (ES6+ support) +- iOS Safari 12+ +- Android Chrome 70+ +- Desktop browsers (last 2 versions) + +## Performance Impact +- **CSS Size**: Increased by ~2KB (compressed) +- **Load Time**: No impact (CSS only) +- **Rendering**: Optimized for mobile GPUs +- **Memory**: Minimal additional usage + +## Future Enhancements +1. **Dark mode mobile optimizations** +2. **Progressive Web App (PWA) features** +3. **Biometric authentication UI** +4. **Loading states and animations** +5. **Error message responsive design** \ No newline at end of file diff --git a/py_app/app/__pycache__/__init__.cpython-312.pyc b/py_app/app/__pycache__/__init__.cpython-312.pyc old mode 100755 new mode 100644 index f5ad98b..5be1296 Binary files a/py_app/app/__pycache__/__init__.cpython-312.pyc and b/py_app/app/__pycache__/__init__.cpython-312.pyc differ diff --git a/py_app/app/__pycache__/models.cpython-312.pyc b/py_app/app/__pycache__/models.cpython-312.pyc old mode 100755 new mode 100644 index 74d422f..830d429 Binary files a/py_app/app/__pycache__/models.cpython-312.pyc and b/py_app/app/__pycache__/models.cpython-312.pyc differ diff --git a/py_app/app/__pycache__/permissions.cpython-312.pyc b/py_app/app/__pycache__/permissions.cpython-312.pyc old mode 100755 new mode 100644 index 4df9285..13c8aeb Binary files a/py_app/app/__pycache__/permissions.cpython-312.pyc and b/py_app/app/__pycache__/permissions.cpython-312.pyc differ diff --git a/py_app/app/__pycache__/routes.cpython-312.pyc b/py_app/app/__pycache__/routes.cpython-312.pyc old mode 100755 new mode 100644 index 1c8b167..e80d9eb Binary files a/py_app/app/__pycache__/routes.cpython-312.pyc and b/py_app/app/__pycache__/routes.cpython-312.pyc differ diff --git a/py_app/app/__pycache__/settings.cpython-312.pyc b/py_app/app/__pycache__/settings.cpython-312.pyc old mode 100755 new mode 100644 index 1865883..62db362 Binary files a/py_app/app/__pycache__/settings.cpython-312.pyc and b/py_app/app/__pycache__/settings.cpython-312.pyc differ diff --git a/py_app/app/__pycache__/warehouse.cpython-312.pyc b/py_app/app/__pycache__/warehouse.cpython-312.pyc old mode 100755 new mode 100644 index e0415f7..81ec7c0 Binary files a/py_app/app/__pycache__/warehouse.cpython-312.pyc and b/py_app/app/__pycache__/warehouse.cpython-312.pyc differ diff --git a/py_app/app/routes.py b/py_app/app/routes.py index 5b5b7b6..fff415c 100755 --- a/py_app/app/routes.py +++ b/py_app/app/routes.py @@ -2382,6 +2382,41 @@ def generate_location_label_pdf(): from app.warehouse import generate_location_label_pdf return generate_location_label_pdf() +@warehouse_bp.route('/update_location', methods=['POST']) +def update_location(): + from app.warehouse import update_location + try: + data = request.get_json() + location_id = data.get('location_id') + location_code = data.get('location_code') + size = data.get('size') + description = data.get('description') + + if not location_id or not location_code: + return jsonify({'success': False, 'error': 'Location ID and code are required'}) + + result = update_location(location_id, location_code, size, description) + return jsonify(result) + + except Exception as e: + return jsonify({'success': False, 'error': str(e)}) + +@warehouse_bp.route('/delete_location', methods=['POST']) +def delete_location(): + from app.warehouse import delete_location_by_id + try: + data = request.get_json() + location_id = data.get('location_id') + + if not location_id: + return jsonify({'success': False, 'error': 'Location ID is required'}) + + result = delete_location_by_id(location_id) + return jsonify(result) + + except Exception as e: + return jsonify({'success': False, 'error': str(e)}) + # NOTE for frontend/extension developers: # To print labels, call the Chrome extension and pass the PDF URL: diff --git a/py_app/app/static/css/base.css b/py_app/app/static/css/base.css new file mode 100644 index 0000000..b8575fd --- /dev/null +++ b/py_app/app/static/css/base.css @@ -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; +} \ No newline at end of file diff --git a/py_app/app/static/css/dashboard.css b/py_app/app/static/css/dashboard.css new file mode 100644 index 0000000..36db688 --- /dev/null +++ b/py_app/app/static/css/dashboard.css @@ -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; +} \ No newline at end of file diff --git a/py_app/app/static/css/login.css b/py_app/app/static/css/login.css new file mode 100644 index 0000000..fc59c79 --- /dev/null +++ b/py_app/app/static/css/login.css @@ -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; + } +} \ No newline at end of file diff --git a/py_app/app/static/css/warehouse.css b/py_app/app/static/css/warehouse.css new file mode 100644 index 0000000..55cbb58 --- /dev/null +++ b/py_app/app/static/css/warehouse.css @@ -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; +} \ No newline at end of file diff --git a/py_app/app/templates/base.html b/py_app/app/templates/base.html index 40d9328..d9b375f 100755 --- a/py_app/app/templates/base.html +++ b/py_app/app/templates/base.html @@ -4,7 +4,12 @@
| ID | +Location Code | +Size | +Description | +
|---|---|---|---|
| {{ loc[0] }} | +{{ loc[1] }} | +{{ loc[2] or '' }} | +{{ loc[3] or '' }} | +