Major UI/UX improvements and help system implementation

 New Features:
- Implemented comprehensive help/documentation system with Markdown support
- Added floating help buttons throughout the application
- Created modular CSS architecture for better maintainability
- Added theme-aware help pages (light/dark mode support)

🎨 UI/UX Improvements:
- Implemented 25%/75% card layout consistency across printing module pages
- Fixed barcode display issues (removed black rectangles, proper barcode patterns)
- Enhanced print method selection with horizontal layout (space-saving)
- Added floating back button in help pages
- Improved form controls styling (radio buttons, dropdowns)

🔧 Technical Enhancements:
- Modularized CSS: Created print_module.css with 779 lines of specialized styles
- Enhanced base.css with floating button components and dark mode support
- Updated routes.py with help system endpoints and Markdown processing
- Fixed JsBarcode integration with proper CDN fallback
- Removed conflicting inline styles from templates

📚 Documentation:
- Created dashboard.md with comprehensive user guide
- Added help viewer template with theme synchronization
- Set up documentation image system with proper Flask static serving
- Implemented docs/images/ folder structure

🐛 Bug Fixes:
- Fixed barcode positioning issues (horizontal/vertical alignment)
- Resolved CSS conflicts between inline styles and modular CSS
- Fixed radio button oval display issues
- Removed borders from barcode frames while preserving label info borders
- Fixed theme synchronization between main app and help pages

📱 Responsive Design:
- Applied consistent 25%/75% layout across print_module, print_lost_labels, upload_data, view_orders
- Added responsive breakpoints for tablet (30%/70%) and mobile (stacked) layouts
- Improved mobile-friendly form layouts and button sizing

The application now features a professional, consistent UI with comprehensive help system and improved printing module functionality.
This commit is contained in:
Quality System Admin
2025-11-03 18:48:56 +02:00
parent b56cccce3f
commit 7fd4b7449d
19 changed files with 1938 additions and 293 deletions

View File

@@ -12,6 +12,10 @@
<link rel="stylesheet" href="{{ url_for('static', filename='css/base.css') }}">
<!-- Legacy CSS for backward compatibility (temporarily) -->
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
<!-- 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 %}
<!-- Page-specific CSS -->
{% block extra_css %}{% endblock %}
{% block head %}{% endblock %}
@@ -39,18 +43,18 @@
{% endif %}
</div>
<div class="right-header">
<button id="theme-toggle" class="theme-toggle">Change to dark theme</button>
{% if request.endpoint in ['main.upload_data', 'main.upload_orders', 'main.print_module', 'main.label_templates', 'main.create_template', 'main.print_lost_labels', 'main.view_orders'] %}
<a href="{{ url_for('main.etichete') }}" class="btn go-to-main-etichete-btn">Main Page Etichete</a>
{% endif %}
{% if request.endpoint in ['main.quality', 'main.fg_quality'] %}
<a href="{{ url_for('main.reports') }}" class="btn go-to-main-reports-btn">Main Page Reports</a>
{% endif %}
<a href="{{ url_for('main.dashboard') }}" class="btn go-to-dashboard-btn">Go to Dashboard</a>
{% if 'user' in session %}
<span class="user-info">You are logged in as {{ session['user'] }}</span>
<a href="{{ url_for('main.logout') }}" class="logout-button">Logout</a>
{% endif %}
<button id="theme-toggle" class="theme-toggle">Change to dark theme</button>
{% if request.endpoint.startswith('daily_mirror') %}
<a href="{{ url_for('daily_mirror.daily_mirror_main_route') }}" class="btn btn-info btn-sm ms-2"> <i class="fas fa-home"></i> Daily Mirror Main</a>
{% endif %}
{% if request.endpoint in ['main.etichete', 'main.upload_data', 'main.view_orders', 'main.print_module', 'main.print_lost_labels'] %}
<a href="{{ url_for('main.etichete') }}" class="btn btn-success btn-sm ms-2"> <i class="fas fa-tags"></i> Labels Module</a>
{% endif %}
<a href="{{ url_for('main.dashboard') }}" class="btn go-to-dashboard-btn ms-2">Go to Dashboard</a>
{% if 'user' in session %}
<span class="user-info ms-2">You are logged in as {{ session['user'] }}</span>
<a href="{{ url_for('main.logout') }}" class="logout-button ms-2">Logout</a>
{% endif %}
</div>
</div>
</header>