Skip to content

Fix responsiveness of original design #115

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Sep 11, 2020
Merged

Fix responsiveness of original design #115

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
db38ff3
Add welcome layout ...
thinkverse Aug 23, 2020
705218d
Fix layout navigation
thinkverse Aug 23, 2020
ab88e54
Fix user dashboard
thinkverse Aug 23, 2020
34fe197
Fix auth stubs
thinkverse Aug 23, 2020
df8ce79
Update screenshots
thinkverse Aug 23, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added screenshots/confirm-password.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified screenshots/dashboard.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified screenshots/login.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified screenshots/register.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified screenshots/reset-password.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified screenshots/verify.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified screenshots/welcome.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
123 changes: 65 additions & 58 deletions src/tailwindcss-stubs/resources/views/auth/login.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,77 +1,84 @@
@extends('layouts.app')

@section('content')
<div class="container mx-auto">
<div class="flex flex-wrap justify-center">
<div class="w-full max-w-sm">
<div class="flex flex-col break-words bg-white border-2 rounded shadow-md">
<main class="sm:container sm:mx-auto sm:max-w-lg sm:mt-10">
<div class="flex">
<div class="w-full">
<section class="flex flex-col break-words bg-white sm:border-1 sm:rounded-md sm:shadow-sm sm:shadow-lg">

<div class="font-semibold bg-gray-200 text-gray-700 py-3 px-6 mb-0">
{{ __('Login') }}
</div>
<header class="font-semibold bg-gray-200 text-gray-700 py-5 px-6 sm:py-6 sm:px-8 sm:rounded-t-md">
{{ __('Login') }}
</header>

<form class="w-full p-6" method="POST" action="{{ route('login') }}">
@csrf
<form class="w-full px-6 space-y-6 sm:px-10 sm:space-y-8" method="POST" action="{{ route('login') }}">
@csrf

<div class="flex flex-wrap mb-6">
<label for="email" class="block text-gray-700 text-sm font-bold mb-2">
{{ __('E-Mail Address') }}:
</label>
<div class="flex flex-wrap">
<label for="email" class="block text-gray-700 text-sm font-bold mb-2 sm:mb-4">
{{ __('E-Mail Address') }}:
</label>

<input id="email" type="email" class="form-input w-full @error('email') border-red-500 @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus>
<input id="email" type="email"
class="form-input w-full @error('email') border-red-500 @enderror" name="email"
value="{{ old('email') }}" required autocomplete="email" autofocus>

@error('email')
<p class="text-red-500 text-xs italic mt-4">
{{ $message }}
</p>
@enderror
</div>
@error('email')
<p class="text-red-500 text-xs italic mt-4">
{{ $message }}
</p>
@enderror
</div>

<div class="flex flex-wrap mb-6">
<label for="password" class="block text-gray-700 text-sm font-bold mb-2">
{{ __('Password') }}:
</label>
<div class="flex flex-wrap">
<label for="password" class="block text-gray-700 text-sm font-bold mb-2 sm:mb-4">
{{ __('Password') }}:
</label>

<input id="password" type="password" class="form-input w-full @error('password') border-red-500 @enderror" name="password" required>
<input id="password" type="password"
class="form-input w-full @error('password') border-red-500 @enderror" name="password"
required>

@error('password')
<p class="text-red-500 text-xs italic mt-4">
{{ $message }}
</p>
@enderror
</div>
@error('password')
<p class="text-red-500 text-xs italic mt-4">
{{ $message }}
</p>
@enderror
</div>

<div class="flex mb-6">
<label class="inline-flex items-center text-sm text-gray-700" for="remember">
<input type="checkbox" name="remember" id="remember" class="form-checkbox" {{ old('remember') ? 'checked' : '' }}>
<span class="ml-2">{{ __('Remember Me') }}</span>
</label>
</div>
<div class="flex items-center">
<label class="inline-flex items-center text-sm text-gray-700" for="remember">
<input type="checkbox" name="remember" id="remember" class="form-checkbox"
{{ old('remember') ? 'checked' : '' }}>
<span class="ml-2">{{ __('Remember Me') }}</span>
</label>

<div class="flex flex-wrap items-center">
<button type="submit" class="bg-blue-500 hover:bg-blue-700 text-gray-100 font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
{{ __('Login') }}
</button>
@if (Route::has('password.request'))
<a class="text-sm text-blue-500 hover:text-blue-700 whitespace-no-wrap no-underline hover:underline ml-auto"
href="{{ route('password.request') }}">
{{ __('Forgot Your Password?') }}
</a>
@endif
</div>

