Skip to content

Commit

Permalink
fix: Made forms etc mobile friendly
Browse files Browse the repository at this point in the history
  • Loading branch information
@lewislarsen
lewislarsen committed Jul 15, 2024
1 parent ea0dba6 commit 05b1fab
Show file tree
Hide file tree
Showing 16 changed files with 219 additions and 192 deletions.
20 changes: 10 additions & 10 deletions resources/views/account/partials/account-wrapper.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,14 @@
{{ $pageTitle }}
</h2>
</x-slot>
<div class="mx-auto max-w-7xl">
<div class="flex flex-col lg:flex-row xl:mt-8">
<nav class="relative mb-4 flex h-24 w-full lg:mb-0 lg:block lg:h-auto lg:w-1/6 lg:pr-2">
<x-account-sidebar />
</nav>
<div class="flex flex-col lg:w-5/6">
{{ $slot }}
</div>
</div>
</div>
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div class="flex flex-col lg:flex-row xl:mt-8">
<nav class="relative mb-4 w-full lg:mb-0 lg:w-1/5 xl:w-1/6 lg:pr-6">
<x-account-sidebar />
</nav>
<div class="flex flex-col lg:w-4/5 xl:w-5/6">
{{ $slot }}
</div>
</div>
</div>
</x-app-layout>
52 changes: 37 additions & 15 deletions resources/views/account/partials/sidebar.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,37 @@
<div
class="pg:pb-0 scroll-hidden flex h-24 overflow-x-scroll px-8 pb-4 lg:block lg:h-auto lg:justify-normal lg:space-y-3.5 lg:overflow-x-visible lg:px-0">
<x-sidebar-nav-link :href="route('profile')" :active="request()->routeIs('profile')" wire:navigate>
@svg('heroicon-o-user', 'h-5 w-5 mr-2 inline')
{{ __('Profile') }}
</x-sidebar-nav-link>
<x-sidebar-nav-link :href="route('tags.index')" :active="request()->routeIs('tags.index')" wire:navigate>
@svg('heroicon-o-tag', 'h-5 w-5 mr-2 inline')
{{ __('Tags') }}
</x-sidebar-nav-link>
<x-sidebar-nav-link :href="route('account.remove-account')" :active="request()->routeIs('account.remove-account')" wire:navigate>
@svg('heroicon-o-trash', 'h-5 w-5 mr-2 inline')
{{ __('Remove Account') }}
</x-sidebar-nav-link>
</div>
<nav class="bg-gray-100 dark:bg-gray-800 rounded-lg p-1.5 lg:p-3 w-full">
<ul class="flex lg:flex-col space-x-1 lg:space-x-0 lg:space-y-2 justify-center lg:justify-start">
<li class="flex-1 lg:flex-none">
<x-sidebar-nav-link :href="route('profile')" :active="request()->routeIs('profile')" wire:navigate>
<span class="lg:hidden flex items-center justify-center h-10">
@svg('heroicon-o-user', 'h-5 w-5')
</span>
<span class="hidden lg:inline-flex items-center w-full">
@svg('heroicon-o-user', 'h-5 w-5 mr-3')
{{ __('Profile') }}
</span>
</x-sidebar-nav-link>
</li>
<li class="flex-1 lg:flex-none">
<x-sidebar-nav-link :href="route('tags.index')" :active="request()->routeIs('tags.index')" wire:navigate>
<span class="lg:hidden flex items-center justify-center h-10">
@svg('heroicon-o-tag', 'h-5 w-5')
</span>
<span class="hidden lg:inline-flex items-center w-full">
@svg('heroicon-o-tag', 'h-5 w-5 mr-3')
{{ __('Tags') }}
</span>
</x-sidebar-nav-link>
</li>
<li class="flex-1 lg:flex-none">
<x-sidebar-nav-link :href="route('account.remove-account')" :active="request()->routeIs('account.remove-account')" wire:navigate>
<span class="lg:hidden flex items-center justify-center h-10">
@svg('heroicon-o-trash', 'h-5 w-5')
</span>
<span class="hidden lg:inline-flex items-center w-full">
@svg('heroicon-o-trash', 'h-5 w-5 mr-3')
{{ __('Remove Account') }}
</span>
</x-sidebar-nav-link>
</li>
</ul>
</nav>
18 changes: 9 additions & 9 deletions resources/views/backup-destinations/index.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,16 @@
</h2>
</x-slot>

