From 624c568008af7e8fe8c2644742cb4c6c19bc4ad8 Mon Sep 17 00:00:00 2001
From: Dan Brown <ssddanbrown@googlemail.com>
Date: Mon, 30 Apr 2018 14:35:15 +0100
Subject: [PATCH] Revamped tag styling

---
 resources/assets/sass/_blocks.scss            | 30 +++++++++++++++++++
 resources/assets/sass/_grid.scss              |  3 ++
 resources/views/books/show.blade.php          | 16 ++++------
 resources/views/chapters/show.blade.php       | 16 +++++-----
 resources/views/components/tag-list.blade.php | 16 ++++------
 resources/views/pages/show.blade.php          |  9 ++----
 6 files changed, 55 insertions(+), 35 deletions(-)

diff --git a/resources/assets/sass/_blocks.scss b/resources/assets/sass/_blocks.scss
index 76d4d5e0c..b7a8dcc03 100644
--- a/resources/assets/sass/_blocks.scss
+++ b/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;
+}
\ No newline at end of file
diff --git a/resources/assets/sass/_grid.scss b/resources/assets/sass/_grid.scss
index 10af80a54..8f15153b5 100644
--- a/resources/assets/sass/_grid.scss
+++ b/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;
diff --git a/resources/views/books/show.blade.php b/resources/views/books/show.blade.php
index e97d9bb69..d0a2eb2f7 100644
--- a/resources/views/books/show.blade.php
+++ b/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">
diff --git a/resources/views/chapters/show.blade.php b/resources/views/chapters/show.blade.php
index acb8e118a..ae450b8ee 100644
--- a/resources/views/chapters/show.blade.php
+++ b/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">
diff --git a/resources/views/components/tag-list.blade.php b/resources/views/components/tag-list.blade.php
index 9f4273c5a..1d1cc2d80 100644
--- a/resources/views/components/tag-list.blade.php
+++ b/resources/views/components/tag-list.blade.php
@@ -1,10 +1,6 @@
-<table>
-    <tbody>
-    @foreach($entity->tags as $tag)
-        <tr class="tag">
-            <td @if(!$tag->value) colspan="2" @endif><a href="{{ baseUrl('/search?term=%5B' . urlencode($tag->name) .'%5D') }}">{{ $tag->name }}</a></td>
-            @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
-        </tr>
-    @endforeach
-    </tbody>
-</table>
\ No newline at end of file
+@foreach($entity->tags as $tag)
+    <div class="tag-item primary-background-light">
+        <div class="tag-name"><a href="{{ baseUrl('/search?term=%5B' . urlencode($tag->name) .'%5D') }}">@icon('tag'){{ $tag->name }}</a></div>
+        @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
+    </div>
+@endforeach
\ No newline at end of file
diff --git a/resources/views/pages/show.blade.php b/resources/views/pages/show.blade.php
index d9c984a60..16f967179 100644
--- a/resources/views/pages/show.blade.php
+++ b/resources/views/pages/show.blade.php
@@ -43,12 +43,9 @@
 @section('sidebar')
 
     @if($page->tags->count() > 0)
-        <div class="card tag-display">
-            <h3>@icon('tag') {{ trans('entities.page_tags') }}</h3>
-            <div class="body">
-                @include('components.tag-list', ['entity' => $page])
-            </div>
-        </div>
+        <section>
+            @include('components.tag-list', ['entity' => $page])
+        </section>
     @endif
 
     @if ($page->attachments->count() > 0)