Skip to content

Commit 8d32a54

Browse files
michaeldyryndamichaeldyrynda
authored
Merge pull request #44 from rbcunhadesign/master
New Blade Template Layout
2 parents 5b945ae + 95fdf36 commit 8d32a54

File tree

15 files changed

+300
-213
lines changed

15 files changed

+300
-213
lines changed

‎screenshots/dashboard.png‎

131 KB
Loading

‎screenshots/login.png‎

148 KB
Loading

‎screenshots/register.png‎

152 KB
Loading

‎screenshots/reset-password.png‎

145 KB
Loading

‎screenshots/send-password-reset.png‎

95 KB
Loading

‎screenshots/verify.png‎

118 KB
Loading

‎screenshots/welcome.png‎

131 KB
Loading

‎src/tailwindcss-stubs/resources/views/auth/login.blade.php‎

Lines changed: 61 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,76 @@
11
@extends('layouts.app')
22

33
@section('content')
4-
<div class="flex items-center px-6 md:px-0">
5-
<div class="w-full max-w-md md:mx-auto">
6-
<div class="rounded shadow">
7-
<div class="font-medium text-lg text-teal-darker bg-teal p-3 rounded-t">
8-
{{ __('Login') }}
9-
</div>
10-
<div class="bg-white p-3 rounded-b">
11-
<form class="form-horizontal" method="POST" action="{{ route('login') }}">
12-
{{ csrf_field() }}
13-
14-
<div class="flex items-stretch mb-3">
15-
<label for="email" class="text-right font-semibold text-grey-dark text-sm pt-2 pr-3 align-middle w-1/4">{{ __('E-Mail Address') }}</label>
16-
<div class="flex flex-col w-3/4">
17-
<input id="email" type="email" class="flex-grow h-8 px-2 border rounded {{ $errors->has('email') ? 'border-red-dark' : 'border-grey-light' }}" name="email" value="{{ old('email') }}" required autofocus>
18-
{!! $errors->first('email', '<span class="text-red-dark text-sm mt-2">:message</span>') !!}
19-
</div>
4+
<div class="container mx-auto">
5+
<div class="flex flex-wrap justify-center">
6+
<div class="w-full max-w-sm">
7+
<div class="flex flex-col break-words bg-white border border-2 rounded shadow-md">
8+
9+
<div class="font-semibold bg-grey-lightest text-grey-darkest py-3 px-6 mb-0 shadow-inner">
10+
{{ __('Login') }}
2011
</div>
2112

22-
<div class="flex items-stretch mb-4">
23-
<label for="password" class="text-right font-semibold text-grey-dark text-sm pt-2 pr-3 align-middle w-1/4">{{ __('Password') }}</label>
24-
<div class="flex flex-col w-3/4">
25-
<input id="password" type="password" class="flex-grow h-8 px-2 rounded border {{ $errors->has('password') ? 'border-red-dark' : 'border-grey-light' }}" name="password" required>
26-
{!! $errors->first('password', '<span class="text-red-dark text-sm mt-2">:message</span>') !!}
13+
<form class="w-full p-6" method="POST" action="{{ route('login') }}">
14+
@csrf
15+
16+
<div class="flex flex-wrap mb-6">
17+
<label for="email" class="block text-grey-darker text-sm font-bold mb-2">
18+
{{ __('E-Mail Address') }}:
19+
</label>
20+
21+
<input id="email" type="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-grey-darker leading-tight focus:outline-none focus:shadow-outline{{ $errors->has('email') ? ' border-red' : '' }}" name="email" value="{{ old('email') }}" required autofocus>
22+
23+
@if ($errors->has('email'))
24+
<p class="text-red text-xs italic mt-4">
25+
{{ $errors->first('email') }}
26+
</p>
27+
@endif
2728
</div>
28-
</div>
2929

