Merge pull request #358 from shikorism/feature/remake-user-page

グラフページの再編

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

@@ -0,0 +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">
+            <a class="text-dark" href="{{ route('user.profile', ['name' => $user->name]) }}">{{ $user->display_name }}</a>
+        </h5>
+        <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>
+    </div>
+</div>

resources/views/home.blade.php

@@ -9,20 +9,8 @@
         <div class="col-lg-4">
             <div class="card mb-4">
                 <div class="card-body">
-                    <div class="d-flex flex-row align-items-end mb-4">
-                        <img src="{{ Auth::user()->getProfileImageUrl(48) }}" srcset="{{ Formatter::profileImageSrcSet(Auth::user(), 48) }}" class="rounded mr-2">
-                        <div class="d-flex flex-column overflow-hidden">
-                            <h5 class="card-title text-truncate">
-                                <a class="text-dark" href="{{ route('user.profile', ['name' => Auth::user()->name]) }}">{{ Auth::user()->display_name }}</a>
-                            </h5>
-                            <h6 class="card-subtitle">
-                                <a class="text-muted" href="{{ route('user.profile', ['name' => Auth::user()->name]) }}">&commat;{{ Auth::user()->name }}</a>
-                                @if (Auth::user()->is_protected)
-                                    <span class="oi oi-lock-locked text-muted"></span>
-                                @endif
-                            </h6>
-                        </div>
-                    </div>
+                    @component('components.profile-mini', ['user' => Auth::user(), 'class' => 'mb-4'])
+                    @endcomponent
                     @component('components.profile-stats', ['user' => Auth::user()])
                     @endcomponent
                 </div>

resources/views/user/base.blade.php

@@ -4,8 +4,17 @@
     <div class="container">
         <div class="row">
             <div class="col-lg-4">
-                @component('components.profile', ['user' => $user])
-                @endcomponent
+                @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>
@@ -15,7 +24,7 @@
                         <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 {{ Route::currentRouteName() === 'user.stats' ? 'active' : '' }}" href="{{ route('user.stats', ['name' => $user->name]) }}">グラフ</a>
+                        <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>

resources/views/user/profile.blade.php

@@ -2,6 +2,12 @@
 
 @section('title', $user->display_name . ' (@' . $user->name . ')')
 
+@push('head')
+    @if (Route::currentRouteName() === 'user.profile')
+        <link rel="stylesheet" href="//cdn.jsdelivr.net/cal-heatmap/3.3.10/cal-heatmap.css" />
+    @endif
+@endpush
+
 @section('sidebar')
     {{-- TODO: タイムラインとオカズのテンプレを分けたら条件外す --}}
     @if (Route::currentRouteName() === 'user.profile')
@@ -32,6 +38,11 @@
         <span class="oi oi-lock-locked"></span> このユーザはチェックイン履歴を公開していません。
     </p>
 @else
+    @if ($ejaculations->count() !== 0 && $ejaculations->currentPage() === 1)
+        <h5 class="mx-4 my-3">Shikontributions</h5>
+        <div id="cal-heatmap" class="tis-contribution-graph mx-4 mt-3"></div>
+        <hr class="mt-4 mb-2">
+    @endif
     <ul class="list-group">
         @forelse ($ejaculations as $ejaculation)
             <li class="list-group-item border-bottom-only pt-3 pb-3 text-break">
@@ -116,3 +127,10 @@
     @endslot
 @endcomponent
 @endsection
+
+@push('script')
+    <script id="count-by-day" type="application/json">@json($countByDay)</script>
+    <script src="{{ mix('js/vendor/chart.js') }}"></script>
+    <script src="{{ mix('js/user/profile.js') }}"></script>
+@endpush
+

resources/views/user/stats/base.blade.php

