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

aded folde for MD files

Browse Source
This commit is contained in:
Quality System Admin
2025-10-27 20:27:41 +02:00
parent a960285d59
commit d8e6dd1c78
2 changed files with 0 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

201
py_app/CSS_MODULARIZATION_SUMMARY.md
View File

@@ -1,201 +0,0 @@
# 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
```css
/* ==========================================================================
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
```html
<!-- 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 `<!-- Print Module CSS is now loaded via base.html -->`
- **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
1. Open `/srv/quality_recticel/py_app/app/static/css/print_module.css`
2. Find appropriate section or create new one
3. Add styles with proper comments
4. Test on all affected pages
#### Modifying Existing Styles
1. Use browser dev tools to identify CSS rule
2. Update in print_module.css instead of templates
3. Changes apply to all printing pages automatically
#### Debugging CSS Issues
1. Check browser dev tools for CSS loading
2. Look for 404 errors on CSS file
3. Verify conditional loading logic in base.html
4. Use debug classes provided in CSS file
### 11. Code Quality Improvements
#### Before (per template):
```html
{% block head %}
<style>
/* 50-100 lines of CSS mixed with HTML */
table.view-orders-table.scan-table { ... }
/* More styles... */
</style>
{% endblock %}
```
#### After (centralized):
```html
{% block head %}
<!-- Print Module CSS is now loaded via base.html for all printing pages -->
{% endblock %}
```
#### CSS File:
```css
/* ==========================================================================
WELL ORGANIZED SECTIONS WITH CLEAR DOCUMENTATION
========================================================================== */
```
This modularization makes the printing module much more maintainable and follows CSS best practices for large applications.

155
py_app/THEME_SYSTEM_SUMMARY.md
View File

@@ -1,155 +0,0 @@
# Print Module Theme System Implementation
## ✅ **Theme Support Successfully Implemented**
### **CSS Custom Properties System**
I've implemented a comprehensive theme system using CSS custom properties (CSS variables) that automatically adapts all tables and UI elements in the printing module to match the selected theme (light/dark mode).
### **Theme Variables Defined**
```css
:root {
/* Light mode colors (default) */
--print-table-header-bg: #e9ecef;
--print-table-header-text: #000;
--print-table-body-bg: #fff;
--print-table-body-text: #000;
--print-table-border: #ddd;
--print-table-hover: #f8f9fa;
--print-table-selected: #007bff;
--print-card-bg: #fff;
--print-card-border: #ddd;
--print-search-field-bg: #fff;
--print-search-field-text: #000;
--print-search-field-border: #ddd;
}
```
### **Light Mode Theme**
```css
body.light-mode {
--print-table-header-bg: #e9ecef; /* Light gray headers */
--print-table-header-text: #000; /* Black text */
--print-table-body-bg: #fff; /* White background */
--print-table-body-text: #000; /* Black text */
--print-table-border: #ddd; /* Light gray borders */
--print-table-hover: #f8f9fa; /* Very light gray hover */
--print-card-bg: #fff; /* White cards */
}
```
### **Dark Mode Theme**
```css
body.dark-mode {
--print-table-header-bg: #2a3441; /* Dark blue-gray headers */
--print-table-header-text: #ffffff; /* White text */
--print-table-body-bg: #2a3441; /* Dark blue-gray background */
--print-table-body-text: #ffffff; /* White text */
--print-table-border: #495057; /* Medium gray borders */
--print-table-hover: #3a4451; /* Lighter dark gray hover */
--print-card-bg: #2a2a2a; /* Dark gray cards */
}
```
### **Components That Respond to Theme**
#### ✅ **View Orders Table**
- **Headers**: Background and text color change automatically
- **Body cells**: Background, text, and border colors adapt
- **Hover effects**: Appropriate hover colors for each theme
- **Selected rows**: Consistent selection highlighting
#### ✅ **Print Module Table**
- **Headers**: Theme-aware colors and borders
- **Data cells**: Proper contrast in both themes
- **Row interactions**: Hover and selection states
- **Border consistency**: Unified border styling
#### ✅ **Upload Orders Table**
- **Same styling system**: Uses shared CSS variables
- **Consistent appearance**: Matches other tables
- **Theme transitions**: Smooth switching between themes
#### ✅ **Cards and Forms**
- **Background colors**: Adapt to theme
- **Border colors**: Consistent with theme palette
- **Search fields**: Proper contrast and visibility
- **Form elements**: Theme-aware styling
#### ✅ **Label Preview**
- **Preview backgrounds**: Appropriate for each theme
- **Barcode frames**: Maintains visibility in both modes
- **Text contrast**: Ensures readability
### **How Theme Switching Works**
1. **Automatic Detection**: The system detects `body.light-mode` or `body.dark-mode` class
2. **Variable Updates**: CSS custom properties automatically update based on the body class
3. **Instant Application**: All elements using the variables immediately reflect the new theme
4. **No JavaScript Required**: Pure CSS implementation for better performance
### **Benefits Achieved**
#### ✅ **Consistent Design**
- All printing module tables have unified styling
- Colors are coordinated across all components
- Professional appearance in both themes
#### ✅ **Better User Experience**
- **Light Mode**: Clean, bright interface for well-lit environments
- **Dark Mode**: Easy on the eyes for low-light conditions
- **Smooth Transitions**: No jarring color mismatches when switching
#### ✅ **Accessibility**
- **High Contrast**: Proper contrast ratios in both themes
- **Color Consistency**: Related elements use the same color palette
- **Visual Hierarchy**: Headers clearly distinguished from content
#### ✅ **Maintainability**
- **Single Source of Truth**: All theme colors defined in one place
- **Easy Updates**: Change a variable to update all occurrences
- **Scalable**: Easy to add new components or themes
### **Visual Comparison**
#### Light Mode
- **Table Headers**: Light gray background (#e9ecef) with black text
- **Table Bodies**: White background with black text
- **Borders**: Light gray (#ddd) for subtle separation
- **Hover**: Very light gray (#f8f9fa) for subtle feedback
- **Cards**: Clean white backgrounds
#### Dark Mode
- **Table Headers**: Dark blue-gray (#2a3441) with white text
- **Table Bodies**: Dark blue-gray background with white text
- **Borders**: Medium gray (#495057) for proper separation
- **Hover**: Lighter dark gray (#3a4451) for clear feedback
- **Cards**: Dark gray backgrounds for reduced eye strain
### **Pages Affected**
✅ **view_orders.html** - Orders listing with improved 25/75 layout
✅ **print_module.html** - Main printing interface
✅ **print_lost_labels.html** - Lost labels printing
✅ **upload_orders.html** - Order upload interface
✅ **main_page_etichete.html** - Labels main page
### **Technical Implementation**
The theme system works by:
1. **CSS Variables**: Using `var(--variable-name)` throughout the stylesheets
2. **Body Classes**: Theme variables update based on `body.light-mode` / `body.dark-mode`
3. **Automatic Inheritance**: All child elements inherit the appropriate theme
4. **Performance**: No JavaScript overhead, pure CSS solution
### **Testing Confirmed**
- ✅ Theme switching works instantly
- ✅ All tables respond to theme changes
- ✅ No visual inconsistencies
- ✅ Proper contrast in both modes
- ✅ Layout remains stable during theme switches
The printing module now provides a professional, consistent, and accessible user interface that adapts beautifully to both light and dark themes!