pepepper/tissue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

Browse Source 
プロフィールページ内タブのデザイン変更とヘッダーナビゲーションの再編
This commit is contained in:
shibafu 2020-10-25 16:04:21 +09:00 committed by GitHub
commit 141067beab
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 113 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
resources/assets/sass/_underline-tabs.scss vendored Normal file
View File

@ -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;
}
}
}

4
resources/assets/sass/app.scss vendored
View File

@ -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";

11
resources/assets/sass/components/_profile-mini.scss vendored Normal file
View File

@ -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;
}
}

17
resources/views/components/header-dropdown-menu.blade.php Normal file
View File

@ -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>

8
resources/views/components/profile-mini.blade.php
View File

@ -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>
<h6 class="card-subtitle">
</div>
<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>

43
resources/views/components/profile.blade.php
View File

@ -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">

52
resources/views/layouts/base.blade.php
View File

@ -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">
<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>
@include('components.header-dropdown-menu')
</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' : ''}}">
<a class="nav-link" href="{{ route('user.profile', ['name' => Auth::user()->name]) }}">タイムライン</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 class="nav-item {{ stripos(Route::currentRouteName(), 'timeline.public') === 0 ? 'active' : ''}}">
<a class="nav-link" href="{{ route('timeline.public') }}">お惣菜</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">
<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>
@include('components.header-dropdown-menu')
</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>
</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>
<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">

59
resources/views/user/base.blade.php
View File

@ -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 {{ 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>
@yield('tab-content')
</div>
</div>
</div>