@if (Route::has('password.request'))
<a class="text-sm text-blue-500 hover:text-blue-700 whitespace-no-wrap no-underline ml-auto" href="{{ route('password.request') }}">
{{ __('Forgot Your Password?') }}
</a>
@endif
<div class="flex flex-wrap">
<button type="submit"
class="w-full select-none font-bold whitespace-no-wrap p-3 rounded-lg text-base leading-normal no-underline text-gray-100 bg-blue-500 hover:bg-blue-700 sm:py-4">
{{ __('Login') }}
</button>

@if (Route::has('register'))
<p class="w-full text-xs text-center text-gray-700 mt-8 -mb-4">
{{ __("Don't have an account?") }}
<a class="text-blue-500 hover:text-blue-700 no-underline" href="{{ route('register') }}">
{{ __('Register') }}
</a>
</p>
@endif
</div>
</form>
@if (Route::has('register'))
<p class="w-full text-xs text-center text-gray-700 my-6 sm:text-sm sm:my-8">
{{ __("Don't have an account?") }}
<a class="text-blue-500 hover:text-blue-700 no-underline hover:underline" href="{{ route('register') }}">
{{ __('Register') }}
</a>
</p>
@endif
</div>
</form>

</div>
</div>
</section>
</div>
</div>
</main>
@endsection
88 changes: 46 additions & 42 deletions src/tailwindcss-stubs/resources/views/auth/passwords/confirm.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,51 +1,55 @@
@extends('layouts.app')

@section('content')
<div class="container mx-auto">
<div class="flex flex-wrap justify-center">
<div class="w-full max-w-sm">
<div class="flex flex-col break-words bg-white border-2 rounded shadow-md">

<div class="font-semibold bg-gray-200 text-gray-700 py-3 px-6 mb-0">
{{ __('Confirm Password') }}
<main class="sm:container sm:mx-auto sm:max-w-lg sm:mt-10">
<div class="flex">
<div class="w-full">
<section class="flex flex-col break-words bg-white sm:border-1 sm:rounded-md sm:shadow-sm sm:shadow-lg">

<header class="font-semibold bg-gray-200 text-gray-700 py-5 px-6 sm:py-6 sm:px-8 sm:rounded-t-md">
{{ __('Confirm Password') }}
</header>

<form class="w-full px-6 space-y-6 sm:px-10 sm:space-y-8" method="POST" action="{{ route('password.confirm') }}">
@csrf

<p class="leading-normal text-gray-500">
{{ __('Please confirm your password before continuing.') }}
</p>

<div class="flex flex-wrap">
<label for="password" class="block text-gray-700 text-sm font-bold mb-2 sm:mb-4">
{{ __('Password') }}:
</label>

<input id="password" type="password"
class="form-input w-full @error('password') border-red-500 @enderror" name="password"
required autocomplete="new-password">

@error('password')
<p class="text-red-500 text-xs italic mt-4">
{{ $message }}
</p>
@enderror
</div>

<form class="w-full p-6" method="POST" action="{{ route('password.confirm') }}">
@csrf

<p class="leading-normal">
{{ __('Please confirm your password before continuing.') }}
</p>
<div class="flex flex-wrap justify-center items-center space-y-6 pb-6 sm:pb-10 sm:space-y-0 sm:justify-between">
<button type="submit"
class="w-full select-none font-bold whitespace-no-wrap p-3 rounded-lg text-base leading-normal no-underline text-gray-100 bg-blue-500 hover:bg-blue-700 sm:w-auto sm:px-4 sm:order-1">
{{ __('Confirm Password') }}
</button>

@if (Route::has('password.request'))
<a class="mt-4 text-xs text-blue-500 hover:text-blue-700 whitespace-no-wrap no-underline hover:underline sm:text-sm sm:order-0 sm:m-0"
href="{{ route('password.request') }}">
{{ __('Forgot Your Password?') }}
</a>
@endif
</div>
</form>

<div class="flex flex-wrap my-6">
<label for="password" class="block text-gray-700 text-sm font-bold mb-2">
{{ __('Password') }}:
</label>

<input id="password" type="password" class="form-input w-full @error('password') border-red-500 @enderror" name="password" required autocomplete="new-password">

