style: Improved button placement

vanguardbackup · Jul 28, 2024 · 288afb1 · 288afb1
1 parent f0c5563
commit 288afb1
Show file tree

Hide file tree

Showing 23 changed files with 241 additions and 264 deletions.
diff --git a/resources/views/account/partials/account-wrapper.blade.php b/resources/views/account/partials/account-wrapper.blade.php
@@ -1,21 +1,20 @@
-@props(['pageTitle' => __('Account')])
+@props(['pageTitle' => __('Account'), 'action' => null])
 @section('title', $pageTitle)
 <x-app-layout>
     <x-slot name="header">
-        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
-            {{ $pageTitle }}
-        </h2>
+        {{ $pageTitle }}
     </x-slot>
-    <div class="py-6 sm:py-8 lg:py-12">
-        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-            <div class="flex flex-col lg:flex-row gap-6 lg:gap-8">
-                <nav class="w-full lg:w-64 xl:w-72 shrink-0">
-                    <x-account-sidebar/>
-                </nav>
-                <main class="flex-1 min-w-0">
-                    {{ $slot }}
-                </main>
-            </div>
+    <div class="pb-8 md:pb-16">
+        <div class="flex flex-col lg:flex-row gap-6 lg:gap-8">
+            <nav class="w-full lg:w-64 xl:w-72 shrink-0 mt-3 md:mt-0">
+                <x-account-sidebar/>
+            </nav>
+            <main class="flex-1 min-w-0">
+                <x-slot name="action">
+                    {{ $action }}
+                </x-slot>
+                {{ $slot }}
+            </main>
         </div>
     </div>
 </x-app-layout>
diff --git a/resources/views/backup-destinations/create.blade.php b/resources/views/backup-destinations/create.blade.php
@@ -1,14 +1,7 @@
 @section('title',  __('Add Backup Destination'))
 <x-app-layout>
     <x-slot name="header">
-        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
-            {{ __('Add Backup Destination') }}
-        </h2>
+        {{ __('Add Backup Destination') }}
     </x-slot>
-
-    <div class="py-6">
-        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
-            @livewire('backup-destinations.create-backup-destination-form')
-        </div>
-    </div>
+    @livewire('backup-destinations.create-backup-destination-form')
 </x-app-layout>
diff --git a/resources/views/backup-destinations/edit.blade.php b/resources/views/backup-destinations/edit.blade.php
@@ -1,15 +1,8 @@
 @section('title', __('Update Backup Destination'))
 <x-app-layout>
     <x-slot name="header">
-        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
-            {{ __('Update Backup Destination') }}
-        </h2>
+        {{ __('Update Backup Destination') }}
     </x-slot>
-
-    <div class="py-6">
-        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
-            @livewire('backup-destinations.update-backup-destination-form', ['backupDestination' => $backupDestination])
-            @livewire('backup-destinations.delete-backup-destination-form', ['backupDestination' => $backupDestination])
-        </div>
-    </div>
+    @livewire('backup-destinations.update-backup-destination-form', ['backupDestination' => $backupDestination])
+    @livewire('backup-destinations.delete-backup-destination-form', ['backupDestination' => $backupDestination])
 </x-app-layout>
diff --git a/resources/views/backup-destinations/index.blade.php b/resources/views/backup-destinations/index.blade.php
@@ -1,23 +1,16 @@
 @section('title', __('Backup Destinations'))
 <x-app-layout>
     <x-slot name="header">
-        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
-            {{ __('Backup Destinations') }}
-        </h2>
+        {{ __('Backup Destinations') }}
     </x-slot>
-
-    <div class="py-4 sm:py-6">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            @if (!Auth::user()->backupDestinations->isEmpty())
-                <div class="mb-4 sm:mb-6 flex justify-center sm:justify-end">
-                    <a href="{{ route('backup-destinations.create') }}" wire:navigate class="w-full sm:w-auto">
-                        <x-primary-button class="w-full sm:w-auto justify-center">
-                            {{ __('Add Backup Destination') }}
-                        </x-primary-button>
-                    </a>
-                </div>
-            @endif
-            @livewire('backup-destinations.index-table')
-        </div>
-    </div>
+    <x-slot name="action">
+        @if (!Auth::user()->backupDestinations->isEmpty())
+            <a href="{{ route('backup-destinations.create') }}" wire:navigate>
+                <x-primary-button centered>
+                    {{ __('Add Backup Destination') }}
+                </x-primary-button>
+            </a>
+        @endif
+    </x-slot>
+    @livewire('backup-destinations.index-table')
 </x-app-layout>
