Skip to content

Commit e9467a2

Browse files
SecurIDSecurID
committed
feat: update all stylings to match flux
1 parent cc45cf5 commit e9467a2

11 files changed

Lines changed: 384 additions & 229 deletions

File tree

‎app/Http/Controllers/PracticeController.php‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,11 +21,24 @@ public function index(): Response
2121
{
2222
/** @var User $user */
2323
$user = Auth::user();
24-
$practices = Practice::query()->where('user_id', $user->id)
24+
$today = now()->startOfDay();
25+
26+
$upcomingPractices = Practice::query()
27+
->where('user_id', $user->id)
28+
->where('date', '>=', $today)
2529
->orderBy('date')
2630
->get();
2731

28-
return response()->view('practices/practices', ['practices' => $practices]);
32+
$pastPractices = Practice::query()
33+
->where('user_id', $user->id)
34+
->where('date', '<', $today)
35+
->orderBy('date', 'desc')
36+
->get();
37+
38+
return response()->view('practices/practices', [
39+
'upcomingPractices' => $upcomingPractices,
40+
'pastPractices' => $pastPractices,
41+
]);
2942
}
3043

3144
public function create(): Response

‎resources/views/components/exercise-single.blade.php‎

Lines changed: 44 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,50 @@
1-
<div class="bg-white overflow-hidden p-6">
2-
<div class="mb-3">
3-
<div class="flex justify-between">
4-
<h5 class="text-2xl"><span class="font-bold">{{$exercise->name}}</span></h5>
5-
<p class="text-lg">{{__('Focus')}}: {{$exercise->focus}}</p>
1+
<div>
2+
<!-- Header with Focus -->
3+
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 mb-6">
4+
<flux:heading size="lg">{{ $exercise->name }}</flux:heading>
5+
@if($exercise->focus)
6+
<flux:badge color="blue" size="sm">{{ __('Focus') }}: {{ $exercise->focus }}</flux:badge>
7+
@endif
8+
</div>
9+
10+
<!-- Image -->
11+
@if($exercise->image)
12+
<div class="flex justify-center mb-6">
13+
<img class="max-w-full md:max-w-2xl rounded-lg shadow-md" src="{{ asset('storage/' . $exercise->image) }}" alt="{{ $exercise->name }}">
614
</div>
7-
@if($exercise->image)
8-
<div class="flex justify-center">
9-
<img class="w-1/2 rounded-md" src="{{ asset('storage/' . $exercise->image) }}" alt="{{$exercise->name}}">
15+
@endif
16+
17+
<!-- Stats -->
18+
<div class="flex flex-wrap gap-3 mb-6">
19+
<flux:badge color="zinc" icon="clock">
20+
{{ __('Duration') }}: {{ $exercise->duration }} {{ __('minutes') }}
21+
</flux:badge>
22+
<flux:badge color="zinc" icon="bolt">
23+
{{ __('Intensity') }}: {{ $exercise->intensity }}%
24+
</flux:badge>
25+
@if($exercise->material)
26+
<flux:badge color="zinc" icon="cube">
27+
{{ __('Material') }}: {{ $exercise->material }}
28+
</flux:badge>
29+
@endif
30+
</div>
31+
32+
<flux:separator class="my-6" />
33+
34+
<!-- Content Grid -->
35+
<div class="grid md:grid-cols-2 gap-6">
36+
@if($exercise->procedure)
37+
<div>
38+
<flux:heading size="sm" class="mb-2">{{ __('Procedure') }}</flux:heading>
39+
<flux:text class="prose dark:prose-invert max-w-none">{!! $exercise->procedure !!}</flux:text>
1040
</div>
1141
@endif
12-
<div class="mt-4">
13-
<hr class="my-2">
14-
<div class="grid md:grid-cols-3 gap-4">
15-
<div><b>{{ __('Procedure') }}:</b>
16-
<pre class="font-sans text-wrap">{!! $exercise->procedure !!}</pre>
17-
</div>
18-
<div><b>{{ __('Coaching') }}:</b>
19-
<pre class="font-sans text-wrap">{!! $exercise->coaching !!}</pre>
20-
</div>
21-
<div>
22-
<p><b>{{ __('Duration') }}:</b> {{$exercise->duration}} {{__('minutes')}}<br>
23-
<b>{{ __('Intensity') }}:</b> {{$exercise->intensity}}%</p>
24-
<b>{{__('Material')}}:</b> {{$exercise->material}}</p>
25-
</div>
42+
43+
@if($exercise->coaching)
44+
<div>
45+
<flux:heading size="sm" class="mb-2">{{ __('Coaching') }}</flux:heading>
46+
<flux:text class="prose dark:prose-invert max-w-none">{!! $exercise->coaching !!}</flux:text>
2647
</div>
27-
</div>
48+
@endif
2849
</div>
2950
</div>