@error('password')
<p class="text-red-500 text-xs italic mt-4">
{{ $message }}
</p>
@enderror
</div>

<div class="flex flex-wrap items-center">
<button type="submit" class="bg-blue-500 hover:bg-blue-700 text-gray-100 font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
{{ __('Confirm Password') }}
</button>

@if (Route::has('password.request'))
<a class="text-sm text-blue-500 hover:text-blue-700 whitespace-no-wrap no-underline ml-auto" href="{{ route('password.request') }}">
{{ __('Forgot Your Password?') }}
</a>
@endif
</div>
</form>

</div>
</div>
</section>
</div>
</div>
</main>
@endsection
91 changes: 47 additions & 44 deletions src/tailwindcss-stubs/resources/views/auth/passwords/email.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,53 +1,56 @@
@extends('layouts.app')

@section('content')
<div class="container mx-auto">
<div class="flex flex-wrap justify-center">
<div class="w-full max-w-sm">

@if (session('status'))
<div class="text-sm border border-t-8 rounded text-green-700 border-green-600 bg-green-100 px-3 py-4 mb-4" role="alert">
{{ session('status') }}
<main class="sm:container sm:mx-auto sm:max-w-lg sm:mt-10">
<div class="flex">
<div class="w-full">

@if (session('status'))
<div class="text-sm text-green-700 bg-green-100 px-5 py-6 sm:rounded sm:border sm:border-green-400 sm:mb-6"
role="alert">
{{ session('status') }}
</div>
@endif

<section class="flex flex-col break-words bg-white sm:border-1 sm:rounded-md sm:shadow-sm sm:shadow-lg">
<header class="font-semibold bg-gray-200 text-gray-700 py-5 px-6 sm:py-6 sm:px-8 sm:rounded-t-md">
{{ __('Reset Password') }}
</header>

<form class="w-full px-6 space-y-6 sm:px-10 sm:space-y-8" method="POST" action="{{ route('password.email') }}">
@csrf

<div class="flex flex-wrap">
<label for="email" class="block text-gray-700 text-sm font-bold mb-2 sm:mb-4">
{{ __('E-Mail Address') }}:
</label>

<input id="email" type="email"
class="form-input w-full @error('email') border-red-500 @enderror" name="email"
value="{{ old('email') }}" required autocomplete="email" autofocus>

@error('email')
<p class="text-red-500 text-xs italic mt-4">
{{ $message }}
</p>
@enderror
</div>
@endif

<div class="flex flex-col break-words bg-white border-2 rounded shadow-md">

<div class="font-semibold bg-gray-200 text-gray-700 py-3 px-6 mb-0">
{{ __('Reset Password') }}
<div class="flex flex-wrap justify-center items-center space-y-6 pb-6 sm:pb-10 sm:space-y-0 sm:justify-between">
<button type="submit"
class="w-full select-none font-bold whitespace-no-wrap p-3 rounded-lg text-base leading-normal no-underline text-gray-100 bg-blue-500 hover:bg-blue-700 sm:w-auto sm:px-4 sm:order-1">
{{ __('Send Password Reset Link') }}
</button>

<p class="mt-4 text-xs text-blue-500 hover:text-blue-700 whitespace-no-wrap no-underline hover:underline sm:text-sm sm:order-0 sm:m-0">
<a class="text-blue-500 hover:text-blue-700 no-underline" href="{{ route('login') }}">
{{ __('Back to login') }}
</a>
</p>
</div>

<form class="w-full p-6" method="POST" action="{{ route('password.email') }}">
@csrf

<div class="flex flex-wrap mb-6">
<label for="email" class="block text-gray-700 text-sm font-bold mb-2">
{{ __('E-Mail Address') }}:
</label>

<input id="email" type="email" class="form-input w-full @error('email') border-red-500 @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus>

@error('email')
<p class="text-red-500 text-xs italic mt-4">
{{ $message }}
</p>
@enderror
</div>

<div class="flex flex-wrap">
<button type="submit" class="bg-blue-500 hover:bg-blue-700 text-gray-100 font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
{{ __('Send Password Reset Link') }}
</button>

<p class="w-full text-xs text-center text-gray-700 mt-8 -mb-4">
<a class="text-blue-500 hover:text-blue-700 no-underline" href="{{ route('login') }}">
{{ __('Back to login') }}
</a>
</p>
</div>
</form>
</div>
</div>
</form>
</section>
</div>
</div>
</main>
@endsection
Loading