Refonte design V1

This commit is contained in:
mrKamoo
2026-10-02 13:06:14 +02:00
parent 429dd9de5e
commit 83e1ce00a9
20 changed files with 1403 additions and 531 deletions
@@ -1,5 +1,5 @@
@extends('layouts.app')
@section('title', ($campaign->exists ? $campaign->name : 'Nouvelle campagne').' — Signatures CABM')
@section('title', ($campaign->exists ? $campaign->name : 'Nouvelle campagne').' — Signatures')
@section('content')
@php
$isAdmin = auth()->user()->hasRole('admin');
@@ -11,27 +11,34 @@
$checked = collect(old('groups', $selected))->map(fn ($id) => (int) $id)->all();
$status = $campaign->exists ? $campaign->status() : null;
@endphp
<div class="row" style="margin-bottom:16px">
<a href="{{ route('admin.campaigns.index') }}">← Campagnes</a>
<h1 style="margin:0 0 0 12px">{{ $campaign->exists ? $campaign->name : 'Nouvelle campagne' }}</h1>
@if ($status)
<span class="badge {{ ['running' => 'ok', 'inactive' => 'warn'][$status] ?? '' }}">{{ \App\Models\Campaign::STATUSES[$status] }}</span>
@endif
</div>
<header class="page-head">
<div>
<a class="back" href="{{ route('admin.campaigns.index') }}"><x-icon name="chevron-left" :size="16" />Campagnes</a>
<div class="page-title">
<h1>{{ $campaign->exists ? $campaign->name : 'Nouvelle campagne' }}</h1>
@if ($status)
<span class="badge {{ ['running' => 'ok', 'inactive' => 'warn', 'ended' => 'off'][$status] ?? '' }}">{{ \App\Models\Campaign::STATUSES[$status] }}</span>
@endif
</div>
</div>
</header>
@if ($locked)
<div class="notice" role="note">Cette campagne est active : seul un administrateur peut la modifier.</div>
<div class="alert notice" role="note">
<x-icon name="info" />
<div>Cette campagne est active : seul un administrateur peut la modifier.</div>
</div>
@endif
<form method="post" enctype="multipart/form-data"
action="{{ $campaign->exists ? route('admin.campaigns.update', $campaign) : route('admin.campaigns.store') }}">
@csrf
@if ($campaign->exists) @method('PUT') @endif
<fieldset @disabled($locked) style="border:0;margin:0;padding:0">
<fieldset class="bare" @disabled($locked)>
<div class="split">
<div class="card">
<h2>Bannière</h2>
<label for="name">Nom de la campagne</label>
<label for="name" style="margin-top:0">Nom de la campagne</label>
<input type="text" id="name" name="name" maxlength="120" required value="{{ old('name', $campaign->name) }}" placeholder="ex. Collecte des encombrants — octobre">
<label for="image_path">Image</label>
@@ -46,40 +53,45 @@
</option>
@endforeach
</select>
<label for="image_file">… ou envoyer une nouvelle image (PNG, JPEG, GIF)</label>
<input type="file" id="image_file" name="image_file" accept="image/png,image/jpeg,image/gif">
<p class="muted">Visez 600 px de large et moins de 100 Ko : les destinataires la téléchargent à chaque ouverture du message.</p>
<img id="thumb" alt="" hidden style="max-width:100%;max-height:160px;border:1px solid var(--line);background:#fff">
<label class="dropzone" data-dropzone style="margin-top:10px">
<input type="file" id="image_file" name="image_file" accept="image/png,image/jpeg,image/gif" aria-label="Nouvelle image">
<x-icon name="cloud-upload" :size="24" />
<span data-prompt>… ou glissez une nouvelle image ici, ou <u>parcourez vos fichiers</u></span>
<span class="dropzone-name" data-name hidden></span>
<span class="muted">PNG, JPEG ou GIF</span>
</label>
<p class="hint">Visez 600 px de large et moins de 100 Ko : les destinataires la téléchargent à chaque ouverture du message.</p>
<img id="thumb" class="preview-img" alt="" hidden>
<label for="alt_text">Texte alternatif</label>
<input type="text" id="alt_text" name="alt_text" maxlength="150" required value="{{ old('alt_text', $campaign->alt_text) }}" placeholder="ex. Collecte des encombrants : inscrivez-vous avant le 15 octobre">
<p class="muted">Affiché quand le destinataire bloque les images, et lu par les lecteurs d'écran. Résumez le message de la bannière.</p>
<p class="hint">Affiché quand le destinataire bloque les images, et lu par les lecteurs d'écran. Résumez le message de la bannière.</p>
<label for="link_url">Lien au clic (facultatif)</label>
<input type="url" id="link_url" name="link_url" maxlength="255" value="{{ old('link_url', $campaign->link_url) }}" placeholder="https://www.beziers-mediterranee.fr/…">
<label for="width">Largeur d'affichage (px, facultatif)</label>
<input type="number" id="width" name="width" style="width:140px" min="100" max="800" value="{{ old('width', $width) }}" placeholder="auto">
<p class="muted">Vide : largeur réelle de l'image, plafonnée à 600 px.</p>
<p class="hint">Vide : largeur réelle de l'image, plafonnée à 600 px.</p>
</div>
<div class="card">
<h2>Diffusion</h2>
<div class="row">
<div style="flex:1;min-width:200px">
<label for="starts_at">Début</label>
<div class="field-row">
<div>
<label for="starts_at" style="margin-top:0">Début</label>
<input type="datetime-local" id="starts_at" name="starts_at" required value="{{ old('starts_at', $local($campaign->starts_at)) }}">
</div>
<div style="flex:1;min-width:200px">
<label for="ends_at">Fin</label>
<div>
<label for="ends_at" style="margin-top:0">Fin</label>
<input type="datetime-local" id="ends_at" name="ends_at" required value="{{ old('ends_at', $local($campaign->ends_at)) }}">
</div>
</div>
<p class="muted">Heure de Paris. La bannière cesse d'être insérée à la fin ; les messages déjà envoyés la conservent.</p>
<p class="hint">Heure de Paris. La bannière cesse d'être insérée à la fin ; les messages déjà envoyés la conservent.</p>
<label for="priority">Priorité</label>
<input class="small" type="number" id="priority" name="priority" min="0" max="1000" required value="{{ old('priority', $campaign->priority ?? 10) }}">
<p class="muted">Si plusieurs campagnes en cours concernent le même agent, la priorité la plus haute s'affiche.</p>
<p class="hint">Si plusieurs campagnes en cours concernent le même agent, la priorité la plus haute s'affiche.</p>
<fieldset>
<legend>Destinataires</legend>
@@ -98,18 +110,19 @@
@if ($isAdmin)
<input type="hidden" name="active" value="0">
<label class="check" style="margin-top:14px">
<input type="checkbox" name="active" value="1" @checked(old('active', $campaign->active))>Campagne active
<label class="switch" style="margin-top:16px">
<input type="checkbox" name="active" value="1" @checked(old('active', $campaign->active))>
<span class="switch-track"></span><strong>Campagne active</strong>
</label>
<p class="muted">Décochée, la bannière n'est jamais insérée, même pendant la période.</p>
<p class="hint">Désactivée, la bannière n'est jamais insérée, même pendant la période.</p>
@else
<p class="muted" style="margin-top:14px">La campagne reste inactive tant qu'un administrateur ne l'a pas activée.</p>
<p class="hint" style="margin-top:14px">La campagne reste inactive tant qu'un administrateur ne l'a pas activée.</p>
@endif
</div>
</div>
<div class="row">
<button class="btn" type="submit">{{ $campaign->exists ? 'Enregistrer' : 'Créer la campagne' }}</button>
<button class="btn" type="submit"><x-icon name="save" />{{ $campaign->exists ? 'Enregistrer' : 'Créer la campagne' }}</button>
<a class="btn secondary" href="{{ route('admin.campaigns.index') }}">Annuler</a>
</div>
</fieldset>
@@ -117,9 +130,9 @@
@if ($campaign->exists)
<div class="card" style="margin-top:16px">
<h2>Rendu enregistré</h2>
<h2>Bannière enregistrée</h2>
<p class="muted">Tel qu'inséré à l'emplacement <code>{{ '{'.'{'.'{banniere}'.'}'.'}' }}</code> du template. Pour le voir dans une signature complète, ouvrez un agent dans l'onglet <a href="{{ route('admin.agents.index') }}">Agents</a>.</p>
@include('partials.signature-frame', ['html' => $bannerHtml, 'title' => 'Aperçu de la bannière'])
@include('partials.signature-frame', ['html' => $bannerHtml, 'title' => 'Aperçu de la bannière', 'class' => 'short'])
</div>
@endif
@endsection
@@ -140,7 +153,7 @@
width.placeholder = natural ? `auto (${Math.min(natural, 600)})` : 'auto';
};
select.addEventListener('change', () => { file.value = ''; fromLibrary(); });
select.addEventListener('change', () => { file.value = ''; file.dispatchEvent(new Event('change')); });
file.addEventListener('change', () => {
if (!file.files.length) return fromLibrary();
select.value = '';