@@ -0,0 +1,70 @@
+@extends('user.base')
+
+@section('sidebar')
+    @if (!$user->is_protected || $user->isMe())
+        <div class="nav d-none d-lg-flex flex-column nav-pills" aria-orientation="vertical">
+            <a class="nav-link {{ Route::currentRouteName() === 'user.stats' ? 'active' : '' }}"
+               href="{{ route('user.stats', ['name' => $user->name]) }}">全期間</a>
+            @foreach ($availableMonths as $year => $months)
+                <div class="border-top mt-1">
+                    <a class="nav-link mt-1 {{ Route::currentRouteName() === 'user.stats.yearly' && $currentYear === $year ? 'active' : '' }}"
+                       href="{{ route('user.stats.yearly', ['name' => $user->name, 'year' => $year]) }}">{{ $year }}年</a>
+                    @foreach ($months as $month)
+                        <a class="nav-link ml-3 {{ Route::currentRouteName() === 'user.stats.monthly' && $currentYear === $year && $currentMonth === $month ? 'active' : '' }}"
+                           href="{{ route('user.stats.monthly', ['name' => $user->name, 'year' => $year, 'month' => $month]) }}">{{ $month }}月</a>
+                    @endforeach
+                </div>
+            @endforeach
+        </div>
+    @endif
+@endsection
+
+@section('tab-content')
+    @if ($user->is_protected && !$user->isMe())
+        <p class="mt-4">
+            <span class="oi oi-lock-locked"></span> このユーザはチェックイン履歴を公開していません。
+        </p>
+    @else
+        <div class="row my-2 d-lg-none">
+            <div class="col-12 text-secondary font-weight-bold small">グラフの対象期間</div>
+            <div class="col-6 text-secondary small">年</div>
+            <div class="col-6 text-secondary small">月</div>
+            <div class="col-12">
+                <ul class="nav nav-pills nav-fill">
+                    <li class="nav-item dropdown">
+                        <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
+                            {{ Route::currentRouteName() === 'user.stats' ? '全期間' : "{$currentYear}年" }}
+                        </a>
+                        <div class="dropdown-menu">
+                            <a href="{{ route('user.stats', ['name' => $user->name]) }}" class="dropdown-item">全期間</a>
+                            @foreach ($availableMonths as $year => $months)
+                                <a href="{{ route('user.stats.yearly', ['name' => $user->name, 'year' => $year]) }}" class="dropdown-item">{{ $year }}年</a>
+                            @endforeach
+                        </div>
+                    </li>
+                    @if (Route::currentRouteName() === 'user.stats')
+                        <li class="nav-item dropdown">
+                            <a class="nav-link dropdown-toggle disabled"
+                               href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">全期間</a>
+                        </li>
+                    @else
+                        <li class="nav-item dropdown">
+                            <a class="nav-link dropdown-toggle"
+                               href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
+                                {{ Route::currentRouteName() === 'user.stats.yearly' ? '全期間' : "{$currentMonth}月" }}
+                            </a>
+                            <div class="dropdown-menu">
+                                <a href="{{ route('user.stats.yearly', ['name' => $user->name, 'year' => $currentYear]) }}" class="dropdown-item">全期間</a>
+                                @foreach ($availableMonths[$currentYear] as $month)
+                                    <a href="{{ route('user.stats.monthly', ['name' => $user->name, 'year' => $currentYear, 'month' => $month]) }}" class="dropdown-item">{{ $month }}月</a>
+                                @endforeach
+                            </div>
+                        </li>
+                    @endif
+                </ul>
+            </div>
+        </div>
+        <div class="row d-lg-none no-gutters border-bottom"></div>
+        @yield('stats-content')
+    @endif
+@endsection

resources/views/user/stats/index.blade.php

@@ -0,0 +1,20 @@
+@extends('user.stats.base')
+
+@section('title', $user->display_name . ' さんのグラフ')
+
+@section('stats-content')
+    <h5 class="my-4">年間チェックイン回数</h5>
+    <canvas id="yearly-graph" class="w-100"></canvas>
+    <hr class="my-4">
+    <h5 class="my-4">時間別チェックイン回数</h5>
+    <canvas id="hourly-graph" class="w-100"></canvas>
+    <hr class="my-4">
+    <h5 class="my-4">曜日別チェックイン回数</h5>
+    <canvas id="dow-graph" class="w-100"></canvas>
+@endsection
+
+@push('script')
+<script id="graph-data" type="application/json">@json($graphData)</script>
+<script src="{{ mix('js/vendor/chart.js') }}"></script>
+<script src="{{ mix('js/user/stats.js') }}"></script>
+@endpush

resources/views/user/stats/monthly.blade.php

@@ -0,0 +1,17 @@
+@extends('user.stats.base')
+
+@section('title', $user->display_name . ' さんのグラフ')
+
+@section('stats-content')
+    <h5 class="my-4">時間別チェックイン回数</h5>
+    <canvas id="hourly-graph" class="w-100"></canvas>
+    <hr class="my-4">
+    <h5 class="my-4">曜日別チェックイン回数</h5>
+    <canvas id="dow-graph" class="w-100"></canvas>
+@endsection
+
+@push('script')
+<script id="graph-data" type="application/json">@json($graphData)</script>
+<script src="{{ mix('js/vendor/chart.js') }}"></script>
+<script src="{{ mix('js/user/stats.js') }}"></script>
+@endpush

resources/views/user/stats/yearly.blade.php

@@ -1,4 +1,4 @@
-@extends('user.base')
+@extends('user.stats.base')
 
 @section('title', $user->display_name . ' さんのグラフ')
 
@@ -6,34 +6,18 @@
 <link rel="stylesheet" href="//cdn.jsdelivr.net/cal-heatmap/3.3.10/cal-heatmap.css" />
 @endpush
 
-@section('tab-content')
-@if ($user->is_protected && !$user->isMe())
-    <p class="mt-4">
-        <span class="oi oi-lock-locked"></span> このユーザはチェックイン履歴を公開していません。
-    </p>
-@else
+@section('stats-content')
     <h5 class="my-4">Shikontribution graph</h5>
     <div id="cal-heatmap" class="tis-contribution-graph"></div>
     <hr class="my-4">
-    <div class="row my-4">
-        <div class="col-12 col-lg-6 d-flex align-items-center">
-            <h5 class="my-0">月間チェックイン回数</h5>
-        </div>
-        <div class="col-12 col-lg-6 mt-2 mt-lg-0">
-            <select id="monthly-term" class="form-control"></select>
-        </div>
-    </div>
+    <h5 class="my-4">月間チェックイン回数</h5>
     <canvas id="monthly-graph" class="w-100"></canvas>
     <hr class="my-4">
-    <h5 class="my-4">年間チェックイン回数</h5>
-    <canvas id="yearly-graph" class="w-100"></canvas>
-    <hr class="my-4">
     <h5 class="my-4">時間別チェックイン回数</h5>
     <canvas id="hourly-graph" class="w-100"></canvas>
     <hr class="my-4">
     <h5 class="my-4">曜日別チェックイン回数</h5>
     <canvas id="dow-graph" class="w-100"></canvas>
-@endif
 @endsection
 
 @push('script')