Merge pull request #534 from shikorism/feature/refresh-navigations

プロフィールページ内タブのデザイン変更とヘッダーナビゲーションの再編

resources/assets/sass/_underline-tabs.scss

@@ -0,0 +1,24 @@
+.tis-nav-underline-tabs {
+    margin-bottom: -1px;
+
+    .nav-link {
+        padding: 0.5rem 1.25rem;
+        color: $secondary;
+        border-bottom: 2px solid transparent;
+        transition: border-bottom-color .12s ease-in;
+
+        @include media-breakpoint-up(lg) {
+            padding: 1rem 1.25rem;
+        }
+
+        &.active {
+            color: $primary;
+            border-bottom-color: $primary;
+        }
+
+        &:not(.active):hover {
+            border-bottom-color: transparentize($secondary, 0.3);
+            transition: border-bottom-color .4s ease-out;
+        }
+    }
+}

resources/assets/sass/app.scss

@@ -15,6 +15,10 @@ $primary: #e53fb1;
 @import "components/link-card";
 @import "components/tag-input";
 @import "components/metadata-preview";
+@import "components/profile-mini";
 
 // Tag
 @import "tag/index";
+
+// Underline tabs
+@import "underline-tabs";

resources/assets/sass/components/_profile-mini.scss

@@ -0,0 +1,11 @@
+.tis-profile-mini {
+    &-display-name {
+        font-size: 1.2rem;
+        font-weight: 500;
+    }
+
+    &-name {
+        margin-top: 0.125rem;
+        font-size: 0.8rem;
+    }
+}

resources/views/components/header-dropdown-menu.blade.php

@@ -0,0 +1,17 @@
+<a href="{{ route('user.profile', ['name' => Auth::user()->name]) }}" class="dropdown-item">
+    <strong>{{ Auth::user()->display_name }}</strong>
+    <p class="mb-0 text-muted">
+        <span>&commat;{{ Auth::user()->name }}</span>
+    </p>
+</a>
+<div class="dropdown-divider"></div>
+<a href="{{ route('user.profile', ['name' => Auth::user()->name]) }}" class="dropdown-item">プロフィール</a>
+<a href="{{ route('user.stats', ['name' => Auth::user()->name]) }}" class="dropdown-item">グラフ</a>
+<a href="{{ route('user.okazu', ['name' => Auth::user()->name]) }}" class="dropdown-item">オカズ</a>
+<a href="{{ route('user.likes', ['name' => Auth::user()->name]) }}" class="dropdown-item">いいね</a>
+<div class="dropdown-divider"></div>
+<a href="{{ route('setting') }}" class="dropdown-item">設定</a>
+@can ('admin')
+    <a href="{{ route('admin.dashboard') }}" class="dropdown-item">管理</a>
+@endcan
+<a href="{{ route('logout') }}" class="dropdown-item" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">ログアウト</a>

resources/views/components/profile-mini.blade.php

@@ -1,14 +1,14 @@
 <div class="d-flex flex-row align-items-end {{ $class ?? '' }}">
     <img src="{{ $user->getProfileImageUrl(48) }}" srcset="{{ Formatter::profileImageSrcSet($user, 48) }}" class="rounded mr-2">
     <div class="d-flex flex-column overflow-hidden">
-        <h5 class="card-title text-truncate">
+        <div class="tis-profile-mini-display-name text-truncate">
             <a class="text-dark" href="{{ route('user.profile', ['name' => $user->name]) }}">{{ $user->display_name }}</a>
-        </h5>
+        </div>
-        <h6 class="card-subtitle">
+        <div class="tis-profile-mini-name">
             <a class="text-muted" href="{{ route('user.profile', ['name' => $user->name]) }}">&commat;{{ $user->name }}</a>
             @if ($user->is_protected)
                 <span class="oi oi-lock-locked text-muted"></span>
             @endif
-        </h6>
+        </div>
     </div>
 </div>

resources/views/components/profile.blade.php

@@ -1,19 +1,9 @@
-<div class="card mb-4">
+@if (!empty($user->bio) || !empty($user->url))
+    <div class="card mb-4">
         <div class="card-body">
-        <img src="{{ $user->getProfileImageUrl(128) }}" srcset="{{ Formatter::profileImageSrcSet($user, 128) }}" class="rounded mb-1">
-        <h4 class="card-title">
-            <a class="text-dark" href="{{ route('user.profile', ['name' => $user->name]) }}">{{ $user->display_name }}</a>
-        </h4>
-        <h6 class="card-subtitle">
-            <a class="text-muted" href="{{ route('user.profile', ['name' => $user->name]) }}">&commat;{{ $user->name }}</a>
-            @if ($user->is_protected)
-                <span class="oi oi-lock-locked text-muted"></span>
-            @endif
-        </h6>
-
             {{-- Bio --}}
             @if (!empty($user->bio))
-            <p class="card-text mt-3 mb-0">
+                <p class="card-text mb-0">
                     {!! Formatter::linkify(nl2br(e($user->bio))) !!}
                 </p>
             @endif