30-
<div class="flex mb-4">
31-
<label class="w-3/4 ml-auto">
32-
<input type="checkbox" name="remember" {{ old('remember') ? 'checked' : '' }}> <span class="text-sm text-grey-dark"> {{ __('Remember Me') }}</span>
33-
</label>
34-
</div>
30+
<div class="flex flex-wrap mb-6">
31+
<label for="password" class="block text-grey-darker text-sm font-bold mb-2">
32+
{{ __('Password') }}:
33+
</label>
34+
35+
<input id="password" type="password" class="shadow appearance-none border rounded w-full py-2 px-3 text-grey-darker leading-tight focus:outline-none focus:shadow-outline{{ $errors->has('password') ? ' border-red' : '' }}" name="password" required>
3536

36-
<div class="flex">
37-
<div class="w-3/4 ml-auto">
38-
<button type="submit" class="bg-teal hover:bg-teal-dark text-white text-sm font-semibold py-2 px-4 rounded mr-3">
37+
@if ($errors->has('password'))
38+
<p class="text-red text-xs italic mt-4">
39+
{{ $errors->first('password') }}
40+
</p>
41+
@endif
42+
</div>
43+
44+
<div class="flex mb-6">
45+
<input type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>
46+
47+
<label class="text-sm text-grey-dark ml-3" for="remember">
48+
{{ __('Remember Me') }}
49+
</label>
50+
</div>
51+
52+
<div class="flex flex-wrap items-center">
53+
<button type="submit" class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
3954
{{ __('Login') }}
4055
</button>
41-
<a class="no-underline hover:underline text-teal-darker text-sm" href="{{ route('password.request') }}">
42-
{{ __('Forgot Your Password?') }}
43-
</a>
56+
57+
@if (Route::has('password.request'))
58+
<a class="text-sm text-blue hover:text-blue-dark whitespace-no-wrap no-underline ml-auto" href="{{ route('password.request') }}">
59+
{{ __('Forgot Your Password?') }}
60+
</a>
61+
@endif
62+
63+
<p class="w-full text-xs text-center text-grey-dark mt-8 -mb-4">
64+
Don't have an account?
65+
<a class="text-blue hover:text-blue-dark no-underline" href="{{ route('register') }}">
66+
Register
67+
</a>
68+
</p>
4469
</div>
45-
</div>
46-
</form>
70+
</form>
71+
72+
</div>
4773
</div>
4874
</div>
4975
</div>
50-
</div>
5176
@endsection

‎src/tailwindcss-stubs/resources/views/auth/passwords/email.blade.php‎

Lines changed: 35 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,53 @@
11
@extends('layouts.app')
22

33
@section('content')
4-
<div class="flex items-center">
5-
<div class="md:w-1/2 md:mx-auto">
6-
<div class="rounded shadow">
7-
<div class="font-medium text-lg text-teal-darker bg-teal p-3 rounded-t">
8-
{{ __('Reset Password') }}
9-
</div>
10-
<div class="bg-white p-3 rounded-b">
4+
<div class="container mx-auto">
5+
<div class="flex flex-wrap justify-center">
6+
<div class="w-full max-w-sm">
7+
118
@if (session('status'))
12-
<div class="bg-green-lightest border border-green-light text-green-dark text-sm px-4 py-3 rounded mb-4">
9+
<div class="text-sm border border-t-8 rounded text-green-darker border-green-dark bg-green-lightest px-3 py-4 mb-4" role="alert">
1310
{{ session('status') }}
1411
</div>
1512
@endif
1613

17-
<form class="form-horizontal" method="POST" action="{{ route('password.email') }}">
18-
{{ csrf_field() }}
14+
<div class="flex flex-col break-words bg-white border border-2 rounded shadow-md">
1915

