fix #1378: nice display for tags list

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

@@ -74,6 +74,14 @@
             <div class="collapsible-body"></div>
         </li>
 
+        <li class="bold border-bottom hide-on-med-and-down">
+            <a class="waves-effect collapsible-header" id="nav-btn-add-tag">
+                <i class="mdi-action-label-outline small"></i>
+                <span>{% trans %}Add a tag{% endtrans %}</span>
+            </a>
+            <div class="collapsible-body"></div>
+        </li>
+
         <li class="bold">
             <a class="waves-effect collapsible-header">
                 <i class="mdi-social-share small"></i>
@@ -134,11 +142,17 @@ main {
     <div id="article">
         <header class="mbm">
             <h1>{{ entry.title|raw }} <a href="{{ path('edit', { 'id': entry.id }) }}" title="{% trans %}Edit title{% endtrans %}">✎</a></h1>
-            <a href="{{ entry.url|e }}" target="_blank" title="{% trans %}original{% endtrans %} : {{ entry.title|e }}" class="tool link"><span>{{ entry.domainName }}</span></a>
         </header>
-        <aside class="tags">
-            {% for tag in entry.tags %}<span class="mdi-action-label-outline">{{ tag.label }}</span>{% endfor %}
-            {{ render(controller( "WallabagCoreBundle:Tag:addTagForm", { 'id': entry.id } )) }}
+        <aside>
+            <a href="{{ entry.url|e }}" target="_blank" title="{% trans %}original{% endtrans %} : {{ entry.title|e }}" class="tool link mdi-content-link"> <span>{{ entry.domainName }}</span></a>
+            <div id="list">
+                {% for tag in entry.tags %}<span><a href="#">{{ tag.label }}</a></span>{% endfor %}
+            </div>
+
+            <div class="input-field nav-panel-add-tag" style="display: none">
+                {{ render(controller( "WallabagCoreBundle:Tag:addTagForm", { 'id': entry.id } )) }}
+            </div>
+
         </aside>
         <article>
             {{ entry.content | raw }}

src/Wallabag/CoreBundle/Resources/views/themes/material/Tag/new_form.html.twig

@@ -9,7 +9,6 @@
         {% endif %}
 
         {{ form_widget(form.label, { 'attr': {'autocomplete': 'off'} }) }}
-        {{ form_widget(form.save, { 'attr': {'class': 'btn waves-effect waves-light'}, 'label': 'add tag' }) }}
 
     <div class="hidden">{{ form_rest(form) }}</div>
 </form>

src/Wallabag/CoreBundle/Resources/views/themes/material/public/css/main.css

@@ -303,6 +303,30 @@ main ul.row {
     margin: 0;
     z-index: 9999;
 }
+
+#article aside .link {
+    color: #000;
+    font-size: 0.6em;
+    text-decoration: none;
+}
+
+#article aside #list {
+    float: right;
+    margin-right: 15px;
+}
+
+#article aside span a {
+    background-color: #039be5;
+    color: #fff;
+    border-radius: 3px;
+    float: left;
+    font-size: 0.6em;
+    margin-left: 0.5em;
+    margin-bottom: 0.5em;
+    padding: 4px;
+    text-decoration: none;
+}
+
 /* ==========================================================================
    6 = Media queries
    ========================================================================== */

src/Wallabag/CoreBundle/Resources/views/themes/material/public/js/init.js

@@ -27,6 +27,12 @@ $(document).ready(function(){
     });
     init_filters();
 
+    $('#nav-btn-add-tag').on('click', function(){
+       $(".nav-panel-add-tag").toggle(100);
+       $(".nav-panel-menu").addClass('hidden');
+       $("#tag_label").focus();
+       return false;
+    });
     $('#nav-btn-add').on('click', function(){
        $(".nav-panel-buttom").hide(100);
        $(".nav-panel-add").show(100);