‎resources/views/dashboard.blade.php‎

Lines changed: 55 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,80 @@
11
<x-app-layout>
22
<x-slot name="header">
3-
<div class="flex flex-wrap">
4-
<div class="w-full">
5-
<flux:heading size="xl">
6-
{{ __('Dashboard') }}
7-
</flux:heading>
8-
</div>
9-
</div>
3+
<flux:heading size="xl">
4+
{{ __('Dashboard') }}
5+
</flux:heading>
106
</x-slot>
117

128
<div class="py-12">
13-
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-10">
14-
<div class="bg-white overflow-hidden shadow-xl sm:rounded-lg p-4">
9+
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">
10+
<!-- Next Practice -->
11+
<flux:card>
1512
<flux:heading size="lg" class="mb-4">{{ __('Next Practice') }}</flux:heading>
1613
@if(!$nextPractice)
17-
<flux:text class="text-zinc-600">{{ __('No upcoming practices scheduled.') }}</flux:text>
14+
<flux:text class="text-zinc-500">{{ __('No upcoming practices scheduled.') }}</flux:text>
1815
@else
19-
<flux:link href="{{ route('practices.show', $nextPractice) }}">
20-
{{ $nextPractice->date->format('d.m.Y') }} - {{ $nextPractice->topic }}
21-
</flux:link>
16+
<div class="flex items-center gap-3">
17+
<flux:icon.calendar class="size-5 text-zinc-400" />
18+
<flux:link href="{{ route('practices.show', $nextPractice) }}">
19+
{{ $nextPractice->date->format('d.m.Y') }} - {{ $nextPractice->topic }}
20+
</flux:link>
21+
</div>
2222
@endif
23-
</div>
23+
</flux:card>
2424

25-
<div class="bg-white overflow-hidden shadow-xl sm:rounded-lg p-4">
25+
<!-- Common Actions -->
26+
<flux:card>
2627
<flux:heading size="lg" class="mb-4">{{ __('Common actions') }}</flux:heading>
2728
<div class="flex flex-wrap gap-2">
28-
<flux:button href="{{ route('players.create') }}" variant="primary">
29+
<flux:button href="{{ route('players.create') }}" variant="primary" icon="user-plus">
2930
{{ __('Create Player') }}
3031
</flux:button>
31-
<flux:button href="{{ route('exercises.create') }}" variant="primary">
32+
<flux:button href="{{ route('exercises.create') }}" variant="primary" icon="clipboard-document-list">
3233
{{ __('Create Exercise') }}
3334
</flux:button>
34-
<flux:button href="{{ route('practices.create') }}" variant="primary">
35+
<flux:button href="{{ route('practices.create') }}" variant="primary" icon="calendar-days">
3536
{{ __('Create Practice') }}
3637
</flux:button>
3738
</div>
38-
</div>
39+
</flux:card>
3940

41+
<!-- Onboarding Guide -->
4042
@if(!$player OR !$exercise OR !$practice)
41-
<div class="bg-white overflow-hidden shadow-xl sm:rounded-lg p-4">
42-
<flux:heading size="lg" class="mb-4">{{ __('Onboarding Guide') }}</flux:heading>
43+
<flux:card>
44+
<flux:heading size="lg" class="mb-4">{{ __('Onboarding Guide') }}</flux:heading>
45+
46+
<div class="space-y-3">
47+
<div class="flex items-center gap-3">
48+
@if($player)
49+
<flux:icon.check-circle variant="solid" class="size-5 text-green-500" />
50+
<flux:text class="text-zinc-600 dark:text-zinc-400">{{ __('Create your first player') }}</flux:text>
51+
@else
52+
<flux:icon.check-circle class="size-5 text-zinc-300 dark:text-zinc-600" />
53+
<flux:link href="{{ route('players.create') }}">{{ __('Create your first player') }}</flux:link>
54+
@endif
55+
</div>
56+
57+
<div class="flex items-center gap-3">
58+
@if($exercise)
59+
<flux:icon.check-circle variant="solid" class="size-5 text-green-500" />
60+
<flux:text class="text-zinc-600 dark:text-zinc-400">{{ __('Create your first exercise') }}</flux:text>
61+
@else
62+
<flux:icon.check-circle class="size-5 text-zinc-300 dark:text-zinc-600" />
63+
<flux:link href="{{ route('exercises.create') }}">{{ __('Create your first exercise') }}</flux:link>
64+
@endif
65+
</div>
4366

