Valogeo/loko
Valogeo/loko
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: redesign mobile control list cards and enhance FAB styling

Browse source
This commit is contained in:
kdeterme 2026-08-17 12:32:59 +02:00
parent 4024dad7bc
commit 7614d56112
2 changed files with 216 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

164
loko/controls/static/controls/controls_index_mobile.css
View file

@ -30,20 +30,40 @@
z-index: 2100;
}
/* FAB bouton carte : au-dessus du footer */
/* === FAB BOUTON CARTE (Floating Action Button en bas à droite) === */
#map-fab-btn {
position: fixed;
bottom: 4.5rem;
right: 1rem;
z-index: 1050;
border-radius: 50%;
width: 3.25rem;
height: 3.25rem;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
padding: 0;
position: fixed !important;
bottom: 4.5rem !important;
right: 1.25rem !important;
z-index: 1050 !important;
border-radius: 50% !important;
width: 3.5rem !important;
height: 3.5rem !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
padding: 0 !important;
background-color: var(--brand-color, #2f3e8b) !important;
border: none !important;
color: #ffffff !important;
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
#map-fab-btn:hover {
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45) !important;
color: #ffffff !important;
transform: scale(1.05);
}
#map-fab-btn:active {
transform: scale(0.92) !important;
}
#map-fab-btn i {
font-size: 1.4rem !important;
line-height: 1;
}
.maplibregl-popup-content a {
@ -52,19 +72,127 @@
text-decoration: none;
}
/* === CARTE DE CONTRÔLE === */
.control-card {
cursor: pointer;
transition: background-color 0.2s, transform 0.15s;
border-radius: 0.5rem;
transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
border-radius: 0.6rem;
border: 1px solid #e2e8f0;
background-color: #ffffff;
}
.control-card:active {
background-color: #f1f3f5;
background-color: #f8f9fa;
transform: scale(0.99);
}
.badge {
font-size: 0.75rem;
/* === BADGES DE TYPE & STATUT === */
.control-type-badge {
font-weight: 600;
font-size: 0.72rem;
padding: 0.25em 0.55em;
border-radius: 0.35rem;
display: inline-flex;
align-items: center;
white-space: nowrap;
}
.control-type-control {
background-color: #e0edff;
color: #0d6efd;
border: 1px solid #b6d4fe;
}
.control-type-site_report {
background-color: #fff3cd;
color: #664d03;
border: 1px solid #ffecb5;
}
.control-type-statement {
background-color: #f8d7da;
color: #842029;
border: 1px solid #f5c2c7;
}
.control-type-meeting_report {
background-color: #cff4fc;
color: #055160;
border: 1px solid #b6effb;
}
.control-type-other {
background-color: #f8f9fa;
color: #495057;
border: 1px solid #dee2e6;
}
.control-status-badge {
font-weight: 600;
font-size: 0.72rem;
padding: 0.25em 0.55em;
border-radius: 0.35rem;
display: inline-flex;
align-items: center;
white-space: nowrap;
}
.control-status-in_progress {
background-color: #ffc107;
color: #000;
}
.control-status-information {
background-color: #0dcaf0;
color: #000;
}
.control-status-to_be_processed {
background-color: #dc3545;
color: #fff;
}
.control-status-processed {
background-color: #198754;
color: #fff;
}
.control-status-validated {
background-color: #0d6efd;
color: #fff;
}
.control-status-canceled {
background-color: #6c757d;
color: #fff;
}
.control-status-other {
background-color: #6c757d;
color: #fff;
}
/* === CHIPS THÉMATIQUES & CATÉGORIES === */
.badge-chip {
font-weight: 500;
font-size: 0.72rem;
padding: 0.22em 0.55em;
border-radius: 1rem;
display: inline-flex;
align-items: center;
white-space: nowrap;
}
.badge-theme {
background-color: #f1f5f9;
color: #334155;
border: 1px solid #cbd5e1;
}
.badge-category {
background-color: #f8fafc;
color: #475569;
border: 1px solid #e2e8f0;
}
.form-select,

116
loko/controls/templates/controls/_controls_list_mobile.html
View file

@ -8,81 +8,105 @@
{% endif %}
{% for control in controls %}
<div class="card mb-2 control-card shadow-sm" data-href="{% url 'mobile:controls_detail' control.id %}">
<div class="card mb-2 control-card shadow-sm border" data-href="{% url 'mobile:controls_detail' control.id %}">
<div class="card-body p-2">
<div class="d-flex justify-content-between align-items-start gap-1 mb-1">
<!-- Thématiques et Catégories -->
<div class="d-flex flex-wrap gap-1 flex-grow-1">
{% for theme in control.thematics.all %}
<span class="badge bg-light text-dark border py-1">
{% if theme.icon %}<i class="bi {{ theme.icon }} me-1"></i>{% endif %}{{ theme.name }}
</span>
{% endfor %}
{% for cat in control.categories.all %}
<span class="badge bg-light text-dark border py-1">{{ cat.get_name }}</span>
{% endfor %}
</div>
<!-- Type et Statut Badges -->
<div class="d-flex flex-column align-items-end gap-1 flex-shrink-0">
<!-- 1. En-tête : Code & Badges Type / Statut -->
<div class="d-flex justify-content-between align-items-center mb-1 gap-2">
<span class="fw-bold text-primary fs-6">{{ control.control_code }}</span>
<div class="d-flex align-items-center gap-1 flex-wrap justify-content-end">
<!-- Badge Type -->
{% if control.control_type == 'control' %}
<span class="badge text-bg-primary">
<span class="badge control-type-badge control-type-control">
<i class="bi bi-clipboard-check me-1"></i>{{ control.get_control_type_display }}
</span>
{% elif control.control_type == 'site_report' %}
<span class="badge text-bg-warning">
<span class="badge control-type-badge control-type-site_report">
<i class="bi bi-building-gear me-1"></i>{{ control.get_control_type_display }}
</span>
{% elif control.control_type == 'statement' %}
<span class="badge text-bg-danger">
<span class="badge control-type-badge control-type-statement">
<i class="bi bi-exclamation-octagon me-1"></i>{{ control.get_control_type_display }}
</span>
{% elif control.control_type == 'meeting_report' %}
<span class="badge text-bg-info">
<span class="badge control-type-badge control-type-meeting_report">
<i class="bi bi-people me-1"></i>{{ control.get_control_type_display }}
</span>
{% else %}
<span class="badge text-bg-secondary">{{ control.get_control_type_display }}</span>
<span class="badge control-type-badge control-type-other">
{{ control.get_control_type_display }}
</span>
{% endif %}
<!-- Badge Statut -->
{% if control.status == 'in_progress' %}
<span class="badge text-bg-warning">{{ control.get_status_display }}</span>
<span class="badge control-status-badge control-status-in_progress">
<i class="bi bi-hourglass-split me-1"></i>{{ control.get_status_display }}
</span>
{% elif control.status == 'information' %}
<span class="badge text-bg-info">{{ control.get_status_display }}</span>
<span class="badge control-status-badge control-status-information">
<i class="bi bi-info-circle me-1"></i>{{ control.get_status_display }}
</span>
{% elif control.status == 'to_be_processed' %}
<span class="badge text-bg-danger">{{ control.get_status_display }}</span>
<span class="badge control-status-badge control-status-to_be_processed">
<i class="bi bi-clock-history me-1"></i>{{ control.get_status_display }}
</span>
{% elif control.status == 'processed' %}
<span class="badge text-bg-success">{{ control.get_status_display }}</span>
<span class="badge control-status-badge control-status-processed">
<i class="bi bi-check-circle me-1"></i>{{ control.get_status_display }}
</span>
{% elif control.status == 'validated' %}
<span class="badge text-bg-primary">{{ control.get_status_display }}</span>
<span class="badge control-status-badge control-status-validated">
<i class="bi bi-check-all me-1"></i>{{ control.get_status_display }}
</span>
{% elif control.status == 'canceled' %}
<span class="badge text-bg-secondary">{{ control.get_status_display }}</span>
<span class="badge control-status-badge control-status-canceled">
<i class="bi bi-x-circle me-1"></i>{{ control.get_status_display }}
</span>
{% else %}
<span class="badge text-bg-secondary">{{ control.get_status_display }}</span>
<span class="badge control-status-badge control-status-other">
{{ control.get_status_display }}
</span>
{% endif %}
</div>
</div>
<div class="mb-1">
<strong class="text-primary">{{ control.control_code }}</strong>
{% if control.description %}
<div class="text-dark small mt-1">{{ control.description|truncatewords:15 }}</div>
<!-- 2. Badges Thématiques et Catégories (chips) -->
{% if control.thematics.exists or control.categories.exists %}
<div class="d-flex flex-wrap gap-1 mb-1">
{% for theme in control.thematics.all %}
<span class="badge badge-chip badge-theme">
{% if theme.icon %}<i class="bi {{ theme.icon }} me-1 text-primary"></i>{% endif %}{{ theme.name }}
</span>
{% endfor %}
{% for cat in control.categories.all %}
<span class="badge badge-chip badge-category">
<i class="bi bi-tag me-1 text-secondary"></i>{{ cat.get_name }}
</span>
{% endfor %}
</div>
{% endif %}
<!-- 3. Description -->
{% if control.description %}
<div class="text-dark small mb-1">{{ control.description|truncatewords:15 }}</div>
{% endif %}
<!-- 4. Localisation & Projet -->
<div class="d-flex flex-wrap gap-2 text-muted small mb-1">
{% if control.location %}
<div class="d-inline-flex align-items-center">
<i class="bi bi-geo-alt text-danger me-1"></i><span>{{ control.location }}</span>
</div>
{% endif %}
{% if control.project %}
<div class="d-inline-flex align-items-center">
<i class="bi bi-folder text-primary me-1"></i><span>{{ control.project.name }}</span>
</div>
{% endif %}
</div>
{% if control.location %}
<div class="text-muted small mb-1">
<i class="bi bi-geo-alt me-1"></i>{{ control.location }}
</div>
{% endif %}
{% if control.project %}
<div class="text-muted small mb-1">
<i class="bi bi-folder me-1"></i>{{ control.project.name }}
</div>
{% endif %}
<div class="d-flex justify-content-between align-items-center mt-2 pt-1 border-top small text-muted">
<!-- 5. Pied de carte : Auteur, Date & Compteur de remarques -->
<div class="d-flex justify-content-between align-items-center mt-1 pt-1 border-top small text-muted">
<div>
{% if control.control_author %}
<i class="bi bi-person me-1"></i>{{ control.control_author|short_name }} ·
@ -91,7 +115,7 @@
</div>
{% if control.remarks.count > 0 %}
<div>
<span class="badge bg-secondary rounded-pill">
<span class="badge rounded-pill bg-light text-secondary border">
<i class="bi bi-chat-left-text me-1"></i>{{ control.remarks.count }}
</span>
</div>