diff --git a/resources/views/backup-tasks/edit.blade.php b/resources/views/backup-tasks/edit.blade.php
@@ -1,16 +1,10 @@
 @section('title', __('Update Backup Task'))
 <x-app-layout>
     <x-slot name="header">
-        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
-            {{ __('Update Backup Task') }}
-        </h2>
+        {{ __('Update Backup Task') }}
     </x-slot>
-
-    <div class="py-6">
-        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
-            @livewire('backup-tasks.forms.update-backup-task-form', ['backupTask' => $backupTask])
-            @livewire('backup-tasks.forms.delete-backup-task-form', ['backupTask' => $backupTask])
-
-        </div>
+    <div>
+        @livewire('backup-tasks.forms.update-backup-task-form', ['backupTask' => $backupTask])
+        @livewire('backup-tasks.forms.delete-backup-task-form', ['backupTask' => $backupTask])
     </div>
 </x-app-layout>
diff --git a/resources/views/components/layouts/account-app.blade.php b/resources/views/components/layouts/account-app.blade.php
@@ -1,6 +1,11 @@
 @section('title', $header )
-<x-account-wrapper pageTitle=" {{ $header }}">
-    <div class="py-4 sm:py-6">
+<x-account-wrapper pageTitle="{{ $header }}">
+    @if(isset($action))
+        <x-slot name="action">
+           {{ $action }}
+        </x-slot>
+    @endif
+    <div>
         {{ $slot }}
     </div>
 </x-account-wrapper>
diff --git a/resources/views/components/layouts/app.blade.php b/resources/views/components/layouts/app.blade.php
@@ -1,11 +1,13 @@
 <x-app-layout>
     @isset($header)
         <x-slot name="header">
-            <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
-                {{ $header }}
-            </h2>
+            {{ $header }}
+        </x-slot>
+    @endisset
+    @isset($action)
+        <x-slot name="action">
+            {{ $action }}
         </x-slot>
     @endisset
-
     {{ $slot }}
 </x-app-layout>
diff --git a/resources/views/dashboard.blade.php b/resources/views/dashboard.blade.php
@@ -6,13 +6,12 @@
 <x-app-layout>
     @if (Auth::user()->backupTasks->isNotEmpty())
         <x-slot name="header">
-            <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
-                {{ __('Overview') }}
-            </h2>
+            {{ __('Overview') }}
         </x-slot>
-        <div class="py-6 px-4 mx-auto max-w-full sm:max-w-6xl">
+        <div>
             <div class="mb-6">
-                <div x-data="{ loaded: false }" x-init="setTimeout(() => loaded = true, 1000)" class="flex flex-col sm:flex-row items-center bg-white dark:bg-gray-800 rounded-lg shadow-sm p-4">
+                <div x-data="{ loaded: false }" x-init="setTimeout(() => loaded = true, 1000)"
+                     class="flex flex-col sm:flex-row items-center bg-white dark:bg-gray-800 rounded-lg shadow-sm p-4">
                     <div class="relative h-16 w-16">
                         <div
                             x-show="!loaded"
@@ -29,23 +28,32 @@ class="h-16 w-16 rounded-full border-2 border-primary-200 dark:border-primary-70
                     </div>
                     <div class="ml-4 mt-4 sm:mt-0 text-center sm:text-left">
                         <h3 x-show="!loaded" class="h-8 w-48 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></h3>
-                        <h3 x-show="loaded" x-transition:enter="transition-opacity duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" class="font-semibold text-2xl text-gray-900 dark:text-gray-100">
+                        <h3 x-show="loaded" x-transition:enter="transition-opacity duration-300"
+                            x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
+                            class="font-semibold text-2xl text-gray-900 dark:text-gray-100">
                             {{ \App\Facades\Greeting::auto(Auth::user()->timezone) }}, {{ Auth::user()->first_name }}!
                         </h3>
