168 lines
8.1 KiB
HTML
168 lines
8.1 KiB
HTML
|
{% extends "base.html" %}
|
||
|
|
{% load static %}
|
||
|
|
|
||
|
|
{% block title %}Projets — Portfolio Alexandre{% endblock %}
|
||
|
|
|
||
|
|
{% block content %}
|
||
|
|
|
||
|
|
<!-- ─── En-tête page projets ─────────────────────────────────────────────── -->
|
||
|
|
<section class="page-header">
|
||
|
|
<div class="page-header-container">
|
||
|
|
<span class="section-tag">Réalisations</span>
|
||
|
|
<h1 class="page-title">Mes Projets</h1>
|
||
|
|
<p class="page-sub">{{ total_count }} projet{{ total_count|pluralize }} — filtrez par technologie ou catégorie</p>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- ─── Filtres ──────────────────────────────────────────────────────────── -->
|
||
|
|
<section class="filters-section">
|
||
|
|
<div class="filters-container">
|
||
|
|
<form method="GET" action="{% url 'projects:list' %}" class="filters-form" id="filtersForm">
|
||
|
|
|
||
|
|
<!-- Filtre catégorie -->
|
||
|
|
<div class="filter-group">
|
||
|
|
<label class="filter-label">Catégorie</label>
|
||
|
|
<div class="filter-pills" id="categoryPills">
|
||
|
|
<button type="button"
|
||
|
|
class="filter-pill {% if not selected_category %}active{% endif %}"
|
||
|
|
data-filter="category"
|
||
|
|
data-value="">
|
||
|
|
Toutes
|
||
|
|
</button>
|
||
|
|
{% for cat in categories %}
|
||
|
|
<button type="button"
|
||
|
|
class="filter-pill {% if selected_category == cat %}active{% endif %}{% if forloop.counter > 5 %} pill-hidden{% endif %}"
|
||
|
|
data-filter="category"
|
||
|
|
data-value="{{ cat }}"
|
||
|
|
{% if forloop.counter > 5 %}data-extra="true"{% endif %}>
|
||
|
|
{{ cat }}
|
||
|
|
</button>
|
||
|
|
{% endfor %}
|
||
|
|
{% if categories|length > 5 %}
|
||
|
|
<button type="button" class="filter-pill pill-more" data-target="categoryPills" data-total="{{ categories|length|add:'-5' }}">
|
||
|
|
+{{ categories|length|add:"-5" }} voir plus
|
||
|
|
</button>
|
||
|
|
{% endif %}
|
||
|
|
</div>
|
||
|
|
<input type="hidden" name="category" id="categoryInput" value="{{ selected_category }}">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Filtre technologie -->
|
||
|
|
<div class="filter-group">
|
||
|
|
<label class="filter-label">Technologie</label>
|
||
|
|
<div class="filter-pills" id="techPills">
|
||
|
|
<button type="button"
|
||
|
|
class="filter-pill {% if not selected_tech %}active{% endif %}"
|
||
|
|
data-filter="tech"
|
||
|
|
data-value="">
|
||
|
|
Toutes
|
||
|
|
</button>
|
||
|
|
{% for tech in technologies %}
|
||
|
|
<button type="button"
|
||
|
|
class="filter-pill {% if selected_tech == tech %}active{% endif %}{% if forloop.counter > 5 %} pill-hidden{% endif %}"
|
||
|
|
data-filter="tech"
|
||
|
|
data-value="{{ tech }}"
|
||
|
|
{% if forloop.counter > 5 %}data-extra="true"{% endif %}>
|
||
|
|
{{ tech }}
|
||
|
|
</button>
|
||
|
|
{% endfor %}
|
||
|
|
{% if technologies|length > 5 %}
|
||
|
|
<button type="button" class="filter-pill pill-more" data-target="techPills" data-total="{{ technologies|length|add:'-5' }}">
|
||
|
|
+{{ technologies|length|add:"-5" }} voir plus
|
||
|
|
</button>
|
||
|
|
{% endif %}
|
||
|
|
</div>
|
||
|
|
<input type="hidden" name="tech" id="techInput" value="{{ selected_tech }}">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{% if selected_category or selected_tech %}
|
||
|
|
<a href="{% url 'projects:list' %}" class="btn btn-ghost btn-sm">
|
||
|
|
✕ Réinitialiser les filtres
|
||
|
|
</a>
|
||
|
|
{% endif %}
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- ─── Grille projets ───────────────────────────────────────────────────── -->
|
||
|
|
<section class="section">
|
||
|
|
<div class="section-container">
|
||
|
|
|
||
|
|
{% if selected_category or selected_tech %}
|
||
|
|
<div class="filter-result-info">
|
||
|
|
<span>{{ total_count }} résultat{{ total_count|pluralize }}</span>
|
||
|
|
{% if selected_category %}<span class="filter-tag-active">{{ selected_category }}</span>{% endif %}
|
||
|
|
{% if selected_tech %}<span class="filter-tag-active">{{ selected_tech }}</span>{% endif %}
|
||
|
|
</div>
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
<div class="projects-grid projects-grid-full" id="projectsGrid">
|
||
|
|
{% for project in projects %}
|
||
|
|
<div class="project-card">
|
||
|
|
<div class="card-image-wrapper">
|
||
|
|
{% if project.images %}
|
||
|
|
<img src="{{ project.images.0 }}" alt="{{ project.title }}" class="card-image" onerror="this.parentElement.classList.add('no-image')">
|
||
|
|
{% else %}
|
||
|
|
<div class="card-image-placeholder">
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg>
|
||
|
|
</div>
|
||
|
|
{% endif %}
|
||
|
|
<div class="card-category-badge">{{ project.category }}</div>
|
||
|
|
</div>
|
||
|
|
<div class="card-body">
|
||
|
|
<h3 class="card-title">{{ project.title }}</h3>
|
||
|
|
<p class="card-desc">{{ project.short_description }}</p>
|
||
|
|
<div class="card-techs">
|
||
|
|
{% for tech in project.technologies|slice:":5" %}
|
||
|
|
<span class="tech-tag">{{ tech }}</span>
|
||
|
|
{% endfor %}
|
||
|
|
{% if project.technologies|length > 5 %}
|
||
|
|
<span class="tech-tag tech-tag-more">+{{ project.technologies|length|add:"-5" }}</span>
|
||
|
|
{% endif %}
|
||
|
|
</div>
|
||
|
|
<a href="{% url 'projects:detail' project.slug %}" class="card-link">
|
||
|
|
Voir le projet
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{% empty %}
|
||
|
|
<div class="empty-state-container">
|
||
|
|
<div class="empty-icon">🔍</div>
|
||
|
|
<h3>Aucun projet trouvé</h3>
|
||
|
|
<p>Essayez de modifier vos filtres ou <a href="{% url 'projects:list' %}">réinitialisez</a>.</p>
|
||
|
|
</div>
|
||
|
|
{% endfor %}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
{% endblock %}
|
||
|
|
|
||
|
|
{% block extra_js %}
|
||
|
|
<script>
|
||
|
|
document.querySelectorAll('.pill-more').forEach(btn => {
|
||
|
|
const container = document.getElementById(btn.dataset.target);
|
||
|
|
// Sélectionne uniquement les pills "extra" (au-delà des 5 premières)
|
||
|
|
const extraPills = container.querySelectorAll('.pill-hidden[data-filter]');
|
||
|
|
const total = parseInt(btn.dataset.total || extraPills.length);
|
||
|
|
|
||
|
|
btn.addEventListener('click', () => {
|
||
|
|
const isExpanded = btn.dataset.expanded === 'true';
|
||
|
|
|
||
|
|
if (!isExpanded) {
|
||
|
|
container.querySelectorAll('.pill-hidden[data-filter]').forEach(p => p.classList.remove('pill-hidden'));
|
||
|
|
btn.textContent = 'voir moins ↑';
|
||
|
|
btn.classList.add('pill-less');
|
||
|
|
btn.dataset.expanded = 'true';
|
||
|
|
} else {
|
||
|
|
container.querySelectorAll('.filter-pill[data-extra="true"]').forEach(p => p.classList.add('pill-hidden'));
|
||
|
|
btn.textContent = '+' + total + ' voir plus';
|
||
|
|
btn.classList.remove('pill-less');
|
||
|
|
btn.dataset.expanded = 'false';
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
{% endblock %}
|