ske087/quality_recticel

Fork 0

Files

Quality System Admin d8e6dd1c78 aded folde for MD files

2025-10-27 20:27:41 +02:00

6.7 KiB

Raw Permalink Blame History

Print Module CSS Modularization - Summary

What was accomplished

1. Created Modular CSS File

File: /srv/quality_recticel/py_app/app/static/css/print_module.css
Purpose: Centralized CSS for all printing module pages
Size: 610 lines of well-organized, documented CSS

2. Pages Affected

The following templates now use the modular CSS instead of embedded styles:

✅ print_module.html - Main printing interface
✅ print_lost_labels.html - Lost labels printing
✅ view_orders.html - View uploaded orders
✅ upload_orders.html - Upload order data
✅ main_page_etichete.html - Labels main page (already clean)

3. CSS Organization Structure

/* ==========================================================================
   LABEL PREVIEW STYLES
   ========================================================================== */
   
/* ==========================================================================
   PRINT MODULE TABLE STYLES
   ========================================================================== */
   
/* ==========================================================================
   VIEW ORDERS TABLE STYLES
   ========================================================================== */
   
/* ==========================================================================
   PRINT MODULE LAYOUT STYLES
   ========================================================================== */
   
/* ==========================================================================
   SEARCH AND FORM STYLES
   ========================================================================== */
   
/* ==========================================================================
   BUTTON STYLES
   ========================================================================== */
   
/* ==========================================================================
   PRINT OPTIONS STYLES
   ========================================================================== */
   
/* ==========================================================================
   THEME SUPPORT (Light/Dark Mode)
   ========================================================================== */
   
/* ==========================================================================
   RESPONSIVE DESIGN
   ========================================================================== */

4. Base Template Integration

File: base.html
Added: Conditional CSS loading for printing module pages
Logic: CSS only loads for printing-related endpoints

<!-- Print Module CSS for Labels/Printing pages -->
{% if request.endpoint in ['main.etichete', 'main.upload_data', 'main.view_orders', 'main.print_module', 'main.print_lost_labels'] %}
    <link rel="stylesheet" href="{{ url_for('static', filename='css/print_module.css') }}">
{% endif %}

5. Template Cleanup

Before: Each template had 50-100+ lines of embedded CSS
After: Clean templates with 
Removed: ~400 lines of duplicate CSS across templates

6. CSS Features Preserved

All original functionality maintained:

✅ Label Preview Styling

Label layout with precise positioning
Barcode frames (horizontal & vertical)
SVG barcode styling with forced black colors

✅ Table Styling

Print module tables with dark theme support
View orders tables with column width specifications
Hover effects and selection styling

✅ Responsive Design

Mobile-friendly layouts
Flexible container widths
Adaptive label preview sizing

✅ Theme Support

Light/dark mode compatibility
CSS custom properties for theming
Proper color contrast

✅ Print Options UI

QZ Tray integration styling
Printer selection dropdowns
Status badges and indicators

7. Benefits Achieved

Maintainability

✅ Single source of truth for printing module styles
✅ Easy to find and modify styles
✅ No more hunting through multiple templates
✅ Consistent styling across all pages

Performance

✅ CSS only loads when needed (conditional loading)
✅ Reduced template size and complexity
✅ Browser caching of CSS file

Development Experience

✅ Well-organized, commented code
✅ Clear section separators
✅ Logical grouping of related styles
✅ Debug utilities included

Code Quality

✅ Eliminated duplicate CSS
✅ Consistent naming conventions
✅ Proper CSS methodology
✅ Clean template structure

8. File Structure After Changes

/srv/quality_recticel/py_app/app/
├── static/
│   └── css/
│       ├── base.css (existing)
│       ├── print_module.css (NEW - 610 lines)
│       └── other.css files...
└── templates/
    ├── base.html (updated with conditional CSS loading)
    ├── print_module.html (cleaned up)
    ├── print_lost_labels.html (cleaned up)
    ├── view_orders.html (cleaned up)
    ├── upload_orders.html (cleaned up)
    └── main_page_etichete.html (already clean)

9. Testing Results

✅ Flask application running successfully on port 8782
✅ All printing module pages loading without errors
✅ CSS being served correctly (304 cached responses)
✅ Label Module navigation working properly
✅ Print functionality operational
✅ No breaking changes to existing features

10. Future Maintenance

Adding New Styles

Open /srv/quality_recticel/py_app/app/static/css/print_module.css
Find appropriate section or create new one
Add styles with proper comments
Test on all affected pages

Modifying Existing Styles

Use browser dev tools to identify CSS rule
Update in print_module.css instead of templates
Changes apply to all printing pages automatically

Debugging CSS Issues

Check browser dev tools for CSS loading
Look for 404 errors on CSS file
Verify conditional loading logic in base.html
Use debug classes provided in CSS file

11. Code Quality Improvements

Before (per template):

{% block head %}
<style>
/* 50-100 lines of CSS mixed with HTML */
table.view-orders-table.scan-table { ... }
/* More styles... */
</style>
{% endblock %}

After (centralized):

{% block head %}
<!-- Print Module CSS is now loaded via base.html for all printing pages -->
{% endblock %}

CSS File:

/* ==========================================================================
   WELL ORGANIZED SECTIONS WITH CLEAR DOCUMENTATION
   ========================================================================== */

This modularization makes the printing module much more maintainable and follows CSS best practices for large applications.

6.7 KiB Raw Permalink Blame History