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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user