Merge pull request #6613 from Simounet/feat/entry-info-ui

Feat/entry info UI

app/Resources/static/themes/material/css/article.scss

@@ -108,11 +108,12 @@
   .entry-info {
     .tools {
       display: flex;
-      flex-flow: row wrap;
+      margin: 8px 5px 5px;
+      flex-wrap: wrap;
 
       .stats {
+        margin: 0;
         font-size: 0.7em;
-        margin: 8px 5px 5px;
 
         li {
           display: inline-flex;
@@ -133,18 +134,21 @@
       }
 
       .tags {
-        float: right;
-        margin: 5px 15px 10px;
+        display: flex;
+        margin: 0;
+        align-items: center;
+        gap: 5px;
       }
     }
 
     .chip {
-      background-color: #9e9e9e;
-      padding: 0 15px 0 10px;
-      margin: auto 2px;
-      border-radius: 6px;
-      height: 18px;
-      line-height: 18px;
+      display: flex;
+      margin: 0;
+      padding: 0;
+      height: 25px;
+      line-height: 25px;
+      align-items: center;
+      background-color: transparent;
 
       a,
       i {
@@ -152,15 +156,45 @@
       }
 
       i.material-icons {
-        float: right;
         font-size: 16px;
-        line-height: 18px;
-        padding-left: 8px;
+        vertical-align: sub;
       }
     }
+
+    .chip-label {
+        padding-left: 10px;
+        padding-right: 5px;
+        background-color: #9e9e9e;
+        border-radius: 6px 0 0 6px;
+    }
+
+    .chip-action {
+      padding: 0 5px;
+      background-color: #868686;
+      border-radius: 0 6px 6px 0;
+    }
+
+    .chip-label,
+    .chip-action {
+      min-width: 30px;
+      text-align: center;
+    }
+
+    .chip-label:hover,
+    .chip-label:active,
+    .chip-label:focus,
+    .chip-action:hover,
+    .chip-action:active,
+    .chip-action:focus {
+      background-color: #5e5e5e;
+    }
   }
 }
 
+.entry-info {
+  margin-bottom: 40px;
+}
+
 .reader-mode {
   width: 70px !important;
   transition: width 0.2s ease;
@@ -200,3 +234,28 @@
   margin: 0;
   z-index: 9999;
 }
+
+@media only screen and (max-width: 640px) {
+  .entry-info {
+    margin-bottom: 20px;
+  }
+
+  #article .entry-info .tools {
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  #article .entry-info .tools .tags {
+    gap: 10px;
+  }
+
+  #article .entry-info .chip {
+    height: 32px;
+    line-height: 32px;
+  }
+
+  #article .entry-info .chip-label,
+  #article .entry-info .chip-action {
+    min-width: 40px;
+  }
+}

app/Resources/static/themes/material/css/dark_theme.scss

@@ -81,10 +81,6 @@
     color: #dfdfdf !important;
   }
 
-  #article .chip {
-    background-color: #373737;
-  }
-
   .side-nav li.active {
     background-color: #2f2f2f;
   }

src/Wallabag/CoreBundle/Resources/views/Entry/_tags.html.twig

@@ -1,10 +1,10 @@
 {% if tags is iterable and tags is not empty %}
     <ul class="tags{{ listClass|default("") }}">
         {% for tag in tags %}
-            <li class="chip" title="{{ tag.label }}">
-                <a href="{{ path('tag_entries', {'slug': tag.slug}) }}">{{ tag.label }}</a>
+            <li class="chip">
+                <a class="chip-label" href="{{ path('tag_entries', {'slug': tag.slug}) }}">{{ tag.label }}</a>
                 {% if withRemove is defined and withRemove == true %}
-                    <a href="{{ path('remove_tag', {'entry': entryId, 'tag': tag.id}) }}" onclick="return confirm('{{ 'entry.confirm.delete_tag'|trans|escape('js') }}')">
+                    <a class="chip-action" href="{{ path('remove_tag', {'entry': entryId, 'tag': tag.id}) }}" onclick="return confirm('{{ 'entry.confirm.delete_tag'|trans|escape('js') }}')">
                         <i class="material-icons vertical-align-middle">delete</i>
                     </a>
                 {% endif %}

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

@@ -266,10 +266,12 @@
                             {{ entry.domainName|removeWww }}
                         </a>
                     </li>
-                    <li>
-                        <i class="material-icons grey-text">comment</i>
-                        {{ 'entry.view.annotations_on_the_entry'|transchoice(entry.annotations|length) }}
-                    </li>
+                    {% if entry.annotations|length %}
+                        <li>
+                            <i class="material-icons grey-text">comment</i>
+                            {{ 'entry.view.annotations_on_the_entry'|transchoice(entry.annotations|length) }}
+                        </li>
+                    {% endif %}
                     {% if entry.originUrl is not empty %}
                         <li>
                             <i class="material-icons grey-text" title="{{ 'entry.view.provided_by'|trans }}">launch</i>