@@ -26,7 +16,8 @@
                 </p>
             @endif
         </div>
-</div>
+    </div>
+@endif
 
 @if (!$user->is_protected || $user->isMe())
     <div class="card mb-4">

resources/views/layouts/base.blade.php

@@ -43,21 +43,7 @@
                         <img src="{{ Auth::user()->getProfileImageUrl(30) }}" srcset="{{ Formatter::profileImageSrcSet(Auth::user(), 30) }}" width="30" height="30" class="rounded d-inline-block align-top">
                     </a>
                     <div class="dropdown-menu dropdown-menu-right position-absolute" aria-labelledby="navbarDropdownMenuLink" id="navbarAccountDropdownSp">
-                        <a href="{{ route('user.profile', ['name' => Auth::user()->name]) }}" class="dropdown-item text-truncate">
+                        @include('components.header-dropdown-menu')
-                            <strong>{{ Auth::user()->display_name }}</strong>
-                            <p class="mb-0 text-muted">
-                                <span>&commat;{{ Auth::user()->name }}</span>
-                            </p>
-                        </a>
-                        <div class="dropdown-divider"></div>
-                        <a href="{{ route('user.profile', ['name' => Auth::user()->name]) }}" class="dropdown-item">プロフィール</a>
-                        <a href="{{ route('user.likes', ['name' => Auth::user()->name]) }}" class="dropdown-item">いいね</a>
-                        <div class="dropdown-divider"></div>
-                        <a href="{{ route('setting') }}" class="dropdown-item">設定</a>
-                        @can ('admin')
-                            <a href="{{ route('admin.dashboard') }}" class="dropdown-item">管理</a>
-                        @endcan
-                        <a href="{{ route('logout') }}" class="dropdown-item" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">ログアウト</a>
                     </div>
                 </div>
             </div>
@@ -73,14 +59,8 @@
                         <li class="nav-item {{ stripos(Route::currentRouteName(), 'home') === 0 ? 'active' : ''}}">
                             <a class="nav-link" href="{{ route('home') }}">ホーム</a>
                         </li>
-                        <li class="nav-item {{ stripos(Route::currentRouteName(), 'user.profile') === 0 ? 'active' : ''}}">
+                        <li class="nav-item {{ stripos(Route::currentRouteName(), 'timeline.public') === 0 ? 'active' : ''}}">
-                            <a class="nav-link" href="{{ route('user.profile', ['name' => Auth::user()->name]) }}">タイムライン</a>
+                            <a class="nav-link" href="{{ route('timeline.public') }}">お惣菜</a>
-                        </li>
-                        <li class="nav-item {{ stripos(Route::currentRouteName(), 'user.stats') === 0 ? 'active' : ''}}">
-                            <a class="nav-link" href="{{ route('user.stats', ['name' => Auth::user()->name]) }}">グラフ</a>
-                        </li>
-                        <li class="nav-item {{ stripos(Route::currentRouteName(), 'user.okazu') === 0 ? 'active' : ''}}">
-                            <a class="nav-link" href="{{ route('user.okazu', ['name' => Auth::user()->name]) }}">オカズ</a>
                         </li>
                         <li class="nav-item {{ stripos(Route::currentRouteName(), 'tag') === 0 ? 'active' : ''}}">
                             <a class="nav-link" href="{{ route('tag') }}">タグ一覧</a>
@@ -106,21 +86,7 @@
                                 <img src="{{ Auth::user()->getProfileImageUrl(30) }}" srcset="{{ Formatter::profileImageSrcSet(Auth::user(), 30) }}" width="30" height="30" class="rounded d-inline-block align-top">
                             </a>
                             <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
-                                <a href="{{ route('user.profile', ['name' => Auth::user()->name]) }}" class="dropdown-item">
+                                @include('components.header-dropdown-menu')
-                                    <strong>{{ Auth::user()->display_name }}</strong>
-                                    <p class="mb-0 text-muted">
-                                        <span>&commat;{{ Auth::user()->name }}</span>
-                                    </p>
-                                </a>
-                                <div class="dropdown-divider"></div>
-                                <a href="{{ route('user.profile', ['name' => Auth::user()->name]) }}" class="dropdown-item">プロフィール</a>
-                                <a href="{{ route('user.likes', ['name' => Auth::user()->name]) }}" class="dropdown-item">いいね</a>
-                                <div class="dropdown-divider"></div>
-                                <a href="{{ route('setting') }}" class="dropdown-item">設定</a>
-                                @can ('admin')
-                                    <a href="{{ route('admin.dashboard') }}" class="dropdown-item">管理</a>
-                                @endcan
-                                <a href="{{ route('logout') }}" class="dropdown-item" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">ログアウト</a>
                             </div>
                         </li>
                     </ul>
@@ -132,15 +98,7 @@
                             <a class="btn btn-{{ stripos(Route::currentRouteName(), 'home') === 0 ? 'primary' : 'outline-secondary'}}" href="{{ route('home') }}" role="button">ホーム</a>
                         </div>
                         <div class="col">
