Skip to content

Commit

Permalink
Add Bootstrap 5 support for breeze.
Browse files Browse the repository at this point in the history
  • Loading branch information
@tsommie
tsommie committed Sep 8, 2021
1 parent e302391 commit 135a5d9
Show file tree
Hide file tree
Showing 31 changed files with 1,267 additions and 55 deletions.
6 changes: 3 additions & 3 deletions breeze/inertia/resources/js/Layouts/Authenticated.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,20 +14,20 @@

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Left Side Of Navbar -->
<ul class="navbar-nav mr-auto">
<ul class="navbar-nav me-auto">
<breeze-nav-link :href="route('dashboard')" :active="route().current('dashboard')">
Dashboard
</breeze-nav-link>
</ul>

<!-- Right Side Of Navbar -->
<ul class="navbar-nav ml-auto align-items-baseline">
<ul class="navbar-nav align-items-baseline">
<!-- Authentication Links -->
<breeze-dropdown id="settingsDropdown">
<template #trigger>
{{ $page.props.auth.user.name }}

<svg class="ml-2" width="18" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<svg class="ms-2" width="18" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</template>
Expand Down
8 changes: 6 additions & 2 deletions breeze/inertia/resources/js/Pages/Auth/ConfirmPassword.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,17 @@
<breeze-validation-errors class="mb-2" />

<form @submit.prevent="submit">
<div class="form-group">
<div class="mb-3">
<breeze-label for="password" value="Password" />
<breeze-input id="password" type="password" v-model="form.password" required autocomplete="current-password" autofocus />
</div>

<div class="d-flex justify-content-end mt-2">
<breeze-button class="ml-4" :class="{ 'text-white-50': form.processing }" :disabled="form.processing">
<breeze-button class="ms-4" :class="{ 'text-white-50': form.processing }" :disabled="form.processing">
<div v-show="form.processing" class="spinner-border spinner-border-sm" role="status">
<span class="visually-hidden">Loading...</span>
</div>

Confirm
</breeze-button>
</div>
Expand Down
4 changes: 4 additions & 0 deletions breeze/inertia/resources/js/Pages/Auth/ForgotPassword.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,10 @@

<div class="d-flex justify-content-end mt-4">
<breeze-button :class="{ 'text-white-50': form.processing }" :disabled="form.processing">
<div v-show="form.processing" class="spinner-border spinner-border-sm" role="status">
<span class="visually-hidden">Loading...</span>
</div>

Email Password Reset Link
</breeze-button>
</div>
Expand Down
18 changes: 11 additions & 7 deletions breeze/inertia/resources/js/Pages/Auth/Login.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,33 +10,37 @@
</div>

<form @submit.prevent="submit">
<div class="form-group">
<div class="mb-3">
<breeze-label for="email" value="Email" />
<breeze-input id="email" type="email" v-model="form.email" required autofocus />
</div>

<div class="form-group">
<div class="mb-3">
<breeze-label for="password" value="Password" />
<breeze-input id="password" type="password" v-model="form.password" required autocomplete="current-password" />
</div>

<div class="form-group">
<div class="custom-control custom-checkbox">
<div class="mb-3">
<div class="form-check">
<breeze-checkbox id="remember_me" name="remember" v-model:checked="form.remember" />

<label class="custom-control-label" for="remember_me">
<label class="form-check-label" for="remember_me">
Remember Me
</label>
</div>
</div>

<div class="mb-0">
<div class="d-flex justify-content-end align-items-baseline">
<Link v-if="canResetPassword" :href="route('password.request')" class="text-muted mr-3">
<Link v-if="canResetPassword" :href="route('password.request')" class="text-muted me-3">
Forgot your password?
</Link>

<breeze-button class="ml-4" :class="{ 'text-white-50': form.processing }" :disabled="form.processing">
<breeze-button class="ms-4" :class="{ 'text-white-50': form.processing }" :disabled="form.processing">
<div v-show="form.processing" class="spinner-border spinner-border-sm" role="status">
<span class="visually-hidden">Loading...</span>
</div>

Log in
</breeze-button>
</div>
Expand Down
20 changes: 12 additions & 8 deletions breeze/inertia/resources/js/Pages/Auth/Register.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,31 +6,31 @@
<breeze-validation-errors class="mb-3" />

<form @submit.prevent="submit">
<div class="form-group">
<div class="mb-3">
<breeze-label for="name" value="Name" />
<breeze-input id="name" type="text" v-model="form.name" required autofocus autocomplete="name" />
</div>

