remodulation du projet et des classes
This commit is contained in:
@@ -0,0 +1,141 @@
|
||||
{#
|
||||
Jinja Macros for Team Tryouts Application
|
||||
|
||||
This file contains reusable HTML components to reduce code duplication
|
||||
across templates. Import with {% import 'layouts/macros.html' as macros %}
|
||||
#}
|
||||
|
||||
{# Page Header Macro - renders title and breadcrumb #}
|
||||
{% macro page_header(title, breadcrumb) %}
|
||||
{% block title %}{{ title }} - TryoutPro{% endblock %}
|
||||
{% block page_title %}{{ title }}{% endblock %}
|
||||
{% block breadcrumb %}<span class="breadcrumb">{{ breadcrumb }}</span>{% endblock %}
|
||||
{% endmacro %}
|
||||
|
||||
{# Card Header Macro - renders card with optional actions #}
|
||||
{% macro card_header(title, icon_class, actions=None) %}
|
||||
<div class="card-header">
|
||||
<h3><i class="{{ icon_class }}"></i> {{ title }}</h3>
|
||||
{% if actions %}
|
||||
<div class="card-actions">{{ actions }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
||||
{# Stat Card Macro - renders statistics card #}
|
||||
{% macro stat_card(value, label, icon_class, bg_class) %}
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon {{ bg_class }}">
|
||||
<i class="{{ icon_class }}"></i>
|
||||
</div>
|
||||
<div class="stat-info">
|
||||
<h3>{{ value }}</h3>
|
||||
<p>{{ label }}</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
||||
{# Badge Macro - renders status/role badges with appropriate styling #}
|
||||
{% macro badge(text, type='default') %}
|
||||
<span class="badge badge-{{ type }}">{{ text }}</span>
|
||||
{% endmacro %}
|
||||
|
||||
{# User Avatar Macro - renders user avatar with name #}
|
||||
{% macro user_avatar(user, size='sm') %}
|
||||
<div class="user-mini">
|
||||
<div class="avatar-{{ size }}">{{ user.username[:2] | upper }}</div>
|
||||
<span>{{ user.username }}</span>
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
||||
{# Form Field Macro - renders labeled form input #}
|
||||
{% macro form_field(label, type, name, value='', placeholder='', required=false, extra_classes='') %}
|
||||
<div class="form-group">
|
||||
<label for="{{ name }}">{{ label }}</label>
|
||||
<input type="{{ type }}" id="{{ name }}" name="{{ name }}" value="{{ value }}" placeholder="{{ placeholder }}" {% if required %}required{% endif %} class="{{ extra_classes }}">
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
||||
{# Form Row Macro - renders a row of form fields #}
|
||||
{% macro form_row(fields) %}
|
||||
<div class="form-row">
|
||||
{% for field in fields %}
|
||||
<div class="form-group {{ field.col_class | default('col-6') }}">
|
||||
<label for="{{ field.name }}">{{ field.label }}</label>
|
||||
{% if field.type == 'select' %}
|
||||
<select id="{{ field.name }}" name="{{ field.name }}" {% if field.required %}required{% endif %}>
|
||||
{% for option in field.options %}
|
||||
<option value="{{ option.value }}" {% if option.selected %}selected{% endif %}>{{ option.label }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
{% else %}
|
||||
<input type="{{ field.type }}" id="{{ field.name }}" name="{{ field.name }}" value="{{ field.value }}" placeholder="{{ field.placeholder }}" {% if field.required %}required{% endif %}>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
||||
{# Table Macro - renders a table with headers and optional empty state #}
|
||||
{% macro table(headers, rows, empty_message='No records found') %}
|
||||
<div class="table-container">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
{% for header in headers %}
|
||||
<th>{{ header }}</th>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% if rows %}
|
||||
{{ rows }}
|
||||
{% else %}
|
||||
<tr>
|
||||
<td colspan="{{ headers | length }}" class="text-center">
|
||||
<div class="empty-state">
|
||||
<i class="fas fa-info-circle"></i>
|
||||
<h3>{{ empty_message }}</h3>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
||||
{# Modal Macro - renders a modal dialog #}
|
||||
{% macro modal(id, title, content, footer_buttons=None) %}
|
||||
<div id="{{ id }}" class="modal hidden">
|
||||
<div class="modal-backdrop" onclick="hideModal('{{ id }}')"></div>
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3>{{ title }}</h3>
|
||||
<button class="modal-close" onclick="hideModal('{{ id }}')">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
{{ content }}
|
||||
{% if footer_buttons %}
|
||||
<div class="form-actions mt-3">{{ footer_buttons }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
||||
{# Detail Item Macro - renders a key-value pair in detail view #}
|
||||
{% macro detail_item(label, value) %}
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">{{ label }}</span>
|
||||
<span class="detail-value">{{ value }}</span>
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
||||
{# Action Button Macro - renders a button link #}
|
||||
{% macro action_button(url, text, icon, style='outline', size='sm') %}
|
||||
<a href="{{ url }}" class="btn btn-{{ size }} btn-{{ style }}">
|
||||
{% if icon %}<i class="{{ icon }}"></i>{% endif %}
|
||||
{{ text }}
|
||||
</a>
|
||||
{% endmacro %}
|
||||
Reference in New Issue
Block a user