-                            <a class="btn btn-{{ stripos(Route::currentRouteName(), 'user.profile') === 0 ? 'primary' : 'outline-secondary'}}" href="{{ route('user.profile', ['name' => Auth::user()->name]) }}" role="button">タイムライン</a>
+                            <a class="btn btn-{{ stripos(Route::currentRouteName(), 'timeline.public') === 0 ? 'primary' : 'outline-secondary'}}" href="{{ route('timeline.public') }}" role="button">お惣菜</a>
-                        </div>
-                    </div>
-                    <div class="row mt-2">
-                        <div class="col">
-                            <a class="btn btn-{{ stripos(Route::currentRouteName(), 'user.stats') === 0 ? 'primary' : 'outline-secondary'}}" href="{{ route('user.stats', ['name' => Auth::user()->name]) }}" role="button">グラフ</a>
-                        </div>
-                        <div class="col">
-                            <a class="btn btn-{{ stripos(Route::currentRouteName(), 'user.okazu') === 0 ? 'primary' : 'outline-secondary'}}" href="{{ route('user.okazu', ['name' => Auth::user()->name]) }}" role="button">オカズ</a>
                         </div>
                     </div>
                     <div class="row mt-2">

resources/views/user/base.blade.php

@@ -1,46 +1,49 @@
 @extends('layouts.base')
 
 @section('content')
+    <div class="container-fluid border-bottom mb-4 mt-n1 mt-lg-n4 px-0">
+        <div class="container">
+            <div class="row align-items-center">
+                <div class="col-lg-4">
+                    @component('components.profile-mini', ['user' => $user])
+                    @endcomponent
+                </div>
+                <div class="col-lg-8 mt-3 mt-lg-2 px-0 px-md-2">
+                    <ul class="nav tis-nav-underline-tabs flex-nowrap overflow-auto">
+                        <li class="nav-item flex-shrink-0">
+                            <a class="nav-link {{ Route::currentRouteName() === 'user.profile' ? 'active' : '' }}" href="{{ route('user.profile', ['name' => $user->name]) }}">タイムライン</a>
+                        </li>
+                        <li class="nav-item flex-shrink-0">
+                            <a class="nav-link {{ stripos(Route::currentRouteName(), 'user.stats') === 0 ? 'active' : '' }}" href="{{ route('user.stats', ['name' => $user->name]) }}">グラフ</a>
+                        </li>
+                        <li class="nav-item flex-shrink-0">
+                            <a class="nav-link {{ Route::currentRouteName() === 'user.okazu' ? 'active' : '' }}" href="{{ route('user.okazu', ['name' => $user->name]) }}">オカズ</a>
+                        </li>
+                        <li class="nav-item flex-shrink-0">
+                            <a class="nav-link {{ Route::currentRouteName() === 'user.likes' ? 'active' : '' }}" href="{{ route('user.likes', ['name' => $user->name]) }}">いいね
+                                @if ($user->isMe() || !($user->is_protected || $user->private_likes))
+                                    <span class="badge {{ Route::currentRouteName() === 'user.likes' ? 'badge-primary' : 'badge-secondary' }}">{{ $user->likes()->count() }}</span>
+                                @endif
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
     <div class="container">
         <div class="row">
             <div class="col-lg-4">
                 @if (Route::currentRouteName() === 'user.profile')
                     @component('components.profile', ['user' => $user])
                     @endcomponent
-                @else
-                    <div class="card mb-4">
-                        <div class="card-body">
-                            @component('components.profile-mini', ['user' => $user])
-                            @endcomponent
-                        </div>
-                    </div>
                 @endif
                 @section('sidebar')
                 @show
             </div>
             <div class="col-lg-8">
-                <ul class="nav nav-tabs">
-                    <li class="nav-item">
-                        <a class="nav-link {{ Route::currentRouteName() === 'user.profile' ? 'active' : '' }}" href="{{ route('user.profile', ['name' => $user->name]) }}">タイムライン</a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link {{ stripos(Route::currentRouteName(), 'user.stats') === 0 ? 'active' : '' }}" href="{{ route('user.stats', ['name' => $user->name]) }}">グラフ</a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link {{ Route::currentRouteName() === 'user.okazu' ? 'active' : '' }}" href="{{ route('user.okazu', ['name' => $user->name]) }}">オカズ</a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link {{ Route::currentRouteName() === 'user.likes' ? 'active' : '' }}" href="{{ route('user.likes', ['name' => $user->name]) }}">いいね
-                            @if ($user->isMe() || !($user->is_protected || $user->private_likes))
-                                <span class="badge badge-primary">{{ $user->likes()->count() }}</span>
-                            @endif
-                        </a>
-                    </li>
-                </ul>
-                <div class="tab-content">
                 @yield('tab-content')
             </div>
         </div>
     </div>
-    </div>
 @endsection