Merge pull request #2170 from wallabag/addTagsOnEntriesView

Add tags on entries view and minor ui fixes

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

@@ -342,6 +342,44 @@ main ul.row {
   line-height: 32px;
 }
 
+.card .card-entry-labels {
+    position: absolute;
+    top:10px;
+    z-index: 90;
+    max-width: 50%;
+}
+
+.card .card-entry-labels li {
+    margin: 10px 10px 10px auto;
+    padding: 5px 12px 5px 16px;
+    background-color: rgba(0,151,167,0.85);
+    border-radius: 0 3px 3px 0;
+    color: #fff;
+    cursor: default;
+    max-height: 2em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.card .card-entry-labels-hidden {
+    margin-top: 5px;
+}
+
+.card .card-entry-labels-hidden li {
+    display: inline-block;
+    background-color: rgba(0,151,167,0.85);
+    margin: 0 5px;
+    padding: 5px 12px;
+    border-radius: 3px;
+    color: #fff;
+    max-height: 2em;
+    max-width: calc(100% - 15px);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
 .card .card-content .estimatedTime {
   margin-bottom: 10px;
 }
@@ -401,6 +439,10 @@ main ul.row {
   height: auto;
 }
 
+#article > header > h1 {
+  font-size: 2em;
+}
+
 .reader-mode {
   width: 95px !important;
   transition: width 0.2s ease;
@@ -445,12 +487,13 @@ main ul.row {
 
 #article aside #list {
   float: right;
-  margin-right: 15px;
+  margin: 0 15px 10px;
 }
 
 #article aside .chip {
-  background-color: #039be5;
+  background-color: rgba(0,151,167,0.85);
   color: #fff;
+  padding: 0 15px 0 10px;
 }
 
 #article aside .chip i {

src/Wallabag/CoreBundle/Resources/translations/messages.da.yml

@@ -144,6 +144,7 @@ entry:
         reading_time: 'estimeret læsetid'
         reading_time_minutes: 'estimeret læsetid: %readingTime% min'
         reading_time_less_one_minute: 'estimeret læsetid: <small class="inferieur">&lt;</small> 1 min'
+        # number_of_tags: '{1}and one other tag|]1,Inf[and %count% other tags'
         original_article: 'original'
         toogle_as_read: 'Marker som læst'
         toogle_as_star: 'Skift favoritstatus'

src/Wallabag/CoreBundle/Resources/translations/messages.de.yml

@@ -144,6 +144,7 @@ entry:
         reading_time: 'geschätzte Lesezeit'
         reading_time_minutes: 'geschätzte Lesezeit: %readingTime% min'
         reading_time_less_one_minute: 'geschätzte Lesezeit: <small class="inferieur">&lt;</small> 1 min'
+        # number_of_tags: '{1}and one other tag|]1,Inf[and %count% other tags'
         original_article: 'original'
         toogle_as_read: 'Gelesen-Status ändern'
         toogle_as_star: 'Favoriten-Status ändern'

src/Wallabag/CoreBundle/Resources/translations/messages.en.yml

@@ -144,6 +144,7 @@ entry:
         reading_time: 'estimated reading time'
         reading_time_minutes: 'estimated reading time: %readingTime% min'
         reading_time_less_one_minute: 'estimated reading time: <small class="inferieur">&lt;</small> 1 min'
+        number_of_tags: '{1}and one other tag|]1,Inf[and %count% other tags'
         original_article: 'original'
         toogle_as_read: 'Toggle mark as read'
         toogle_as_star: 'Toggle favorite'

src/Wallabag/CoreBundle/Resources/translations/messages.es.yml

@@ -144,6 +144,7 @@ entry:
         reading_time: 'tiempo estimado de lectura'
         reading_time_minutes: 'tiempo estimado de lectura: %readingTime% min'
         reading_time_less_one_minute: 'tiempo estimado de lectura: <small class="inferieur">&lt;</small> 1 min'
+        # number_of_tags: '{1}and one other tag|]1,Inf[and %count% other tags'
         original_article: 'original'
         toogle_as_read: 'Marcar como leído/ no leído'
         toogle_as_star: 'Marcar como favorito/ no favorito'

src/Wallabag/CoreBundle/Resources/translations/messages.fa.yml

@@ -144,6 +144,7 @@ entry:
         reading_time: 'زمان تخمینی برای خواندن'
         reading_time_minutes: 'زمان تخمینی برای خواندن: %readingTime% min'
         reading_time_less_one_minute: 'زمان تخمینی برای خواندن: <small class="inferieur">&lt;</small> 1 min'
+        # number_of_tags: '{1}and one other tag|]1,Inf[and %count% other tags'
         original_article: 'original'
         toogle_as_read: 'خوانده‌شده/خوانده‌نشده'
         toogle_as_star: 'برگزیده/نابرگزیده'

src/Wallabag/CoreBundle/Resources/translations/messages.fr.yml

@@ -144,6 +144,7 @@ entry:
         reading_time: 'durée de lecture'
         reading_time_minutes: 'durée de lecture: %readingTime% min'
         reading_time_less_one_minute: 'durée de lecture: <small class="inferieur">&lt;</small> 1 min'
+        number_of_tags: '{1}et un autre tag|]1,Inf[et %count% autres tags'
         original_article: 'original'
         toogle_as_read: 'Marquer comme lu/non lu'
         toogle_as_star: 'Marquer comme favori'

src/Wallabag/CoreBundle/Resources/translations/messages.it.yml

@@ -144,6 +144,7 @@ entry:
         reading_time: 'tempo di lettura stimato'
         reading_time_minutes: 'tempo di lettura stimato: %readingTime% min'
         reading_time_less_one_minute: 'tempo di lettura stimato: <small class="inferieur">&lt;</small> 1 min'
+        # number_of_tags: '{1}and one other tag|]1,Inf[and %count% other tags'
         original_article: 'originale'
         toogle_as_read: 'Segna come da leggere'
         toogle_as_star: 'Segna come non preferito'

src/Wallabag/CoreBundle/Resources/translations/messages.oc.yml

@@ -144,6 +144,7 @@ entry:
         reading_time: 'durada de lectura'
         reading_time_minutes: 'durada de lectura : %readingTime% min'
         reading_time_less_one_minute: 'durada de lectura : <small class="inferieur">&lt;</small> 1 min'
+        # number_of_tags: '{1}and one other tag|]1,Inf[and %count% other tags'
         original_article: 'original'
         toogle_as_read: 'Marcar coma legit/pas legit'
         toogle_as_star: 'Marcar coma favorit'

src/Wallabag/CoreBundle/Resources/translations/messages.pl.yml

@@ -144,6 +144,7 @@ entry:
         reading_time: 'szacunkowy czas czytania'
         reading_time_minutes: 'szacunkowy czas czytania: %readingTime% min'
         reading_time_less_one_minute: 'szacunkowy czas czytania: <small class="inferieur">&lt;</small> 1 min'
+        # number_of_tags: '{1}and one other tag|]1,Inf[and %count% other tags'
         original_article: 'oryginał'
         toogle_as_read: 'Oznacz jako przeczytane'
         toogle_as_star: 'Oznacz jako ulubione'

src/Wallabag/CoreBundle/Resources/translations/messages.ro.yml

@@ -144,6 +144,7 @@ entry:
         reading_time: 'timp estimat de citire'
         reading_time_minutes: 'timp estimat de citire: %readingTime% min'
         reading_time_less_one_minute: 'timp estimat de citire: <small class="inferieur">&lt;</small> 1 min'
+        # number_of_tags: '{1}and one other tag|]1,Inf[and %count% other tags'
         original_article: 'original'
         toogle_as_read: 'Comută marcat ca citit'
         toogle_as_star: 'Comută marcat ca favorit'

src/Wallabag/CoreBundle/Resources/translations/messages.tr.yml

@@ -144,6 +144,7 @@ entry:
         reading_time: 'tahmini okuma süresi'
         reading_time_minutes: 'tahmini okuma süresi: %readingTime% min'
         reading_time_less_one_minute: 'tahmini okuma süresi: <small class="inferieur">&lt;</small> 1 min'
+        # number_of_tags: '{1}and one other tag|]1,Inf[and %count% other tags'
         original_article: 'orijinal'
         toogle_as_read: 'Okundu/okunmadı olarak işaretle'
         toogle_as_star: 'Favorilere ekle/çıkar'

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

@@ -26,6 +26,11 @@
                     <div class="card-body">
                         {% if not entry.previewPicture is null %}
                             <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>
+                                {% endfor %}
+                                </ul>
                                 <div class="preview activator" style="background-image: url({{ entry.previewPicture }})"></div>
                             </div>
                         {% endif %}
@@ -35,7 +40,7 @@
                                 <i class="card-title grey-text text-darken-4 activator material-icons right">more_vert</i>
                             {% endif %}
 
-                            <span class="card-title"><a href="{{ path('view', { 'id': entry.id }) }}" title="{{ entry.title|raw }}">{{ entry.title|striptags|slice(0, 42)|raw }}</a></span>
+                            <span class="card-title"><a href="{{ path('view', { 'id': entry.id }) }}" title="{{ entry.title|striptags }}">{{ entry.title|striptags|raw }}</a></span>
 
                             <div class="estimatedTime grey-text">
                                 <span class="tool reading-time">
@@ -50,6 +55,11 @@
 
                             {% if entry.previewPicture is null %}
                                 <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>
+                                {% endfor %}
+                            </ul>
                             {% endif %}
                         </div>
                     </div>
@@ -66,6 +76,12 @@
                             </div>
 
                             <p>{{ entry.content|striptags|slice(0, 300)|raw }}&hellip;</p>
+
+                            <ul class="card-entry-labels-hidden">
+                                {% for tag in entry.tags %}
+                                    <li>{{ tag.label }}</li>
+                                {% endfor %}
+                            </ul>
                         </div>
                     {% endif %}
 

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

@@ -20,7 +20,7 @@
             <ul class="right">
                 <li>
                     <a class="waves-effect" title="{{ 'entry.view.left_menu.set_as_read'|trans }}" href="{{ path('archive_entry', { 'id': entry.id }) }}" id="markAsRead">
-                        <i class="material-icons small">{% if entry.isArchived == 0 %}done{% else %}redo{% endif %}"</i>
+                        <i class="material-icons small">{% if entry.isArchived == 0 %}done{% else %}redo{% endif %}</i>
                     </a>
                 </li>
                 <li>
@@ -30,7 +30,7 @@
                 </li>
                 <li>
                     <a href="#" data-activates="slide-out" class="button-collapse right">
-                        <i class="material-icons">navigation_menu</i>
+                        <i class="material-icons">menu</i>
                     </a>
                 </li>
             </ul>