refactor(frontend): implement mobile-first layout for chat pages
- Add fullWidth prop to Layout component for chat pages - Redesign EventChatPage and MatchChatPage with fixed layout: - Navbar sticky to top (no gaps) - Event/partner header directly below navbar - Chat content fills available space (flex-1) - Input area fixed to bottom - Full screen width on mobile (no margins) - Translate RecordingTab UI strings to English - Move Leave Event button to header - Remove unnecessary margins and max-width constraints This provides a better mobile experience with full-screen chat interface similar to native messaging apps.
This commit is contained in:
Radosław Gierwiało
@@ -29,7 +29,7 @@ const RecordingTab = ({ slug, event, myHeats }) => {
|
||||
setSuggestions(data);
|
||||
} catch (err) {
|
||||
console.error('Failed to load suggestions:', err);
|
||||
setError('Nie udalo sie zaladowac sugestii');
|
||||
setError('Failed to load suggestions');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
@@ -89,7 +89,7 @@ const RecordingTab = ({ slug, event, myHeats }) => {
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<div className="flex flex-col items-center gap-3">
|
||||
<RefreshCw className="w-8 h-8 animate-spin text-primary-600" />
|
||||
<p className="text-gray-600">Ladowanie...</p>
|
||||
<p className="text-gray-600">Loading...</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -116,10 +116,10 @@ const RecordingTab = ({ slug, event, myHeats }) => {
|
||||
<div className="bg-gradient-to-r from-primary-50 to-primary-100 rounded-lg p-4">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<Video className="w-6 h-6 text-primary-600" />
|
||||
<h3 className="text-lg font-semibold text-primary-900">Nagrywanie</h3>
|
||||
<h3 className="text-lg font-semibold text-primary-900">Recording</h3>
|
||||
</div>
|
||||
<p className="text-sm text-primary-700">
|
||||
System automatycznie dobiera osoby do wzajemnego nagrywania wystepow.
|
||||
System automatically pairs people for mutual recording of performances.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -130,10 +130,10 @@ const RecordingTab = ({ slug, event, myHeats }) => {
|
||||
<Clock className="w-5 h-5 text-amber-600" />
|
||||
<div>
|
||||
<p className="font-medium text-amber-800">
|
||||
Matching uruchomi sie za: {countdown.hours}h {countdown.minutes}min
|
||||
Matching will run in: {countdown.hours}h {countdown.minutes}min
|
||||
</p>
|
||||
<p className="text-sm text-amber-600">
|
||||
Po zamknieciu zapisow system automatycznie dobierze partnerow do nagrywania.
|
||||
After registration closes, the system will automatically pair recording partners.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -144,9 +144,9 @@ const RecordingTab = ({ slug, event, myHeats }) => {
|
||||
<div className="flex items-center gap-3">
|
||||
<CheckCircle className="w-5 h-5 text-green-600" />
|
||||
<div>
|
||||
<p className="font-medium text-green-800">Matching zakonczony</p>
|
||||
<p className="font-medium text-green-800">Matching completed</p>
|
||||
<p className="text-sm text-green-600">
|
||||
Ostatnie uruchomienie: {new Date(matchingRunAt).toLocaleString('pl-PL')}
|
||||
Last run: {new Date(matchingRunAt).toLocaleString('en-US')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -156,7 +156,7 @@ const RecordingTab = ({ slug, event, myHeats }) => {
|
||||
className="flex items-center gap-2 px-3 py-1.5 text-sm bg-green-600 text-white rounded-md hover:bg-green-700 disabled:opacity-50"
|
||||
>
|
||||
<RefreshCw className={`w-4 h-4 ${runningMatching ? 'animate-spin' : ''}`} />
|
||||
{runningMatching ? 'Trwa...' : 'Uruchom ponownie'}
|
||||
{runningMatching ? 'Running...' : 'Run again'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -165,7 +165,7 @@ const RecordingTab = ({ slug, event, myHeats }) => {
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<AlertTriangle className="w-5 h-5 text-gray-500" />
|
||||
<p className="text-gray-600">Matching nie zostal jeszcze uruchomiony</p>
|
||||
<p className="text-gray-600">Matching has not been run yet</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleRunMatching}
|
||||
@@ -173,7 +173,7 @@ const RecordingTab = ({ slug, event, myHeats }) => {
|
||||
className="flex items-center gap-2 px-3 py-1.5 text-sm bg-primary-600 text-white rounded-md hover:bg-primary-700 disabled:opacity-50"
|
||||
>
|
||||
<RefreshCw className={`w-4 h-4 ${runningMatching ? 'animate-spin' : ''}`} />
|
||||
{runningMatching ? 'Trwa...' : 'Uruchom matching'}
|
||||
{runningMatching ? 'Running...' : 'Run matching'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -183,14 +183,14 @@ const RecordingTab = ({ slug, event, myHeats }) => {
|
||||
<div>
|
||||
<h4 className="flex items-center gap-2 text-md font-semibold text-gray-900 mb-3">
|
||||
<Video className="w-5 h-5 text-primary-600" />
|
||||
Moje heaty do nagrania ({toBeRecorded.length})
|
||||
My heats to be recorded ({toBeRecorded.length})
|
||||
</h4>
|
||||
|
||||
{toBeRecorded.length === 0 ? (
|
||||
<div className="bg-gray-50 rounded-lg p-4 text-center text-gray-500">
|
||||
{myHeats.length === 0
|
||||
? 'Nie masz zadeklarowanych heatow'
|
||||
: 'Brak sugestii - uruchom matching'
|
||||
? "You haven't declared any heats"
|
||||
: 'No suggestions - run matching'
|
||||
}
|
||||
</div>
|
||||
) : (
|
||||
@@ -212,12 +212,12 @@ const RecordingTab = ({ slug, event, myHeats }) => {
|
||||
<div>
|
||||
<h4 className="flex items-center gap-2 text-md font-semibold text-gray-900 mb-3">
|
||||
<VideoOff className="w-5 h-5 text-amber-600" />
|
||||
Nagrywam innych ({toRecord.length})
|
||||
Recording others ({toRecord.length})
|
||||
</h4>
|
||||
|
||||
{toRecord.length === 0 ? (
|
||||
<div className="bg-gray-50 rounded-lg p-4 text-center text-gray-500">
|
||||
Nie masz przypisanych heatow do nagrywania
|
||||
You have no assigned heats to record
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
@@ -245,14 +245,14 @@ const RecordingTab = ({ slug, event, myHeats }) => {
|
||||
className="w-4 h-4 text-primary-600 rounded focus:ring-primary-500"
|
||||
/>
|
||||
<span className="text-sm text-gray-700">
|
||||
Nie chce nagrywac innych (opt-out)
|
||||
I don't want to record others (opt-out)
|
||||
</span>
|
||||
{updatingOptOut && (
|
||||
<RefreshCw className="w-4 h-4 animate-spin text-gray-400" />
|
||||
)}
|
||||
</label>
|
||||
<p className="text-xs text-gray-500 mt-1 ml-7">
|
||||
Jesli zaznaczysz, spadniesz na koniec kolejki przy przydzielaniu partnerow.
|
||||
If checked, you'll be deprioritized when assigning recording partners.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -274,7 +274,7 @@ const SuggestionCard = ({ suggestion, type, onAccept, onReject }) => {
|
||||
: 'Unknown heat';
|
||||
|
||||
const person = type === SUGGESTION_TYPE.TO_BE_RECORDED ? recorder : dancer;
|
||||
const personLabel = type === SUGGESTION_TYPE.TO_BE_RECORDED ? 'Nagrywa Cie:' : 'Nagrywasz:';
|
||||
const personLabel = type === SUGGESTION_TYPE.TO_BE_RECORDED ? 'Recording you:' : 'You record:';
|
||||
|
||||
// Status badge
|
||||
const getStatusBadge = () => {
|
||||
@@ -283,21 +283,21 @@ const SuggestionCard = ({ suggestion, type, onAccept, onReject }) => {
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium bg-green-100 text-green-800 rounded">
|
||||
<CheckCircle className="w-3 h-3" />
|
||||
Zaakceptowano
|
||||
Accepted
|
||||
</span>
|
||||
);
|
||||
case SUGGESTION_STATUS.REJECTED:
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium bg-red-100 text-red-800 rounded">
|
||||
<XCircle className="w-3 h-3" />
|
||||
Odrzucono
|
||||
Rejected
|
||||
</span>
|
||||
);
|
||||
case SUGGESTION_STATUS.NOT_FOUND:
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium bg-amber-100 text-amber-800 rounded">
|
||||
<AlertTriangle className="w-3 h-3" />
|
||||
Nie znaleziono
|
||||
Not found
|
||||
</span>
|
||||
);
|
||||
default:
|
||||
@@ -315,7 +315,7 @@ const SuggestionCard = ({ suggestion, type, onAccept, onReject }) => {
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium text-amber-900">{heatInfo}</p>
|
||||
<p className="text-sm text-amber-700">Nie znaleziono dostepnego partnera</p>
|
||||
<p className="text-sm text-amber-700">No available partner found</p>
|
||||
</div>
|
||||
</div>
|
||||
{getStatusBadge()}
|
||||
@@ -352,14 +352,14 @@ const SuggestionCard = ({ suggestion, type, onAccept, onReject }) => {
|
||||
<button
|
||||
onClick={onAccept}
|
||||
className="p-2 text-green-600 hover:bg-green-50 rounded-md transition-colors"
|
||||
title="Akceptuj"
|
||||
title="Accept"
|
||||
>
|
||||
<CheckCircle className="w-5 h-5" />
|
||||
</button>
|
||||
<button
|
||||
onClick={onReject}
|
||||
className="p-2 text-red-600 hover:bg-red-50 rounded-md transition-colors"
|
||||
title="Odrzuc"
|
||||
title="Reject"
|
||||
>
|
||||
<XCircle className="w-5 h-5" />
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user