better tags on baggy

app/Resources/static/themes/baggy/css/main.css

@@ -383,9 +383,11 @@ footer a {
   max-height: 2em;
   overflow-y: hidden;
   padding: 0;
+  margin: 0;
 }
 
-.card-entry-tags li {
+.card-entry-tags li,
+.card-entry-tags span {
   display: inline-block;
   margin: 0 5px;
   padding: 5px 12px;
@@ -394,9 +396,19 @@ footer a {
   max-height: 2em;
   overflow: hidden;
   text-overflow: ellipsis;
+}
+
+.card-entry-tags a,
+.card-entry-labels a {
+  text-decoration: none;
+  font-weight: normal;
   color: #fff;
 }
 
+.nav-panel-add-tag {
+  margin-top: 10px;
+}
+
 .list-entries + .results {
   margin-bottom: 2em;
 }
@@ -509,6 +521,7 @@ img.preview {
   color: #666;
   font-size: 0.9em;
   line-height: 1.7;
+  margin-top: 5px;
 }
 
 .entry h2 a::first-letter {
@@ -1021,6 +1034,7 @@ blockquote {
 
 #article_toolbar li {
   display: inline-block;
+  margin: 3px auto;
 }
 
 #article_toolbar a {

src/Wallabag/CoreBundle/Resources/views/themes/baggy/Entry/entries.html.twig

@@ -29,16 +29,16 @@
                 <li><a href="{{ entry.url|e }}" target="_blank" title="{{ 'entry.list.original_article'|trans }} : {{ entry.title|e }}" class="tool link icon-link icon"><span>{{ entry.domainName|removeWww }}</span></a></li>
             </ul>
             {% if entry.previewPicture is null %}
-                <p>{{ entry.content|striptags|slice(0, 300) }}&hellip;</p>
                 <ul class="card-entry-tags">
                     {% for tag in entry.tags %}
-                        <li>{{ tag.label }}</li>
+                        <li><a href="{{ path('tag_entries', {'slug': tag.slug}) }}">{{ tag.label }}</a></li>
                     {% endfor %}
                 </ul>
+                <p>{{ entry.content|striptags|slice(0, 300) }}&hellip;</p>
             {% else %}
                 <ul class="card-entry-labels">
                 {% for tag in entry.tags | slice(0, 3) %}
-                    <li>{{ tag.label }}</li>
+                    <li><a href="{{ path('tag_entries', {'slug': tag.slug}) }}">{{ tag.label }}</a></li>
                 {% endfor %}
                 </ul>
                 <img class="preview" src="{{ entry.previewPicture }}" alt="{{ entry.title|raw }}" />

src/Wallabag/CoreBundle/Resources/views/themes/baggy/Entry/entry.html.twig

@@ -57,9 +57,11 @@
             {% set nbAnnotations = entry.annotations | length %}
             <span class="tool link"><i class="material-icons link">comment</i> {{ 'entry.view.annotations_on_the_entry'|transchoice(entry.annotations | length) }}</span>
             <aside class="tags">
+                <div class="card-entry-tags">
                 {% for tag in entry.tags %}
-                    <span class="label-outline"><i class="material-icons">label_outline</i> {{ tag.label }}</span> <a href="{{ path('remove_tag', { 'entry': entry.id, 'tag': tag.id }) }}"class="nostyle"><i>✘</i></a>
+                    <span class="label-outline"><i class="material-icons">label_outline</i> <a href="{{ path('tag_entries', {'slug': tag.slug}) }}">{{ tag.label }}</a> <a href="{{ path('remove_tag', { 'entry': entry.id, 'tag': tag.id }) }}" class="nostyle"><i>✘</i></a></span>
                 {% endfor %}
+                </div>
                 <div class="input-field nav-panel-add-tag" style="display: none">
                     {{ render(controller( "WallabagCoreBundle:Tag:addTagForm", { 'id': entry.id } )) }}
                 </div>