44-
<ul class="space-y-1 text-zinc-500 list-inside text-lg">
45-
<li class="flex items-center">
46-
<svg @class(['text-zinc-400' => ! $player, 'text-green-500' => $player, 'w-3.5', 'h-3.5', 'me-2', 'flex-shrink-0']) aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
47-
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/>
48-
</svg>
49-
{{ __('Create your first player') }}
50-
</li>
51-
<li class="flex items-center">
52-
<svg @class(['text-zinc-400' => ! $exercise, 'text-green-500' => $exercise, 'w-3.5', 'h-3.5', 'me-2', 'flex-shrink-0']) aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
53-
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/>
54-
</svg>
55-
{{ __('Create your first exercise') }}
56-
</li>
57-
<li class="flex items-center">
58-
<svg @class(['text-zinc-400' => ! $practice, 'text-green-500' => $practice, 'w-3.5', 'h-3.5', 'me-2', 'flex-shrink-0']) aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
59-
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/>
60-
</svg>
61-
{{ __('Create your first practice') }}
62-
</li>
63-
</ul>
64-
</div>
67+
<div class="flex items-center gap-3">
68+
@if($practice)
69+
<flux:icon.check-circle variant="solid" class="size-5 text-green-500" />
70+
<flux:text class="text-zinc-600 dark:text-zinc-400">{{ __('Create your first practice') }}</flux:text>
71+
@else
72+
<flux:icon.check-circle class="size-5 text-zinc-300 dark:text-zinc-600" />
73+
<flux:link href="{{ route('practices.create') }}">{{ __('Create your first practice') }}</flux:link>
74+
@endif
75+
</div>
76+
</div>
77+
</flux:card>
6578
@endif
6679
</div>
6780
</div>

‎resources/views/exercises/exercise-single.blade.php‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,25 @@
11
<x-app-layout>
22
<x-slot name="header">
3-
<div class="flex justify-between">
4-
<x-back-button></x-back-button>
5-
<h2 class="text-xl font-semibold text-gray-800 leading-tight">
6-
{{ $exercise->name }}
7-
</h2>
8-
<div>
3+
<div class="lg:flex sm:space-y-2 justify-between items-center block">
4+
<div class="flex items-center gap-3">
5+
<x-back-button></x-back-button>
6+
<flux:heading size="xl">{{ $exercise->name }}</flux:heading>
7+
</div>
8+
<div class="flex gap-2">
99
@if($exercise->user_id === auth()->id())
10-
<a href="{{ route('exercises.edit', ['exercise' => $exercise]) }}" class="inline-flex items-center px-4 py-2 bg-blue-500 hover:bg-blue-700 text-white rounded">
10+
<flux:button href="{{ route('exercises.edit', ['exercise' => $exercise]) }}" variant="primary" icon="pencil">
1111
{{ __('Edit Exercise') }}
12-
</a>
12+
</flux:button>
1313
@endif
1414
</div>
1515
</div>
1616
</x-slot>
1717

1818
<div class="py-12">
19-
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8 bg-white shadow-xl sm:rounded-lg">
20-
<x-exercise-single :exercise="$exercise"></x-exercise-single>
19+
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
20+
<flux:card>
21+
<x-exercise-single :exercise="$exercise"></x-exercise-single>
22+
</flux:card>
2123
</div>
2224
</div>
2325
</x-app-layout>

‎resources/views/exercises/exercises.blade.php‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<x-app-layout>
22
<x-slot name="header">
3-
<div class="flex justify-between items-center">
3+
<div class="lg:flex sm:space-y-2 justify-between items-center block">
44
<flux:heading size="xl">
55
{{ __('Exercises') }}
66
</flux:heading>
7-
<div>
8-
<flux:button href="/exercises/create" variant="primary">
7+
<div class="flex gap-2">
8+
<flux:button href="{{ route('exercises.create') }}" variant="primary" icon="plus">
99
{{ __('Create Exercise') }}
1010
</flux:button>
1111
</div>
@@ -14,9 +14,9 @@
1414

1515
<div class="py-12">
1616
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
17-
<div class="bg-white overflow-hidden shadow-xl sm:rounded-lg p-6">
18-
<livewire:exercises-filter></livewire:exercises-filter>
19-
</div>
17+
<flux:card>
18+
<livewire:exercises-filter />
19+
</flux:card>
2020
</div>
2121
</div>
2222
</x-app-layout>

