hotfix: update pills too large or missing (#347)

* fix: update pill too large * fix: news pill styles misplaced * fix: "ORIGINAL MESSAGE" → "Original Message" pill --------- Co-authored-by: Jake Rosenberg <[email protected]>
TACC · Nov 9, 2023 · 60571a0 · 60571a0
1 parent bcc1c0c
commit 60571a0
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 10 deletions.
diff --git a/apps/tup-cms/src/apps/user_news/templates/user_news/includes/read_item.html b/apps/tup-cms/src/apps/user_news/templates/user_news/includes/read_item.html
@@ -18,7 +18,9 @@ <h2 class="c-news__subtitle">{{ article.subtitle }}</h2>
     {% if article.updates %}
     {% include './updates.html' with updates=article.updates %}
     <header class="c-update__header">
-      <h3 class="c-update__title">{% trans "Original Message" %}</h3>
+      <h3 class="c-update__title">
+        <span class="c-pill">{% trans "Original Message" %}</span>
+      </h3>
       <span>{% trans "Published" %}</span>&nbsp;
       <time datetime="{{ article.postDateTime }}">
           {{ article.postDate }}

diff --git a/...rc/taccsite_custom/tup_cms/static/tup_cms/css/for-core-styles/components/c-news--list.css b/...rc/taccsite_custom/tup_cms/static/tup_cms/css/for-core-styles/components/c-news--list.css
@@ -142,11 +142,9 @@
   display: none;
 }
 
-/* To style "Update" pill in title */
-.c-news .c-pill {
+/* To style a pill (e.g. "Update" pill in a title) */
+.c-news--list .c-pill:not(:first-child) {
   margin-left: 0.5ch;
-  vertical-align: middle;
-  transform: translateY(-0.125em);
 }
 
 

diff --git a/...-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-styles/components/c-news.css b/...-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-styles/components/c-news.css
@@ -117,3 +117,9 @@
 .c-news__data address {
   display: inline;
 }
+
+/* To style a pill (e.g. "Update" pill in a title) */
+.c-news .c-pill {
+  vertical-align: middle;
+  transform: translateY(-0.125em);
+}
diff --git a/...up-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-tup-cms/components/c-update.css b/...up-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-tup-cms/components/c-update.css
@@ -3,11 +3,8 @@
   vertical-align: middle;
   transform: translateY(-0.125em);
 }
-
-/* To style "Update" pill in big article page title */
-.c-update__title .c-pill {
-  font-size: var(--global-font-size--large);
-  min-width: unset; /* overwrite .c-pill */
+.c-update__title .c-pill:not([class*="c-pill--"]) {
+  background-color: var(--global-color-primary--light);
 }
 
 /* To reduce space between "Original Update" and its content */