プロフィールページのタブ周りのデザインを刷新
This commit is contained in:
shibafu
parent
0f435c09b3
commit
d7d2bc2397
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -18,3 +18,6 @@ $primary: #e53fb1;
|
|||
|
||||
// Tag
|
||||
@import "tag/index";
|
||||
|
||||
// Underline tabs
|
||||
@import "underline-tabs";
|
||||
|
|
|
|||
|
|
@ -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]) }}">@{{ $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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue