Revamped tag styling
This commit is contained in:
		
							parent
							
								
									58a0a59d7e
								
							
						
					
					
						commit
						624c568008
					
				| 
						 | 
				
			
			@ -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;
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			@ -55,6 +55,9 @@ body.flexbox {
 | 
			
		|||
  background-color: #F2F2F2;
 | 
			
		||||
  max-width: 360px;
 | 
			
		||||
  min-height: 90vh;
 | 
			
		||||
  section {
 | 
			
		||||
    margin: $-m;
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
.flex.sidebar + .flex.content {
 | 
			
		||||
  flex: 3;
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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">
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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">
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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>
 | 
			
		||||
    <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
 | 
			
		||||
    </tbody>
 | 
			
		||||
</table>
 | 
			
		||||
| 
						 | 
				
			
			@ -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">
 | 
			
		||||
        <section>
 | 
			
		||||
            @include('components.tag-list', ['entity' => $page])
 | 
			
		||||
            </div>
 | 
			
		||||
        </div>
 | 
			
		||||
        </section>
 | 
			
		||||
    @endif
 | 
			
		||||
 | 
			
		||||
    @if ($page->attachments->count() > 0)
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
		Reference in New Issue