Improve display of news tags

* Add a fa icon for tags to the buttons that are clicked for news tags,
  to make it more clear what they are.
* Show a badge with the tag on each item when browsing the list.
* Change the buttons to be badges when viewing an individual item, and
  move them to the top of the page instead of the bottom for consistency
  with the listing.

In passing, add some spacing between the header and the text when
viewing a news item, because it looks a lot better.

diff --git a/media/css/main.css b/media/css/main.css
index 1d7e81a68f3f31b0c1e97d766bbbe213ef306eb0..2aeddd372d5752db45bb117265a25edd1dd0bd37 100644 (file)
--- a/media/css/main.css
+++ b/media/css/main.css
@@ -1368,6 +1368,20 @@ table.contributor-table thead tr th {
   width: 50%;
 }
 
+/* News archive */
+#pgContentWrap span.newstag {
+    white-space: nowrap;
+}
+#pgContentWrap span.newstag a i.fa {
+    color: white;
+}
+#pgContentWrap div.newsdate span.badge i.fa {
+    color: white;
+}
+#pgContentWrap div.newstags {
+    padding-bottom: 3rem;
+}
+
 /* Downloads/products */
 
 .btn-download {

diff --git a/pgweb/news/views.py b/pgweb/news/views.py
index b09cadb13ef89452b146c4d1539a589a97ab5fec..09b704c3b341310f102777c6a35f6d50d60ee7cb 100644 (file)
--- a/pgweb/news/views.py
+++ b/pgweb/news/views.py
@@ -24,7 +24,7 @@ def archive(request, tag=None, paginator=None):
     if paginator and paginator.strip('/'):
         news = news.filter(date__lte=datetime.datetime.strptime(paginator.strip('/'), '%Y%m%d'))
 
-    allnews = list(news.order_by('-date')[:NEWS_ITEMS_PER_PAGE + 1])
+    allnews = list(news.prefetch_related('tags').order_by('-date')[:NEWS_ITEMS_PER_PAGE + 1])
     if len(allnews) == NEWS_ITEMS_PER_PAGE + 1:
         # 11 means we have a second page, so set a paginator link
         paginator = allnews[9].date.strftime("%Y%m%d")

diff --git a/templates/news/item.html b/templates/news/item.html
index bb5a8e2faec190685a0b19452ad4c7743f8ab737..f5930fd2ca0bde6bb1ad88f4d0a9247c78eee2aa 100644 (file)
--- a/templates/news/item.html
+++ b/templates/news/item.html
@@ -4,12 +4,14 @@
 {%block contents%}
 <h1>{{obj.title}}</h1>
 <div class="newsdate">Posted on <strong>{{obj.displaydate}}</strong>{% if obj.org.name != '_migrated' %} by {{ obj.org.name }}{% endif %}</div>
+<div class="newstags newsdate">{%for t in obj.tags.all%}
+<span class="badge badge-pill badge-secondary"><i class="fa fa-tag"></i> {{t}}</span>
+{%endfor%}
+</div>
+
 {{obj.content|markdown:"safe"}}
 {%if obj.is_migrated%}
 <p><em>This post has been migrated from a previous version of the PostgreSQL
 website. We apologise for any formatting issues caused by the migration.</em></p>
 {%endif%}
-{%for t in obj.tags.all%}
-<span class="newstag"><a class="btn btn-primary" href="/about/newsarchive/{{t.urlname}}/">{{t.name}}</a></span>
-{%endfor%}
 {%endblock%}

diff --git a/templates/news/newsarchive.html b/templates/news/newsarchive.html
index d38c73016d3c6e2053f5b8725e9d986457b8264c..3fab613032d6f0c517f8a57b9cea4f0346b08280 100644 (file)
--- a/templates/news/newsarchive.html
+++ b/templates/news/newsarchive.html
@@ -5,12 +5,14 @@
 <h1><a href="/about/newsarchive/">News Archive</a>{%if tag%} - {{tag.name}}{%endif%} <i class="far fa-newspaper"></i></h1>
 
 <p>
-{%for t in newstags%}<span class="newstag"><a class="btn btn-primary" href="/about/newsarchive/{{t.urlname}}/">{{t.name}}</a></span> {%endfor%}
+{%for t in newstags%}<span class="newstag"><a class="btn btn-primary" href="/about/newsarchive/{{t.urlname}}/"><i class="fa fa-tag"></i> {{t.name}}</a></span> {%endfor%}
 </p>
 
 {%for obj in news %}
 <h2 class="news"><a href="/about/news/{{obj.title|slugify}}-{{obj.id}}/">{{obj.title}}</a></h2>
-<div class="newsdate">Posted on <strong>{{obj.displaydate}}</strong>{% if obj.org.name != '_migrated' %} by {{ obj.org.name }}{% endif %}</div>
+<div class="newsdate">Posted on <strong>{{obj.displaydate}}</strong>{% if obj.org.name != '_migrated' %} by {{ obj.org.name }}{% endif %}
+{%for t in obj.tags.all%}<span class="badge badge-pill badge-secondary"><i class="fa fa-tag"></i> {{t}}</span> {%endfor%}
+</div>
 {{obj.content|markdown:"safe"|striptags|truncatewords:20}}
 <p><a href="/about/news/{{obj.title|slugify}}-{{obj.id}}/">Read more...</a></p>
 {%endfor%}