fix: design tweaks

Vatsim-Scandinavia · Aug 2, 2024 · e3bb2fa · e3bb2fa
1 parent 13024c5
commit e3bb2fa
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 69 deletions.
diff --git a/resources/views/calendar/show.blade.php b/resources/views/calendar/show.blade.php
@@ -6,14 +6,12 @@
     </style>
 @endsection
 @section('content')
-    <div class="mt-5">
-        <div class="card mt-5 shadow-sm">
-            <div class="card-header bg-primary text-white">
-                <h5 class="m-0">{{ $calendar->name }}</h5>
-            </div>
-            <div class="card-body">
-                <div id='calendar'></div>
-            </div>
+    <div class="card shadow-sm">
+        <div class="card-header bg-primary text-white">
+            <h5 class="m-0">{{ $calendar->name }}</h5>
+        </div>
+        <div class="card-body">
+            <div id='calendar'></div>
         </div>
     </div>
 

diff --git a/resources/views/events/show.blade.php b/resources/views/events/show.blade.php
@@ -1,41 +1,36 @@
 @extends('layouts.app')
 @section('title', $event->title)
 @section('content')
-    <div class="container mt-5">
-        <div class="card shadow mb-4">
-            <div class="card-body text-center">
-                <h1 class="card-title">{{ $event->title }}</h1>
-                <p class="card-text text-muted">Hosted <a href="{{ route('calendar', $event->calendar->id) }}" class="card-link">{{ $event->calendar->name }}</a></p>
-            </div>
-        </div>
+
+    <div style="width: 1000px;">
 
         @if($event->image)
-        <div class="card shadow mb-4">
-            <div class="card-body text-center">
-                <img src="{{ asset('storage/banners/' . $event->image) }}" alt="{{ $event->title }}" class="img-fluid">
-            </div>
-        </div>
+            <img src="{{ asset('storage/banners/' . $event->image) }}" alt="{{ $event->title }}" class="img-fluid">
         @endif
 
-        <div class="card shadow mb-4">
-            <div class="card-body">
-                <h2 class="card-title">Description</h2>
-                <p class="card-text">@markdown($event->description)</p>
-            </div>
+        <div class="mt-4">
+            <i class="fas fa-clock"></i>
+            <strong>Start:</strong>
+            {{ \Carbon\Carbon::parse($event->start_date)->format('F j, Y, H:i') }}z
         </div>
 
-        <div class="card shadow mb-4">
-            <div class="card-body">
-                <h2 class="card-title">Details</h2>
-                <ul class="list-group list-group-flush">
-                    <li class="list-group-item"><strong>Start Date:</strong> {{ \Carbon\Carbon::parse($event->start_date)->format('F j, Y, H:i') }}z</li>
-                    <li class="list-group-item"><strong>End Date:</strong> {{ \Carbon\Carbon::parse($event->end_date)->format('F j, Y, H:i') }}z</li>
-                    @if($event->recurrence_interval)
-                        <li class="list-group-item"><strong>Recurrence:</strong> Every {{ $event->recurrence_interval }} {{ Str::plural($event->recurrence_unit, $event->recurrence_interval) }}</li>
-                        <li class="list-group-item"><strong>Recurrence End Date:</strong> {{ \Carbon\Carbon::parse($event->recurrence_end_date)->format('F j, Y, H:i') }}z</li>
-                    @endif
-                </ul>
-            </div>
+        <div class="mb-4">
+            <i class="fas fa-clock"></i>
+            <strong>End:</strong>
+            {{ \Carbon\Carbon::parse($event->end_date)->format('F j, Y, H:i') }}z
         </div>
+
+        @if($event->recurrence_interval)
+            <div>
+                <i class="fas fa-calendar-alt"></i>
+                <strong>Recurrence:</strong> Every {{ $event->recurrence_interval }} {{ Str::plural($event->recurrence_unit, $event->recurrence_interval) }}
+            </div>
+            <div>
+                <i class="fas fa-calendar-alt"></i>
+                <strong>Recurrence End Date:</strong> {{ \Carbon\Carbon::parse($event->recurrence_end_date)->format('F j, Y, H:i') }}z
+            </div>
+        @endif
+
+        <p class="card-text">@markdown($event->long_description)</p>
     </div>
 @endsection
diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php
@@ -1,41 +1,40 @@
 @extends('layouts.app')
 @section('title', 'Home')
 @section('content')
-    <div class="mt-5">
+    <div class="card shadow-sm">
+        <div class="card-header bg-primary text-white">
+            <h5 class="m-0">Upcoming Events</h5>
+        </div>
+        <div class="card-body">
+            <ul class="list-group list-group-flush">
+                @if ($upcomingEvents->isNotEmpty())
+                    @foreach($upcomingEvents as $event)
+                        <li class="list-group-item d-flex justify-content-between align-items-center">
+                            <img src={{ asset('storage/banners/' . $event->image) }} height="100">
+                            <span>{{ $event->title }}</span>
+                            <div>
+                                <a href="{{ route('events.show', $event->id) }}" class="btn btn-info btn-sm">View Event</a>
+                                <a href="{{ route('calendar', $event->calendar) }}" class="btn btn-secondary btn-sm">View Calendar</a>
+                            </div>
+                        </li>
+                    @endforeach
+                @else
+                    <span>No Events Available</span>
+                @endif
+            </ul>
+        </div>
+    </div>
+
+    @if ($calendar)
         <div class="card mt-5 shadow-sm">
             <div class="card-header bg-primary text-white">
-                <h5 class="m-0">Upcoming Events</h5>
+                <h5 class="m-0">{{ $calendar->name }}</h5>
             </div>
             <div class="card-body">
-                <ul class="list-group list-group-flush">
-                    @if ($upcomingEvents->isNotEmpty())
-                        @foreach($upcomingEvents as $event)
-                            <li class="list-group-item d-flex justify-content-between align-items-center">
-                                <span>{{ $event->title }}</span>
-                                <div>
-                                    <a href="{{ route('events.show', $event->id) }}" class="btn btn-info btn-sm">View Event</a>
-                                    <a href="{{ route('calendar', $event->calendar) }}" class="btn btn-secondary btn-sm">View Calendar</a>
-                                </div>
-                            </li>
-                        @endforeach
-                    @else
-                        <span>No Events Available</span>
-                    @endif
-                </ul>
+                <div id="calendar"></div>
             </div>
         </div>
-
-        @if ($calendar)
-            <div class="card mt-5 shadow-sm">
-                <div class="card-header bg-primary text-white">
-                    <h5 class="m-0">{{ $calendar->name }}</h5>
-                </div>
-                <div class="card-body">
-                    <div id="calendar"></div>
-                </div>
-            </div>
-        @endif
-    </div>
+    @endif
 
     <footer class="text-center mt-5 mb-3">
         <a href="https://github.com/Vatsim-Scandinavia/events" target="_blank">Event Manager v{{ config('app.version') }}</a>

diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
@@ -10,7 +10,21 @@
         <div class="row">
             <div class="col-lg-12 margin-tb">
                 <div class="d-sm-flex align-items-center justify-content-between mb-4">
-                    <h1 class="h3 mb-0 text-gray-800">@yield('title', 'Page Title')</h1>
+                    @php
+
+                        $icon = '';
+                        if(Route::is('home')){
+                            $icon = 'fas fa-home';
+                        } elseif(Route::is('calendar*')){
+                            $icon = 'fas fa-calendar-alt';
+                        } elseif(Route::is('events*')){
+                            $icon = 'fas fa-calendar-day';
+                        } elseif(Route::is('user*')){
+                            $icon = 'fas fa-users';
+                        }
+
+                    @endphp
+                    <h1 class="h3 mb-0 text-primary"><i class="{{ $icon }}"></i> @yield('title', 'Page Title')</h1>
                     @yield('title-flex')
                 </div>
             </div>

diff --git a/resources/views/users/index.blade.php b/resources/views/users/index.blade.php
@@ -4,8 +4,8 @@
     <div class="row">
         <div class="col-xl-12 col-md-12 mb-12">
             <div class="card shadow mb-4">
-                <div class="card-header bg-primary py-3 d-flex flex-row align-items-center justify-content-center">
-                    <h6 class="m-0 fw-bold text-white">Event Overview</h6> 
+                <div class="card-header bg-primary py-3 d-flex flex-row align-items-center">
+                    <h6 class="m-0 fw-bold text-white">Users</h6> 
                 </div>
 
                 <div class="card-body p-0">