From d7d2bc23978d85f29f77c7c065e784b791224543 Mon Sep 17 00:00:00 2001
From: shibafu <shibafu528@gmail.com>
Date: Sat, 24 Oct 2020 14:32:30 +0900
Subject: [PATCH] =?UTF-8?q?=E3=83=97=E3=83=AD=E3=83=95=E3=82=A3=E3=83=BC?=
 =?UTF-8?q?=E3=83=AB=E3=83=9A=E3=83=BC=E3=82=B8=E3=81=AE=E3=82=BF=E3=83=96?=
 =?UTF-8?q?=E5=91=A8=E3=82=8A=E3=81=AE=E3=83=87=E3=82=B6=E3=82=A4=E3=83=B3?=
 =?UTF-8?q?=E3=82=92=E5=88=B7=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 resources/assets/sass/_underline-tabs.scss   | 16 ++++++
 resources/assets/sass/app.scss               |  3 +
 resources/views/components/profile.blade.php | 43 ++++++--------
 resources/views/user/base.blade.php          | 59 ++++++++++----------
 4 files changed, 67 insertions(+), 54 deletions(-)
 create mode 100644 resources/assets/sass/_underline-tabs.scss

diff --git a/resources/assets/sass/_underline-tabs.scss b/resources/assets/sass/_underline-tabs.scss
new file mode 100644
index 0000000..8e5f9aa
--- /dev/null
+++ b/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;
+        }
+    }
+}
diff --git a/resources/assets/sass/app.scss b/resources/assets/sass/app.scss
index a613a07..25c375d 100644
--- a/resources/assets/sass/app.scss
+++ b/resources/assets/sass/app.scss
@@ -18,3 +18,6 @@ $primary: #e53fb1;
 
 // Tag
 @import "tag/index";
+
+// Underline tabs
+@import "underline-tabs";
diff --git a/resources/views/components/profile.blade.php b/resources/views/components/profile.blade.php
index 253e187..6bfa60c 100644
--- a/resources/views/components/profile.blade.php
+++ b/resources/views/components/profile.blade.php
@@ -1,32 +1,23 @@
-<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>
+@if (!empty($user->bio) || !empty($user->url))
+    <div class="card mb-4">
+        <div class="card-body">
+            {{-- Bio --}}
+            @if (!empty($user->bio))
+                <p class="card-text mb-0">
+                    {!! Formatter::linkify(nl2br(e($user->bio))) !!}
+                </p>
             @endif
-        </h6>
 
-        {{-- Bio --}}
-        @if (!empty($user->bio))
-            <p class="card-text mt-3 mb-0">
-                {!! Formatter::linkify(nl2br(e($user->bio))) !!}
-            </p>
-        @endif
-
-        {{-- URL --}}
-        @if (!empty($user->url))
-            <p class="card-text d-flex mt-3">
-                <span class="oi oi-link-intact mr-1 mt-1"></span>
-                <a href="{{ $user->url }}" rel="me nofollow noopener" target="_blank" class="text-truncate">{{ preg_replace('~\Ahttps?://~', '', $user->url) }}</a>
-            </p>
-        @endif
+            {{-- URL --}}
+            @if (!empty($user->url))
+                <p class="card-text d-flex mt-3">
+                    <span class="oi oi-link-intact mr-1 mt-1"></span>
+                    <a href="{{ $user->url }}" rel="me nofollow noopener" target="_blank" class="text-truncate">{{ preg_replace('~\Ahttps?://~', '', $user->url) }}</a>
+                </p>
+            @endif
+        </div>
     </div>
-</div>
+@endif
 
 @if (!$user->is_protected || $user->isMe())
     <div class="card mb-4">
diff --git a/resources/views/user/base.blade.php b/resources/views/user/base.blade.php
index 67c49ee..517071f 100644
--- a/resources/views/user/base.blade.php
+++ b/resources/views/user/base.blade.php
@@ -1,45 +1,48 @@
 @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 badge-primary">{{ $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>
+                @yield('tab-content')
             </div>
         </div>
     </div>