<div class="py-6">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<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="flex justify-end">
<a href="{{ route('backup-destinations.create') }}" wire:navigate>
<x-primary-button>
{{ __('Add Backup Destination') }}
</x-primary-button>
</a>
</div>
<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>
Expand Down
8 changes: 5 additions & 3 deletions resources/views/components/sidebar-nav-link.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
@props(['active'])

@php
$classes = ($active ?? false)
? 'block text-gray-900 dark:text-gray-100 font-medium transition duration-150 ease-in-out'
: 'block text-gray-500 hover:text-gray-700 hover:font-medium dark:text-gray-300 dark:hover:text-gray-200 font-normal transition duration-150 ease-in-out';
$classes = 'block rounded-md text-sm font-medium transition-colors duration-150 ease-in-out w-full ';
$classes .= ($active ?? false)
? 'bg-white dark:bg-gray-700 text-gray-950 dark:text-gray-200 shadow-none'
: 'text-gray-700 dark:text-gray-300 hover:bg-white dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-gray-400';
$classes .= ' py-2 px-3 lg:py-2.5 lg:px-3'; // Added padding here
@endphp

<a {{ $attributes->merge(['class' => $classes]) }}>
Expand Down
30 changes: 15 additions & 15 deletions resources/views/livewire/backup-destinations/create-backup-destination-form.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
<div>
<x-form-wrapper>
<form wire:submit="submit">
<div class="mt-4 flex space-x-6">
<div class="w-3/6">
<div class="mt-4 flex flex-col md:flex-row md:space-x-6 space-y-4 md:space-y-0">
<div class="w-full md:w-3/6">
<x-input-label for="label" :value="__('Label')"/>
<x-text-input id="label" class="block mt-1 w-full" type="text" wire:model="label" name="label"
autofocus/>
<x-input-error :messages="$errors->get('label')" class="mt-2"/>
</div>
<div class="w-3/6">
<div class="w-full md:w-3/6">
<x-input-label for="type" :value="__('Type')"/>
<x-select id="type" class="block mt-1 w-full" wire:model.live="type" name="type">
<option value="s3">{{ __('Amazon S3') }}</option>
Expand All @@ -19,28 +19,28 @@
</div>
</div>
@if ($type === \App\Models\BackupDestination::TYPE_CUSTOM_S3 || $type === \App\Models\BackupDestination::TYPE_S3)
<div class="mt-4 flex space-x-6">
<div class="w-3/6">
<div class="mt-4 flex flex-col md:flex-row md:space-x-6 space-y-4 md:space-y-0">
<div class="w-full md:w-3/6">
<x-input-label for="s3AccessKey" :value="__('Access Key')"/>
<x-text-input id="s3AccessKey" class="block mt-1 w-full" type="text" wire:model="s3AccessKey"
name="s3AccessKey"/>
<x-input-error :messages="$errors->get('s3AccessKey')" class="mt-2"/>
</div>
<div class="w-3/6">
<div class="w-full md:w-3/6">
<x-input-label for="s3SecretKey" :value="__('Secret Key')"/>
<x-text-input id="s3SecretKey" class="block mt-1 w-full" type="text" wire:model="s3SecretKey"
name="s3SecretKey"/>
<x-input-error :messages="$errors->get('s3SecretKey')" class="mt-2"/>
</div>
</div>
<div class="mt-4 flex space-x-6">
<div class="w-3/6">
<div class="mt-4 flex flex-col md:flex-row md:space-x-6 space-y-4 md:space-y-0">
<div class="w-full md:w-3/6">
<x-input-label for="s3BucketName" :value="__('Bucket Name')"/>
<x-text-input id="s3BucketName" class="block mt-1 w-full" type="text" wire:model="s3BucketName"
name="s3BucketName"/>
<x-input-error :messages="$errors->get('s3BucketName')" class="mt-2"/>
</div>
<div class="w-3/6">
<div class="w-full md:w-3/6">
<x-input-label for="customS3Region" :value="__('Region')"/>
<x-text-input id="customS3Region" class="block mt-1 w-full" type="text"
wire:model="customS3Region"
Expand Down Expand Up @@ -75,15 +75,15 @@
</div>
@endif
<div class="mt-6 max-w-3xl mx-auto">
<div class="flex space-x-5">
<div class="w-4/6">
<x-primary-button type="submit" class="mt-4" centered action="submit">
<div class="flex flex-col sm:flex-row sm:space-x-5 space-y-4 sm:space-y-0">
<div class="w-full sm:w-4/6">
<x-primary-button type="submit" class="w-full justify-center" centered action="submit">
{{ __('Save') }}
</x-primary-button>
</div>
<div class="w-2/6 ml-2">
<a href="{{ route('backup-destinations.index') }}" wire:navigate>
<x-secondary-button type="button" class="mt-4" centered>
<div class="w-full sm:w-2/6">
<a href="{{ route('backup-destinations.index') }}" wire:navigate class="block">
<x-secondary-button type="button" class="w-full justify-center" centered>
{{ __('Cancel') }}
</x-secondary-button>
</a>
Expand Down
30 changes: 15 additions & 15 deletions resources/views/livewire/backup-destinations/update-backup-destination-form.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
<div>
<x-form-wrapper>
<form wire:submit="submit">
<div class="mt-4 flex space-x-6">
<div class="w-3/6">
<div class="mt-4 flex flex-col sm:flex-row sm:space-x-6 space-y-4 sm:space-y-0">
<div class="w-full sm:w-3/6">
<x-input-label for="label" :value="__('Label')"/>
<x-text-input id="label" class="block mt-1 w-full" type="text" wire:model="label" name="label"
autofocus/>
<x-input-error :messages="$errors->get('label')" class="mt-2"/>
</div>
<div class="w-3/6">
<div class="w-full sm:w-3/6">
<x-input-label for="type" :value="__('Type')"/>
<x-select id="type" class="block mt-1 w-full" wire:model.live="type" name="type">
<option value="s3">{{ __('Amazon S3') }}</option>
Expand All @@ -19,28 +19,28 @@
</div>
</div>
@if ($type === \App\Models\BackupDestination::TYPE_CUSTOM_S3 || $type === \App\Models\BackupDestination::TYPE_S3)
<div class="mt-4 flex space-x-6">
<div class="w-3/6">
<div class="mt-4 flex flex-col sm:flex-row sm:space-x-6 space-y-4 sm:space-y-0">
<div class="w-full sm:w-3/6">
<x-input-label for="s3AccessKey" :value="__('Access Key')"/>
<x-text-input id="s3AccessKey" class="block mt-1 w-full" type="text" wire:model="s3AccessKey"
name="s3AccessKey"/>
<x-input-error :messages="$errors->get('s3AccessKey')" class="mt-2"/>
</div>
<div class="w-3/6">
<div class="w-full sm:w-3/6">
<x-input-label for="s3SecretKey" :value="__('Secret Key')"/>
<x-text-input id="s3SecretKey" class="block mt-1 w-full" type="text" wire:model="s3SecretKey"
name="s3SecretKey"/>
<x-input-error :messages="$errors->get('s3SecretKey')" class="mt-2"/>
</div>
</div>
<div class="mt-4 flex space-x-6">
<div class="w-3/6">
<div class="mt-4 flex flex-col sm:flex-row sm:space-x-6 space-y-4 sm:space-y-0">
<div class="w-full sm:w-3/6">
<x-input-label for="s3BucketName" :value="__('Bucket Name')"/>
<x-text-input id="s3BucketName" class="block mt-1 w-full" type="text" wire:model="s3BucketName"
name="s3BucketName"/>
<x-input-error :messages="$errors->get('s3BucketName')" class="mt-2"/>
</div>
<div class="w-3/6">
<div class="w-full sm:w-3/6">
<x-input-label for="customS3Region" :value="__('Region')"/>
<x-text-input id="customS3Region" class="block mt-1 w-full" type="text"
wire:model="customS3Region"
Expand Down Expand Up @@ -75,15 +75,15 @@
</div>
@endif
<div class="mt-6 max-w-3xl mx-auto">
<div class="flex space-x-5">
<div class="w-4/6">
<x-primary-button type="submit" class="mt-4" centered action="submit" loadingText="Saving changes...">
<div class="flex flex-col sm:flex-row sm:space-x-5 space-y-4 sm:space-y-0">
<div class="w-full sm:w-4/6">
<x-primary-button type="submit" class="w-full justify-center" centered action="submit" loadingText="Saving changes...">
{{ __('Save changes') }}
</x-primary-button>
</div>
<div class="w-2/6 ml-2">
<a href="{{ route('backup-destinations.index') }}" wire:navigate>
<x-secondary-button type="button" class="mt-4" centered>
<div class="w-full sm:w-2/6">
<a href="{{ route('backup-destinations.index') }}" wire:navigate class="block">
<x-secondary-button type="button" class="w-full justify-center" centered>
{{ __('Cancel') }}
</x-secondary-button>
</a>
Expand Down
Loading

0 comments on commit 05b1fab

Please sign in to comment.