<div class="form-group">
<div class="mb-3">
<breeze-label for="email" value="Email" />
<breeze-input id="email" type="email" v-model="form.email" required />
</div>

<div class="form-group">
<div class="mb-3">
<breeze-label for="password" value="Password" />
<breeze-input id="password" type="password" v-model="form.password" required autocomplete="new-password" />
</div>

<div class="form-group">
<div class="mb-3">
<breeze-label for="password_confirmation" value="Confirm Password" />
<breeze-input id="password_confirmation" type="password" v-model="form.password_confirmation" required autocomplete="new-password" />
</div>

<div class="form-group" v-if="$page.props.jetstream.hasTermsAndPrivacyPolicyFeature">
<div class="custom-control custom-checkbox">
<div class="mb-3" v-if="$page.props.jetstream.hasTermsAndPrivacyPolicyFeature">
<div class="form-check">
<breeze-checkbox name="terms" id="terms" v-model:checked="form.terms" />

<label class="custom-control-label" for="terms">
<label class="form-check-label" for="terms">
I agree to the <a target="_blank" :href="route('terms.show')">Terms of Service</a> and <a target="_blank" :href="route('policy.show')">Privacy Policy</a>
</label>
</div>
Expand All @@ -42,7 +42,11 @@
Already registered?
</Link>

<breeze-button class="ml-4" :class="{ 'text-white-50': form.processing }" :disabled="form.processing">
<breeze-button class="ms-4" :class="{ 'text-white-50': form.processing }" :disabled="form.processing">
<div v-show="form.processing" class="spinner-border spinner-border-sm" role="status">
<span class="visually-hidden">Loading...</span>
</div>

Register
</breeze-button>
</div>
Expand Down
10 changes: 7 additions & 3 deletions breeze/inertia/resources/js/Pages/Auth/ResetPassword.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,24 +6,28 @@
<breeze-validation-errors class="mb-3" />

<form @submit.prevent="submit">
<div class="form-group">
<div class="mb-3">
<breeze-label for="email" value="Email" />
<breeze-input id="email" type="email" v-model="form.email" required autofocus />
</div>

<div class="form-group">
<div class="mb-3">
<breeze-label for="password" value="Password" />
<breeze-input id="password" type="password" v-model="form.password" required autocomplete="new-password" />
</div>

<div class="form-group">
<div class="mb-3">
<breeze-label for="password_confirmation" value="Confirm Password" />
<breeze-input id="password_confirmation" type="password" v-model="form.password_confirmation" required autocomplete="new-password" />
</div>

<div class="mb-0">
<div class="d-flex justify-content-end">
<breeze-button :class="{ 'text-white-50': form.processing }" :disabled="form.processing">
<div v-show="form.processing" class="spinner-border spinner-border-sm" role="status">
<span class="visually-hidden">Loading...</span>
</div>

Reset Password
</breeze-button>
</div>
Expand Down
4 changes: 4 additions & 0 deletions breeze/inertia/resources/js/Pages/Auth/VerifyEmail.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,10 @@
<form @submit.prevent="submit">
<div class="mt-4 d-flex justify-content-between">
<breeze-button :class="{ 'text-white-50': form.processing }" :disabled="form.processing">
<div v-show="form.processing" class="spinner-border spinner-border-sm" role="status">
<span class="visually-hidden">Loading...</span>
</div>

Resend Verification Email
</breeze-button>

Expand Down
20 changes: 10 additions & 10 deletions breeze/inertia/resources/js/Pages/Welcome.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
<Link
v-if="canRegister"
:href="route('register')"
class="ml-4 text-muted"
class="ms-4 text-muted"
>
Register
</Link>
Expand Down Expand Up @@ -51,7 +51,7 @@

