gitea-admin/gh-christianlouis-docuelevate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): replace Tailwind v3-only peer toggles with Alpine.js-driven toggles in admin users modal

Browse Source 
The "Block this user" and "Complimentary plan" toggle switches were always
greyed out because the app loads Tailwind CSS v2.2.19 from CDN, but the
toggles used Tailwind v3-only features (peer, peer-checked:*, after:content-[''],
arbitrary value syntax like after:top-[2px], etc.).

Replaced both toggles with button[role=switch] elements driven by Alpine.js
@click handlers and :class bindings — fully compatible with Tailwind v2.

Co-authored-by: christianlouis <361235+christianlouis@users.noreply.github.com>
This commit is contained in:
copilot-swe-agent[bot]
2026-03-07 21:22:58 +00:00
parent 232691a396
commit 56f346ac20
1 changed files with 32 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/templates/admin_users.html
+32 -26
View File
@@ -321,21 +321,24 @@
<!-- Blocked toggle --> <!-- Blocked toggle -->
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<label class="relative inline-flex items-center cursor-pointer"> <button
<input type="button"
type="checkbox" @click="form.is_blocked = !form.is_blocked"
x-model="form.is_blocked" :class="form.is_blocked ? 'bg-red-500' : 'bg-gray-200'"
class="sr-only peer" class="relative inline-flex h-6 w-10 flex-shrink-0 rounded-full cursor-pointer transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-400"
id="modal-blocked" role="switch"
role="switch" :aria-checked="form.is_blocked.toString()"
:aria-checked="form.is_blocked" aria-labelledby="modal-blocked-label"
/> >
<div class="w-10 h-6 bg-gray-200 peer-focus:ring-2 peer-focus:ring-blue-400 rounded-full peer peer-checked:bg-red-500 after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:after:translate-x-4"></div> <span
</label> :class="form.is_blocked ? 'translate-x-4' : 'translate-x-0'"
<label for="modal-blocked" class="text-sm font-medium text-gray-700"> class="absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-white shadow transform transition duration-200 ease-in-out pointer-events-none"
></span>
</button>
<span id="modal-blocked-label" class="text-sm font-medium text-gray-700">
Block this user Block this user
<span class="text-xs text-gray-400 font-normal">(prevents new document uploads)</span> <span class="text-xs text-gray-400 font-normal">(prevents new document uploads)</span>
</label> </span>
</div> </div>
<!-- Subscription tier --> <!-- Subscription tier -->
@@ -391,21 +394,24 @@
<!-- Complimentary plan toggle --> <!-- Complimentary plan toggle -->
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<label class="relative inline-flex items-center cursor-pointer"> <button
<input type="button"
type="checkbox" @click="form.is_complimentary = !form.is_complimentary"
x-model="form.is_complimentary" :class="form.is_complimentary ? 'bg-green-500' : 'bg-gray-200'"
class="sr-only peer" class="relative inline-flex h-6 w-10 flex-shrink-0 rounded-full cursor-pointer transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-400"
id="modal-complimentary" role="switch"
role="switch" :aria-checked="form.is_complimentary.toString()"
:aria-checked="form.is_complimentary.toString()" aria-labelledby="modal-complimentary-label"
/> >
<div class="w-10 h-6 bg-gray-200 peer-focus:ring-2 peer-focus:ring-blue-400 rounded-full peer peer-checked:bg-green-500 after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:after:translate-x-4"></div> <span
</label> :class="form.is_complimentary ? 'translate-x-4' : 'translate-x-0'"
<label for="modal-complimentary" class="text-sm font-medium text-gray-700"> class="absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-white shadow transform transition duration-200 ease-in-out pointer-events-none"
></span>
</button>
<span id="modal-complimentary-label" class="text-sm font-medium text-gray-700">
Complimentary plan Complimentary plan
<span class="text-xs text-gray-400 font-normal">(user keeps tier benefits but is never billed — set automatically for admin accounts)</span> <span class="text-xs text-gray-400 font-normal">(user keeps tier benefits but is never billed — set automatically for admin accounts)</span>
</label> </span>
</div> </div>
</div> </div>