Skip to content

Commit 135a5d9

Browse files
tsommietsommie
committed
Add Bootstrap 5 support for breeze.
1 parent e302391 commit 135a5d9

31 files changed

+1267
-55
lines changed

‎breeze/inertia/resources/js/Layouts/Authenticated.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,20 +14,20 @@
1414

1515
<div class="collapse navbar-collapse" id="navbarSupportedContent">
1616
<!-- Left Side Of Navbar -->
17-
<ul class="navbar-nav mr-auto">
17+
<ul class="navbar-nav me-auto">
1818
<breeze-nav-link :href="route('dashboard')" :active="route().current('dashboard')">
1919
Dashboard
2020
</breeze-nav-link>
2121
</ul>
2222

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

30-
<svg class="ml-2" width="18" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
30+
<svg class="ms-2" width="18" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
3131
<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" />
3232
</svg>
3333
</template>

‎breeze/inertia/resources/js/Pages/Auth/ConfirmPassword.vue‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,17 @@
1010
<breeze-validation-errors class="mb-2" />
1111

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

1818
<div class="d-flex justify-content-end mt-2">
19-
<breeze-button class="ml-4" :class="{ 'text-white-50': form.processing }" :disabled="form.processing">
19+
<breeze-button class="ms-4" :class="{ 'text-white-50': form.processing }" :disabled="form.processing">
20+
<div v-show="form.processing" class="spinner-border spinner-border-sm" role="status">
21+
<span class="visually-hidden">Loading...</span>
22+
</div>
23+
2024
Confirm
2125
</breeze-button>
2226
</div>

‎breeze/inertia/resources/js/Pages/Auth/ForgotPassword.vue‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,10 @@
2020

2121
<div class="d-flex justify-content-end mt-4">
2222
<breeze-button :class="{ 'text-white-50': form.processing }" :disabled="form.processing">
23+
<div v-show="form.processing" class="spinner-border spinner-border-sm" role="status">
24+
<span class="visually-hidden">Loading...</span>
25+
</div>
26+
2327
Email Password Reset Link
2428
</breeze-button>
2529
</div>

‎breeze/inertia/resources/js/Pages/Auth/Login.vue‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,33 +10,37 @@
1010
</div>
1111

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

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

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

27-
<label class="custom-control-label" for="remember_me">
27+
<label class="form-check-label" for="remember_me">
2828
Remember Me
2929
</label>
3030
</div>
3131
</div>
3232

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

39-
<breeze-button class="ml-4" :class="{ 'text-white-50': form.processing }" :disabled="form.processing">
39+
<breeze-button class="ms-4" :class="{ 'text-white-50': form.processing }" :disabled="form.processing">
40+
<div v-show="form.processing" class="spinner-border spinner-border-sm" role="status">
41+
<span class="visually-hidden">Loading...</span>
42+
</div>
43+
4044
Log in
4145
</breeze-button>
4246
</div>

‎breeze/inertia/resources/js/Pages/Auth/Register.vue‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,31 +6,31 @@
66
<breeze-validation-errors class="mb-3" />
77

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

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

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

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

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

33-
<label class="custom-control-label" for="terms">
33+
<label class="form-check-label" for="terms">
3434
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>
3535
</label>
3636
</div>
@@ -42,7 +42,11 @@
4242
Already registered?
4343
</Link>
4444

45-
<breeze-button class="ml-4" :class="{ 'text-white-50': form.processing }" :disabled="form.processing">
45+
<breeze-button class="ms-4" :class="{ 'text-white-50': form.processing }" :disabled="form.processing">
46+
<div v-show="form.processing" class="spinner-border spinner-border-sm" role="status">
47+
<span class="visually-hidden">Loading...</span>
48+
</div>
49+
4650
Register
4751
</breeze-button>
4852
</div>

‎breeze/inertia/resources/js/Pages/Auth/ResetPassword.vue‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,24 +6,28 @@
66
<breeze-validation-errors class="mb-3" />
77

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

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

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

2424
<div class="mb-0">
2525
<div class="d-flex justify-content-end">
2626
<breeze-button :class="{ 'text-white-50': form.processing }" :disabled="form.processing">
27+
<div v-show="form.processing" class="spinner-border spinner-border-sm" role="status">
28+
<span class="visually-hidden">Loading...</span>
29+
</div>
30+
2731
Reset Password
2832
</breeze-button>
2933
</div>

