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

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

Browse Source
This commit is contained in:
shibafu 2020-10-24 14:32:30 +09:00
parent 0f435c09b3
commit d7d2bc2397
4 changed files with 67 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

@ -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"> <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 --}} {{-- Bio --}}
@if (!empty($user->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))) !!} {!! Formatter::linkify(nl2br(e($user->bio))) !!}
</p> </p>
@endif @endif
@ -26,7 +16,8 @@
</p> </p>
@endif @endif
</div> </div>
</div> </div>
@endif
@if (!$user->is_protected || $user->isMe()) @if (!$user->is_protected || $user->isMe())
<div class="card mb-4"> <div class="card mb-4">

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

@ -1,35 +1,25 @@
@extends('layouts.base') @extends('layouts.base')
@section('content') @section('content')
<div class="container-fluid border-bottom mb-4 mt-n1 mt-lg-n4 px-0">
<div class="container"> <div class="container">
<div class="row"> <div class="row align-items-center">
<div class="col-lg-4"> <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]) @component('components.profile-mini', ['user' => $user])
@endcomponent @endcomponent
</div> </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> <a class="nav-link {{ Route::currentRouteName() === 'user.profile' ? 'active' : '' }}" href="{{ route('user.profile', ['name' => $user->name]) }}">タイムライン</a>
</li> </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> <a class="nav-link {{ stripos(Route::currentRouteName(), 'user.stats') === 0 ? 'active' : '' }}" href="{{ route('user.stats', ['name' => $user->name]) }}">グラフ</a>
</li> </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> <a class="nav-link {{ Route::currentRouteName() === 'user.okazu' ? 'active' : '' }}" href="{{ route('user.okazu', ['name' => $user->name]) }}">オカズ</a>
</li> </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]) }}">いいね <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)) @if ($user->isMe() || !($user->is_protected || $user->private_likes))
<span class="badge badge-primary">{{ $user->likes()->count() }}</span> <span class="badge badge-primary">{{ $user->likes()->count() }}</span>
@ -37,10 +27,23 @@
</a> </a>
</li> </li>
</ul> </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') @yield('tab-content')
</div> </div>
</div> </div>
</div> </div>
</div>
@endsection @endsection