From 81351a374380e9a5cec1c44130ffa362e476def2 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Thu, 6 Jul 2023 18:18:16 -0500
Subject: [PATCH] fix(tup-cms): tup-532 user_news plugin UI (#249)

* fix: c-feed-list heading pill misaligned

(because of bad selector)

* fix: consistent space btw. title & pill

- trim inconssitent whitespace
- add consistent css space

* chore: move user news pill out of title link

(but still keep it in the title)

* fix: change "Posted" to "Published"

* fix: "Update" pill from title to date (untested)

* fix: news list pill alignment

(do not limit alignment to title)

* test: max_articles 4 (temporary)

Just doing this to test more so I can see an "Update" instance.

* fix: remove space between plugin article html

* fix: remove space between news list article html

* fix: add space left of news list pill via css

* chore: remove test/hack

---------

Co-authored-by: Jake Rosenberg <jrosenberg@tacc.utexas.edu>
---
 .../templates/user_news/includes/item_data.html      |  7 ++++---
 .../templates/user_news/includes/list_item.html      |  3 ---
 .../user_news/includes/list_item_for_plugin.html     | 12 +++++++-----
 apps/tup-cms/src/apps/user_news/utils.py             |  2 +-
 .../css/for-core-styles/components/c-feed-list.css   |  3 ++-
 .../css/for-core-styles/components/c-news--list.css  |  3 ++-
 6 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/apps/tup-cms/src/apps/user_news/templates/user_news/includes/item_data.html b/apps/tup-cms/src/apps/user_news/templates/user_news/includes/item_data.html
index 0dda4484f..ce8436311 100644
--- a/apps/tup-cms/src/apps/user_news/templates/user_news/includes/item_data.html
+++ b/apps/tup-cms/src/apps/user_news/templates/user_news/includes/item_data.html
@@ -10,9 +10,10 @@
     {% if article.postDateTime %}
     <li class="c-news__date">
         <span>{% trans "Published" %}</span>&nbsp;
-        <time datetime="{{ article.postDateTime }}">
-            {{ article.postDate }}
-        </time>
+        <time datetime="{{ article.postDateTime }}">{{ article.postDate }}</time>
+        {% if article.updates %}
+        <span class="c-pill c-pill--is-updated">Update</span>
+        {% endif %}
     </li>
     {% endif %}
 {% endspaceless %}</ul>
diff --git a/apps/tup-cms/src/apps/user_news/templates/user_news/includes/list_item.html b/apps/tup-cms/src/apps/user_news/templates/user_news/includes/list_item.html
index 4d88c023f..17919836f 100644
--- a/apps/tup-cms/src/apps/user_news/templates/user_news/includes/list_item.html
+++ b/apps/tup-cms/src/apps/user_news/templates/user_news/includes/list_item.html
@@ -9,9 +9,6 @@
             <a href="/{{ urls.base }}{{ urls.item_prefix }}{{ article.id }}">
                 {{ article.title }}
             </a>
-            {% if article.updates %}
-                <span class="c-pill c-pill--is-updated">Update</span>
-            {% endif %}
         </{{ title_tag|default:"h3" }}>
         {% if article.subtitle %}
         <{{ subtitle_tag|default:"h4" }} class="c-news__subtitle">
diff --git a/apps/tup-cms/src/apps/user_news/templates/user_news/includes/list_item_for_plugin.html b/apps/tup-cms/src/apps/user_news/templates/user_news/includes/list_item_for_plugin.html
index c34e9094f..61e8d9547 100644
--- a/apps/tup-cms/src/apps/user_news/templates/user_news/includes/list_item_for_plugin.html
+++ b/apps/tup-cms/src/apps/user_news/templates/user_news/includes/list_item_for_plugin.html
@@ -1,15 +1,16 @@
 {% if article %}
 
   <article class="{% if article.updates %}has-update{% endif %}">
-    <time data-prefix="Posted:" datetime="{{ article.postDateTime }}">
-      {{ article.postDate }}
+  {% spaceless %}
+    <time data-prefix="Published:" datetime="{{ article.postDateTime }}">
+      <span>{{ article.postDate }}</span>
+      {% if article.updates %}
+        <span class="c-pill c-pill--is-updated">Update</span>
+      {% endif %}
     </time>
     <h4>
       <a href="/{{ urls.base }}{{ urls.item_prefix }}{{ article.id }}">
         {{ article.title }}
-        {% if article.updates %}
-          <span class="c-pill c-pill--is-updated">Update</span>
-        {% endif %}
       </a>
     </h4>
     {% if article.subttitle %}
@@ -20,6 +21,7 @@ <h5>{{ article.subttitle }}</h5>
     {% else %}
     <p>{{ article.content }}</p>
     {% endif %}
+  {% endspaceless %}
   </article>
 
 {% else %}
diff --git a/apps/tup-cms/src/apps/user_news/utils.py b/apps/tup-cms/src/apps/user_news/utils.py
index 28cb70173..ea3918c8b 100644
--- a/apps/tup-cms/src/apps/user_news/utils.py
+++ b/apps/tup-cms/src/apps/user_news/utils.py
@@ -66,7 +66,7 @@ def create_proxy_article(article):
 
   context_article = {
     'id': article['ID'],
-    'title': article['WebTitle'],
+    'title': article['WebTitle'].strip(),
     'content': article['Content'],
     'subtitle': article['Subtitle'],
     'author': article['Author'],
diff --git a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-styles/components/c-feed-list.css b/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-styles/components/c-feed-list.css
index f532b537e..7f4b02322 100644
--- a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-styles/components/c-feed-list.css
+++ b/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-styles/components/c-feed-list.css
@@ -40,7 +40,8 @@
 }
 
 /* To style "Update" pill in title */
-.c-feed-list > :is(h1, h2, h3, h4, h5, h6) .c-pill {
+.c-feed-list .c-pill {
+  margin-left: 0.5ch;
   vertical-align: middle;
   transform: translateY(-0.125em);
 }
diff --git a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-styles/components/c-news--list.css b/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-styles/components/c-news--list.css
index 59232d041..f0f9c16fe 100644
--- a/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-styles/components/c-news--list.css
+++ b/apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-styles/components/c-news--list.css
@@ -143,7 +143,8 @@
 }
 
 /* To style "Update" pill in title */
-.c-news__title .c-pill {
+.c-news .c-pill {
+  margin-left: 0.5ch;
   vertical-align: middle;
   transform: translateY(-0.125em);
 }