# Base Templates and Navigation Plan for Django Manufacturing App ## Overview This document outlines the base template structure and navigation design for the manufacturing application, ensuring a consistent and user-friendly interface across all modules. ## Base Template Structure ### 1. Main Base Template (templates/base.html) ```html {% block title %}Manufacturing App{% endblock %} {% load bootstrap5 %} {% bootstrap_css %} {% bootstrap_javascript %} {% block extra_css %}{% endblock %} {% include 'includes/navbar.html' %}
{% include 'includes/sidebar.html' %}
{% include 'includes/breadcrumb.html' %} {% include 'includes/messages.html' %} {% block content %} {% endblock %}
{% include 'includes/footer.html' %} {% block extra_js %}{% endblock %} ``` ### 2. Navigation Bar (templates/includes/navbar.html) ```html ``` ### 3. Sidebar Navigation (templates/includes/sidebar.html) ```html ``` ### 4. Breadcrumb Navigation (templates/includes/breadcrumb.html) ```html ``` ### 5. Messages Template (templates/includes/messages.html) ```html {% if messages %}
{% for message in messages %} {% endfor %}
{% endif %} ``` ### 6. Footer Template (templates/includes/footer.html) ```html ``` ## Module-specific Base Templates ### 7. Module Dashboard Template (templates/module_base.html) ```html {% extends 'base.html' %} {% block title %}{{ module_title }} - Manufacturing App{% endblock %} {% block content %}

{{ module_title }}

{% block module_actions %} {% endblock %}
{% block module_content %} {% endblock %} {% endblock %} ``` ## Common UI Components ### 8. Table Component (templates/components/table.html) ```html
{% for header in headers %} {% endfor %} {% for row in rows %} {% for cell in row %} {% endfor %} {% empty %} {% endfor %}
{{ header }}
{{ cell }}
No data available
``` ### 9. Form Component (templates/components/form.html) ```html
{% csrf_token %} {% if form.non_field_errors %}
{{ form.non_field_errors }}
{% endif %} {% for field in form %}
{{ field.label_tag }} {{ field }} {% if field.help_text %}
{{ field.help_text }}
{% endif %} {% if field.errors %}
{{ field.errors }}
{% endif %}
{% endfor %}
Cancel
``` ### 10. Card Component (templates/components/card.html) ```html
{% if card_header %}
{{ card_header }}
{% endif %}
{% if card_title %}
{{ card_title }}
{% endif %} {% if card_subtitle %}
{{ card_subtitle }}
{% endif %} {% block card_content %} {{ card_content }} {% endblock %}
{% if card_footer %}
{{ card_footer }}
{% endif %}
``` ## Print-friendly Templates ### 11. Printable Dashboard Template (templates/dashboard/print.html) ```html {% extends 'base_print.html' %} {% block title %}Dashboard - Manufacturing App{% endblock %} {% block content %}

Manufacturing Dashboard

Printed on: {% now "d M Y H:i" %}

{% for widget in widgets %}

{{ widget.title }}

{{ widget.content|safe }}
{% endfor %}

Manufacturing App - Confidential

{% endblock %} ``` ### 12. Print Base Template (templates/base_print.html) ```html {% block title %}Manufacturing App{% endblock %} {% block content %} {% endblock %} ``` ## Responsive Design Considerations ### 13. Mobile Navigation ```html ``` ## Accessibility Features ### 14. ARIA Labels and Semantic HTML ```html
``` ## Custom CSS Structure ### 15. Custom CSS File (static/css/custom.css) ```css /* Custom styles for the manufacturing app */ /* Sidebar styling */ .sidebar { min-height: calc(100vh - 56px); } /* Dashboard widgets */ .dashboard-widget { min-height: 200px; } /* Print styles */ @media print { .no-print { display: none !important; } .sidebar { display: none; } main { width: 100%; margin: 0; padding: 0; } } /* Responsive adjustments */ @media (max-width: 768px) { .sidebar { min-height: auto; } } ``` This base template structure provides a consistent, responsive, and accessible UI framework for the manufacturing application. It includes all necessary components for navigation, content display, and user interaction while maintaining a professional appearance.