Closed YNSTakeru closed 5 months ago
ログインと登録ページのUIを更新しました。
-Bladeテンプレートのログインと登録ページのUIを更新しました。
Conduitのログイン、ログアウトに合わせるため
ログイン、登録、ホームページの見た目と動作が変わります。
Bladeテンプレートのコードを更新し、新しいUIを反映させました。
diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php index 78b684f..662e11e 100644 --- a/resources/views/auth/login.blade.php +++ b/resources/views/auth/login.blade.php @@ -1,47 +1,28 @@ <x-guest-layout> - <!-- Session Status --> - <x-auth-session-status class="mb-4" :status="session('status')" /> - - <form method="POST" action="{{ route('login') }}"> - @csrf - - <!-- Email Address --> - <div> - <x-input-label for="email" :value="__('Email')" /> - <x-text-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required autofocus autocomplete="username" /> - <x-input-error :messages="$errors->get('email')" class="mt-2" /> - </div> - - <!-- Password --> - <div class="mt-4"> - <x-input-label for="password" :value="__('Password')" /> - - <x-text-input id="password" class="block mt-1 w-full" - type="password" - name="password" - required autocomplete="current-password" /> - - <x-input-error :messages="$errors->get('password')" class="mt-2" /> - </div> - - <!-- Remember Me --> - <div class="block mt-4"> - <label for="remember_me" class="inline-flex items-center"> - <input id="remember_me" type="checkbox" class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500" name="remember"> - <span class="ms-2 text-sm text-gray-600">{{ __('Remember me') }}</span> - </label> - </div> - - <div class="flex items-center justify-end mt-4"> - @if (Route::has('password.request')) - <a class="underline text-sm text-gray-600 hover:text-gray-900 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" href="{{ route('password.request') }}"> - {{ __('Forgot your password?') }} - </a> - @endif - - <x-primary-button class="ms-3"> - {{ __('Log in') }} - </x-primary-button> + <div class="auth-page"> + <div class="container page"> + <div class="row"> + <div class="col-md-6 offset-md-3 col-xs-12"> + <h1 class="text-xs-center">Sign in</h1> + <p class="text-xs-center"> + <a href="/register">Need an account?</a> + </p> + + <ul class="error-messages"> + <li>That email is already taken</li> + </ul> + + <form> + <fieldset class="form-group"> + <input class="form-control form-control-lg" type="text" placeholder="Email" /> + </fieldset> + <fieldset class="form-group"> + <input class="form-control form-control-lg" type="password" placeholder="Password" /> + </fieldset> + <button class="btn btn-lg btn-primary pull-xs-right">Sign in</button> + </form> + </div> + </div> </div> - </form> + </div> </x-guest-layout> diff --git a/resources/views/auth/register.blade.php b/resources/views/auth/register.blade.php index a857242..680af09 100644 --- a/resources/views/auth/register.blade.php +++ b/resources/views/auth/register.blade.php @@ -1,52 +1,31 @@ <x-guest-layout> - <form method="POST" action="{{ route('register') }}"> - @csrf - - <!-- Name --> - <div> - <x-input-label for="name" :value="__('Name')" /> - <x-text-input id="name" class="block mt-1 w-full" type="text" name="name" :value="old('name')" required autofocus autocomplete="name" /> - <x-input-error :messages="$errors->get('name')" class="mt-2" /> - </div> - - <!-- Email Address --> - <div class="mt-4"> - <x-input-label for="email" :value="__('Email')" /> - <x-text-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required autocomplete="username" /> - <x-input-error :messages="$errors->get('email')" class="mt-2" /> - </div> - - <!-- Password --> - <div class="mt-4"> - <x-input-label for="password" :value="__('Password')" /> - - <x-text-input id="password" class="block mt-1 w-full" - type="password" - name="password" - required autocomplete="new-password" /> - - <x-input-error :messages="$errors->get('password')" class="mt-2" /> - </div> - - <!-- Confirm Password --> - <div class="mt-4"> - <x-input-label for="password_confirmation" :value="__('Confirm Password')" /> - - <x-text-input id="password_confirmation" class="block mt-1 w-full" - type="password" - name="password_confirmation" required autocomplete="new-password" /> - - <x-input-error :messages="$errors->get('password_confirmation')" class="mt-2" /> - </div> - - <div class="flex items-center justify-end mt-4"> - <a class="underline text-sm text-gray-600 hover:text-gray-900 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" href="{{ route('login') }}"> - {{ __('Already registered?') }} - </a> - - <x-primary-button class="ms-4"> - {{ __('Register') }} - </x-primary-button> + <div class="auth-page"> + <div class="container page"> + <div class="row"> + <div class="col-md-6 offset-md-3 col-xs-12"> + <h1 class="text-xs-center">Sign up</h1> + <p class="text-xs-center"> + <a href="/login">Have an account?</a> + </p> + + <ul class="error-messages"> + <li>That email is already taken</li> + </ul> + + <form> + <fieldset class="form-group"> + <input class="form-control form-control-lg" type="text" placeholder="Username" /> + </fieldset> + <fieldset class="form-group"> + <input class="form-control form-control-lg" type="text" placeholder="Email" /> + </fieldset> + <fieldset class="form-group"> + <input class="form-control form-control-lg" type="password" placeholder="Password" /> + </fieldset> + <button class="btn btn-lg btn-primary pull-xs-right">Sign up</button> + </form> + </div> + </div> </div> - </form> + </div> </x-guest-layout> diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php index a926ebc..9e53ecb 100644 --- a/resources/views/home.blade.php +++ b/resources/views/home.blade.php @@ -1,130 +1,84 @@ -<!DOCTYPE html> -<html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> + <x-guest-layout> + <main> + <div class="home-page"> + <div class="banner"> + <div class="container"> + <h1 class="logo-font">conduit</h1> + <p>A place to share your knowledge.</p> + </div> + </div> -<head> - <meta charset="utf-8" /> - <title>Conduit</title> - <!-- Import Ionicon icons & Google Fonts our Bootstrap theme relies on --> - <link href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css" /> - <link - href="//fonts.googleapis.com/css?family=Titillium+Web:700|Source+Serif+Pro:400,700|Merriweather+Sans:400,700|Source+Sans+Pro:400,300,600,700,300italic,400italic,600italic,700italic" - rel="stylesheet" type="text/css" /> - <!-- Import the custom Bootstrap 4 theme from our hosted CDN --> - <link rel="stylesheet" href="//demo.productionready.io/main.css" /> - <link rel="stylesheet" href="{{ asset('/css/custom.css') }}"> -</head> + <div class="container page"> + <div class="row"> + <div class="col-md-9"> + <div class="feed-toggle"> + <ul class="nav nav-pills outline-active"> + <li class="nav-item"> + <a class="nav-link" href="">Your Feed</a> + </li> + <li class="nav-item"> + <a class="nav-link active" href="">Global Feed</a> + </li> + </ul> + </div> + @foreach ($articles as $article) + @php $user = $users->where('id', $article->user_id)->first(); @endphp + @php + $tagsArticles = $articleTags->where('article_id', $article->id)->all(); + @endphp -<body class="font-sans antialiased"> - <header> - <nav class="navbar navbar-light"> - <div class="container"> - <a class="navbar-brand" href="/">conduit</a> - <ul class="nav navbar-nav pull-xs-right"> - <li class="nav-item"> - <!-- Add "active" class when you're on that page" --> - <a class="nav-link active" href="/">Home</a> - </li> - <li class="nav-item"> - <a class="nav-link" href="/login">Sign in</a> - </li> - <li class="nav-item"> - <a class="nav-link" href="/register">Sign up</a> - </li> - </ul> - </div> - </nav> - </header> - <main> - <div class="home-page"> - <div class="banner"> - <div class="container"> - <h1 class="logo-font">conduit</h1> - <p>A place to share your knowledge.</p> - </div> - </div> + <div class="article-preview"> + <div class="article-meta"> + <a href="/profile/eric-simons"><img src={{ $user->avatar }} /></a> + <div class="info"> + <a href="/profile/eric-simons" class="author"> {{ $user->name }} </a> + <span class="date">{{ $article->created_at }}</span> + </div> + <button class="btn btn-outline-primary btn-sm pull-xs-right"> + <i class="ion-heart"></i> {{ $article->favorite_count }} + </button> + </div> + <a href="/article/how-to-build-webapps-that-scale" class="preview-link"> + <h1>{{ $article->title }}</h1> + <p>{{ $article->content }}</p> + <div class="custom-article-footer"> + <span>Read more...</span> + <ul class="tag-list custom-tag-list"> + @foreach ($tagsArticles as $tagsArticle) + @php $tag = $tags->where('id', $tagsArticle->tag_id)->first(); @endphp + <li class="tag-default tag-pill tag-outline custom-tag"> + {{ $tagsArticle->tag_id }} + </li> + @endforeach + </ul> + </div> + </a> + </div> + @endforeach - <div class="container page"> - <div class="row"> - <div class="col-md-9"> - <div class="feed-toggle"> - <ul class="nav nav-pills outline-active"> - <li class="nav-item"> - <a class="nav-link" href="">Your Feed</a> - </li> - <li class="nav-item"> - <a class="nav-link active" href="">Global Feed</a> - </li> - </ul> - </div> - @foreach ($articles as $article) - @php $user = $users->where('id', $article->user_id)->first(); @endphp - @php - $tagsArticles = $articleTags->where('article_id', $article->id)->all(); - @endphp + {{ $articles->links() }} + </div> - <div class="article-preview"> - <div class="article-meta"> - <a href="/profile/eric-simons"><img src={{ $user->avatar }} /></a> - <div class="info"> - <a href="/profile/eric-simons" class="author"> {{ $user->name }} </a> - <span class="date">{{ $article->created_at }}</span> - </div> - <button class="btn btn-outline-primary btn-sm pull-xs-right"> - <i class="ion-heart"></i> {{ $article->favorite_count }} - </button> - </div> - <a href="/article/how-to-build-webapps-that-scale" class="preview-link"> - <h1>{{ $article->title }}</h1> - <p>{{ $article->content }}</p> - <div class="custom-article-footer"> - <span>Read more...</span> - <ul class="tag-list custom-tag-list"> - @foreach ($tagsArticles as $tagsArticle) - @php $tag = $tags->where('id', $tagsArticle->tag_id)->first(); @endphp - <li class="tag-default tag-pill tag-outline custom-tag"> - {{ $tagsArticle->tag_id }} - </li> - @endforeach - </ul> - </div> - </a> - </div> - @endforeach + <div class="col-md-3"> + <div class="sidebar"> + <p>Popular Tags</p> - {{ $articles->links() }} - </div> - - <div class="col-md-3"> - <div class="sidebar"> - <p>Popular Tags</p> - - <div class="tag-list"> - @foreach ($favoriteTags as $favoriteTag) - <button class="tag-pill tag-default">{{ $favoriteTag->tag_name }}</button> - @endforeach - </div> - </div> - </div> - </div> - </div> - </div> - </main> - <footer> - <div class="container"> - <a href="/" class="logo-font">conduit</a> - <span class="attribution"> - An interactive learning project from <a href="https://thinkster.io">Thinkster</a>. Code & - design licensed under MIT. - </span> - </div> - </footer> - <script> - window.onload = function() { - window.location.hash = '#/'; - history.replaceState('#/', document.title, window.location.pathname); - }; - </script> - <script src="{{ asset('/js/home/popularTagBtn.js') }}"></script> -</body> - -</html> + <div class="tag-list"> + @foreach ($favoriteTags as $favoriteTag) + <button class="tag-pill tag-default">{{ $favoriteTag->tag_name }}</button> + @endforeach + </div> + </div> + </div> + </div> + </div> + </div> + </main> + <script> + window.onload = function() { + window.location.hash = '#/'; + history.replaceState('#/', document.title, window.location.pathname); + }; + </script> + <script src="{{ asset('/js/home/popularTagBtn.js') }}"></script> + </x-guest-layout> diff --git a/resources/views/layouts/guest.blade.php b/resources/views/layouts/guest.blade.php index 11feb47..2b3dd0e 100644 --- a/resources/views/layouts/guest.blade.php +++ b/resources/views/layouts/guest.blade.php @@ -1,30 +1,49 @@ <!DOCTYPE html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> - <head> - <meta charset="utf-8"> - <meta name="viewport" content="width=device-width, initial-scale=1"> - <meta name="csrf-token" content="{{ csrf_token() }}"> - <title>{{ config('app.name', 'Laravel') }}</title> +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <meta name="csrf-token" content="{{ csrf_token() }}"> - <!-- Fonts --> - <link rel="preconnect" href="https://fonts.bunny.net"> - <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" /> + <title>{{ config('app.name', 'Laravel') }}</title> - <!-- Scripts --> - @vite(['resources/css/app.css', 'resources/js/app.js']) - </head> - <body class="font-sans text-gray-900 antialiased"> - <div class="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gray-100"> - <div> - <a href="/"> - <x-application-logo class="w-20 h-20 fill-current text-gray-500" /> - </a> - </div> + <!-- Fonts --> + <link href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css" /> + <link rel="stylesheet" href="//demo.productionready.io/main.css" /> + <link rel="stylesheet" href="{{ asset('/css/custom.css') }}"> +</head> - <div class="w-full sm:max-w-md mt-6 px-6 py-4 bg-white shadow-md overflow-hidden sm:rounded-lg"> - {{ $slot }} +<body class="font-sans antialiased"> + <header> + <nav class="navbar navbar-light"> + <div class="container"> + <a class="navbar-brand" href="/">conduit</a> + <ul class="nav navbar-nav pull-xs-right"> + <li class="nav-item"> + <!-- Add "active" class when you're on that page" --> + <a class="nav-link active" href="/">Home</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="/login">Sign in</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="/register">Sign up</a> + </li> + </ul> </div> + </nav> + </header> + {{ $slot }} + <footer> + <div class="container"> + <a href="/" class="logo-font">conduit</a> + <span class="attribution"> + An interactive learning project from <a href="https://thinkster.io">Thinkster</a>. Code & + design licensed under MIT. + </span> </div> - </body> + </footer> +</body> + </html> diff --git a/routes/web.php b/routes/web.php index 74bb7ca..c24f675 100644 --- a/routes/web.php +++ b/routes/web.php @@ -1,11 +1,10 @@ <?php +use App\Http\Controllers\ArticleController; use App\Http\Controllers\ProfileController; use Illuminate\Support\Facades\Route; -Route::get('/', function () { - return view('welcome'); -}); +Route::get('/', [ArticleController::class, 'index'])->name('home'); Route::get('/dashboard', function () { return view('dashboard'); @@ -17,4 +16,6 @@ Route::delete('/profile', [ProfileController::class, 'destroy'])->name('profile.destroy'); }); + + require __DIR__.'/auth.php';
このdiffは、ログイン、登録、ホームページ、ゲストレイアウトのBladeテンプレートとルーティングを更新するものです。
ログインページ (login.blade.php) と登録ページ (register.blade.php) の更新:
元のフォーム要素が削除され、新しいデザインのフォーム要素が追加されました。 新しいデザインでは、エラーメッセージを表示するための<ul class="error-messages">が追加されました。 ホームページ (home.blade.php) の更新:
<ul class="error-messages">
元のHTML構造が削除され、新しいデザインのHTML構造が追加されました。 新しいデザインでは、記事のリストを表示するための@foreach ($articles as $article) が追加されました。 ゲストレイアウト (guest.blade.php) の更新:
@foreach ($articles as $article)
元のHTML構造が削除され、新しいデザインのHTML構造が追加されました。 新しいデザインでは、ヘッダーとフッターが追加され、ページのコンテンツは {{ $slot }} で表示されます。 ルーティング (web.php) の更新:
ホームページのルートが更新され、ArticleController の index メソッドにマッピングされました。
すべての変更が正しく反映されていることを確認しました。
何を変更したか
ログインと登録ページのUIを更新しました。
変更内容
-Bladeテンプレートのログインと登録ページのUIを更新しました。
変更の理由
Conduitのログイン、ログアウトに合わせるため
変更の影響
ログイン、登録、ホームページの見た目と動作が変わります。
どのように変更を行なったのか
Bladeテンプレートのコードを更新し、新しいUIを反映させました。
このdiffは、ログイン、登録、ホームページ、ゲストレイアウトのBladeテンプレートとルーティングを更新するものです。
ログインページ (login.blade.php) と登録ページ (register.blade.php) の更新:
元のフォーム要素が削除され、新しいデザインのフォーム要素が追加されました。 新しいデザインでは、エラーメッセージを表示するための
<ul class="error-messages">が追加されました。 ホームページ (home.blade.php) の更新:元のHTML構造が削除され、新しいデザインのHTML構造が追加されました。 新しいデザインでは、記事のリストを表示するための
@foreach ($articles as $article)が追加されました。 ゲストレイアウト (guest.blade.php) の更新:元のHTML構造が削除され、新しいデザインのHTML構造が追加されました。 新しいデザインでは、ヘッダーとフッターが追加され、ページのコンテンツは {{ $slot }} で表示されます。 ルーティング (web.php) の更新:
ホームページのルートが更新され、ArticleController の index メソッドにマッピングされました。
関連するIssueまたはPR
20
スクリーンショット
テスト
すべての変更が正しく反映されていることを確認しました。