20-
<div class="flex items-stretch mb-3">
21-
<label for="email" class="text-right font-semibold text-grey-dark text-sm pt-2 pr-3 align-middle w-1/4">{{ __('E-Mail Address') }}</label>
22-
<div class="flex flex-col w-3/4">
23-
<input id="email" type="email" class="flex-grow h-8 px-2 border rounded {{ $errors->has('email') ? 'border-red-dark' : 'border-grey-light' }}" name="email" value="{{ old('email') }}" required autofocus>
24-
{!! $errors->first('email', '<span class="text-red-dark text-sm mt-2">:message</span>') !!}
25-
</div>
16+
<div class="font-semibold bg-grey-lightest text-grey-darkest py-3 px-6 mb-0 shadow-inner">
17+
{{ __('Reset Password') }}
2618
</div>
2719

28-
<div class="flex">
29-
<div class="w-3/4 ml-auto">
30-
<button type="submit" class="bg-teal hover:bg-teal-dark text-white text-sm font-semibold py-2 px-4 rounded mr-3">
20+
<form class="w-full p-6" method="POST" action="{{ route('password.email') }}">
21+
@csrf
22+
23+
<div class="flex flex-wrap mb-6">
24+
<label for="email" class="block text-grey-darker text-sm font-bold mb-2">
25+
{{ __('E-Mail Address') }}:
26+
</label>
27+
28+
<input id="email" type="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-grey-darker leading-tight focus:outline-none focus:shadow-outline{{ $errors->has('email') ? ' border-red' : '' }}" name="email" value="{{ old('email') }}" required>
29+
30+
@if ($errors->has('email'))
31+
<p class="text-red text-xs italic mt-4">
32+
{{ $errors->first('email') }}
33+
</p>
34+
@endif
35+
</div>
36+
37+
<div class="flex flex-wrap">
38+
<button type="submit" class="bg-blue hover:bg-blue-dark text-white py-2 px-4 rounded focus:outline-none focus:shadow-outline">
3139
{{ __('Send Password Reset Link') }}
3240
</button>
41+
42+
<p class="w-full text-xs text-center text-grey-dark mt-8 -mb-4">
43+
<a class="text-blue hover:text-blue-dark no-underline" href="{{ route('login') }}">
44+
Back to login
45+
</a>
46+
</p>
3347
</div>
34-
</div>
35-
</form>
48+
</form>
49+
</div>
3650
</div>
3751
</div>
3852
</div>
39-
</div>
4053
@endsection
41-

‎src/tailwindcss-stubs/resources/views/auth/passwords/reset.blade.php‎

Lines changed: 47 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,65 @@
11
@extends('layouts.app')
22

33
@section('content')
4-
<div class="flex items-center">
5-
<div class="md:w-1/2 md:mx-auto">
6-
<div class="rounded shadow">
7-
<div class="font-medium text-lg text-teal-darker bg-teal p-3 rounded-t">
8-
{{ __('Reset Password') }}
9-
</div>
10-
<div class="bg-white p-3 rounded-b">
11-
<form class="form-horizontal" method="POST" action="{{ route('password.request') }}">
12-
{{ csrf_field() }}
4+
<div class="container mx-auto">
5+
<div class="flex flex-wrap justify-center">
6+
<div class="w-full max-w-sm">
7+
<div class="flex flex-col break-words bg-white border border-2 rounded shadow-md">
8+
9+
<div class="font-semibold bg-grey-lightest text-grey-darkest py-3 px-6 mb-0 shadow-inner">
10+
{{ __('Reset Password') }}
11+
</div>
12+
13+
<form class="w-full p-6" method="POST" action="{{ route('password.update') }}">
14+
@csrf
1315

14-
<input type="hidden" name="token" value="{{ $token }}">
16+
<input type="hidden" name="token" value="{{ $token }}">
1517