‎breeze/inertia/resources/js/Pages/Auth/VerifyEmail.vue‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,10 @@
1313
<form @submit.prevent="submit">
1414
<div class="mt-4 d-flex justify-content-between">
1515
<breeze-button :class="{ 'text-white-50': form.processing }" :disabled="form.processing">
16+
<div v-show="form.processing" class="spinner-border spinner-border-sm" role="status">
17+
<span class="visually-hidden">Loading...</span>
18+
</div>
19+
1620
Resend Verification Email
1721
</breeze-button>
1822

‎breeze/inertia/resources/js/Pages/Welcome.vue‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
<Link
2323
v-if="canRegister"
2424
:href="route('register')"
25-
class="ml-4 text-muted"
25+
class="ms-4 text-muted"
2626
>
2727
Register
2828
</Link>
@@ -51,7 +51,7 @@
5151

5252
<div class="card shadow-sm">
5353
<div class="row">
54-
<div class="col-md-6 pr-0">
54+
<div class="col-md-6 pe-0">
5555
<div class="card-body border-right border-bottom p-3 h-100">
5656
<div class="d-flex flex-row bd-highlight pt-2">
5757
<div>
@@ -70,7 +70,7 @@
7070
></path>
7171
</svg>
7272
</div>
73-
<div class="pl-3">
73+
<div class="ps-3">
7474
<div class="mb-2">
7575
<a
7676
href="https://laravel.com/docs"
@@ -89,7 +89,7 @@
8989
</div>
9090
</div>
9191
</div>
92-
<div class="col-md-6 pl-0">
92+
<div class="col-md-6 ps-0">
9393
<div class="card-body border-bottom p-3 h-100">
9494
<div class="d-flex flex-row bd-highlight pt-2">
9595
<div>
@@ -109,7 +109,7 @@
109109
<path d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path>
110110
</svg>
111111
</div>
112-
<div class="pl-3">
112+
<div class="ps-3">
113113
<div class="mb-2">
114114
<a
115115
href="https://laracasts.com"
@@ -127,7 +127,7 @@
127127
</div>
128128
</div>
129129
</div>
130-
<div class="col-md-6 pr-0">
130+
<div class="col-md-6 pe-0">
131131
<div class="card-body border-right p-3 h-100">
132132
<div class="d-flex flex-row bd-highlight pt-2">
133133
<div>
@@ -146,7 +146,7 @@
146146
></path>
147147
</svg>
148148
</div>
149-
<div class="pl-3 text-sm">
149+
<div class="ps-3 text-sm">
150150
<div class="mb-2">
151151
<a
152152
href="https://laravel-news.com/"
@@ -164,7 +164,7 @@
164164
</div>
165165
</div>
166166
</div>
167-
<div class="col-md-6 pl-0">
167+
<div class="col-md-6 ps-0">
168168
<div class="card-body p-3 h-100">
169169
<div class="d-flex flex-row bd-highlight pt-2">
170170
<div>
@@ -183,7 +183,7 @@
183183
></path>
184184
</svg>
185185
</div>
186-
<div class="pl-3">
186+
<div class="ps-3">
187187
<div class="mb-2">
188188
<span class="h5 font-weight-bolder text-dark"
189189
>Vibrant Ecosystem</span
@@ -273,7 +273,7 @@
273273
stroke-linejoin="round"
274274
stroke-width="2"
275275
viewBox="0 0 24 24"
276-
class="ml-4 text-muted"
276+
class="ms-4 text-muted"
277277
style="width: 18px"
278278
>
279279
<path

‎breeze/resources/views/auth/confirm-password.blade.php‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
@csrf
1919

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

2424
<x-input id="password" type="password"
@@ -27,7 +27,7 @@
2727
</div>
2828

2929
<div class="d-flex justify-content-end mt-4">
30-
<x-button class="ml-4">
30+
<x-button class="ms-4">
3131
{{ __('Confirm') }}
3232
</x-button>
3333
</div>

‎breeze/resources/views/auth/forgot-password.blade.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
@csrf
2323

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

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

0 commit comments

Comments
 (0)