-                        <p x-show="!loaded" class="h-4 w-64 mt-2 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></p>
-                        <p x-show="loaded" x-transition:enter="transition-opacity duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" class="text-gray-600 dark:text-gray-400 mt-1">
+                        <p x-show="!loaded"
+                           class="h-4 w-64 mt-2 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></p>
+                        <p x-show="loaded" x-transition:enter="transition-opacity duration-300"
+                           x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
+                           class="text-gray-600 dark:text-gray-400 mt-1">
                             {{ trans_choice(':count backup task has|:count backup tasks have', Auth::user()->backupTasklogCountToday(), ['count' => Auth::user()->backupTasklogCountToday()]) }} {{ __('been run today.') }}
                         </p>
                     </div>
                 </div>
             </div>
             <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                <div x-data="{ loaded: false }" x-init="setTimeout(() => loaded = true, 1500)" class="bg-white dark:bg-gray-800 rounded-lg shadow-sm overflow-hidden transition duration-300 ease-in-out hover:shadow-md">
+                <div x-data="{ loaded: false }" x-init="setTimeout(() => loaded = true, 1500)"
+                     class="bg-white dark:bg-gray-800 rounded-lg shadow-sm overflow-hidden transition duration-300 ease-in-out hover:shadow-md">
                     <div class="px-6 py-5">
                         <div class="flex items-center">
                             <div class="flex-shrink-0 bg-primary-100 dark:bg-primary-800 rounded-full p-3 mr-4">
-                                <svg class="h-6 w-6 text-primary-600 dark:text-primary-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                                <svg class="h-6 w-6 text-primary-600 dark:text-primary-400"
+                                     xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                     stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                          d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                 </svg>
                             </div>
                             <div>
@@ -60,18 +68,23 @@ class="h-16 w-16 rounded-full border-2 border-primary-200 dark:border-primary-70
                     </div>
                     <div class="border-t border-gray-200 dark:border-gray-700 px-6 py-5">
                         <div x-show="!loaded" class="h-64 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
-                        <div x-show="loaded" x-transition:enter="transition-opacity duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" class="h-64">
+                        <div x-show="loaded" x-transition:enter="transition-opacity duration-300"
+                             x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" class="h-64">
                             <canvas id="totalBackupsPerMonth"></canvas>
                         </div>
                     </div>
                 </div>
 
-                <div x-data="{ loaded: false }" x-init="setTimeout(() => loaded = true, 1500)" class="bg-white dark:bg-gray-800 rounded-lg shadow-sm overflow-hidden transition duration-300 ease-in-out hover:shadow-md">
+                <div x-data="{ loaded: false }" x-init="setTimeout(() => loaded = true, 1500)"
+                     class="bg-white dark:bg-gray-800 rounded-lg shadow-sm overflow-hidden transition duration-300 ease-in-out hover:shadow-md">
                     <div class="px-6 py-5">
                         <div class="flex items-center">
                             <div class="flex-shrink-0 bg-primary-100 dark:bg-primary-800 rounded-full p-3 mr-4">
-                                <svg class="h-6 w-6 text-primary-600 dark:text-primary-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
+                                <svg class="h-6 w-6 text-primary-600 dark:text-primary-400"
+                                     xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                     stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                          d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"/>
                                 </svg>
                             </div>
                             <div>
@@ -86,7 +99,8 @@ class="h-16 w-16 rounded-full border-2 border-primary-200 dark:border-primary-70
                     </div>
                     <div class="border-t border-gray-200 dark:border-gray-700 px-6 py-5">
                         <div x-show="!loaded" class="h-64 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
-                        <div x-show="loaded" x-transition:enter="transition-opacity duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" class="h-64">
+                        <div x-show="loaded" x-transition:enter="transition-opacity duration-300"
+                             x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" class="h-64">
                             <canvas id="backupTasksByType"></canvas>
                         </div>
                     </div>
@@ -127,10 +141,10 @@ function createCharts() {
                             },
                             scales: {
                                 x: {
-                                    ticks: { color: textColor }
+                                    ticks: {color: textColor}
                                 },
                                 y: {
-                                    ticks: { color: textColor }
+                                    ticks: {color: textColor}
                                 }
                             }
                         },
@@ -171,21 +185,21 @@ function createCharts() {
                             },
                             scales: {
                                 x: {
-                                    ticks: { color: textColor }
+                                    ticks: {color: textColor}
                                 },
                                 y: {
-                                    ticks: { color: textColor }
+                                    ticks: {color: textColor}
                                 }
                             }
                         },
                     });
 
-                    return { totalBackupsPerMonth, backupTasksByType };
+                    return {totalBackupsPerMonth, backupTasksByType};
                 }
 
                 let charts = createCharts();
 
-                window.addEventListener('themeChanged', function(event) {
+                window.addEventListener('themeChanged', function (event) {
                     charts.totalBackupsPerMonth.destroy();
                     charts.backupTasksByType.destroy();
                     charts = createCharts();