16-
<div class="flex items-stretch mb-3">
17-
<label for="email" class="text-right font-semibold text-grey-dark text-sm pt-2 pr-3 align-middle w-1/4">{{ __('E-Mail Address') }}</label>
18-
<div class="flex flex-col w-3/4">
19-
<input id="email" type="email" class="flex-grow h-8 px-2 border rounded {{ $errors->has('email') ? 'border-red-dark' : 'border-grey-light' }}" name="email" value="{{ $email or old('email') }}" required autofocus>
20-
{!! $errors->first('email', '<span class="text-red-dark text-sm mt-2">:message</span>') !!}
18+
<div class="flex flex-wrap mb-6">
19+
<label for="email" class="block text-grey-darker text-sm font-bold mb-2">
20+
{{ __('E-Mail Address') }}:
21+
</label>
22+
23+
<input id="email" type="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-grey-darker leading-tight focus:outline-none focus:shadow-outline{{ $errors->has('email') ? ' border-red' : '' }}" name="email" value="{{ old('email') }}" required autofocus>
24+
25+
@if ($errors->has('email'))
26+
<p class="text-red text-xs italic mt-4">
27+
{{ $errors->first('email') }}
28+
</p>
29+
@endif
2130
</div>
22-
</div>
2331

24-
<div class="flex items-stretch mb-3">
25-
<label for="password" class="text-right font-semibold text-grey-dark text-sm pt-2 pr-3 align-middle w-1/4">{{ __('Password') }}</label>
26-
<div class="flex flex-col w-3/4">
27-
<input id="password" type="password" class="flex-grow h-8 px-2 rounded border {{ $errors->has('password') ? 'border-red-dark' : 'border-grey-light' }}" name="password" required>
28-
{!! $errors->first('password', '<span class="text-red-dark text-sm mt-2">:message</span>') !!}
32+
<div class="flex flex-wrap mb-6">
33+
<label for="password" class="block text-grey-darker text-sm font-bold mb-2">
34+
{{ __('Password') }}:
35+
</label>
36+
37+
<input id="password" type="password" class="shadow appearance-none border rounded w-full py-2 px-3 text-grey-darker leading-tight focus:outline-none focus:shadow-outline{{ $errors->has('password') ? ' border-red' : '' }}" name="password" required>
38+
39+
@if ($errors->has('password'))
40+
<p class="text-red text-xs italic mt-4">
41+
{{ $errors->first('password') }}
42+
</p>
43+
@endif
2944
</div>
30-
</div>
3145

32-
<div class="flex items-stretch mb-3">
33-
<label for="password_confirmation" class="text-right font-semibold text-grey-dark text-sm pt-2 pr-3 align-middle w-1/4">{{ __('Confirm Password') }}</label>
34-
<div class="flex flex-col w-3/4">
35-
<input id="password_confirmation" type="password" class="flex-grow h-8 px-2 rounded border {{ $errors->has('password_confirmation') ? 'border-red-dark' : 'border-grey-light' }}" name="password_confirmation" required>
36-
{!! $errors->first('password_confirmation', '<span class="text-red-dark text-sm mt-2">:message</span>') !!}
46+
<div class="flex flex-wrap mb-6">
47+
<label for="password-confirm" class="block text-grey-darker text-sm font-bold mb-2">
48+
{{ __('Confirm Password') }}:
49+
</label>
50+
51+
<input id="password-confirm" type="password" class="shadow appearance-none border rounded w-full py-2 px-3 text-grey-darker leading-tight focus:outline-none focus:shadow-outline" name="password_confirmation" required>
3752
</div>
38-
</div>
3953

40-
<div class="flex">
41-
<div class="w-3/4 ml-auto">
42-
<button type="submit" class="bg-teal hover:bg-teal-dark text-white text-sm font-semibold py-2 px-4 rounded mr-3">
54+
<div class="flex flex-wrap">
55+
<button type="submit" class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
4356
{{ __('Reset Password') }}
4457
</button>
4558
</div>
46-
</div>
47-
</form>
59+
</form>
60+
61+
</div>
4862
</div>
4963
</div>
5064
</div>
51-
</div>
5265
@endsection

0 commit comments

Comments
 (0)