CGL/mesreleves-php
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 7 Wiki Activity

Fix dark mode : formulaires et composant lieu-picker

Browse Source 
- app.css : règle @layer base globale pour tous les <input>, <select>,
  <textarea> en mode sombre (bg-gray-700, border-gray-600, text-gray-100)
  sans toucher checkboxes, radios ni boutons
- lieu-picker : bouton déclencheur, fenêtre modale, champ de recherche,
  liste de résultats et badges entièrement adaptés au thème sombre

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Yannick Barbel
2026-06-04 20:14:44 +02:00
parent f530f55577
commit 3faa74640d
2 changed files with 66 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/app.css
+27
View File
@@ -3,3 +3,30 @@
@tailwind utilities; @tailwind utilities;
[x-cloak] { display: none !important; } [x-cloak] { display: none !important; }
@layer base {
/*
* Dark mode — champs de formulaire
* Appliqué globalement pour couvrir tous les <input>, <select>, <textarea>
* bruts qui n'utilisent pas le composant <x-text-input>.
* La spécificité (.dark + élément) surpasse les resets de @tailwindcss/forms.
*/
.dark input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]),
.dark select,
.dark textarea {
background-color: theme('colors.gray.700');
border-color: theme('colors.gray.600');
color: theme('colors.gray.100');
}
.dark input::placeholder,
.dark textarea::placeholder {
color: theme('colors.gray.400');
}
/* Options du <select> natif (fond navigateur) */
.dark select option {
background-color: theme('colors.gray.700');
color: theme('colors.gray.100');
}
}
resources/views/components/lieu-picker.blade.php
+39 -24
View File
@@ -69,7 +69,7 @@
}" }"
@keydown.escape.window="open = false" @keydown.escape.window="open = false"
> >
<label class="block text-sm font-medium text-gray-700 mb-1"> <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
{{ $label }} {{ $label }}
@if($required) <span class="text-red-500">*</span> @endif @if($required) <span class="text-red-500">*</span> @endif
</label> </label>
@@ -82,12 +82,17 @@
<button <button
type="button" type="button"
@click="openModal()" @click="openModal()"
class="flex-1 text-left px-3 py-2 border border-gray-300 rounded-md bg-white text-sm shadow-sm class="flex-1 text-left px-3 py-2 border border-gray-300 dark:border-gray-600
hover:border-indigo-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-colors rounded-md bg-white dark:bg-gray-700 text-sm shadow-sm
hover:border-indigo-400 dark:hover:border-indigo-500
focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-colors
@error($name) border-red-500 @enderror" @error($name) border-red-500 @enderror"
> >
<span x-show="selected.id" class="text-gray-900" x-text="selected.name"></span> <span x-show="selected.id"
<span x-show="!selected.id" class="text-gray-400">{{ $placeholder }}</span> class="text-gray-900 dark:text-gray-100"
x-text="selected.name"></span>
<span x-show="!selected.id"
class="text-gray-400 dark:text-gray-500">{{ $placeholder }}</span>
</button> </button>
<button <button
@@ -95,7 +100,7 @@
x-show="selected.id" x-show="selected.id"
@click="clear()" @click="clear()"
title="Effacer" title="Effacer"
class="px-2 py-2 text-gray-400 hover:text-red-500 transition-colors" class="px-2 py-2 text-gray-400 dark:text-gray-500 hover:text-red-500 dark:hover:text-red-400 transition-colors"
> >
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
@@ -104,7 +109,7 @@
</div> </div>
@error($name) @error($name)
<p class="mt-1 text-sm text-red-600">{{ $message }}</p> <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
@enderror @enderror
{{-- Modale de recherche --}} {{-- Modale de recherche --}}
@@ -115,13 +120,15 @@
@click.self="open = false" @click.self="open = false"
> >
{{-- Fond semi-transparent --}} {{-- Fond semi-transparent --}}
<div class="absolute inset-0 bg-black/40" @click="open = false"></div> <div class="absolute inset-0 bg-black/40 dark:bg-black/60" @click="open = false"></div>
{{-- Panneau --}} {{-- Panneau --}}
<div class="relative bg-white rounded-xl shadow-2xl w-full max-w-lg z-10 overflow-hidden"> <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-2xl dark:shadow-gray-900/50
{{-- En-tête --}} w-full max-w-lg z-10 overflow-hidden">
<div class="px-4 py-3 border-b border-gray-100 flex items-center gap-3">
<svg class="w-5 h-5 text-gray-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> {{-- En-tête avec champ de recherche --}}
<div class="px-4 py-3 border-b border-gray-100 dark:border-gray-700 flex items-center gap-3">
<svg class="w-5 h-5 text-gray-400 dark:text-gray-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M21 21l-4.35-4.35M17 11A6 6 0 1 1 5 11a6 6 0 0 1 12 0z"/> d="M21 21l-4.35-4.35M17 11A6 6 0 1 1 5 11a6 6 0 0 1 12 0z"/>
</svg> </svg>
@@ -131,10 +138,13 @@
x-model="search" x-model="search"
@input="onSearchInput()" @input="onSearchInput()"
placeholder="Nom, code INSEE…" placeholder="Nom, code INSEE…"
class="flex-1 text-sm outline-none placeholder-gray-400" class="flex-1 text-sm outline-none bg-transparent
text-gray-900 dark:text-gray-100
placeholder-gray-400 dark:placeholder-gray-500
focus:ring-0 border-none p-0"
> >
<button type="button" @click="open = false" <button type="button" @click="open = false"
class="text-gray-400 hover:text-gray-600"> class="text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
</svg> </svg>
@@ -144,39 +154,44 @@
{{-- Résultats --}} {{-- Résultats --}}
<div class="max-h-80 overflow-y-auto"> <div class="max-h-80 overflow-y-auto">
{{-- Chargement --}} {{-- Chargement --}}
<div x-show="loading" class="px-4 py-6 text-center text-sm text-gray-400"> <div x-show="loading"
class="px-4 py-6 text-center text-sm text-gray-400 dark:text-gray-500">
Recherche… Recherche…
</div> </div>
{{-- Aucun résultat --}} {{-- Aucun résultat --}}
<div x-show="!loading && search.length > 0 && results.length === 0" <div x-show="!loading && search.length > 0 && results.length === 0"
class="px-4 py-6 text-center text-sm text-gray-400"> class="px-4 py-6 text-center text-sm text-gray-400 dark:text-gray-500">
Aucun lieu trouvé pour « <span x-text="search"></span> » Aucun lieu trouvé pour « <span x-text="search"></span> »
</div> </div>
{{-- Invite initiale --}} {{-- Invite initiale --}}
<div x-show="!loading && search.length === 0" <div x-show="!loading && search.length === 0"
class="px-4 py-6 text-center text-sm text-gray-400"> class="px-4 py-6 text-center text-sm text-gray-400 dark:text-gray-500">
Saisissez au moins une lettre pour rechercher Saisissez au moins une lettre pour rechercher
</div> </div>
{{-- Liste --}} {{-- Liste des résultats --}}
<ul x-show="results.length > 0"> <ul x-show="results.length > 0">
<template x-for="lieu in results" :key="lieu.id"> <template x-for="lieu in results" :key="lieu.id">
<li> <li>
<button <button
type="button" type="button"
@click="select(lieu)" @click="select(lieu)"
class="w-full text-left px-4 py-3 hover:bg-indigo-50 flex items-center justify-between gap-3 transition-colors" class="w-full text-left px-4 py-3 flex items-center justify-between gap-3 transition-colors
hover:bg-indigo-50 dark:hover:bg-indigo-900/30"
> >
<div> <div>
<span class="text-sm font-medium text-gray-900" x-text="lieu.nom_long"></span> <span class="text-sm font-medium text-gray-900 dark:text-gray-100"
x-text="lieu.nom_long"></span>
<span x-show="lieu.code" <span x-show="lieu.code"
class="ml-2 text-xs text-gray-400" class="ml-2 text-xs text-gray-400 dark:text-gray-500"
x-text="lieu.code"></span> x-text="lieu.code"></span>
</div> </div>
<span x-show="lieu.type" <span x-show="lieu.type"
class="shrink-0 text-xs px-2 py-0.5 bg-gray-100 text-gray-500 rounded-full" class="shrink-0 text-xs px-2 py-0.5 rounded-full
bg-gray-100 dark:bg-gray-700
text-gray-500 dark:text-gray-400"
x-text="lieu.type"></span> x-text="lieu.type"></span>
</button> </button>
</li> </li>
@@ -186,9 +201,9 @@
@can('create', App\Models\Lieu::class) @can('create', App\Models\Lieu::class)
{{-- Pied : créer un nouveau lieu --}} {{-- Pied : créer un nouveau lieu --}}
<div class="border-t border-gray-100 px-4 py-2.5"> <div class="border-t border-gray-100 dark:border-gray-700 px-4 py-2.5">
<a href="{{ route('lieux.create') }}" target="_blank" <a href="{{ route('lieux.create') }}" target="_blank"
class="text-xs text-indigo-600 hover:underline"> class="text-xs text-indigo-600 dark:text-indigo-400 hover:underline">
+ Créer un nouveau lieu + Créer un nouveau lieu
</a> </a>
</div> </div>