<div class="card shadow-sm">
<div class="row">
<div class="col-md-6 pr-0">
<div class="col-md-6 pe-0">
<div class="card-body border-right border-bottom p-3 h-100">
<div class="d-flex flex-row bd-highlight pt-2">
<div>
Expand All @@ -70,7 +70,7 @@
></path>
</svg>
</div>
<div class="pl-3">
<div class="ps-3">
<div class="mb-2">
<a
href="https://laravel.com/docs"
Expand All @@ -89,7 +89,7 @@
</div>
</div>
</div>
<div class="col-md-6 pl-0">
<div class="col-md-6 ps-0">
<div class="card-body border-bottom p-3 h-100">
<div class="d-flex flex-row bd-highlight pt-2">
<div>
Expand All @@ -109,7 +109,7 @@
<path d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg>
</div>
<div class="pl-3">
<div class="ps-3">
<div class="mb-2">
<a
href="https://laracasts.com"
Expand All @@ -127,7 +127,7 @@
</div>
</div>
</div>
<div class="col-md-6 pr-0">
<div class="col-md-6 pe-0">
<div class="card-body border-right p-3 h-100">
<div class="d-flex flex-row bd-highlight pt-2">
<div>
Expand All @@ -146,7 +146,7 @@
></path>
</svg>
</div>
<div class="pl-3 text-sm">
<div class="ps-3 text-sm">
<div class="mb-2">
<a
href="https://laravel-news.com/"
Expand All @@ -164,7 +164,7 @@
</div>
</div>
</div>
<div class="col-md-6 pl-0">
<div class="col-md-6 ps-0">
<div class="card-body p-3 h-100">
<div class="d-flex flex-row bd-highlight pt-2">
<div>
Expand All @@ -183,7 +183,7 @@
></path>
</svg>
</div>
<div class="pl-3">
<div class="ps-3">
<div class="mb-2">
<span class="h5 font-weight-bolder text-dark"
>Vibrant Ecosystem</span
Expand Down Expand Up @@ -273,7 +273,7 @@
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
class="ml-4 text-muted"
class="ms-4 text-muted"
style="width: 18px"
>
<path
Expand Down
4 changes: 2 additions & 2 deletions breeze/resources/views/auth/confirm-password.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
@csrf

<!-- Password -->
<div class="form-group">
<div class="mb-3">
<x-label for="password" :value="__('Password')" />

<x-input id="password" type="password"
Expand All @@ -27,7 +27,7 @@
</div>

<div class="d-flex justify-content-end mt-4">
<x-button class="ml-4">
<x-button class="ms-4">
{{ __('Confirm') }}
</x-button>
</div>
Expand Down
2 changes: 1 addition & 1 deletion breeze/resources/views/auth/forgot-password.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
@csrf

<!-- Email Address -->
<div class="form-group">
<div class="mb-3">
<x-label for="email" :value="__('Email')" />

<x-input id="email" type="email" name="email" :value="old('email')" required autofocus />
Expand Down
8 changes: 4 additions & 4 deletions breeze/resources/views/auth/login.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,14 @@
@csrf

<!-- Email Address -->
<div class="form-group">
<div class="mb-3">
<x-label for="email" :value="__('Email')" />

<x-input id="email" type="email" name="email" :value="old('email')" required autofocus />
</div>

<!-- Password -->
<div class="form-group">
<div class="mb-3">
<x-label for="password" :value="__('Password')" />

<x-input id="password" type="password"
Expand All @@ -33,7 +33,7 @@
</div>

<!-- Remember Me -->
<div class="form-group">
<div class="mb-3">
<div class="form-check">
<x-checkbox id="remember_me" name="remember" />

Expand All @@ -46,7 +46,7 @@
<div class="mb-0">
<div class="d-flex justify-content-end align-items-baseline">
@if (Route::has('password.request'))
<a class="text-muted mr-3" href="{{ route('password.request') }}">
<a class="text-muted me-3" href="{{ route('password.request') }}">
{{ __('Forgot your password?') }}
</a>
@endif
Expand Down
10 changes: 5 additions & 5 deletions breeze/resources/views/auth/register.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,21 +14,21 @@
@csrf

<!-- Name -->
<div class="form-group">
<div class="mb-3">
<x-label for="name" :value="__('Name')" />

<x-input id="name" type="text" name="name" :value="old('name')" required autofocus />
</div>

<!-- Email Address -->
<div class="form-group">
<div class="mb-3">
<x-label for="email" :value="__('Email')" />

<x-input id="email" type="email" name="email" :value="old('email')" required />
</div>

<!-- Password -->
<div class="form-group">
<div class="mb-3">
<x-label for="password" :value="__('Password')" />

<x-input id="password" type="password"
Expand All @@ -37,7 +37,7 @@
</div>

<!-- Confirm Password -->
<div class="form-group">
<div class="mb-3">
<x-label for="password_confirmation" :value="__('Confirm Password')" />

<x-input id="password_confirmation" type="password"
Expand All @@ -46,7 +46,7 @@

<div class="mb-0">
<div class="d-flex justify-content-end align-items-baseline">
<a class="text-muted mr-3 text-decoration-none" href="{{ route('login') }}">
<a class="text-muted me-3 text-decoration-none" href="{{ route('login') }}">
{{ __('Already registered?') }}
</a>

Expand Down
Loading

0 comments on commit 135a5d9

Please sign in to comment.