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

@@ -1958,6 +1958,18 @@ def print_module():
flash(f"Error loading orders: {e}", 'error')
return render_template('print_module.html', orders=[])
@bp.route('/print_lost_labels')
def print_lost_labels():
"""Print lost labels module"""
try:
# Get orders data for lost labels (could be different logic than print_module)
orders_data = get_unprinted_orders_data(limit=100)
return render_template('print_lost_labels.html', orders=orders_data)
except Exception as e:
print(f"Error loading print lost labels data: {e}")
flash(f"Error loading orders: {e}", 'error')
return render_template('print_lost_labels.html', orders=[])
@bp.route('/view_orders')
def view_orders():
"""View all orders in a table format"""
@@ -3469,6 +3481,97 @@ def delete_location():
return jsonify({'success': False, 'error': str(e)})
# Daily Mirror Route Redirects for Backward Compatibility
@bp.route('/daily_mirror_main')
def daily_mirror_main_route():
"""Redirect to new Daily Mirror main route"""
return redirect(url_for('daily_mirror.daily_mirror_main_route'))
@bp.route('/daily_mirror')
def daily_mirror_route():
"""Redirect to new Daily Mirror route"""
return redirect(url_for('daily_mirror.daily_mirror_route'))
@bp.route('/daily_mirror_history')
def daily_mirror_history_route():
"""Redirect to new Daily Mirror history route"""
return redirect(url_for('daily_mirror.daily_mirror_history_route'))
@bp.route('/daily_mirror_build_database', methods=['GET', 'POST'])
def daily_mirror_build_database():
"""Redirect to new Daily Mirror build database route"""
if request.method == 'POST':
# For POST requests, we need to forward the data
return redirect(url_for('daily_mirror.daily_mirror_build_database'), code=307)
return redirect(url_for('daily_mirror.daily_mirror_build_database'))
@bp.route('/api/daily_mirror_data', methods=['GET'])
def api_daily_mirror_data():
"""Redirect to new Daily Mirror API data route"""
return redirect(url_for('daily_mirror.api_daily_mirror_data') + '?' + request.query_string.decode())
@bp.route('/api/daily_mirror_history_data', methods=['GET'])
def api_daily_mirror_history_data():
"""Redirect to new Daily Mirror API history data route"""
return redirect(url_for('daily_mirror.api_daily_mirror_history_data') + '?' + request.query_string.decode())
# Help/Documentation Routes
@bp.route('/help')
@bp.route('/help/<page>')
def help(page='index'):
"""Display help documentation from Markdown files"""
import markdown
import os
# Map page names to markdown files
doc_files = {
'index': 'index.md',
'dashboard': 'dashboard.md',
'print_module': 'print_module.md',
'upload_data': 'upload_data.md',
'view_orders': 'view_orders.md',
'print_lost_labels': 'print_lost_labels.md'
}
# Get the markdown file path
if page not in doc_files:
return render_template('docs/help_viewer.html',
error=f"Documentația pentru '{page}' nu a fost găsită.")
doc_path = os.path.join(current_app.static_folder, 'docs', doc_files[page])
try:
# Read and convert markdown to HTML
with open(doc_path, 'r', encoding='utf-8') as f:
content = f.read()
# Convert markdown to HTML with extensions
html_content = markdown.markdown(content, extensions=[
'markdown.extensions.tables',
'markdown.extensions.fenced_code',
'markdown.extensions.toc'
])
# Fix image paths to work with Flask static files
import re
from flask import url_for
html_content = re.sub(
r'src="images/([^"]+)"',
lambda m: f'src="{url_for("static", filename=f"docs/images/{m.group(1)}")}"',
html_content
)
return render_template('docs/help_viewer.html',
content=html_content,
page=page)
except FileNotFoundError:
return render_template('docs/help_viewer.html',
error=f"Fișierul de documentație '{doc_files[page]}' nu a fost găsit.")
except Exception as e:
return render_template('docs/help_viewer.html',
error=f"Eroare la încărcarea documentației: {str(e)}")
# NOTE for frontend/extension developers:
# To print labels, call the Chrome extension and pass the PDF URL:
# /generate_labels_pdf/<order_id>