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 <[email protected]>

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>

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">

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 %}

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'],

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);
 }

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);
 }