Vasyka/autocrm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(faq): replace confusing status pill with iOS-style toggle switch

Browse Source 
Previous pill button showed "● ACTIVE" or "○ INACTIVE" but users read
it as a status label, not a clickable action — nobody clicked to
disable.

New UI: 46×24 iOS-style switch that slides between grey (OFF) and
green (ON) with a sliding white knob, plus a text label next to it.
The whole switch is a form button — clicking flips hints_enabled.
Title attribute + label make both directions obvious: "Click pentru
a DEZACTIVA" when on, "Click pentru a ACTIVA" when off.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Vasyka
2026-09-01 10:59:33 +00:00
parent 0716b70bfa
commit 6dba81502b
3 changed files with 47 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/filament/tenant/pages/faq.blade.php
+37 -12
View File
@@ -101,15 +101,36 @@
.faq-search:focus { outline: 2px solid #3b82f6; outline-offset: -1px; border-color: #3b82f6; }
.faq-toggle { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.faq-toggle-lbl { color: #6b7280; font-size: 12px; }
.faq-btn-toggle {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 14px; border-radius: 20px; border: 0;
font-size: 12px; font-weight: 600; cursor: pointer;
transition: all .15s;
/* iOS-style switch — makes clear both ON and OFF states are clickable */
.faq-switch {
position: relative;
width: 46px; height: 24px;
background: #d1d5db;
border-radius: 12px;
border: 0; padding: 0;
cursor: pointer;
transition: background .2s;
display: inline-block;
}
.faq-btn-toggle.on { background: #10b981; color: #fff; }
.faq-btn-toggle.off { background: #e5e7eb; color: #374151; }
.faq-btn-toggle:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.faq-switch.on { background: #10b981; }
.faq-switch::after {
content: '';
position: absolute;
top: 2px; left: 2px;
width: 20px; height: 20px;
background: #fff;
border-radius: 50%;
box-shadow: 0 1px 3px rgba(0,0,0,.3);
transition: left .2s;
}
.faq-switch.on::after { left: 24px; }
.faq-switch-lbl {
font-size: 12px; font-weight: 600;
margin-left: 8px;
min-width: 62px; display: inline-block;
}
.faq-switch-lbl.on { color: #059669; }
.faq-switch-lbl.off { color: #6b7280; }
.faq-btn-reset {
padding: 7px 14px; border-radius: 20px;
border: 1px solid #d1d5db; background: #fff; color: #6b7280;
@@ -284,12 +305,16 @@
<div class="faq-controls">
<input type="text" class="faq-search" placeholder="{{ __('Caută în ghid...') }}" wire:model.live.debounce.300ms="search">
<div class="faq-toggle">
<span class="faq-toggle-lbl">{{ __('Sugestii pe pagini:') }}</span>
<form method="POST" action="{{ route('hints.toggle') }}" style="display:inline;">
<span class="faq-toggle-lbl">{{ __('Sugestii „?" pe pagini:') }}</span>
<form method="POST" action="{{ route('hints.toggle') }}" style="display:inline-flex;align-items:center;">
@csrf
<button type="submit" class="faq-btn-toggle {{ $user?->hints_enabled ? 'on' : 'off' }}">
{{ $user?->hints_enabled ? '● ' . __('ACTIVE') : '○ ' . __('INACTIVE') }}
<button type="submit" class="faq-switch {{ $user?->hints_enabled ? 'on' : 'off' }}"
title="{{ $user?->hints_enabled ? __('Click pentru a DEZACTIVA') : __('Click pentru a ACTIVA') }}"
aria-label="{{ __('Toggle hints') }}">
</button>
<span class="faq-switch-lbl {{ $user?->hints_enabled ? 'on' : 'off' }}">
{{ $user?->hints_enabled ? __('ACTIVE') : __('DEZACTIV') }}
</span>
</form>
<form method="POST" action="{{ route('hints.reset') }}" style="display:inline;">
@csrf