Revamped tag styling

resources/assets/sass/_blocks.scss

@@ -268,3 +268,33 @@
   padding: $-m;
   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;
+}

resources/assets/sass/_grid.scss

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

resources/views/books/show.blade.php

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

resources/views/chapters/show.blade.php

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

resources/views/components/tag-list.blade.php

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

resources/views/pages/show.blade.php

@@ -43,12 +43,9 @@
 @section('sidebar')
 
     @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
 
     @if ($page->attachments->count() > 0)