Merge pull request #2374 from wallabag/clickable-tags

Clickable tags

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 {

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

@@ -445,6 +445,15 @@ main ul.row {
   white-space: nowrap;
 }
 
+.card-entry-tags a,
+.card-entry-labels a,
+.card-entry-labels-hidden a,
+#list .chip a {
+  text-decoration: none;
+  font-weight: normal;
+  color: #fff;
+}
+
 .card .card-content .estimatedTime {
   margin-bottom: 10px;
 }

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>

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

@@ -17,7 +17,7 @@
                             <div class="card-image waves-effect waves-block waves-light">
                                 <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>
                                 <div class="preview activator" style="background-image: url({{ entry.previewPicture }})"></div>
@@ -46,7 +46,7 @@
                                 <p>{{ entry.content|striptags|slice(0, 300)|raw }}&hellip;</p>
                                 <ul class="card-entry-labels-hidden">
                                 {% for tag in entry.tags | slice(0, 2) %}
-                                    <li>{{ tag.label }}</li>
+                                    <li><a href="{{ path('tag_entries', {'slug': tag.slug}) }}">{{ tag.label }}</a></li>
                                 {% endfor %}
                             </ul>
                             {% endif %}
@@ -68,7 +68,7 @@
 
                             <ul class="card-entry-labels-hidden">
                                 {% for tag in entry.tags %}
-                                    <li>{{ tag.label }}</li>
+                                    <li><a href="{{ path('tag_entries', {'slug': tag.slug}) }}">{{ tag.label }}</a></li>
                                 {% endfor %}
                             </ul>
                         </div>

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

@@ -223,12 +223,13 @@
             </span>
             <i class="material-icons" title="{{ 'entry.view.created_at'|trans }}">today</i><span class="link">{{ entry.createdAt|date('Y-m-d') }}</span>
             <a href="{{ entry.url|e }}" target="_blank" title="{{ 'entry.view.original_article'|trans }} : {{ entry.title|e }}" class="tool">
-            <i class="material-icons link">link</i> <span class="link">{{ entry.domainName|removeWww }}</span></a>
+                <i class="material-icons link">link</i> <span class="link">{{ entry.domainName|removeWww }}</span>
+            </a>
             <span class="tool"><i class="material-icons link">comment</i> <span class="link">{{ 'entry.view.annotations_on_the_entry'|transchoice(entry.annotations | length) }}</span>
             <div id="list">
                 {% for tag in entry.tags %}
                     <div class="chip">
-                    {{ tag.label }} <a href="{{ path('remove_tag', { 'entry': entry.id, 'tag': tag.id }) }}"><i class="material-icons">delete</i></a>
+                    <a href="{{ path('tag_entries', {'slug': tag.slug}) }}">{{ tag.label }}</a> <a href="{{ path('remove_tag', { 'entry': entry.id, 'tag': tag.id }) }}"><i class="material-icons">delete</i></a>
                     </div>
                 {% endfor %}
             </div>