Files
pointeuse-optimisator/app/templates/_ligne.html
Antoine 7423b68ac9 Rend l'interface utilisable sur téléphone
Le nav et l'en-tête de semaine passent sur plusieurs lignes sous 700px,
le tableau hebdo devient une liste de cartes empilées par jour (au lieu
d'un scroll horizontal forcé), avec des cibles tactiles plus grandes.
Corrige au passage le popup calendrier qui débordait de l'écran sur mobile.
2026-08-20 17:26:59 +02:00

109 lines
4.3 KiB
HTML

{% set matin_cg = 'matin' in j.conge or 'jour' in j.conge %}
{% set aprem_cg = 'aprem' in j.conge or 'jour' in j.conge %}
{% set matin_warn = not matin_cg and j.du_min > 0 and (
(j.matin_entree and j.matin_entree > plages.matin_debut) or
(j.matin_sortie and j.matin_sortie < plages.matin_fin)
) %}
{% set aprem_warn = not aprem_cg and j.du_min > 0 and (
(j.aprem_entree and j.aprem_entree > plages.aprem_debut) or
(j.aprem_sortie and j.aprem_sortie < plages.aprem_fin)
) %}
<tr id="row-{{ j.date }}">
<td class="col-jour">
<span class="jour-nom">{{ nom }}</span>
<span class="jour-date">{{ j.date[8:] }}/{{ j.date[5:7] }}</span>
</td>
<td class="c-matin">
<div id="cg-matin-{{ j.date }}" data-label="Matin" class="td-fill{% if matin_cg %} cg{% elif matin_warn %} warn{% endif %}">
<div class="time-pair">
<input class="time-input" type="time" name="matin_entree"
data-date="{{ j.date }}" value="{{ j.matin_entree or '' }}">
<span class="time-sep">→</span>
<input class="time-input" type="time" name="matin_sortie"
data-date="{{ j.date }}" value="{{ j.matin_sortie or '' }}">
</div>
</div>
</td>
<td class="c-aprem">
<div id="cg-aprem-{{ j.date }}" data-label="Après-midi" class="td-fill{% if aprem_cg %} cg{% elif aprem_warn %} warn{% endif %}">
<div class="time-pair">
<input class="time-input" type="time" name="aprem_entree"
data-date="{{ j.date }}" value="{{ j.aprem_entree or '' }}">
<span class="time-sep">→</span>
<input class="time-input" type="time" name="aprem_sortie"
data-date="{{ j.date }}" value="{{ j.aprem_sortie or '' }}">
</div>
</div>
</td>
<td class="col-calc" data-label="Travaillé">
<span id="calc-{{ j.date }}-trav">
<span class="calc-num">{{ j.travaille if j.travaille_min else '—' }}</span>
</span>
</td>
<td class="col-calc" data-label="Δ jour">
<span id="calc-{{ j.date }}-delta">
<span class="{% if j.travaille_min and j.delta_min > 0 %}delta-pos{% elif j.travaille_min and j.delta_min < 0 %}delta-neg{% else %}delta-zero{% endif %}">
{%- if j.travaille_min -%}
{% if j.delta_min > 0 %}+{% endif %}{{ j.delta }}
{%- else %}—{%- endif %}
</span>
</span>
</td>
<td class="col-cumul" data-label="Δ sem.">
<span id="calc-{{ j.date }}-cumul">
{%- if j.cumul_visible -%}
<span class="{% if j.delta_cumul_min > 0 %}delta-pos{% elif j.delta_cumul_min < 0 %}delta-neg{% else %}delta-zero{% endif %}">
{% if j.delta_cumul_min > 0 %}+{% elif j.delta_cumul_min < 0 %}-{% endif %}{{ j.delta_cumul if j.delta_cumul_min != 0 else '0h00' }}
</span>
{%- else -%}
<span class="delta-zero">—</span>
{%- endif %}
</span>
</td>
<td class="col-cible" data-label="Cible">
<span id="calc-{{ j.date }}-cible">
{%- if j.cible_matin or j.cible_aprem -%}
{%- if j.cible_matin -%}<span class="cible-num">M {{ j.cible_matin_entree }} → {{ j.cible_matin }}</span>{%- endif -%}
{%- if j.cible_matin and j.cible_aprem %} {% endif -%}
{%- if j.cible_aprem -%}<span class="cible-num">A {{ j.cible_aprem_entree }} → {{ j.cible_aprem }}</span>{%- endif -%}
{%- else -%}
<span class="delta-zero">—</span>
{%- endif %}
</span>
</td>
<td class="col-save">
<button class="btn-valider"
hx-post="/pointage/{{ j.date }}"
hx-swap="none"
hx-include="[data-date='{{ j.date }}']"
title="Enregistrer">✓</button>
</td>
<td class="col-conge" data-label="Congé">
<div id="cg-btn-{{ j.date }}">
<div class="conge-btns">
<button hx-post="/conge/{{ j.date }}/matin"
hx-swap="none"
class="btn-cg {% if 'matin' in j.conge %}on{% endif %}"
title="Congé matin">MA</button>
<button hx-post="/conge/{{ j.date }}/aprem"
hx-swap="none"
class="btn-cg {% if 'aprem' in j.conge %}on{% endif %}"
title="Congé après-midi">AM</button>
<button hx-post="/conge/{{ j.date }}/jour"
hx-swap="none"
class="btn-cg btn-jour {% if 'jour' in j.conge %}jour-on{% endif %}"
title="Journée entière">J</button>
</div>
</div>
</td>
</tr>