Revamped tag styling

diff --git a/resources/assets/sass/_blocks.scss b/resources/assets/sass/_blocks.scss
index 76d4d5e0ca6a34ec5c5ef908437aaf72c19ec0a9..b7a8dcc03fa6bd5fe986897e3974ff3d935b8389 100644 (file)
--- 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 10af80a545263856fa116da809942a09f5cece6e..8f15153b5b6c0c2eba56ba7773c3c5ba0c8e5ec2 100644 (file)
--- 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 e97d9bb69aa541b68a2e479d4d2c16767fb74f5e..d0a2eb2f706aeeb19c82c7423f2e3670b0fcadb0 100644 (file)
--- 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 acb8e118af60f1c9f8171872953818e2ae72a0b8..ae450b8ee2e57465b14d1254aff6973ae3d4996c 100644 (file)
--- 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 9f4273c5afe5dc30d4f1301a06a8fabc8b76ab0b..1d1cc2d806153baa00d770e3ca05b4735fb5177b 100644 (file)
--- 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 d9c984a6036ef82e3d52fbfa796d373e3af29eff..16f96717937f2fc35965c95438fbe3e907a7ec11 100644 (file)
--- 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)