Revamped tag styling

This commit is contained in:
Dan Brown 2018-04-30 14:35:15 +01:00
parent 58a0a59d7e
commit 624c568008
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
6 changed files with 55 additions and 35 deletions

View File

@ -268,3 +268,33 @@
padding: $-m; padding: $-m;
border: 1px solid #DDD; border: 1px solid #DDD;
} }
.tag-item {
display: inline-flex;
margin-bottom: $-xs;
margin-right: $-xs;
border-radius: 4px;
border: 1px solid #CCC;
overflow: hidden;
font-size: 0.85em;
a, a:hover, a:active {
padding: 4px 8px;
color: #777;
transition: background-color ease-in-out 80ms;
text-decoration: none;
}
a:hover {
background-color: rgba(255, 255, 255, 0.7);
}
svg {
fill: #888;
}
.tag-value {
border-left: 1px solid #DDD;
background-color: rgba(255, 255, 255, 0.5);
}
}
.tag-list div:last-child .tag-item {
margin-bottom: 0;
}

View File

@ -55,6 +55,9 @@ body.flexbox {
background-color: #F2F2F2; background-color: #F2F2F2;
max-width: 360px; max-width: 360px;
min-height: 90vh; min-height: 90vh;
section {
margin: $-m;
}
} }
.flex.sidebar + .flex.content { .flex.sidebar + .flex.content {
flex: 3; flex: 3;

View File

@ -43,6 +43,12 @@
@section('sidebar') @section('sidebar')
@if($book->tags->count() > 0)
<section>
@include('components.tag-list', ['entity' => $book])
</section>
@endif
<div class="card"> <div class="card">
<div class="body"> <div class="body">
<form v-on:submit.prevent="searchBook" class="search-box"> <form v-on:submit.prevent="searchBook" class="search-box">
@ -53,16 +59,6 @@
</div> </div>
</div> </div>
@if($book->tags->count() > 0)
<div class="card tag-display">
<h3>@icon('tag') {{ trans('entities.book_tags') }}</h3>
<div class="body">
@include('components.tag-list', ['entity' => $book])
</div>
</div>
@endif
<div class="card entity-details"> <div class="card entity-details">
<h3>@icon('info') {{ trans('common.details') }}</h3> <h3>@icon('info') {{ trans('common.details') }}</h3>
<div class="body text-small text-muted blended-links"> <div class="body text-small text-muted blended-links">

View File

@ -47,6 +47,13 @@
@stop @stop
@section('sidebar') @section('sidebar')
@if($chapter->tags->count() > 0)
<section>
@include('components.tag-list', ['entity' => $chapter])
</section>
@endif
<div class="card"> <div class="card">
<div class="body"> <div class="body">
<form @submit.prevent="searchBook" class="search-box"> <form @submit.prevent="searchBook" class="search-box">
@ -57,15 +64,6 @@
</div> </div>
</div> </div>
@if($chapter->tags->count() > 0)
<div class="card tag-display">
<h3>@icon('tag') {{ trans('entities.chapter_tags') }}</h3>
<div class="body">
@include('components.tag-list', ['entity' => $chapter])
</div>
</div>
@endif
<div class="card entity-details"> <div class="card entity-details">
<h3>@icon('info') {{ trans('common.details') }}</h3> <h3>@icon('info') {{ trans('common.details') }}</h3>
<div class="body blended-links text-small text-muted"> <div class="body blended-links text-small text-muted">

View File

@ -1,10 +1,6 @@
<table> @foreach($entity->tags as $tag)
<tbody> <div class="tag-item primary-background-light">
@foreach($entity->tags as $tag) <div class="tag-name"><a href="{{ baseUrl('/search?term=%5B' . urlencode($tag->name) .'%5D') }}">@icon('tag'){{ $tag->name }}</a></div>
<tr class="tag"> @if($tag->value) <div class="tag-value"><a href="{{ baseUrl('/search?term=%5B' . urlencode($tag->name) .'%3D' . urlencode($tag->value) . '%5D') }}">{{$tag->value}}</a></div> @endif
<td @if(!$tag->value) colspan="2" @endif><a href="{{ baseUrl('/search?term=%5B' . urlencode($tag->name) .'%5D') }}">{{ $tag->name }}</a></td> </div>
@if($tag->value) <td class="tag-value"><a href="{{ baseUrl('/search?term=%5B' . urlencode($tag->name) .'%3D' . urlencode($tag->value) . '%5D') }}">{{$tag->value}}</a></td> @endif @endforeach
</tr>
@endforeach
</tbody>
</table>

View File

@ -43,12 +43,9 @@
@section('sidebar') @section('sidebar')
@if($page->tags->count() > 0) @if($page->tags->count() > 0)
<div class="card tag-display"> <section>
<h3>@icon('tag') {{ trans('entities.page_tags') }}</h3> @include('components.tag-list', ['entity' => $page])
<div class="body"> </section>
@include('components.tag-list', ['entity' => $page])
</div>
</div>
@endif @endif
@if ($page->attachments->count() > 0) @if ($page->attachments->count() > 0)