Improve display of articles with annotations

assets/scss/_entries.scss

@@ -183,6 +183,12 @@
   display: none;
 }
 
+blockquote.annotations {
+  margin-top: 5px;
+  padding-left: 1rem;
+  border-left: 5px solid #00acc1;
+}
+
 footer {
   &.page-footer {
     margin-top: 10px;

templates/Entry/Card/_content.html.twig

@@ -10,6 +10,9 @@
         {{ entry.title|striptags|default('entry.default_title'|trans)|raw }}
     {% endif %}
 
+    {% if currentRoute == 'annotated' %}
+        <blockquote class="annotations">{{ entry.annotations[0].text|u.truncate(80, '...') }}</blockquote>
+    {% else %}
         <div class="{{ subClass|default('original grey-text') }}">
             <a href="{{ entry.url|e }}" target="_blank" title="{{ entry.domainName|removeWww }}" class="tool grey-text">{{ entry.domainName|removeWww }}</a>
             {% if withMetadata is defined %}
@@ -19,4 +22,5 @@
                 </div>
             {% endif %}
         </div>
+    {% endif %}
 </div>

templates/Entry/_card_full_image.html.twig

@@ -16,7 +16,7 @@
                 {% endif %}
             {% endif %}
         </div>
-        {% include "Entry/Card/_content.html.twig" with {'entry': entry} only %}
+        {% include "Entry/Card/_content.html.twig" with {'entry': entry, 'currentRoute': currentRoute} only %}
     </div>
 
     {% include "Entry/_card_actions.html.twig" with {'entry': entry} only %}

templates/Entry/_card_list.html.twig

@@ -12,7 +12,7 @@
         {% endif %}
     </div>
     {% endif %}
-    {% include "Entry/Card/_content.html.twig" with {'entry': entry, 'withMetadata': true, 'subClass': 'metadata'} only %}
+    {% include "Entry/Card/_content.html.twig" with {'entry': entry, 'withMetadata': true, 'subClass': 'metadata', 'currentRoute': currentRoute} only %}
 
     {% set current_path = app.request.requesturi %}
 

templates/Entry/_card_preview.html.twig

@@ -18,7 +18,7 @@
                 {% endif %}
             {% endif %}
         </div>
-        {% include "Entry/Card/_content.html.twig" with {'entry': entry, 'withPreview': true} only %}
+        {% include "Entry/Card/_content.html.twig" with {'entry': entry, 'withPreview': true, 'currentRoute': currentRoute} only %}
     </div>
 
     <div class="card-reveal">