bouzoure/pop-camarades
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

People search: use responsive bs cols instead of a table

Browse source
This commit is contained in:
William Bouzourène 2025-06-27 11:44:16 +02:00
parent d523729298
commit 898b9bbb63
Signed by: bouzoure
SSH key fingerprint: SHA256:19MbXpLua4rUtk8tunMesD8KUKb91LXLHg8E/qTooww
2 changed files with 79 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

4
frontend/index.css
View file

@ -53,3 +53,7 @@ a {
#licenses p { #licenses p {
margin: 0; margin: 0;
} }
.fs-7 {
font-size: .75rem !important;
}

90
views/people.html
View file

@ -1,7 +1,7 @@
{% extends "layouts/main.html" %} {% extends "layouts/main.html" %}
{% block main %} {% block main %}
<div class="container my-4"> <div class="container-fluid my-4 px-4">
<div class="mb-4"> <div class="mb-4">
<nav> <nav>
<ol class="breadcrumb"> <ol class="breadcrumb">
@ -243,19 +243,26 @@
</form> </form>
</div> </div>
<div class="table-responsive"> <div>
<table class="table"> <!--
<thead> <div class="row">
<tr> <div class="col">Nom</div>
<th class="w-25">Nom</th> <div class="col">Adresse</div>
<th class="w-50 d-none d-sm-table-cell">Adresse</th> <div class="col">Lieu</div>
<th class="w-25">Section</th> <div class="col">Section</div>
</tr> <div class="col">Création</div>
</thead> <div class="col">Modification</div>
<tbody> </div>
-->
{% for Person in People %} {% for Person in People %}
<tr> <div class="card card-body my-2 py-2 bg-body-tertiary">
<td> <div class="row">
<div class="col-xxl col-lg-4 col-md-6 order-1 order-md-1 order-lg-1 order-xxl-1">
<div class="text-bold fs-7 mt-xxl-0 mt-2">
Nom
</div>
<div>
{% if Person.IsMember %} {% if Person.IsMember %}
<a href="/members/{{ Person.ID }}"> <a href="/members/{{ Person.ID }}">
{{ Person.LastName }} {{ Person.FirstName }} {{ Person.LastName }} {{ Person.FirstName }}
@ -265,24 +272,51 @@
{{ Person.LastName }} {{ Person.FirstName }} {{ Person.LastName }} {{ Person.FirstName }}
</a> </a>
{% endif %} {% endif %}
</td> </div>
<td class="d-none d-sm-table-cell"> </div>
<div class="col-xxl col-lg-4 col-md-6 order-2 order-md-3 order-lg-2 order-xxl-2">
<div class="text-bold fs-7 mt-xxl-0 mt-2">
Adresse
</div>
<div>
{{ Person.Address1 }} {{ Person.Address1 }}
{% if Person.Address1 and (Person.PostalCode or Person.City) %} </div>
&ndash; </div>
{% endif %} <div class="col-xxl col-lg-4 col-md-6 order-3 order-md-5 order-lg-5 order-xxl-3">
{{ Person.PostalCode }} <div class="text-bold fs-7 mt-xxl-0 mt-2">
{{ Person.City }} Lieu
</td> </div>
<td> <div>
{% if Person.SectionID %} {{ Person.PostalCode }} {{ Person.City }}
</div>
</div>
<div class="col-xxl col-lg-4 col-md-6 order-4 order-md-2 order-lg-4 order-xxl-4">
<div class="text-bold fs-7 mt-xxl-0 mt-2">
Section
</div>
<div>
{{ Person.Section.Name }} {{ Person.Section.Name }}
{% endif %} </div>
</td> </div>
</tr> <div class="col-xxl col-lg-4 col-md-6 order-5 order-md-3 order-lg-4 order-xxl-5" data-key="created_at" data-value="{{ Person.CreatedAt|date:"2006-01-02 15:04" }}">
<div class="text-bold fs-7 mt-xxl-0 mt-2">
Création
</div>
<div>
{{ Person.CreatedAt|date:"02.01.2006 - 15:04" }}
</div>
</div>
<div class="col-xxl col-lg-4 col-md-6 order-last order-md-last order-lg-last order-xxl-last" data-key="created_at" data-value="{{ Person.UpdatedAt|date:"2006-01-02 15:04" }}">
<div class="text-bold fs-7 mt-xxl-0 mt-2">
Mise à jour
</div>
<div>
{{ Person.UpdatedAt|date:"02.01.2006 - 15:04" }}
</div>
</div>
</div>
</div>
{% endfor %} {% endfor %}
</tbody>
</table>
</div> </div>
<nav class="mt-3 mb-5"> <nav class="mt-3 mb-5">