‎resources/views/livewire/exercises-filter.blade.php‎

Lines changed: 39 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,47 @@
11
<div>
2-
<div class="flex flex-wrap -mx-1 lg:-mx-4 mb-5" id="myTab" role="tablist">
3-
<a href="#" wire:click.prevent="filterByCategory('all')"
4-
class="m-1 py-2 px-4 inline-block rounded-lg text-sm font-medium leading-5 transition duration-150 ease-in-out border hover:bg-blue-100 focus:outline-none focus:shadow-outline {{ $selectedCategoryId == 'all' ? 'bg-blue-500 text-white border-blue-500 hover:bg-blue-600' : 'text-blue-700 bg-white border-gray-300 hover:text-blue-800' }}">
2+
<!-- Category Filter -->
3+
<div class="flex flex-wrap gap-2 mb-6">
4+
<flux:button
5+
wire:click="filterByCategory('all')"
6+
:variant="$selectedCategoryId == 'all' ? 'primary' : 'filled'"
7+
size="sm"
8+
>
59
{{ __('All') }}
6-
</a>
7-
@foreach($categories as $category)
8-
<a href="#" wire:click.prevent="filterByCategory('{{ $category->id }}')"
9-
class="m-1 py-2 px-4 inline-block rounded-lg text-sm font-medium leading-5 transition duration-150 ease-in-out border hover:bg-blue-100 focus:outline-none focus:shadow-outline {{ $selectedCategoryId == $category->id ? 'bg-blue-500 text-white border-blue-500 hover:bg-blue-600' : 'text-blue-700 bg-white border-gray-300 hover:text-blue-800' }}">
10+
</flux:button>
11+
@foreach($categories as $category)
12+
<flux:button
13+
wire:click="filterByCategory('{{ $category->id }}')"
14+
:variant="$selectedCategoryId == $category->id ? 'primary' : 'filled'"
15+
size="sm"
16+
>
1017
{{ __($category->name) }}
11-
</a>
18+
</flux:button>
1219
@endforeach
1320
</div>
1421

15-
<div class="grid grid-cols-1 md:grid-cols-4 lg:grid-cols-5 gap-4">
16-
@foreach ($exercises as $exercise)
17-
<div class="card rounded overflow-hidden shadow-lg relative">
18-
<a href="{{ route('exercises.show', ['exercise' => $exercise]) }}">
19-
@if($exercise->image)
20-
<img class="w-full" src="{{ asset('storage/' . $exercise->image) }}" alt="{{ $exercise->name }}">
21-
@endif
22-
<div class="px-6 py-4">
23-
<div class="font-bold text-xl mb-2">{{ $exercise->name }}</div>
24-
<p>{{__('Duration')}}: {{ $exercise->duration }} {{ __('minutes') }}</p>
25-
<p>{{__('Intensity')}}: {{ $exercise->intensity }}%</p>
26-
</div>
22+
<!-- Exercises Grid -->
23+
@if(count($exercises) === 0)
24+
<flux:text class="text-zinc-500">{{ __('No exercises found.') }} {{ __('Create one by clicking on "Create Exercise".') }}</flux:text>
25+
@else
26+
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4">
27+
@foreach ($exercises as $exercise)
28+
<a href="{{ route('exercises.show', ['exercise' => $exercise]) }}" class="block group" wire:key="exercise-{{ $exercise->id }}">
29+
<flux:card class="h-full overflow-hidden transition-shadow group-hover:shadow-lg">
30+
@if($exercise->image)
31+
<img class="w-full h-40 object-cover -mt-6 -mx-6 mb-4" style="width: calc(100% + 3rem);" src="{{ asset('storage/' . $exercise->image) }}" alt="{{ $exercise->name }}">
32+
@endif
33+
<flux:heading size="sm" class="mb-2">{{ $exercise->name }}</flux:heading>
34+
<div class="flex flex-wrap gap-2">
35+
<flux:badge color="zinc" size="sm" icon="clock">
36+
{{ $exercise->duration }} {{ __('min') }}
37+
</flux:badge>
38+
<flux:badge color="zinc" size="sm" icon="bolt">
39+
{{ $exercise->intensity }}%
40+
</flux:badge>
41+
</div>
42+
</flux:card>
2743
</a>
28-
</div>
29-
@endforeach
30-
</div>
44+
@endforeach
45+
</div>
46+
@endif
3147
</div>

0 commit comments

Comments
 (0)