プロフィールページのタブ周りのデザインを刷新

resources/assets/sass/_underline-tabs.scss

@@ -0,0 +1,16 @@
+.tis-nav-underline-tabs {
+    margin-bottom: -1px;
+
+    .nav-link {
+        padding: 0.5rem 1.25rem;
+        border-bottom: 4px solid transparent;
+
+        @include media-breakpoint-up(lg) {
+            padding: 1rem 1.25rem;
+        }
+
+        &.active {
+            border-bottom-color: $primary;
+        }
+    }
+}

resources/assets/sass/app.scss

@@ -18,3 +18,6 @@ $primary: #e53fb1;
 
 // Tag
 @import "tag/index";
+
+// Underline tabs
+@import "underline-tabs";

resources/views/components/profile.blade.php

@@ -1,19 +1,9 @@
+@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
@@ -27,6 +17,7 @@
             @endif
         </div>
     </div>
+@endif
 
 @if (!$user->is_protected || $user->isMe())
     <div class="card mb-4">

resources/views/user/base.blade.php

@@ -1,35 +1,25 @@
 @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">
+            <div class="row align-items-center">
                 <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>
+                <div class="col-lg-8 mt-3 mt-lg-2 px-0 px-md-2">
-                @endif
+                    <ul class="nav tis-nav-underline-tabs flex-nowrap overflow-auto">
-                @section('sidebar')
+                        <li class="nav-item flex-shrink-0">
-                @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">
+                        <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">
+                        <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">
+                        <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 badge-primary">{{ $user->likes()->count() }}</span>
@@ -37,10 +27,23 @@
                             </a>
                         </li>
                     </ul>
-                <div class="tab-content">
+                </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
+                @endif
+                @section('sidebar')
+                @show
+            </div>
+            <div class="col-lg-8">
                 @yield('tab-content')
             </div>
         </div>
     </div>
-    </div>
 @endsection