golomazov/hotelsync
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: stabilize star rating layout — reserve label height, use inline scale
Some checks failed
Deploy to Production / deploy (push) Has been cancelled
Details

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
HotelSync
2026-04-21 17:21:52 +03:00
parent d1948f95b9
commit 6165e4c67c
2 changed files with 14 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/pages/GuestReviewPage.tsx
View File

@@ -119,7 +119,8 @@ export function GuestReviewPage() {
onMouseEnter={() => setHover(i + 1)} onMouseEnter={() => setHover(i + 1)}
onMouseLeave={() => setHover(0)} onMouseLeave={() => setHover(0)}
onClick={() => setRating(i + 1)} onClick={() => setRating(i + 1)}
className="transition-transform hover:scale-110 active:scale-95" className="transition-transform active:scale-95"
style={{ transform: (hover || rating) > i ? 'scale(1.12)' : 'scale(1)' }}
> >
<Star <Star
size={40} size={40}
@@ -134,11 +135,11 @@ export function GuestReviewPage() {
))} ))}
</div> </div>
{(hover || rating) > 0 && ( <p className="text-sm font-medium text-slate-600 -mt-2 h-5 text-center">
<p className="text-sm font-medium text-slate-600 -mt-2"> {(hover || rating) > 0
{['', 'Очень плохо', 'Плохо', 'Нормально', 'Хорошо', 'Отлично!'][hover || rating]} ? ['', 'Очень плохо', 'Плохо', 'Нормально', 'Хорошо', 'Отлично!'][hover || rating]
: ''}
</p> </p>
)}
{rating > 0 && config?.showTextField && ( {rating > 0 && config?.showTextField && (
<textarea <textarea

11
src/pages/GuestReviewQrPage.tsx
View File

@@ -111,7 +111,8 @@ export function GuestReviewQrPage() {
onMouseEnter={() => setHover(i + 1)} onMouseEnter={() => setHover(i + 1)}
onMouseLeave={() => setHover(0)} onMouseLeave={() => setHover(0)}
onClick={() => setRating(i + 1)} onClick={() => setRating(i + 1)}
className="transition-transform hover:scale-110 active:scale-95" className="transition-transform active:scale-95"
style={{ transform: (hover || rating) > i ? 'scale(1.12)' : 'scale(1)' }}
> >
<Star <Star
size={40} size={40}
@@ -126,11 +127,11 @@ export function GuestReviewQrPage() {
))} ))}
</div> </div>
{(hover || rating) > 0 && ( <p className="text-sm font-medium text-slate-600 -mt-2 h-5 text-center">
<p className="text-sm font-medium text-slate-600 -mt-2"> {(hover || rating) > 0
{['', 'Очень плохо', 'Плохо', 'Нормально', 'Хорошо', 'Отлично!'][hover || rating]} ? ['', 'Очень плохо', 'Плохо', 'Нормально', 'Хорошо', 'Отлично!'][hover || rating]
: ''}
</p> </p>
)}
{rating > 0 && config?.showTextField && ( {rating > 0 && config?.showTextField && (
<textarea <textarea