From 4e9895c383de95237602becb3de75f1e83becc24 Mon Sep 17 00:00:00 2001 From: Wesley B <62723358+wesleyboar@users.noreply.github.com> Date: Mon, 24 Nov 2025 16:55:43 -0600 Subject: [PATCH 01/37] refactor: static values, not excess variables --- .../src/_imports/components/django.cms.blog.app.css | 12 +----------- .../_imports/components/django.cms.blog.app.item.css | 4 ++-- .../_imports/components/django.cms.blog.app.page.css | 4 +--- 3 files changed, 4 insertions(+), 16 deletions(-) diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.css b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.css index 322a0403b..03d708b63 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.css @@ -18,16 +18,6 @@ Styleguide Components.DjangoCMS.Blog.App - - -/* Variables */ - -.app-blog { - --article-buffer: 20px; -} - - - /* Generic */ .app-blog { @@ -173,5 +163,5 @@ Styleguide Components.DjangoCMS.Blog.App /* Pagination */ .pagination { - margin-block: calc( var(--article-buffer) * 2 ); + margin-block: 40px; } diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.item.css b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.item.css index 6def8d68c..86ea7a1c0 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.item.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.item.css @@ -47,8 +47,8 @@ Styleguide Components.DjangoCMS.Blog.App.Item column-gap: 50px; /* for horz. space between image and content */ border-bottom: var(--global-border-width--normal) solid var(--global-color-primary--dark); - margin-bottom: var(--article-buffer); - padding-bottom: var(--article-buffer); + margin-bottom: 20px; + padding-bottom: 20px; } :--article-item header { grid-area: head } :--article-item .blog-visual { grid-area: media } diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.page.css b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.page.css index 4a6c5ef4f..e009a54e2 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.page.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.page.css @@ -20,8 +20,6 @@ Styleguide Components.DjangoCMS.Blog.App.Page /* Root */ :--article-page { - --header-buffer: calc( var(--global-space--grid-gap) / 2 ); - max-width: 775px; margin-inline: auto; } @@ -43,7 +41,7 @@ Styleguide Components.DjangoCMS.Blog.App.Page } :--article-page header h1, :--article-page header h2 { - margin-bottom: var(--header-buffer); + margin-bottom: calc( var(--global-space--grid-gap) / 2 ); } :--article-page header h1 { font-size: var(--global-font-size--xxx-large); From f1dd07f6d34e8afbbaf1866e37df2c5c085a2d30 Mon Sep 17 00:00:00 2001 From: Wesley B <62723358+wesleyboar@users.noreply.github.com> Date: Tue, 25 Nov 2025 11:16:36 -0600 Subject: [PATCH 02/37] fix: blog visual margin and visibility - many sites manually hide .blog-visual, because of margin when no image - image should become smaller sooner --- .../components/django.cms.blog.app.page.css | 26 ++++++++++--------- .../news/hide-article-main-image.html | 4 --- 2 files changed, 14 insertions(+), 16 deletions(-) delete mode 100644 taccsite_cms/templates/snippets/news/hide-article-main-image.html diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.page.css b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.page.css index 5e1afabe4..7a8e08ebe 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.page.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.page.css @@ -59,10 +59,13 @@ Styleguide Components.DjangoCMS.Blog.App.Page /* Media & Content */ -:--article-page :is(.blog-visual, .blog-content) { - --blog-item-media-buffer: 45px; +:--article-page .blog-lead, +:--article-page .blog-visual, +:--article-page .blog-content { + font-size: var(--global-font-size--medium); + line-height: 2; - margin-block: var(--blog-item-media-buffer) 60px; + margin-block: 45px; } /* To undo inline content styles */ @@ -85,20 +88,25 @@ Styleguide Components.DjangoCMS.Blog.App.Page height: auto; } /* To support vertical layouts at narrow viewports */ -@media (--x-narrow-and-below) { +@media (--narrow-and-below) { :--article-page .blog-visual { display: grid; justify-content: center; - margin-bottom: var(--blog-item-media-buffer); } } /* To support horizontal layouts at wide viewports */ -@media (--x-narrow-and-above) { +@media (--narrow-and-above) { :--article-page .blog-visual { float: left; margin-right: var(--blog-item-media-buffer); } } +:--article-page .blog-visual:where(:not(:has(*))) { + margin: unset; +} +:--article-page .blog-visual:empty { + display: none; +} /* To prevent footer on right side of page */ /* FAQ: Because of `:--article-page .blog-visual`'s `float: left` */ @@ -126,12 +134,6 @@ Styleguide Components.DjangoCMS.Blog.App.Page /* Media & Content - Content */ -:--article-page .blog-lead, -:--article-page .blog-content { - font-size: var(--global-font-size--medium); - line-height: 2; -} - /* Add space between all list items */ /* FAQ: Use case is list items with as much text as a paragraph */ :--article-page .blog-lead li + li, diff --git a/taccsite_cms/templates/snippets/news/hide-article-main-image.html b/taccsite_cms/templates/snippets/news/hide-article-main-image.html deleted file mode 100644 index 63b78f654..000000000 --- a/taccsite_cms/templates/snippets/news/hide-article-main-image.html +++ /dev/null @@ -1,4 +0,0 @@ -{# https://confluence.tacc.utexas.edu/x/bwbSDw #} - From 193bf0e72d107fd893e0edeb4d92a71a96c155c8 Mon Sep 17 00:00:00 2001 From: Wesley B <62723358+wesleyboar@users.noreply.github.com> Date: Tue, 25 Nov 2025 11:25:15 -0600 Subject: [PATCH 03/37] refactor!: delete PORTAL_BLOG_CUSTOM_MEDIA_POST_CATEGORY No one uses this setting as opportunity to add custom media. Category set is only used semantically, never functionally. --- taccsite_cms/settings.py | 3 --- taccsite_cms/templates/djangocms_blog/post_detail.html | 8 ++------ 2 files changed, 2 insertions(+), 9 deletions(-) diff --git a/taccsite_cms/settings.py b/taccsite_cms/settings.py index a4a4ebeda..a14ef200c 100644 --- a/taccsite_cms/settings.py +++ b/taccsite_cms/settings.py @@ -317,7 +317,6 @@ def gettext(s): return s PORTAL_BLOG_SHOW_CATEGORIES = True PORTAL_BLOG_SHOW_TAGS = True # To flag posts of certain category or tag, so template can take special action -PORTAL_BLOG_CUSTOM_MEDIA_POST_CATEGORY = 'mutlimedia' PORTAL_BLOG_SHOW_ABSTRACT_TAG = 'external' PORTAL_BLOG_CATEGORY_ORDER = [] @@ -661,7 +660,6 @@ def get_subdirs_as_module_names(path): 'INCLUDES_SEARCH_BAR', 'TACC_BLOG_SHOW_CATEGORIES', 'TACC_BLOG_SHOW_TAGS', - 'TACC_BLOG_CUSTOM_MEDIA_POST_CATEGORY', 'TACC_BLOG_SHOW_ABSTRACT_TAG', 'TACC_BLOG_CATEGORY_ORDER', 'TACC_SOCIAL_SHARE_PLATFORMS', @@ -715,7 +713,6 @@ def get_subdirs_as_module_names(path): 'PORTAL_STYLES', 'PORTAL_BLOG_SHOW_CATEGORIES', 'PORTAL_BLOG_SHOW_TAGS', - 'PORTAL_BLOG_CUSTOM_MEDIA_POST_CATEGORY', 'PORTAL_BLOG_SHOW_ABSTRACT_TAG', 'PORTAL_BLOG_CATEGORY_ORDER', 'PORTAL_SOCIAL_SHARE_PLATFORMS', diff --git a/taccsite_cms/templates/djangocms_blog/post_detail.html b/taccsite_cms/templates/djangocms_blog/post_detail.html index 5499fa260..9cd9e0b94 100644 --- a/taccsite_cms/templates/djangocms_blog/post_detail.html +++ b/taccsite_cms/templates/djangocms_blog/post_detail.html @@ -2,14 +2,13 @@ {% extends "djangocms_blog/post_detail.html" %} {# TACC (define whether this is a special post): #} {# TACC (redirect external articles): #} -{% load i18n easy_thumbnails_tags cms_tags static sekizai_tags blog_post_use_custom_media blog_post_is_show_abstract %} +{% load i18n easy_thumbnails_tags cms_tags static sekizai_tags blog_post_is_show_abstract %} {# /TACC #} {# /TACC #} {% block content_blog %}{% spaceless %} {# TACC (define whether this is a special post): #} -{% blog_post_use_custom_media post settings.PORTAL_BLOG_CUSTOM_MEDIA_POST_CATEGORY as use_custom_media %} {% blog_post_is_show_abstract post settings.PORTAL_BLOG_SHOW_ABSTRACT_TAG as is_show_abstract_post %} {# /TACC #}
@@ -43,10 +42,7 @@

{% render_model post "subtitle" %}

{% endblock %} {# /TACC #} - {# TACC (support custom media even with thumbnail): #} - {# {% if not post.main_image_id %} #} - {% if use_custom_media or not post.main_image_id %} - {# /TACC #} + {% if not post.main_image_id %}
{% render_placeholder post.media %}
{% else %}
From 5ef00c44875c86e2c6713a0730e693a06814e362 Mon Sep 17 00:00:00 2001 From: Wesley B <62723358+wesleyboar@users.noreply.github.com> Date: Tue, 25 Nov 2025 11:41:51 -0600 Subject: [PATCH 04/37] =?UTF-8?q?refactor!:=20blog=5Fpost=5Fis=5F=20?= =?UTF-8?q?=E2=86=92=20blog=5Fpost=5Fhas?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit These tags can be more generic than I have named them. --- .../templates/djangocms_blog/post_detail.html | 10 +++--- .../templatetags/blog_post_has_category.py | 32 +++++++++++++++++++ .../templatetags/blog_post_has_tag.py | 30 +++++++++++++++++ .../blog_post_is_show_abstract.py | 32 ------------------- .../blog_post_use_custom_media.py | 32 ------------------- 5 files changed, 67 insertions(+), 69 deletions(-) create mode 100644 taccsite_cms/templatetags/blog_post_has_category.py create mode 100644 taccsite_cms/templatetags/blog_post_has_tag.py delete mode 100644 taccsite_cms/templatetags/blog_post_is_show_abstract.py delete mode 100644 taccsite_cms/templatetags/blog_post_use_custom_media.py diff --git a/taccsite_cms/templates/djangocms_blog/post_detail.html b/taccsite_cms/templates/djangocms_blog/post_detail.html index 9cd9e0b94..a188f6583 100644 --- a/taccsite_cms/templates/djangocms_blog/post_detail.html +++ b/taccsite_cms/templates/djangocms_blog/post_detail.html @@ -1,15 +1,15 @@ {# https://github.com/nephila/djangocms-blog/blob/1.2.3/djangocms_blog/templates/djangocms_blog/post_detail.html #} {% extends "djangocms_blog/post_detail.html" %} -{# TACC (define whether this is a special post): #} +{# TACC (print abstract for some posts e.g. an external article): #} {# TACC (redirect external articles): #} -{% load i18n easy_thumbnails_tags cms_tags static sekizai_tags blog_post_is_show_abstract %} +{% load i18n easy_thumbnails_tags cms_tags static sekizai_tags blog_post_has_tag %} {# /TACC #} {# /TACC #} {% block content_blog %}{% spaceless %} -{# TACC (define whether this is a special post): #} -{% blog_post_is_show_abstract post settings.PORTAL_BLOG_SHOW_ABSTRACT_TAG as is_show_abstract_post %} +{# TACC (print abstract for some posts e.g. an external article): #} +{% blog_post_has_tag post settings.PORTAL_BLOG_SHOW_ABSTRACT_TAG as show_abstract %} {# /TACC #}
@@ -54,7 +54,7 @@

{% render_model post "subtitle" %}

{# {% endspaceless %} #} {# /TACC #} {# TACC (print abstract for some posts e.g. an external article): #} - {% if is_show_abstract_post %} + {% if show_abstract %} {# TACC (copied from source app's includes/blog_item.html): #}
{% if not TRUNCWORDS_COUNT %} diff --git a/taccsite_cms/templatetags/blog_post_has_category.py b/taccsite_cms/templatetags/blog_post_has_category.py new file mode 100644 index 000000000..ca95d3a2b --- /dev/null +++ b/taccsite_cms/templatetags/blog_post_has_category.py @@ -0,0 +1,32 @@ +from django import template + +register = template.Library() + +@register.simple_tag +def blog_post_has_category(post=None, category_slug=''): + """ + Custom Template Tag `blog_post_has_category` + + Use: Return (boolean) whether given blog post has a specific category. + + Load custom tag into template: + {% load blog_post_has_category %} + + Template inline usage: + {# (renders `True` or `False`) #} + {% blog_post_has_category post 'some_category' %} + + {# (renders "A" or "B") #} + {% blog_post_has_category post 'some_category' as is_some_category %} + {% if is_some_category %} A {% else %} B {% endif %} + + Example: + ../templates/djangocms_blog/post_detail.html + """ + has_category = False + if post.categories.exists: + for cat in post.categories.all(): + if cat.slug == category_slug: + has_category = True + + return has_category diff --git a/taccsite_cms/templatetags/blog_post_has_tag.py b/taccsite_cms/templatetags/blog_post_has_tag.py new file mode 100644 index 000000000..d0f1680c4 --- /dev/null +++ b/taccsite_cms/templatetags/blog_post_has_tag.py @@ -0,0 +1,30 @@ +from django import template + +register = template.Library() + +@register.simple_tag +def blog_post_has_tag(post=None, tag_slug=''): + """ + Custom Template Tag `blog_post_has_tag` + + Use: Return (boolean) whether given blog post has a specific tag. + Load custom tag into template: + {% load blog_post_has_tag %} + + Template inline usage: + {# (renders `True` or `False`) #} + {% blog_post_has_tag post 'some_tag' %} + {# (renders "A" or "B") #} + {% blog_post_has_tag post 'some_tag' as is_some_tag %} + {% if is_some_tag %} A {% else %} B {% endif %} + + Example: + ../templates/djangocms_blog/post_detail.html + """ + has_tag = False + if post.tags.exists: + for tag in post.tags.all(): + if tag.slug == tag_slug: + has_tag = True + + return has_tag diff --git a/taccsite_cms/templatetags/blog_post_is_show_abstract.py b/taccsite_cms/templatetags/blog_post_is_show_abstract.py deleted file mode 100644 index c5643edd0..000000000 --- a/taccsite_cms/templatetags/blog_post_is_show_abstract.py +++ /dev/null @@ -1,32 +0,0 @@ -from django import template - -register = template.Library() - -@register.simple_tag -def blog_post_is_show_abstract(post=None, tag_slug=''): - """ - Custom Template Tag `blog_post_is_show_abstract` - - Use: Return (boolean) whether given blog post is a "show_abstract" post. - - Load custom tag into template: - {% load blog_post_is_show_abstract %} - - Template inline usage: - {# (renders `True` or `False`) #} - {% blog_post_is_show_abstract post 'show_abstract' %} - - {# (renders "A" or "B") #} - {% blog_post_is_show_abstract post 'show_abstract' as is_show_abstract %} - {% if is_show_abstract %} A {% else %} B {% endif %} - - Example: - ../templates/djangocms_blog/post_detail.html - """ - is_show_abstract = False - if post.tags.exists: - for tag in post.tags.all(): - if tag.slug == tag_slug: - is_show_abstract = True - - return is_show_abstract diff --git a/taccsite_cms/templatetags/blog_post_use_custom_media.py b/taccsite_cms/templatetags/blog_post_use_custom_media.py deleted file mode 100644 index 290ce109a..000000000 --- a/taccsite_cms/templatetags/blog_post_use_custom_media.py +++ /dev/null @@ -1,32 +0,0 @@ -from django import template - -register = template.Library() - -@register.simple_tag -def blog_post_use_custom_media(post=None, category_slug=''): - """ - Custom Template Tag `blog_post_use_custom_media` - - Use: Return (boolean) whether given blog post is a "Multimedia"-type post. - - Load custom tag into template: - {% load blog_post_use_custom_media %} - - Template inline usage: - {# (renders `True` or `False`) #} - {% blog_post_use_custom_media post 'multimedia' %} - - {# (renders "A" or "B") #} - {% blog_post_use_custom_media post 'multimedia' as is_custom_media %} - {% if is_custom_media %} A {% else %} B {% endif %} - - Example: - ../templates/djangocms_blog/post_detail.html - """ - is_custom_media = False - if post.categories.exists: - for cat in post.categories.all(): - if cat.slug == category_slug: - is_custom_media = True - - return is_custom_media From 26ead03521e9a61d5b72a137a9b1796be1d0f298 Mon Sep 17 00:00:00 2001 From: Wesley B <62723358+wesleyboar@users.noreply.github.com> Date: Tue, 25 Nov 2025 11:49:11 -0600 Subject: [PATCH 05/37] refactor!: load blog_post_has_ via "blog_tags" Put all tgs in one place. Name them like Django CMS ("cms_tags") --- .../templates/djangocms_blog/post_detail.html | 2 +- .../templatetags/blog_post_has_tag.py | 30 ------------------- ...blog_post_has_category.py => blog_tags.py} | 27 +++++++++++++++++ 3 files changed, 28 insertions(+), 31 deletions(-) delete mode 100644 taccsite_cms/templatetags/blog_post_has_tag.py rename taccsite_cms/templatetags/{blog_post_has_category.py => blog_tags.py} (54%) diff --git a/taccsite_cms/templates/djangocms_blog/post_detail.html b/taccsite_cms/templates/djangocms_blog/post_detail.html index a188f6583..3fd69089b 100644 --- a/taccsite_cms/templates/djangocms_blog/post_detail.html +++ b/taccsite_cms/templates/djangocms_blog/post_detail.html @@ -2,7 +2,7 @@ {% extends "djangocms_blog/post_detail.html" %} {# TACC (print abstract for some posts e.g. an external article): #} {# TACC (redirect external articles): #} -{% load i18n easy_thumbnails_tags cms_tags static sekizai_tags blog_post_has_tag %} +{% load i18n easy_thumbnails_tags cms_tags static sekizai_tags blog_tags %} {# /TACC #} {# /TACC #} diff --git a/taccsite_cms/templatetags/blog_post_has_tag.py b/taccsite_cms/templatetags/blog_post_has_tag.py deleted file mode 100644 index d0f1680c4..000000000 --- a/taccsite_cms/templatetags/blog_post_has_tag.py +++ /dev/null @@ -1,30 +0,0 @@ -from django import template - -register = template.Library() - -@register.simple_tag -def blog_post_has_tag(post=None, tag_slug=''): - """ - Custom Template Tag `blog_post_has_tag` - - Use: Return (boolean) whether given blog post has a specific tag. - Load custom tag into template: - {% load blog_post_has_tag %} - - Template inline usage: - {# (renders `True` or `False`) #} - {% blog_post_has_tag post 'some_tag' %} - {# (renders "A" or "B") #} - {% blog_post_has_tag post 'some_tag' as is_some_tag %} - {% if is_some_tag %} A {% else %} B {% endif %} - - Example: - ../templates/djangocms_blog/post_detail.html - """ - has_tag = False - if post.tags.exists: - for tag in post.tags.all(): - if tag.slug == tag_slug: - has_tag = True - - return has_tag diff --git a/taccsite_cms/templatetags/blog_post_has_category.py b/taccsite_cms/templatetags/blog_tags.py similarity index 54% rename from taccsite_cms/templatetags/blog_post_has_category.py rename to taccsite_cms/templatetags/blog_tags.py index ca95d3a2b..c05331b40 100644 --- a/taccsite_cms/templatetags/blog_post_has_category.py +++ b/taccsite_cms/templatetags/blog_tags.py @@ -30,3 +30,30 @@ def blog_post_has_category(post=None, category_slug=''): has_category = True return has_category + +@register.simple_tag +def blog_post_has_tag(post=None, tag_slug=''): + """ + Custom Template Tag `blog_post_has_tag` + + Use: Return (boolean) whether given blog post has a specific tag. + Load custom tag into template: + {% load blog_post_has_tag %} + + Template inline usage: + {# (renders `True` or `False`) #} + {% blog_post_has_tag post 'some_tag' %} + {# (renders "A" or "B") #} + {% blog_post_has_tag post 'some_tag' as is_some_tag %} + {% if is_some_tag %} A {% else %} B {% endif %} + + Example: + ../templates/djangocms_blog/post_detail.html + """ + has_tag = False + if post.tags.exists: + for tag in post.tags.all(): + if tag.slug == tag_slug: + has_tag = True + + return has_tag From 08309ac3ab1fed09e96af5ceb831faa326a240fe Mon Sep 17 00:00:00 2001 From: Wesley B <62723358+wesleyboar@users.noreply.github.com> Date: Tue, 25 Nov 2025 12:20:00 -0600 Subject: [PATCH 06/37] =?UTF-8?q?refactor!:=20blog=5Fcats=5Forganized=20?= =?UTF-8?q?=E2=86=92=20blog=5Ffilters?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../includes/blog_cats_organized.html | 16 ---------------- .../includes/blog_cats_sorted.html | 19 +++++++++++++++++++ .../djangocms_blog/includes/blog_meta.html | 4 ++-- ...blog_cats_organized.py => blog_filters.py} | 2 +- 4 files changed, 22 insertions(+), 19 deletions(-) delete mode 100644 taccsite_cms/templates/djangocms_blog/includes/blog_cats_organized.html create mode 100644 taccsite_cms/templates/djangocms_blog/includes/blog_cats_sorted.html rename taccsite_cms/templatetags/{blog_cats_organized.py => blog_filters.py} (95%) diff --git a/taccsite_cms/templates/djangocms_blog/includes/blog_cats_organized.html b/taccsite_cms/templates/djangocms_blog/includes/blog_cats_organized.html deleted file mode 100644 index 641eddf97..000000000 --- a/taccsite_cms/templates/djangocms_blog/includes/blog_cats_organized.html +++ /dev/null @@ -1,16 +0,0 @@ -{% load i18n %} -{% load blog_cats_organized %} - -{% if post.categories.exists %} - {% with post.categories.all|filter_categories as filtered %} - {# iterate through each category, which is now filtered and organized #} - {% for category in filtered %} -
  • - {{ category.name }} -
    • - {% endfor %} - {% endwith %} -{% else %} -
  • {% trans "Uncategorized" %}
    • -{% endif %} diff --git a/taccsite_cms/templates/djangocms_blog/includes/blog_cats_sorted.html b/taccsite_cms/templates/djangocms_blog/includes/blog_cats_sorted.html new file mode 100644 index 000000000..5525583f2 --- /dev/null +++ b/taccsite_cms/templates/djangocms_blog/includes/blog_cats_sorted.html @@ -0,0 +1,19 @@ +{% load i18n %} +{% load blog_filters %} + +{% if post.categories.exists %} + {% with post.categories.all|sort_blog_categories as sorted_categories %} + {% for category in sorted_categories %} +
  • + + {{ category.name }} + +
    • + {% endfor %} + {% endwith %} +{% else %} +
  • {% trans "Uncategorized" %}
    • +{% endif %} diff --git a/taccsite_cms/templates/djangocms_blog/includes/blog_meta.html b/taccsite_cms/templates/djangocms_blog/includes/blog_meta.html index 6e5a9fe6c..6765ec769 100644 --- a/taccsite_cms/templates/djangocms_blog/includes/blog_meta.html +++ b/taccsite_cms/templates/djangocms_blog/includes/blog_meta.html @@ -72,8 +72,8 @@
      {% spaceless %} {# /TACC #} {# /TACC #} - {# TACC (nephila/djangocms-blog#730, no commas, rename class, order cats): #} - {% include './blog_cats_organized.html' %} + {# TACC (nephila/djangocms-blog#730, no commas, rename class, sort): #} + {% include './blog_cats_sorted.html' %} {# /TACC #} {# TACC (distinguish categories and tags via class): #} {# TACC (strip whitespace): #} diff --git a/taccsite_cms/templatetags/blog_cats_organized.py b/taccsite_cms/templatetags/blog_filters.py similarity index 95% rename from taccsite_cms/templatetags/blog_cats_organized.py rename to taccsite_cms/templatetags/blog_filters.py index ee37c5c8a..2eacca93b 100644 --- a/taccsite_cms/templatetags/blog_cats_organized.py +++ b/taccsite_cms/templatetags/blog_filters.py @@ -5,7 +5,7 @@ register = template.Library() @register.filter -def filter_categories(categories): +def sort_blog_categories(categories): # Create a dictionary to store the indices of elements in the ordered list order_indices = {element: index for index, element in enumerate(PORTAL_BLOG_CATEGORY_ORDER)} From 06f6c5c172be38ff723d5cea8cbd7801fb1342f8 Mon Sep 17 00:00:00 2001 From: Wesley B <62723358+wesleyboar@users.noreply.github.com> Date: Tue, 25 Nov 2025 12:24:40 -0600 Subject: [PATCH 07/37] =?UTF-8?q?refactor!:=20delete=20unused=20=E2=80=A6.?= =?UTF-8?q?blog.=E2=80=A6.multimedia.css?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Remove django.cms.blog.app.page.multimedia.css. Origin: https://github.com/TACC/Core-CMS/pull/572 Was for Texascale. Texascale still does not use blog. PR says use on `multimedia` articles, but code assumes `large-media`. --- .../components/django.cms.blog.app.page.css | 1 - .../django.cms.blog.app.page.multimedia.css | 98 ------------------- 2 files changed, 99 deletions(-) delete mode 100644 taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.page.multimedia.css diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.page.css b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.page.css index 7a8e08ebe..9f9f6be9b 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.page.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.page.css @@ -10,7 +10,6 @@ Styleguide Components.DjangoCMS.Blog.App.Page @import url("@tacc/core-styles/src/lib/_imports/objects/o-offset-content.css"); @import url("@tacc/core-styles/src/lib/_imports/tools/x-drop-cap.css"); -@import url("./django.cms.blog.app.page.multimedia.css"); @import url("./django.cms.blog.selectors.css"); diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.page.multimedia.css b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.page.multimedia.css deleted file mode 100644 index 070897966..000000000 --- a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.page.multimedia.css +++ /dev/null @@ -1,98 +0,0 @@ -/* -Django CMS Blog App Page (Article/Post) Components - -Reference: - -- [`post_detail.html`](https://github.com/nephila/djangocms-blog/blob/1.2.3/djangocms_blog/templates/djangocms_blog/post_detail.html) - -Styleguide Components.DjangoCMS.Blog.App.Page -*/ - -@custom-selector :--large-media-page .app-blog.has-blog-category-large-media; - -/* To move breadcrumbs atop article */ -:--large-media-page article.post-detail .blog-visual { - float: unset; - margin-right: unset; - margin-block: unset; -} -:--large-media-page .container { - display: grid; - grid-template-areas: - 'breadcrumbs' - 'article'; -} -:--large-media-page .s-breadcrumbs { - grid-area: breadcrumbs; - z-index: 1; -} -:--large-media-page .post-detail { - grid-area: article; - grid-row-start: breadcrumbs-start; -} - -/* To move image to top of article */ -:--large-media-page .post-detail { - display: grid; - grid-template-areas: - 'visual' - 'header' - 'content'; -} -:--large-media-page header { grid-area: header; } -:--large-media-page .blog-visual { grid-area: visual; } -:--large-media-page .blog-content { grid-area: content; } - -/* To style header atop media */ -:--large-media-page header { - --media-overlap: 200px; - - z-index: 1; - background-color: var(--global-color-background--app); - position: realtive; - margin-top: var(--media-overlap); -} -:--large-media-page header h2 { - /* NOTE: Not necessary on dev.tup (thus later probably core-styles v1+) */ - /* https://dev.tup.tacc.utexas.edu/admin/djangocms_snippet/snippet/30 */ - margin-top: 0; -} - -/* To stretch media to full width */ -:--large-media-page { - /* NOTE: Use CMS image thumbnail option at this height to avoid caveats */ - /* CAVEAT: A taller image will be cropped (but match design layout) */ - /* CAVEAT: A shorter image will not overlap header enough to match design */ - --media-height: 680px; - - position: relative; /* to constrain absolute position of media */ -} -:--large-media-page .blog-visual { - text-align: center; /* to center media */ - - position: absolute; - left: 0; - right: 0; - - height: var(--media-height); - overflow-y: hidden; -} -:--large-media-page header { - /* FAQ: Content must move to show image which is out of flow */ - margin-top: calc( var(--media-height) - var(--media-overlap) ); -} - -/* To pad title and content without reducing width */ -:--large-media-page header, -:--large-media-page .blog-content { - --pad: 15px; - - margin-inline: calc( -1 * var(--pad) ); /* prevent width reduction */ - padding-inline: var(--pad); -} -:--large-media-page header { - padding-top: var(--pad); -} -:--large-media-page .blog-content { - padding-bottom: var(--pad); -} From 95af904c30f5755262d431c9b97a27d7e2af1bf6 Mon Sep 17 00:00:00 2001 From: Wesley B <62723358+wesleyboar@users.noreply.github.com> Date: Tue, 25 Nov 2025 17:10:19 -0600 Subject: [PATCH 08/37] refactor(css): django.cms.blog.app.page use mixins --- .../components/django.cms.blog.app.page.css | 54 ++++++++++++++----- 1 file changed, 40 insertions(+), 14 deletions(-) diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.page.css b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.page.css index 9f9f6be9b..4e008fa96 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.page.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.page.css @@ -19,6 +19,9 @@ Styleguide Components.DjangoCMS.Blog.App.Page /* Root */ :--article-page { + @mixin news-article-page; +} +@define-mixin news-article-page { max-width: 775px; margin-inline: auto; } @@ -30,6 +33,9 @@ Styleguide Components.DjangoCMS.Blog.App.Page /* Header */ :--article-page header { + @mixin news-article-page-header; +} +@define-mixin news-article-page-header { grid-template-areas: 'cats date' 'head head' @@ -38,18 +44,26 @@ Styleguide Components.DjangoCMS.Blog.App.Page 'tags tags'; grid-template-columns: minmax(0, max-content) 1fr; } -:--article-page header h1, -:--article-page header h2 { - margin-bottom: calc( var(--global-space--grid-gap) / 2 ); -} + :--article-page header h1 { + @mixin news-article-page-title; +} +@define-mixin news-article-page-title { font-size: var(--global-font-size--xxx-large); border-bottom: var(--global-border-width--normal) solid var(--global-color-primary--dark); + + margin-bottom: 15px; } + :--article-page header h2 { + @mixin news-article-page-subtitle; +} +@define-mixin news-article-page-subtitle { font-weight: normal; font-size: var(--global-font-size--large); + + margin-bottom: 15px; } @@ -61,6 +75,9 @@ Styleguide Components.DjangoCMS.Blog.App.Page :--article-page .blog-lead, :--article-page .blog-visual, :--article-page .blog-content { + @mixin news-article-page-body; +} +@define-mixin news-article-page-body { font-size: var(--global-font-size--medium); line-height: 2; @@ -86,20 +103,29 @@ Styleguide Components.DjangoCMS.Blog.App.Page max-width: 100%; height: auto; } + /* To support vertical layouts at narrow viewports */ -@media (--narrow-and-below) { - :--article-page .blog-visual { - display: grid; - justify-content: center; - } +:--article-page .blog-visual { + @mixin news-article-page-media; } -/* To support horizontal layouts at wide viewports */ -@media (--narrow-and-above) { - :--article-page .blog-visual { - float: left; - margin-right: var(--blog-item-media-buffer); +@define-mixin news-article-page-media { + @media (--narrow-and-below) { + @mixin news-article-page-media--slim-context; } + @media (--narrow-and-above) { + @mixin news-article-page-media--wide-context; + } +} +@define-mixin news-article-page-media--slim-context { + display: grid; + justify-content: center; } +@define-mixin news-article-page-media--wide-context { + float: left; + margin-right: var(--blog-item-media-buffer); +} + +/* To prevent missing media from disrupting page layout */ :--article-page .blog-visual:where(:not(:has(*))) { margin: unset; } From ca8b178679323c682f1d80852c2916c9c3484eee Mon Sep 17 00:00:00 2001 From: Wesley B <62723358+wesleyboar@users.noreply.github.com> Date: Tue, 25 Nov 2025 17:11:31 -0600 Subject: [PATCH 09/37] feat(blog): .blog-visual layout from designer H.P. and I chatted. THis was the result. Tested on CTRN. --- .../components/django.cms.blog.app.page.css | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.page.css b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.page.css index 4e008fa96..4013c1ef5 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.page.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.page.css @@ -117,12 +117,13 @@ Styleguide Components.DjangoCMS.Blog.App.Page } } @define-mixin news-article-page-media--slim-context { - display: grid; - justify-content: center; + margin-inline: auto; + width: fit-content; } @define-mixin news-article-page-media--wide-context { - float: left; - margin-right: var(--blog-item-media-buffer); + float: right; + max-width: 50%; + margin-left: var(--blog-item-media-buffer); } /* To prevent missing media from disrupting page layout */ @@ -133,8 +134,8 @@ Styleguide Components.DjangoCMS.Blog.App.Page display: none; } -/* To prevent footer on right side of page */ -/* FAQ: Because of `:--article-page .blog-visual`'s `float: left` */ +/* To prevent footer on left side of page */ +/* FAQ: Because of `:--article-page .blog-visual`'s `float: right` */ :--article-page .blog-visual + .blog-content::after { /* from Bootstrap `clearfix` */ display: block; From b0206cf61c0f1797a53aa803e231c2d44f9675f1 Mon Sep 17 00:00:00 2001 From: Wesley B <62723358+wesleyboar@users.noreply.github.com> Date: Tue, 25 Nov 2025 17:17:52 -0600 Subject: [PATCH 10/37] refactor(css): news-article-page mixin renames --- .../components/django.cms.blog.app.page.css | 28 +++++++++---------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.page.css b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.page.css index 4013c1ef5..d493b8e25 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.page.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.page.css @@ -33,9 +33,9 @@ Styleguide Components.DjangoCMS.Blog.App.Page /* Header */ :--article-page header { - @mixin news-article-page-header; + @mixin news-article-page__header; } -@define-mixin news-article-page-header { +@define-mixin news-article-page__header { grid-template-areas: 'cats date' 'head head' @@ -46,9 +46,9 @@ Styleguide Components.DjangoCMS.Blog.App.Page } :--article-page header h1 { - @mixin news-article-page-title; + @mixin news-article-page__title; } -@define-mixin news-article-page-title { +@define-mixin news-article-page__title { font-size: var(--global-font-size--xxx-large); border-bottom: var(--global-border-width--normal) solid var(--global-color-primary--dark); @@ -57,9 +57,9 @@ Styleguide Components.DjangoCMS.Blog.App.Page } :--article-page header h2 { - @mixin news-article-page-subtitle; + @mixin news-article-page__subtitle; } -@define-mixin news-article-page-subtitle { +@define-mixin news-article-page__subtitle { font-weight: normal; font-size: var(--global-font-size--large); @@ -75,9 +75,9 @@ Styleguide Components.DjangoCMS.Blog.App.Page :--article-page .blog-lead, :--article-page .blog-visual, :--article-page .blog-content { - @mixin news-article-page-body; + @mixin news-article-page__body; } -@define-mixin news-article-page-body { +@define-mixin news-article-page__body { font-size: var(--global-font-size--medium); line-height: 2; @@ -106,21 +106,21 @@ Styleguide Components.DjangoCMS.Blog.App.Page /* To support vertical layouts at narrow viewports */ :--article-page .blog-visual { - @mixin news-article-page-media; + @mixin news-article-page__media; } -@define-mixin news-article-page-media { +@define-mixin news-article-page__media { @media (--narrow-and-below) { - @mixin news-article-page-media--slim-context; + @mixin news-article-page__media--slim-context; } @media (--narrow-and-above) { - @mixin news-article-page-media--wide-context; + @mixin news-article-page__media--wide-context; } } -@define-mixin news-article-page-media--slim-context { +@define-mixin news-article-page__media--slim-context { margin-inline: auto; width: fit-content; } -@define-mixin news-article-page-media--wide-context { +@define-mixin news-article-page__media--wide-context { float: right; max-width: 50%; margin-left: var(--blog-item-media-buffer); From 8eaab6e04c66c29019bde5e37255382e94927eb5 Mon Sep 17 00:00:00 2001 From: Wesley B <62723358+wesleyboar@users.noreply.github.com> Date: Tue, 25 Nov 2025 17:22:06 -0600 Subject: [PATCH 11/37] docs(css): polish comments --- .../css/src/_imports/components/django.cms.blog.app.page.css | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.page.css b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.page.css index d493b8e25..a0c40d6ea 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.page.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.page.css @@ -87,9 +87,8 @@ Styleguide Components.DjangoCMS.Blog.App.Page /* To undo inline content styles */ /* FAQ: In case author pasted such markup from another source */ :--article-page .blog-content [style]:not( - [data-style="admin"], /* HACK: So CMS admin can override this */ - /* TODO: When using Core-Styles .c-news keep `flickrembed_` only in TACC */ - [id^="flickrembed_"] * /* HACK: So Flickr slideshow works */ + [data-style="admin"], /* HACK: so CMS admin can override this */ + [id^="flickrembed_"] * /* HACK: so Flickr slideshow works */ ) { all: revert !important; /* force undo all inline styles */ } From 605f09abbe0cbbff88eaf7c30c1e13fd504b4cdc Mon Sep 17 00:00:00 2001 From: Wesley B <62723358+wesleyboar@users.noreply.github.com> Date: Tue, 25 Nov 2025 18:34:52 -0600 Subject: [PATCH 12/37] refactor(css): django.cms.blog.app.item use mixins --- .../components/django.cms.blog.app.item.css | 114 ++++++++++++------ 1 file changed, 77 insertions(+), 37 deletions(-) diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.item.css b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.item.css index 86ea7a1c0..bef6a8365 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.item.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.item.css @@ -21,12 +21,18 @@ Styleguide Components.DjangoCMS.Blog.App.Item /* To support rendering list as a grid */ :--article-list--as-grid { + @mixin news-feed--as-grid; +} +@define-mixin news-feed--as-grid { display: grid; grid-template-columns: repeat( auto-fit, minmax(350px, 1fr) ); column-gap: var(--global-space--pattern-pad); } /* So page title spans all columns */ :--article-list--as-grid > header { + @mixin news-feed--as-grid__header; +} +@define-mixin news-feed--as-grid__header { grid-column: 1 / -1; } @@ -40,8 +46,11 @@ Styleguide Components.DjangoCMS.Blog.App.Item /* Item (Structure) */ -/* For basic layout */ +/* For all layouts */ :--article-item { + @mixin news-feed__article; +} +@define-mixin news-feed__article { display: grid; column-gap: 50px; /* for horz. space between image and content */ @@ -50,41 +59,38 @@ Styleguide Components.DjangoCMS.Blog.App.Item margin-bottom: 20px; padding-bottom: 20px; } -:--article-item header { grid-area: head } -:--article-item .blog-visual { grid-area: media } -:--article-item .blog-lead { grid-area: desc } -/* For layout options */ -.x-blog-grid-item { +/* For layout variants */ +@define-mixin news-feed--grid-layout__article { grid-template-areas: 'media' 'head' - 'desc'; + 'lead'; /* To prevent content from overflowing cell */ grid-template-columns: minmax(0, 1fr); /* To prevent vertical stretch of rows */ grid-auto-rows: min-content; } -.x-blog-list-item { +@define-mixin news-feed--list-layout__article { grid-template-areas: 'media head' - 'media desc'; + 'media lead'; /* To shrinkwrap media and flexible text content */ grid-template-columns: minmax(0, max-content) 1fr; - /* To let 'desc' take remaining space (removes gap between head and desc) */ + /* To let 'lead' take remaining space (removes gap between head and desc) */ grid-template-rows: min-content 1fr; } @media (--narrow-and-below) { :--article-item { - @extend .x-blog-grid-item; + @mixin news-feed--list-layout__article; } } @media (--narrow-and-above) { :--article-item--in-list { - @extend .x-blog-list-item; + @mixin news-feed--list-layout__article; } :--article-item--in-grid { - @extend .x-blog-grid-item; + @mixin news-feed--grid-layout__article; } } @@ -100,15 +106,18 @@ Styleguide Components.DjangoCMS.Blog.App.Item /* Header (Structure) */ :--article-item header { + @mixin news-feed-article__header; +} +@define-mixin news-feed-article__header { + grid-area: head; + grid-template-areas: 'cats tags' 'date attr' 'head head' 'subh subh'; justify-content: space-between; -} -:--article-item header { margin-bottom: 5px; } @@ -117,9 +126,15 @@ Styleguide Components.DjangoCMS.Blog.App.Item /* Header - Title */ :--article-item h3 { - margin-bottom: unset; /* overwrite Core-Styles headings--cms.css */ + @mixin news-feed-article__title; +} +@define-mixin news-feed-article__title { + margin-bottom: unset; /* overrides Core-Styles headings--cms.css */ } :--article-item h4 { + @mixin news-feed-article__subtitle; +} +@define-mixin news-feed-article__subtitle { display: none; } @@ -130,14 +145,23 @@ Styleguide Components.DjangoCMS.Blog.App.Item /* Metadata */ :--article-item li { + @mixin news-feed-article__metadata__item; +} +@define-mixin news-feed-article__metadata__item { line-height: unset; /* overwrite html-elements.css */ } :--article-item .attrs { + @mixin news-feed-article__metadata; +} +@define-mixin news-feed-article__metadata { color: var(--global-color-primary--dark); justify-self: end; } :--article-item .attrs a { + @mixin news-feed-article__metadata__link; +} +@define-mixin news-feed-article__metadata__link { color: inherit; } @@ -147,30 +171,36 @@ Styleguide Components.DjangoCMS.Blog.App.Item /* Visual */ -:--article-item .blog-visual:empty { - display: none; +:--article-item .blog-visual { + @mixin news-feed-article__media; + + &:empty { + display: none; + } +} +@define-mixin news-feed-article__media { + grid-area: media; } -/* To support vertical article layouts */ -/* FAQ: In simple layouts, the media element is the grid cell */ -/* FAQ: In complex layouts, the media element is within the grid cell */ -.x-blog-grid-item-media-cell { +/* To adjust layout of media when it is above the text */ +@define-mixin news-feed-article__media--above-text { margin-bottom: 15px; /* to add space between image and content */ -} -.x-blog-grid-item-media-element-in-cell { - max-width: 100%; /* to prevent overflow if column is narrower than image */ - height: auto; /* to preserve ratio if width is reduced (by max-width: 100%) */ + + & img { + /* to prevent overflow if column is narrower than image */ + max-width: 100%; + /* to preserve ratio if width is reduced (by max-width: 100%) */ + height: auto; + } } @media (--narrow-and-below) { :--article-item .blog-visual { - @extend .x-blog-grid-item-media-cell; - & img { @extend .x-blog-grid-item-media-element-in-cell; } + @mixin news-feed-article__media--above-text; } } @media (--narrow-and-above) { :--article-item--in-grid .blog-visual { - @extend .x-blog-grid-item-media-cell; - & img { @extend .x-blog-grid-item-media-element-in-cell; } + @mixin news-feed-article__media--above-text; } } @@ -178,22 +208,31 @@ Styleguide Components.DjangoCMS.Blog.App.Item -/* Content */ +/* Lead */ + :--article-item .blog-lead { + @mixin news-feed-article__lead; +} +@define-mixin news-feed-article__lead { + grid-area: lead; + @extend %x-truncate--many-lines; --lines: 4; line-height: 1.5; color: var(--global-color-primary--dark); -} -:--article-item .blog-lead p:last-child { - margin-bottom: 0 /* overwrite core-styles.cms */ + + & p:last-child { + margin-bottom: unset; /* overrides core-styles.cms */ + } } /* To undo inline content styles */ /* FAQ: In case author pasted such markup from another source */ -:--article-item .blog-lead [style] { +:--article-item .blog-lead [style]:not( + [data-style="admin"] /* HACK: so CMS admin can override this */ +) { all: revert !important; /* force undo all inline styles */ } @@ -204,9 +243,10 @@ Styleguide Components.DjangoCMS.Blog.App.Item /* Footer */ /* To make image clickable via "read more" link */ -/* FAQ: This is not available via c-news, because c-news assumes - if image should be clickable, client would wrap it in a link */ .read-more { + @mixin news-feed-article__link-overlay; +} +@define-mixin news-feed-article__link-overlay { /* To cover the image exactly */ display: grid; grid-row-start: 1; From 17ee11eed6399f6732367eb4abb5afe8dc6b23dc Mon Sep 17 00:00:00 2001 From: Wesley B <62723358+wesleyboar@users.noreply.github.com> Date: Tue, 25 Nov 2025 18:55:44 -0600 Subject: [PATCH 13/37] =?UTF-8?q?refactor(css):=20blog,=20metadata=20?= =?UTF-8?q?=E2=86=92=20details?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/django.cms.blog.app.item.css | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.item.css b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.item.css index bef6a8365..0cc1578ad 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.item.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.item.css @@ -142,26 +142,26 @@ Styleguide Components.DjangoCMS.Blog.App.Item -/* Metadata */ +/* Details */ :--article-item li { - @mixin news-feed-article__metadata__item; + @mixin news-feed-article__details__item; } -@define-mixin news-feed-article__metadata__item { +@define-mixin news-feed-article__details__item { line-height: unset; /* overwrite html-elements.css */ } :--article-item .attrs { - @mixin news-feed-article__metadata; + @mixin news-feed-article__details--attributes; } -@define-mixin news-feed-article__metadata { +@define-mixin news-feed-article__details--attributes { color: var(--global-color-primary--dark); justify-self: end; } :--article-item .attrs a { - @mixin news-feed-article__metadata__link; + @mixin news-feed-article__details--attributes__link; } -@define-mixin news-feed-article__metadata__link { +@define-mixin news-feed-article__details--attributes__link { color: inherit; } From 54a69c8b9ddd6901c126f2418543b554fae5d775 Mon Sep 17 00:00:00 2001 From: Wesley B <62723358+wesleyboar@users.noreply.github.com> Date: Wed, 26 Nov 2025 15:21:16 -0600 Subject: [PATCH 14/37] refactor(css): django.cms.blog.app use mixins --- .../components/django.cms.blog.app.css | 68 +++++++++++++++---- 1 file changed, 53 insertions(+), 15 deletions(-) diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.css b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.css index 03d708b63..d24cdc21e 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.css @@ -21,6 +21,9 @@ Styleguide Components.DjangoCMS.Blog.App /* Generic */ .app-blog { + @mixin news; +} +@define-mixin news { /* To control absolute position of descendants e.g. `.blog-visual` */ position: relative; } @@ -30,6 +33,9 @@ Styleguide Components.DjangoCMS.Blog.App /* Header */ .app-blog header { + @mixin news-article__header; +} +@define-mixin news-article__header { display: grid; column-gap: 1em; } @@ -45,15 +51,24 @@ Styleguide Components.DjangoCMS.Blog.App /* To format titles */ :--article-list h1 > strong::after { + @mixin news-title__name; +} +@define-mixin news-title__name { content: "—"; margin-left: 0.25em; display: inline-block; font-weight: var(--medium); } :--article-list h1 > span { + @mixin news-title__type-key; +} +@define-mixin news-title__type-key { display: none; } :--article-list h1 > em { + @mixin news-title__type-value; +} +@define-mixin news-title__type-value { font-style: normal; text-transform: none; font-family: inherit; @@ -61,6 +76,9 @@ Styleguide Components.DjangoCMS.Blog.App } .app-blog ul.post-detail { + @mixin news-details; +} +@define-mixin news-details { list-style: none; padding-left: 0; /* overwrite html-elements.css */ @@ -72,16 +90,25 @@ Styleguide Components.DjangoCMS.Blog.App /* Metadata */ -/* To layout data */ .app-blog .tags, .app-blog .categories { + @mixin news-metadata; +} +@define-mixin news-metadata { display: flex; flex-direction: row; gap: 1em; + + &:empty { + display: none; + } } -/* To always hide byline prefix */ .app-blog .byline > span { + @mixin news-byline__prefix; +} +/* To always hide byline prefix */ +@define-mixin news-byline__prefix { display: none; } @@ -91,14 +118,11 @@ Styleguide Components.DjangoCMS.Blog.App display: none; } -/* To hide empty tags & categories */ -:--article .tags:empty, -:--article .categories:empty { - display: none; +.app-blog .categories { + @mixin news-metadata; + a { @mixin news-category; } } - -/* To style categories as "tags" (the UI pattern) */ -.app-blog .categories a { +@define-mixin news-category { @extend :--c-tag; display: inline-block; @@ -109,16 +133,18 @@ Styleguide Components.DjangoCMS.Blog.App font-size: var(--global-font-size--small); } -/* To style tags as "pills" (the UI pattern) */ -.app-blog .tags a { - /* TODO: When available in Core-Styles, uncomment this */ - /* @extend :--c-pill; */ - +.app-blog .tags { + @mixin news-metadata; + a { @mixin news-tag; } +} +@define-mixin news-tag { background-color: var(--global-color-primary--light); } -/* To style dates */ .app-blog time { + @mixin news-date; +} +@define-mixin news-date { color: var(--global-color-accent--secondary); font-weight: var(--medium); text-transform: uppercase; @@ -131,6 +157,9 @@ Styleguide Components.DjangoCMS.Blog.App /* TACC: Logos */ .app-blog .logos--social { + @mixin news-socials; +} +@define-mixin news-socials { display: flex; flex-wrap: wrap; justify-self: end; @@ -144,10 +173,16 @@ Styleguide Components.DjangoCMS.Blog.App } .app-blog .logos__text-before { + @mixin news-socials__prefix; +} +@define-mixin news-socials__prefix { white-space: nowrap; } .app-blog .logos--social svg { + @mixin news-socials__icon; +} +@define-mixin news-socials__icon { @media (pointer: coarse) { height: var(--global-font-size--xx-large); width: var(--global-font-size--xx-large); @@ -163,5 +198,8 @@ Styleguide Components.DjangoCMS.Blog.App /* Pagination */ .pagination { + @mixin news-pagination; +} +@define-mixin news-pagination { margin-block: 40px; } From b739df490ccaa09bb4375b32445cbc449d65270c Mon Sep 17 00:00:00 2001 From: Wesley B <62723358+wesleyboar@users.noreply.github.com> Date: Wed, 26 Nov 2025 17:43:53 -0600 Subject: [PATCH 15/37] feat: core-styles mixins, pill and tag --- package-lock.json | 10 ++++------ package.json | 2 +- 2 files changed, 5 insertions(+), 7 deletions(-) diff --git a/package-lock.json b/package-lock.json index 00b7e61e1..7fd1c2650 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,7 @@ "minimist": "^1.2.6" }, "devDependencies": { - "@tacc/core-styles": "^2.50.2" + "@tacc/core-styles": "github:TACC/Core-Styles#42cb137" }, "engines": { "node": ">=16", @@ -1133,8 +1133,7 @@ }, "node_modules/@tacc/core-styles": { "version": "2.50.2", - "resolved": "https://registry.npmjs.org/@tacc/core-styles/-/core-styles-2.50.2.tgz", - "integrity": "sha512-H0UylyJ5BsEa3dyvrV+rGH1ZQJoHJq3W5M904d/d+rWbc7kXiOtsCZsp535o8etRiTC4JmyS2k40MVVv9OKpKw==", + "resolved": "git+ssh://git@github.com/TACC/Core-Styles.git#42cb137efe30652bac90686d47c4418a41f8d97e", "dev": true, "license": "MIT", "bin": { @@ -4733,10 +4732,9 @@ } }, "@tacc/core-styles": { - "version": "2.50.2", - "resolved": "https://registry.npmjs.org/@tacc/core-styles/-/core-styles-2.50.2.tgz", - "integrity": "sha512-H0UylyJ5BsEa3dyvrV+rGH1ZQJoHJq3W5M904d/d+rWbc7kXiOtsCZsp535o8etRiTC4JmyS2k40MVVv9OKpKw==", + "version": "git+ssh://git@github.com/TACC/Core-Styles.git#42cb137efe30652bac90686d47c4418a41f8d97e", "dev": true, + "from": "@tacc/core-styles@github:TACC/Core-Styles#42cb137", "requires": {} }, "@trysound/sax": { diff --git a/package.json b/package.json index 13f1f5149..af0a7c7ed 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,7 @@ }, "homepage": "https://github.com/TACC/Core-CMS", "devDependencies": { - "@tacc/core-styles": "^2.50.2" + "@tacc/core-styles": "github:TACC/Core-Styles#42cb137" }, "// devDependencies": { "@tacc/core-styles": "after v2.50.0, use NPM (because NPM and GitHub v2.50.0 differ)" From d76c710be504bfa2c948c25e7fbc8f3ca385b195 Mon Sep 17 00:00:00 2001 From: Wesley B <62723358+wesleyboar@users.noreply.github.com> Date: Wed, 26 Nov 2025 17:45:18 -0600 Subject: [PATCH 16/37] refactor: move news mixins to tools/x-news --- .../components/django.cms.blog.app.css | 114 +------ .../components/django.cms.blog.app.item.css | 112 +------ .../components/django.cms.blog.app.page.css | 53 +-- .../css/src/_imports/tools/x-news.css | 307 ++++++++++++++++++ 4 files changed, 325 insertions(+), 261 deletions(-) create mode 100644 taccsite_cms/static/site_cms/css/src/_imports/tools/x-news.css diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.css b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.css index d24cdc21e..f73e5ab23 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.css @@ -12,33 +12,24 @@ Styleguide Components.DjangoCMS.Blog.App @import url("@tacc/core-styles/dist/djangocms-blog/cms-pagination.css"); @import url("@tacc/core-styles/src/lib/_imports/components/c-tag.css"); +@import url("../tools/x-news.css"); + @import url("./django.cms.blog.app.page.css"); @import url("./django.cms.blog.app.item.css"); @import url("./django.cms.blog.selectors.css"); -/* Generic */ - +/* Root */ .app-blog { @mixin news; } -@define-mixin news { - /* To control absolute position of descendants e.g. `.blog-visual` */ - position: relative; -} - /* Header */ - .app-blog header { @mixin news-article__header; } -@define-mixin news-article__header { - display: grid; - column-gap: 1em; -} :--article-page h1, :--article-item h3 { grid-area: head } :--article-page h2, @@ -49,66 +40,33 @@ Styleguide Components.DjangoCMS.Blog.App .app-blog .tags { grid-area: tags } .app-blog .links { grid-area: link } -/* To format titles */ + +/* Titles */ :--article-list h1 > strong::after { @mixin news-title__name; } -@define-mixin news-title__name { - content: "—"; - margin-left: 0.25em; - display: inline-block; - font-weight: var(--medium); -} :--article-list h1 > span { @mixin news-title__type-key; } -@define-mixin news-title__type-key { - display: none; -} :--article-list h1 > em { @mixin news-title__type-value; } -@define-mixin news-title__type-value { - font-style: normal; - text-transform: none; - font-family: inherit; - font-weight: var(--medium); -} - -.app-blog ul.post-detail { - @mixin news-details; -} -@define-mixin news-details { - list-style: none; - padding-left: 0; /* overwrite html-elements.css */ - font-size: var(--global-font-size--medium); +/* Details */ +.app-blog .post-detail { + @mixin news-details; } - - -/* Metadata */ +/* Details - Metadata */ .app-blog .tags, .app-blog .categories { @mixin news-metadata; } -@define-mixin news-metadata { - display: flex; - flex-direction: row; - gap: 1em; - - &:empty { - display: none; - } -} +/* To always hide "by" */ .app-blog .byline > span { - @mixin news-byline__prefix; -} -/* To always hide byline prefix */ -@define-mixin news-byline__prefix { display: none; } @@ -117,81 +75,32 @@ Styleguide Components.DjangoCMS.Blog.App .app-blog.no-categories :--article .categories { display: none; } - .app-blog .categories { @mixin news-metadata; a { @mixin news-category; } } -@define-mixin news-category { - @extend :--c-tag; - - display: inline-block; - - color: var(--global-color-primary--xx-light); - background-color: var(--global-color-primary--xx-dark); - - font-size: var(--global-font-size--small); -} - .app-blog .tags { @mixin news-metadata; a { @mixin news-tag; } } -@define-mixin news-tag { - background-color: var(--global-color-primary--light); -} .app-blog time { @mixin news-date; } -@define-mixin news-date { - color: var(--global-color-accent--secondary); - font-weight: var(--medium); - text-transform: uppercase; -} /* Social Media */ -/* TACC: Logos */ - .app-blog .logos--social { @mixin news-socials; } -@define-mixin news-socials { - display: flex; - flex-wrap: wrap; - justify-self: end; - - @media (pointer: coarse) { - gap: 1.0em; - } - @media not (pointer: coarse) { - gap: 0.5em; - } -} - .app-blog .logos__text-before { @mixin news-socials__prefix; } -@define-mixin news-socials__prefix { - white-space: nowrap; -} - .app-blog .logos--social svg { @mixin news-socials__icon; } -@define-mixin news-socials__icon { - @media (pointer: coarse) { - height: var(--global-font-size--xx-large); - width: var(--global-font-size--xx-large); - } - @media (pointer: fine), (pointer: none) { - height: var(--global-font-size--large); - width: var(--global-font-size--large); - } -} @@ -200,6 +109,3 @@ Styleguide Components.DjangoCMS.Blog.App .pagination { @mixin news-pagination; } -@define-mixin news-pagination { - margin-block: 40px; -} diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.item.css b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.item.css index 0cc1578ad..d13cb1664 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.item.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.item.css @@ -11,6 +11,8 @@ Styleguide Components.DjangoCMS.Blog.App.Item @import url("@tacc/core-styles/src/lib/_imports/tools/x-truncate.css"); @import url("@tacc/core-styles/src/lib/_imports/tools/media-queries.css"); +@import url("../tools/x-news.css"); + @import url("./django.cms.blog.selectors.css"); @@ -23,18 +25,9 @@ Styleguide Components.DjangoCMS.Blog.App.Item :--article-list--as-grid { @mixin news-feed--as-grid; } -@define-mixin news-feed--as-grid { - display: grid; - grid-template-columns: repeat( auto-fit, minmax(350px, 1fr) ); - column-gap: var(--global-space--pattern-pad); -} -/* So page title spans all columns */ :--article-list--as-grid > header { @mixin news-feed--as-grid__header; } -@define-mixin news-feed--as-grid__header { - grid-column: 1 / -1; -} @@ -50,36 +43,8 @@ Styleguide Components.DjangoCMS.Blog.App.Item :--article-item { @mixin news-feed__article; } -@define-mixin news-feed__article { - display: grid; - - column-gap: 50px; /* for horz. space between image and content */ - - border-bottom: var(--global-border-width--normal) solid var(--global-color-primary--dark); - margin-bottom: 20px; - padding-bottom: 20px; -} /* For layout variants */ -@define-mixin news-feed--grid-layout__article { - grid-template-areas: - 'media' - 'head' - 'lead'; - /* To prevent content from overflowing cell */ - grid-template-columns: minmax(0, 1fr); - /* To prevent vertical stretch of rows */ - grid-auto-rows: min-content; -} -@define-mixin news-feed--list-layout__article { - grid-template-areas: - 'media head' - 'media lead'; - /* To shrinkwrap media and flexible text content */ - grid-template-columns: minmax(0, max-content) 1fr; - /* To let 'lead' take remaining space (removes gap between head and desc) */ - grid-template-rows: min-content 1fr; -} @media (--narrow-and-below) { :--article-item { @mixin news-feed--list-layout__article; @@ -107,34 +72,18 @@ Styleguide Components.DjangoCMS.Blog.App.Item :--article-item header { @mixin news-feed-article__header; -} -@define-mixin news-feed-article__header { - grid-area: head; - grid-template-areas: - 'cats tags' - 'date attr' - 'head head' - 'subh subh'; - justify-content: space-between; - - margin-bottom: 5px; + grid-area: head; } -/* Header - Title */ +/* Header - Titles */ :--article-item h3 { - @mixin news-feed-article__title; -} -@define-mixin news-feed-article__title { margin-bottom: unset; /* overrides Core-Styles headings--cms.css */ } :--article-item h4 { - @mixin news-feed-article__subtitle; -} -@define-mixin news-feed-article__subtitle { display: none; } @@ -147,23 +96,13 @@ Styleguide Components.DjangoCMS.Blog.App.Item :--article-item li { @mixin news-feed-article__details__item; } -@define-mixin news-feed-article__details__item { - line-height: unset; /* overwrite html-elements.css */ -} :--article-item .attrs { @mixin news-feed-article__details--attributes; } -@define-mixin news-feed-article__details--attributes { - color: var(--global-color-primary--dark); - justify-self: end; -} :--article-item .attrs a { @mixin news-feed-article__details--attributes__link; } -@define-mixin news-feed-article__details--attributes__link { - color: inherit; -} @@ -172,26 +111,9 @@ Styleguide Components.DjangoCMS.Blog.App.Item /* Visual */ :--article-item .blog-visual { - @mixin news-feed-article__media; - - &:empty { - display: none; - } -} -@define-mixin news-feed-article__media { grid-area: media; -} -/* To adjust layout of media when it is above the text */ -@define-mixin news-feed-article__media--above-text { - margin-bottom: 15px; /* to add space between image and content */ - - & img { - /* to prevent overflow if column is narrower than image */ - max-width: 100%; - /* to preserve ratio if width is reduced (by max-width: 100%) */ - height: auto; - } + @mixin news-feed-article__media; } @media (--narrow-and-below) { :--article-item .blog-visual { @@ -213,19 +135,8 @@ Styleguide Components.DjangoCMS.Blog.App.Item :--article-item .blog-lead { @mixin news-feed-article__lead; -} -@define-mixin news-feed-article__lead { - grid-area: lead; - - @extend %x-truncate--many-lines; - --lines: 4; - line-height: 1.5; - color: var(--global-color-primary--dark); - - & p:last-child { - margin-bottom: unset; /* overrides core-styles.cms */ - } + grid-area: lead; } /* To undo inline content styles */ @@ -242,17 +153,6 @@ Styleguide Components.DjangoCMS.Blog.App.Item /* Footer */ -/* To make image clickable via "read more" link */ .read-more { @mixin news-feed-article__link-overlay; } -@define-mixin news-feed-article__link-overlay { - /* To cover the image exactly */ - display: grid; - grid-row-start: 1; - grid-column-start: 1; - grid-row-end: span 2; - - /* To hide link text */ - font-size: 0; -} diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.page.css b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.page.css index a0c40d6ea..39e1caa2a 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.page.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.page.css @@ -10,6 +10,8 @@ Styleguide Components.DjangoCMS.Blog.App.Page @import url("@tacc/core-styles/src/lib/_imports/objects/o-offset-content.css"); @import url("@tacc/core-styles/src/lib/_imports/tools/x-drop-cap.css"); +@import url("../tools/x-news.css"); + @import url("./django.cms.blog.selectors.css"); @@ -21,10 +23,6 @@ Styleguide Components.DjangoCMS.Blog.App.Page :--article-page { @mixin news-article-page; } -@define-mixin news-article-page { - max-width: 775px; - margin-inline: auto; -} @@ -35,36 +33,12 @@ Styleguide Components.DjangoCMS.Blog.App.Page :--article-page header { @mixin news-article-page__header; } -@define-mixin news-article-page__header { - grid-template-areas: - 'cats date' - 'head head' - 'subh subh' - 'attr link' - 'tags tags'; - grid-template-columns: minmax(0, max-content) 1fr; -} - :--article-page header h1 { @mixin news-article-page__title; } -@define-mixin news-article-page__title { - font-size: var(--global-font-size--xxx-large); - - border-bottom: var(--global-border-width--normal) solid var(--global-color-primary--dark); - - margin-bottom: 15px; -} - :--article-page header h2 { @mixin news-article-page__subtitle; } -@define-mixin news-article-page__subtitle { - font-weight: normal; - font-size: var(--global-font-size--large); - - margin-bottom: 15px; -} @@ -77,12 +51,6 @@ Styleguide Components.DjangoCMS.Blog.App.Page :--article-page .blog-content { @mixin news-article-page__body; } -@define-mixin news-article-page__body { - font-size: var(--global-font-size--medium); - line-height: 2; - - margin-block: 45px; -} /* To undo inline content styles */ /* FAQ: In case author pasted such markup from another source */ @@ -107,23 +75,6 @@ Styleguide Components.DjangoCMS.Blog.App.Page :--article-page .blog-visual { @mixin news-article-page__media; } -@define-mixin news-article-page__media { - @media (--narrow-and-below) { - @mixin news-article-page__media--slim-context; - } - @media (--narrow-and-above) { - @mixin news-article-page__media--wide-context; - } -} -@define-mixin news-article-page__media--slim-context { - margin-inline: auto; - width: fit-content; -} -@define-mixin news-article-page__media--wide-context { - float: right; - max-width: 50%; - margin-left: var(--blog-item-media-buffer); -} /* To prevent missing media from disrupting page layout */ :--article-page .blog-visual:where(:not(:has(*))) { diff --git a/taccsite_cms/static/site_cms/css/src/_imports/tools/x-news.css b/taccsite_cms/static/site_cms/css/src/_imports/tools/x-news.css new file mode 100644 index 000000000..8f314a4cb --- /dev/null +++ b/taccsite_cms/static/site_cms/css/src/_imports/tools/x-news.css @@ -0,0 +1,307 @@ +@import url("@tacc/core-styles/src/lib/_imports/tools/x-pill.css"); +@import url("@tacc/core-styles/src/lib/_imports/tools/x-tag.css"); +@import url("@tacc/core-styles/src/lib/_imports/tools/x-truncate.css"); + +/* GENERIC */ + +@define-mixin news { + /* … */ +} + +@define-mixin news-article__header { + display: grid; + column-gap: 1em; +} + +@define-mixin news-title__name { + content: "—"; + margin-left: 0.25em; + display: inline-block; + font-weight: var(--medium); +} +@define-mixin news-title__type-key { + display: none; +} +@define-mixin news-title__type-value { + font-style: normal; + text-transform: none; + font-family: inherit; + font-weight: var(--medium); +} + +@define-mixin news-details { + margin-bottom: 1rem; /* to not rely on
        + core-styles.base.css for this */ + + &:is(ul) { + list-style: none; + + padding-left: 0; /* overwrite html-elements.css */ + + font-size: var(--global-font-size--medium); + } +} + +@define-mixin news-metadata { + display: flex; + flex-direction: row; + gap: 1em; + + &:empty { + display: none; + } +} + +@define-mixin news-category { + @mixin tag; + + display: inline-block; + + color: var(--global-color-primary--xx-light); + background-color: var(--global-color-primary--xx-dark); + + font-size: var(--global-font-size--small); +} + +@define-mixin news-tag { + @mixin pill; + + background-color: var(--global-color-primary--light); +} + +@define-mixin news-date { + color: var(--global-color-accent--secondary); + font-weight: var(--medium); + text-transform: uppercase; +} + +@define-mixin news-socials { + display: flex; + flex-wrap: wrap; + justify-self: end; + + @media (pointer: coarse) { + gap: 1.0em; + } + @media not (pointer: coarse) { + gap: 0.5em; + } +} +@define-mixin news-socials__prefix { + white-space: nowrap; +} +@define-mixin news-socials__icon { + @media (pointer: coarse) { + height: var(--global-font-size--xx-large); + width: var(--global-font-size--xx-large); + } + @media (pointer: fine), (pointer: none) { + height: var(--global-font-size--large); + width: var(--global-font-size--large); + } +} + +@define-mixin news-pagination { + margin-block: 40px; +} + + + + +/* FEED */ + +/* Root */ + +@define-mixin news-feed--as-grid { + display: grid; + grid-template-columns: repeat( auto-fit, minmax(350px, 1fr) ); + column-gap: var(--global-space--pattern-pad); +} +@define-mixin news-feed--as-grid__header { + grid-column: 1 / -1; /* so page title spans all columns */ +} + + +/* Article */ + +@define-mixin news-feed__article { + display: grid; + + column-gap: 50px; /* for horz. space between image and content */ + + border-bottom: var(--global-border-width--normal) solid var(--global-color-primary--dark); + margin-bottom: 20px; + padding-bottom: 20px; +} + +@define-mixin news-feed--grid-layout__article { + grid-template-areas: + 'media' + 'head' + 'lead'; + /* To prevent content from overflowing cell */ + grid-template-columns: minmax(0, 1fr); + /* To prevent vertical stretch of rows */ + grid-auto-rows: min-content; +} +@define-mixin news-feed--list-layout__article { + grid-template-areas: + 'media head' + 'media lead'; + /* To shrinkwrap media and flexible text content */ + grid-template-columns: minmax(0, max-content) 1fr; + /* To let 'lead' take remaining space (removes gap between head and desc) */ + grid-template-rows: min-content 1fr; +} + + +/* Article: Header */ + +@define-mixin news-feed-article__header { + grid-template-areas: + 'cats tags' + 'date attr' + 'head head' + 'subh subh'; + justify-content: space-between; + + margin-bottom: 5px; +} + + +/* Article: Details */ + +@define-mixin news-feed-article__details--attributes { + color: var(--global-color-primary--dark); + justify-self: end; +} +@define-mixin news-feed-article__details--attributes__link { + color: inherit; +} + +@define-mixin news-feed-article__details__item { + line-height: unset; +} + + +/* Article: Media */ + +@define-mixin news-feed-article__media { + /* To clearly render which thumbnails are made from too small an image */ + overflow: hidden; + + /* To not show empty block (which might have margin) */ + &:empty { + display: none; + } +} + +/* To adjust layout of media when it is above any text */ +@define-mixin news-feed-article__media--above-text { + margin-bottom: 15px; /* to add space between image and content */ + + & img { + /* to prevent overflow if column is narrower than image */ + max-width: 100%; + /* to preserve ratio if width is reduced (by max-width: 100%) */ + height: auto; + } +} + + +/* Article: Text */ + +@define-mixin news-feed-article__lead { + @mixin truncate--many-lines; + --lines: 4; + + line-height: 1.5; + color: var(--global-color-primary--dark); + + & p:last-child { + margin-bottom: unset; /* overrides core-styles.cms */ + } +} + + +/* Article: Utility */ + +/* To make media clickable via a "read more" link */ +@define-mixin news-feed-article__link-overlay { + /* To cover the image exactly */ + display: grid; + grid-row-start: 1; + grid-column-start: 1; + grid-row-end: span 2; + + /* To hide link text */ + font-size: 0; +} + + + + +/* PAGE */ + +/* Root */ + +@define-mixin news-article-page { + max-width: 775px; + margin-inline: auto; +} + +/* Header */ + +@define-mixin news-article-page__header { + grid-template-areas: + 'cats date' + 'head head' + 'subh subh' + 'attr link' + 'tags tags'; + grid-template-columns: minmax(0, max-content) 1fr; +} + +/* Titles */ + +@define-mixin news-article-page__title { + font-size: var(--global-font-size--xxx-large); + + border-bottom: var(--global-border-width--normal) solid var(--global-color-primary--dark); + + margin-bottom: 15px; +} +@define-mixin news-article-page__subtitle { + font-weight: normal; + font-size: var(--global-font-size--large); + + margin-bottom: 15px; +} + +/* Body */ + +@define-mixin news-article-page__body { + font-size: var(--global-font-size--medium); + line-height: 2; + + margin-block: 45px; +} + +/* Media */ + +@define-mixin news-article-page__media { + @media (--narrow-and-below) { + @mixin news-article-page__media--slim-context; + } + @media (--narrow-and-above) { + @mixin news-article-page__media--wide-context; + } +} +@define-mixin news-article-page__media--slim-context { + margin-inline: auto; + width: fit-content; +} +@define-mixin news-article-page__media--wide-context { + float: right; + max-width: 50%; + margin-left: var(--blog-item-media-buffer); +} From 1cc9281deb5b156179a8992c5a314cdb0cfdf912 Mon Sep 17 00:00:00 2001 From: Wesley B <62723358+wesleyboar@users.noreply.github.com> Date: Wed, 26 Nov 2025 18:15:23 -0600 Subject: [PATCH 17/37] refactor(css): blog headers & titles --- .../components/django.cms.blog.app.css | 31 ++--------------- .../components/django.cms.blog.app.item.css | 19 +++++++++++ .../components/django.cms.blog.app.page.css | 10 +++++- .../css/src/_imports/tools/x-news.css | 33 +++++++++---------- .../templates/djangocms_blog/post_detail.html | 2 +- 5 files changed, 48 insertions(+), 47 deletions(-) diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.css b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.css index f73e5ab23..b69d9635a 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.css @@ -21,39 +21,14 @@ Styleguide Components.DjangoCMS.Blog.App /* Root */ + .app-blog { @mixin news; } -/* Header */ -.app-blog header { - @mixin news-article__header; -} -:--article-page h1, -:--article-item h3 { grid-area: head } -:--article-page h2, -:--article-item h4 { grid-area: subh } -.app-blog .attrs { grid-area: attr } -.app-blog .dates { grid-area: date } -.app-blog .categories { grid-area: cats } -.app-blog .tags { grid-area: tags } -.app-blog .links { grid-area: link } - - -/* Titles */ -:--article-list h1 > strong::after { - @mixin news-title__name; -} -:--article-list h1 > span { - @mixin news-title__type-key; -} -:--article-list h1 > em { - @mixin news-title__type-value; -} - - /* Details */ + .app-blog .post-detail { @mixin news-details; } @@ -92,7 +67,7 @@ Styleguide Components.DjangoCMS.Blog.App /* Social Media */ -.app-blog .logos--social { +.app-blog .logos--social /* a.k.a. blog .socials */ { @mixin news-socials; } .app-blog .logos__text-before { diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.item.css b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.item.css index d13cb1664..f33992d3a 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.item.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.item.css @@ -30,6 +30,19 @@ Styleguide Components.DjangoCMS.Blog.App.Item } +/* List - Title */ + +:--article-list h1 > strong::after { + @mixin news-feed-title__separator; +} +:--article-list h1 > span { + @mixin news-feed-title__type-key; +} +:--article-list h1 > em { + @mixin news-feed-title__type-value; +} + + @@ -75,6 +88,12 @@ Styleguide Components.DjangoCMS.Blog.App.Item grid-area: head; } +:--article-item header h3 { grid-area: title } +:--article-item header h4 { grid-area: subtitle } +:--article-item .attrs { grid-area: attrs } +:--article-item .dates { grid-area: dates } +:--article-item .categories { grid-area: cats } +:--article-item .tags { grid-area: tags } diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.page.css b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.page.css index 39e1caa2a..0a23e3b20 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.page.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.page.css @@ -35,11 +35,19 @@ Styleguide Components.DjangoCMS.Blog.App.Page } :--article-page header h1 { @mixin news-article-page__title; + + grid-area: title; } :--article-page header h2 { @mixin news-article-page__subtitle; -} + grid-area: subtitle; +} +:--article-page .attrs { grid-area: attrs } +:--article-page .dates { grid-area: dates } +:--article-page .categories { grid-area: cats } +:--article-page .tags { grid-area: tags } +:--article-page .socials { grid-area: socials } diff --git a/taccsite_cms/static/site_cms/css/src/_imports/tools/x-news.css b/taccsite_cms/static/site_cms/css/src/_imports/tools/x-news.css index 8f314a4cb..8d8c81ccf 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/tools/x-news.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/tools/x-news.css @@ -8,21 +8,16 @@ /* … */ } -@define-mixin news-article__header { - display: grid; - column-gap: 1em; -} - -@define-mixin news-title__name { +@define-mixin news-feed-title__separator { content: "—"; margin-left: 0.25em; display: inline-block; font-weight: var(--medium); } -@define-mixin news-title__type-key { +@define-mixin news-feed-title__type-key { display: none; } -@define-mixin news-title__type-value { +@define-mixin news-feed-title__type-value { font-style: normal; text-transform: none; font-family: inherit; @@ -157,11 +152,13 @@ /* Article: Header */ @define-mixin news-feed-article__header { + display: grid; + column-gap: 1em; grid-template-areas: - 'cats tags' - 'date attr' - 'head head' - 'subh subh'; + 'cats tags ' + 'dates attrs ' + 'title title ' + 'subtitle subtitle'; justify-content: space-between; margin-bottom: 5px; @@ -252,12 +249,14 @@ /* Header */ @define-mixin news-article-page__header { + display: grid; + column-gap: 1em; grid-template-areas: - 'cats date' - 'head head' - 'subh subh' - 'attr link' - 'tags tags'; + 'cats dates ' + 'title title ' + 'subtitle subtitle' + 'attrs socials ' + 'tags tags '; grid-template-columns: minmax(0, max-content) 1fr; } diff --git a/taccsite_cms/templates/djangocms_blog/post_detail.html b/taccsite_cms/templates/djangocms_blog/post_detail.html index 3fd69089b..329caa524 100644 --- a/taccsite_cms/templates/djangocms_blog/post_detail.html +++ b/taccsite_cms/templates/djangocms_blog/post_detail.html @@ -38,7 +38,7 @@

        {% render_model post "subtitle" %}

        {% endblock %} {# TACC (add social media sharing links): #} {% block blog_share %} - {% include "share_on_social.html" with className="links" %} + {% include "share_on_social.html" with className="socials" %} {% endblock %} {# /TACC #}
    From e258c45bdb67fc235104f37bcf0d2ae43650619a Mon Sep 17 00:00:00 2001 From: Wesley B <62723358+wesleyboar@users.noreply.github.com> Date: Wed, 26 Nov 2025 18:20:41 -0600 Subject: [PATCH 18/37] refactor(css): move code --- .../components/django.cms.blog.app.item.css | 4 +-- .../css/src/_imports/tools/x-news.css | 35 ++++++++++--------- 2 files changed, 21 insertions(+), 18 deletions(-) diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.item.css b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.item.css index f33992d3a..dfd1a6d40 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.item.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.item.css @@ -25,13 +25,13 @@ Styleguide Components.DjangoCMS.Blog.App.Item :--article-list--as-grid { @mixin news-feed--as-grid; } + +/* List - Header */ :--article-list--as-grid > header { @mixin news-feed--as-grid__header; } - /* List - Title */ - :--article-list h1 > strong::after { @mixin news-feed-title__separator; } diff --git a/taccsite_cms/static/site_cms/css/src/_imports/tools/x-news.css b/taccsite_cms/static/site_cms/css/src/_imports/tools/x-news.css index 8d8c81ccf..02a29cef3 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/tools/x-news.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/tools/x-news.css @@ -8,22 +8,6 @@ /* … */ } -@define-mixin news-feed-title__separator { - content: "—"; - margin-left: 0.25em; - display: inline-block; - font-weight: var(--medium); -} -@define-mixin news-feed-title__type-key { - display: none; -} -@define-mixin news-feed-title__type-value { - font-style: normal; - text-transform: none; - font-family: inherit; - font-weight: var(--medium); -} - @define-mixin news-details { margin-bottom: 1rem; /* to not rely on
      + core-styles.base.css for this */ @@ -116,6 +100,25 @@ } +/* Title */ + +@define-mixin news-feed-title__separator { + content: "—"; + margin-left: 0.25em; + display: inline-block; + font-weight: var(--medium); +} +@define-mixin news-feed-title__type-key { + display: none; +} +@define-mixin news-feed-title__type-value { + font-style: normal; + text-transform: none; + font-family: inherit; + font-weight: var(--medium); +} + + /* Article */ @define-mixin news-feed__article { From f44d233f56536a0f317e54aa697474478e1748fb Mon Sep 17 00:00:00 2001 From: Wesley B <62723358+wesleyboar@users.noreply.github.com> Date: Wed, 26 Nov 2025 18:25:31 -0600 Subject: [PATCH 19/37] docs(css): clearer organization --- .../css/src/_imports/tools/x-news.css | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/taccsite_cms/static/site_cms/css/src/_imports/tools/x-news.css b/taccsite_cms/static/site_cms/css/src/_imports/tools/x-news.css index 02a29cef3..58652524d 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/tools/x-news.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/tools/x-news.css @@ -2,12 +2,16 @@ @import url("@tacc/core-styles/src/lib/_imports/tools/x-tag.css"); @import url("@tacc/core-styles/src/lib/_imports/tools/x-truncate.css"); -/* GENERIC */ +/* BASE */ + +/* Root */ @define-mixin news { /* … */ } +/* Details */ + @define-mixin news-details { margin-bottom: 1rem; /* to not rely on
        + core-styles.base.css for this */ @@ -79,10 +83,6 @@ } } -@define-mixin news-pagination { - margin-block: 40px; -} - @@ -99,7 +99,6 @@ grid-column: 1 / -1; /* so page title spans all columns */ } - /* Title */ @define-mixin news-feed-title__separator { @@ -118,7 +117,6 @@ font-weight: var(--medium); } - /* Article */ @define-mixin news-feed__article { @@ -151,7 +149,6 @@ grid-template-rows: min-content 1fr; } - /* Article: Header */ @define-mixin news-feed-article__header { @@ -167,7 +164,6 @@ margin-bottom: 5px; } - /* Article: Details */ @define-mixin news-feed-article__details--attributes { @@ -182,7 +178,6 @@ line-height: unset; } - /* Article: Media */ @define-mixin news-feed-article__media { @@ -207,7 +202,6 @@ } } - /* Article: Text */ @define-mixin news-feed-article__lead { @@ -222,7 +216,6 @@ } } - /* Article: Utility */ /* To make media clickable via a "read more" link */ @@ -238,6 +231,13 @@ } +/* Pagination */ + +@define-mixin news-pagination { + margin-block: 40px; +} + + /* PAGE */ From ff55bd3f36474d5e443aa51a34c9420f68317e27 Mon Sep 17 00:00:00 2001 From: Wesley B <62723358+wesleyboar@users.noreply.github.com> Date: Wed, 26 Nov 2025 18:49:55 -0600 Subject: [PATCH 20/37] fix: hiding tags and cats (and delete cruft) --- taccsite_cms/settings_custom.example.py | 4 +- .../components/django.cms.blog.app.css | 5 +-- .../components/django.cms.blog.app.item.css | 12 +++++- .../components/django.cms.blog.app.page.css | 10 +++++ .../css/src/_imports/tools/x-news.css | 42 +++++++++++++++++++ 5 files changed, 66 insertions(+), 7 deletions(-) diff --git a/taccsite_cms/settings_custom.example.py b/taccsite_cms/settings_custom.example.py index 9cc4973ee..fb333fb40 100644 --- a/taccsite_cms/settings_custom.example.py +++ b/taccsite_cms/settings_custom.example.py @@ -112,5 +112,5 @@ # DJANGOCMS_BLOG: TACC ######################## -PORTAL_BLOG_SHOW_CATEGORIES = True -PORTAL_BLOG_SHOW_TAGS = True +PORTAL_BLOG_SHOW_CATEGORIES = False +PORTAL_BLOG_SHOW_TAGS = False diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.css b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.css index b69d9635a..ebfdebf4b 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.css @@ -10,7 +10,6 @@ Reference: Styleguide Components.DjangoCMS.Blog.App */ @import url("@tacc/core-styles/dist/djangocms-blog/cms-pagination.css"); -@import url("@tacc/core-styles/src/lib/_imports/components/c-tag.css"); @import url("../tools/x-news.css"); @@ -46,8 +45,8 @@ Styleguide Components.DjangoCMS.Blog.App } /* To conditionally hide tags & categories */ -.app-blog.no-tags :--article .tags, -.app-blog.no-categories :--article .categories { +.app-blog.no-tags .tags, +.app-blog.no-categories .categories { display: none; } .app-blog .categories { diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.item.css b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.item.css index dfd1a6d40..a7f1ae745 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.item.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.item.css @@ -7,8 +7,6 @@ Reference: Styleguide Components.DjangoCMS.Blog.App.Item */ -@import url("@tacc/core-styles/src/lib/_imports/tools/x-article-link.css"); -@import url("@tacc/core-styles/src/lib/_imports/tools/x-truncate.css"); @import url("@tacc/core-styles/src/lib/_imports/tools/media-queries.css"); @import url("../tools/x-news.css"); @@ -86,6 +84,16 @@ Styleguide Components.DjangoCMS.Blog.App.Item :--article-item header { @mixin news-feed-article__header; + .app-blog.no-categories.no-tags & { + @mixin news-feed-article__header--hide-cats-hide-tags; + } + .app-blog:not(.no-categories).no-tags & { + @mixin news-feed-article__header--show-cats-hide-tags; + } + .app-blog.no-categories:not(.no-tags) & { + @mixin news-feed-article__header--hide-cats-show-tags; + } + grid-area: head; } :--article-item header h3 { grid-area: title } diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.page.css b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.page.css index 0a23e3b20..6d19d1770 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.page.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.page.css @@ -32,6 +32,16 @@ Styleguide Components.DjangoCMS.Blog.App.Page :--article-page header { @mixin news-article-page__header; + + .app-blog.no-categories.no-tags & { + @mixin news-article-page__header--hide-cats-hide-tags; + } + .app-blog:not(.no-categories).no-tags & { + @mixin news-article-page__header--show-cats-hide-tags; + } + .app-blog.no-categories:not(.no-tags) & { + @mixin news-article-page__header--hide-cats-show-tags; + } } :--article-page header h1 { @mixin news-article-page__title; diff --git a/taccsite_cms/static/site_cms/css/src/_imports/tools/x-news.css b/taccsite_cms/static/site_cms/css/src/_imports/tools/x-news.css index 58652524d..b5b0a8e30 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/tools/x-news.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/tools/x-news.css @@ -163,6 +163,26 @@ margin-bottom: 5px; } +@define-mixin news-feed-article__header--show-cats-hide-tags { + grid-template-areas: + 'cats cats ' + 'dates attrs ' + 'title title ' + 'subtitle subtitle'; +} +@define-mixin news-feed-article__header--hide-cats-show-tags { + grid-template-areas: + 'tags tags ' + 'dates attrs ' + 'title title ' + 'subtitle subtitle'; +} +@define-mixin news-feed-article__header--hide-cats-hide-tags { + grid-template-areas: + 'dates attrs ' + 'title title ' + 'subtitle subtitle'; +} /* Article: Details */ @@ -262,6 +282,28 @@ 'tags tags '; grid-template-columns: minmax(0, max-content) 1fr; } +@define-mixin news-article-page__header--show-cats-hide-tags { + grid-template-areas: + 'cats dates ' + 'title title ' + 'subtitle subtitle' + 'attrs socials '; +} +@define-mixin news-article-page__header--hide-cats-show-tags { + grid-template-areas: + 'dates dates ' + 'title title ' + 'subtitle subtitle' + 'attrs socials ' + 'tags tags '; +} +@define-mixin news-article-page__header--hide-cats-hide-tags { + grid-template-areas: + 'dates dates ' + 'title title ' + 'subtitle subtitle' + 'attrs socials '; +} /* Titles */ From 79b2547de2d720abbc4827c55aac43e140d01769 Mon Sep 17 00:00:00 2001 From: Wesley B <62723358+wesleyboar@users.noreply.github.com> Date: Wed, 26 Nov 2025 18:56:20 -0600 Subject: [PATCH 21/37] =?UTF-8?q?refactor:=20attrs=20=E2=86=92=20attr=20(a?= =?UTF-8?q?ttribution)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/django.cms.blog.app.css | 23 +++++++++++-------- .../components/django.cms.blog.app.item.css | 2 +- .../components/django.cms.blog.app.page.css | 2 +- .../css/src/_imports/tools/x-news.css | 16 ++++++------- 4 files changed, 23 insertions(+), 20 deletions(-) diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.css b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.css index ebfdebf4b..cbbaa2438 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.css @@ -32,6 +32,19 @@ Styleguide Components.DjangoCMS.Blog.App @mixin news-details; } +/* Details - Attribution */ + +/* To always hide "by" */ +.app-blog .byline > span { + display: none; +} + +/* Details - Dates */ + +.app-blog time { + @mixin news-date; +} + /* Details - Metadata */ .app-blog .tags, @@ -39,11 +52,6 @@ Styleguide Components.DjangoCMS.Blog.App @mixin news-metadata; } -/* To always hide "by" */ -.app-blog .byline > span { - display: none; -} - /* To conditionally hide tags & categories */ .app-blog.no-tags .tags, .app-blog.no-categories .categories { @@ -58,10 +66,6 @@ Styleguide Components.DjangoCMS.Blog.App a { @mixin news-tag; } } -.app-blog time { - @mixin news-date; -} - /* Social Media */ @@ -77,7 +81,6 @@ Styleguide Components.DjangoCMS.Blog.App } - /* Pagination */ .pagination { diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.item.css b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.item.css index a7f1ae745..d0ea3aeec 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.item.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.item.css @@ -98,7 +98,7 @@ Styleguide Components.DjangoCMS.Blog.App.Item } :--article-item header h3 { grid-area: title } :--article-item header h4 { grid-area: subtitle } -:--article-item .attrs { grid-area: attrs } +:--article-item .attrs { grid-area: attr /* attribution */} :--article-item .dates { grid-area: dates } :--article-item .categories { grid-area: cats } :--article-item .tags { grid-area: tags } diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.page.css b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.page.css index 6d19d1770..fde14f8bf 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.page.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.page.css @@ -53,7 +53,7 @@ Styleguide Components.DjangoCMS.Blog.App.Page grid-area: subtitle; } -:--article-page .attrs { grid-area: attrs } +:--article-page .attrs { grid-area: attr /* attribution */ } :--article-page .dates { grid-area: dates } :--article-page .categories { grid-area: cats } :--article-page .tags { grid-area: tags } diff --git a/taccsite_cms/static/site_cms/css/src/_imports/tools/x-news.css b/taccsite_cms/static/site_cms/css/src/_imports/tools/x-news.css index b5b0a8e30..ed577935f 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/tools/x-news.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/tools/x-news.css @@ -156,7 +156,7 @@ column-gap: 1em; grid-template-areas: 'cats tags ' - 'dates attrs ' + 'dates attr ' 'title title ' 'subtitle subtitle'; justify-content: space-between; @@ -166,20 +166,20 @@ @define-mixin news-feed-article__header--show-cats-hide-tags { grid-template-areas: 'cats cats ' - 'dates attrs ' + 'dates attr ' 'title title ' 'subtitle subtitle'; } @define-mixin news-feed-article__header--hide-cats-show-tags { grid-template-areas: 'tags tags ' - 'dates attrs ' + 'dates attr ' 'title title ' 'subtitle subtitle'; } @define-mixin news-feed-article__header--hide-cats-hide-tags { grid-template-areas: - 'dates attrs ' + 'dates attr ' 'title title ' 'subtitle subtitle'; } @@ -278,7 +278,7 @@ 'cats dates ' 'title title ' 'subtitle subtitle' - 'attrs socials ' + 'attr socials ' 'tags tags '; grid-template-columns: minmax(0, max-content) 1fr; } @@ -287,14 +287,14 @@ 'cats dates ' 'title title ' 'subtitle subtitle' - 'attrs socials '; + 'attr socials '; } @define-mixin news-article-page__header--hide-cats-show-tags { grid-template-areas: 'dates dates ' 'title title ' 'subtitle subtitle' - 'attrs socials ' + 'attr socials ' 'tags tags '; } @define-mixin news-article-page__header--hide-cats-hide-tags { @@ -302,7 +302,7 @@ 'dates dates ' 'title title ' 'subtitle subtitle' - 'attrs socials '; + 'attr socials '; } /* Titles */ From 68df85599cbab13434d1ddb9654986a72b3fbda3 Mon Sep 17 00:00:00 2001 From: Wesley B <62723358+wesleyboar@users.noreply.github.com> Date: Wed, 26 Nov 2025 18:59:38 -0600 Subject: [PATCH 22/37] chore(css): indentation --- .../css/src/_imports/tools/x-news.css | 31 +++++++++---------- 1 file changed, 15 insertions(+), 16 deletions(-) diff --git a/taccsite_cms/static/site_cms/css/src/_imports/tools/x-news.css b/taccsite_cms/static/site_cms/css/src/_imports/tools/x-news.css index ed577935f..8e1a88401 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/tools/x-news.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/tools/x-news.css @@ -128,25 +128,24 @@ margin-bottom: 20px; padding-bottom: 20px; } - @define-mixin news-feed--grid-layout__article { - grid-template-areas: - 'media' - 'head' - 'lead'; - /* To prevent content from overflowing cell */ - grid-template-columns: minmax(0, 1fr); - /* To prevent vertical stretch of rows */ - grid-auto-rows: min-content; + grid-template-areas: + 'media' + 'head' + 'lead'; + /* To prevent content from overflowing cell */ + grid-template-columns: minmax(0, 1fr); + /* To prevent vertical stretch of rows */ + grid-auto-rows: min-content; } @define-mixin news-feed--list-layout__article { - grid-template-areas: - 'media head' - 'media lead'; - /* To shrinkwrap media and flexible text content */ - grid-template-columns: minmax(0, max-content) 1fr; - /* To let 'lead' take remaining space (removes gap between head and desc) */ - grid-template-rows: min-content 1fr; + grid-template-areas: + 'media head' + 'media lead'; + /* To shrinkwrap media and flexible text content */ + grid-template-columns: minmax(0, max-content) 1fr; + /* To let 'lead' take remaining space (removes gap between head and desc) */ + grid-template-rows: min-content 1fr; } /* Article: Header */ From f8c82083a12bc35787932a3e3e6994b5efe33c1b Mon Sep 17 00:00:00 2001 From: Wesley B <62723358+wesleyboar@users.noreply.github.com> Date: Wed, 26 Nov 2025 19:10:39 -0600 Subject: [PATCH 23/37] fix(css): feed article layout when missing media --- .../src/_imports/components/django.cms.blog.app.item.css | 3 +++ .../static/site_cms/css/src/_imports/tools/x-news.css | 7 +++++++ 2 files changed, 10 insertions(+) diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.item.css b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.item.css index d0ea3aeec..e68be5665 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.item.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.item.css @@ -69,6 +69,9 @@ Styleguide Components.DjangoCMS.Blog.App.Item @mixin news-feed--grid-layout__article; } } +:--article-item:not(:has(.blog-visual > *)) { + @mixin news-feed__article--no-media; +} diff --git a/taccsite_cms/static/site_cms/css/src/_imports/tools/x-news.css b/taccsite_cms/static/site_cms/css/src/_imports/tools/x-news.css index 8e1a88401..d924b6be3 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/tools/x-news.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/tools/x-news.css @@ -147,6 +147,13 @@ /* To let 'lead' take remaining space (removes gap between head and desc) */ grid-template-rows: min-content 1fr; } +@define-mixin news-feed__article--no-media { + grid-template-areas: + 'head' + 'lead'; + grid-template-columns: 1fr; + column-gap: unset; +} /* Article: Header */ From 4660623bb7cfafcfbb48f5e9629d08ff04122575 Mon Sep 17 00:00:00 2001 From: Wesley B <62723358+wesleyboar@users.noreply.github.com> Date: Thu, 27 Nov 2025 16:45:23 -0600 Subject: [PATCH 24/37] chore: typos and missing spaces --- .../_imports/components/django.cms.blog.app.item.css | 4 ++-- .../static/site_cms/css/src/_imports/tools/x-news.css | 10 +++++----- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.item.css b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.item.css index e68be5665..3dfd46de8 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.item.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.item.css @@ -128,10 +128,10 @@ Styleguide Components.DjangoCMS.Blog.App.Item } :--article-item .attrs { - @mixin news-feed-article__details--attributes; + @mixin news-feed-article__details--attr; } :--article-item .attrs a { - @mixin news-feed-article__details--attributes__link; + @mixin news-feed-article__details--attr__link; } diff --git a/taccsite_cms/static/site_cms/css/src/_imports/tools/x-news.css b/taccsite_cms/static/site_cms/css/src/_imports/tools/x-news.css index d924b6be3..4264a4f2d 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/tools/x-news.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/tools/x-news.css @@ -172,31 +172,31 @@ @define-mixin news-feed-article__header--show-cats-hide-tags { grid-template-areas: 'cats cats ' - 'dates attr ' + 'dates attr ' 'title title ' 'subtitle subtitle'; } @define-mixin news-feed-article__header--hide-cats-show-tags { grid-template-areas: 'tags tags ' - 'dates attr ' + 'dates attr ' 'title title ' 'subtitle subtitle'; } @define-mixin news-feed-article__header--hide-cats-hide-tags { grid-template-areas: - 'dates attr ' + 'dates attr ' 'title title ' 'subtitle subtitle'; } /* Article: Details */ -@define-mixin news-feed-article__details--attributes { +@define-mixin news-feed-article__details--attr { color: var(--global-color-primary--dark); justify-self: end; } -@define-mixin news-feed-article__details--attributes__link { +@define-mixin news-feed-article__details--attr__link { color: inherit; } From 11e9f91784361951f622920c38b845d8d5e3c6d3 Mon Sep 17 00:00:00 2001 From: Wesley B <62723358+wesleyboar@users.noreply.github.com> Date: Thu, 27 Nov 2025 17:34:17 -0600 Subject: [PATCH 25/37] fix: blog visual can break layout of footer --- .../css/src/_imports/components/django.cms.blog.app.page.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.page.css b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.page.css index fde14f8bf..daddd1fec 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.page.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.page.css @@ -104,7 +104,7 @@ Styleguide Components.DjangoCMS.Blog.App.Page /* To prevent footer on left side of page */ /* FAQ: Because of `:--article-page .blog-visual`'s `float: right` */ -:--article-page .blog-visual + .blog-content::after { +:--article-page .blog-visual ~ .blog-content::after { /* from Bootstrap `clearfix` */ display: block; content: ""; From 9b72ae32fa2834969124beafb3ff9496dcce364f Mon Sep 17 00:00:00 2001 From: Wesley B <62723358+wesleyboar@users.noreply.github.com> Date: Thu, 27 Nov 2025 18:38:23 -0600 Subject: [PATCH 26/37] feat: blog plugin styles e.g. Latest Blog Articles --- .../components/django.cms.blog.app.css | 2 +- .../components/django.cms.blog.plugins.css | 78 ++++++++++++++++++- .../css/src/_imports/tools/x-news.css | 9 ++- .../static/site_cms/css/src/app.blog.css | 1 - .../site_cms/css/src/app.blog.plugins.css | 4 + taccsite_cms/templates/assets_core_cms.html | 7 +- taccsite_cms/templatetags/blog_tags.py | 5 ++ 7 files changed, 97 insertions(+), 9 deletions(-) create mode 100644 taccsite_cms/static/site_cms/css/src/app.blog.plugins.css diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.css b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.css index cbbaa2438..a13af62d1 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.css @@ -1,7 +1,7 @@ /* Django CMS Blog App Components -These styles are only for the blog app pages (list pages, article pages). +Shared among blog pages and plugins. Reference: diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.plugins.css b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.plugins.css index 27d7d9114..b61225400 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.plugins.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.plugins.css @@ -10,6 +10,78 @@ Reference: Styleguide Components.DjangoCMS.Blog.Plugins */ -/* No styles yet. Not loaded yet. */ -/* HELP: How to load for entire site, but only if blog is installed? */ -/* IDEA: Use Python setting conditional in assets_site.html to load CSS file */ +/* LATEST BLOG ARTICLES */ + +/* settings from core-cms */ +/* https://github.com/TACC/Core-CMS/blob/v4.29.0/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.css#L23-L27 */ +.blog-latest-entries { + --article-buffer: 20px; +} + +/* to enable container queries */ +.blog-latest-entries { + container-type: inline-size; +} + +/* to style h3 like an h4 */ +.blog-latest-entries article header h3 { + margin-bottom: 0.5rem; /* Bootstrap _type.css */ + + font-size: var(--global-font-size--medium); + font-weight: var(--bold); +} + +/* lay out image left of the header over the abstract */ +.blog-latest-entries article { + display: grid; +} +@container (min-width: 768px) { + .blog-latest-entries article { + column-gap: var(--global-space--bootstrap-gap); + grid-template-columns: minmax(0, max-content) 1fr; + grid-template-rows: min-content 1fr; + grid-template-areas: + "media head" + "media desc"; + } +} +@container (max-width: 767px) { + .blog-latest-entries article { + grid-auto-rows: min-content; + grid-template-areas: + "media" + "head" + "desc"; + } + + .blog-latest-entries article .blog-visual { + margin-bottom: 15px; + } + .blog-latest-entries article .blog-visual img { + height:auto; + max-width: 100% + } +} +.blog-latest-entries article header { grid-area: head; } +.blog-latest-entries article .blog-visual { grid-area: media; } +.blog-latest-entries article .blog-lead { grid-area: desc; } + +/* to add line and space between articles */ +.blog-latest-entries article + article { + border-top: var(--global-border-width--normal) solid var(--global-color-primary--light); + margin-top: var(--article-buffer); + padding-top: var(--article-buffer); +} + +/* to remove extra space at bottom of article */ +.blog-latest-entries article .blog-lead p:last-child { + margin-bottom: 0; +} + +/* to hide stuff that is not in a simple feed */ +.blog-latest-entries article *:where( + header > *:not(h3) /* everything in header that is not the title */, + .read-more /* the footer link to article (header link is adequate) */ +) { + display: none; +} diff --git a/taccsite_cms/static/site_cms/css/src/_imports/tools/x-news.css b/taccsite_cms/static/site_cms/css/src/_imports/tools/x-news.css index 4264a4f2d..031587b65 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/tools/x-news.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/tools/x-news.css @@ -124,9 +124,12 @@ column-gap: 50px; /* for horz. space between image and content */ - border-bottom: var(--global-border-width--normal) solid var(--global-color-primary--dark); - margin-bottom: 20px; - padding-bottom: 20px; + /* To add
        (and space) between articles */ + & + & { + border-top: var(--global-border-width--normal) solid var(--global-color-primary--light); + margin-top: 20px; + padding-top: 20px; + } } @define-mixin news-feed--grid-layout__article { grid-template-areas: diff --git a/taccsite_cms/static/site_cms/css/src/app.blog.css b/taccsite_cms/static/site_cms/css/src/app.blog.css index 0a284416b..9bcf06e04 100644 --- a/taccsite_cms/static/site_cms/css/src/app.blog.css +++ b/taccsite_cms/static/site_cms/css/src/app.blog.css @@ -1,5 +1,4 @@ /* DO NOT ADD STYLES HERE; ONLY IMPORT OTHER STYLESHEETS */ /* Styles for blog app pages (not blog plugins which can be anywhere on site) */ -/* FAQ: For blog plugin styles, see `./django.cms.blog.plugins.css` */ @import url("./_imports/components/django.cms.blog.app.css"); diff --git a/taccsite_cms/static/site_cms/css/src/app.blog.plugins.css b/taccsite_cms/static/site_cms/css/src/app.blog.plugins.css new file mode 100644 index 000000000..c6c459506 --- /dev/null +++ b/taccsite_cms/static/site_cms/css/src/app.blog.plugins.css @@ -0,0 +1,4 @@ +/* DO NOT ADD STYLES HERE; ONLY IMPORT OTHER STYLESHEETS */ + +/* Styles for blog app plugins (not the blog pages which are at only 1 route) */ +@import url("./_imports/components/django.cms.blog.plugins.css"); diff --git a/taccsite_cms/templates/assets_core_cms.html b/taccsite_cms/templates/assets_core_cms.html index 555339f45..7b90807d0 100644 --- a/taccsite_cms/templates/assets_core_cms.html +++ b/taccsite_cms/templates/assets_core_cms.html @@ -1,5 +1,5 @@ {# SEE: ./assets_core.md #} -{% load static %} +{% load static blog_tags %} diff --git a/taccsite_cms/templatetags/blog_tags.py b/taccsite_cms/templatetags/blog_tags.py index c05331b40..b2a00ebba 100644 --- a/taccsite_cms/templatetags/blog_tags.py +++ b/taccsite_cms/templatetags/blog_tags.py @@ -1,7 +1,12 @@ from django import template +from django.apps import apps register = template.Library() +@register.simple_tag +def blog_is_installed(): + return apps.is_installed('djangocms_blog') + @register.simple_tag def blog_post_has_category(post=None, category_slug=''): """ From bd49a73915b987ebb13762874a04e319b0ab145b Mon Sep 17 00:00:00 2001 From: Wesley B <62723358+wesleyboar@users.noreply.github.com> Date: Thu, 27 Nov 2025 23:38:13 -0600 Subject: [PATCH 27/37] refactor: blog plugin & app feed, grid/list layout --- package-lock.json | 8 +- package.json | 2 +- .../components/django.cms.blog.app.css | 35 ++++- .../components/django.cms.blog.app.item.css | 82 ++++------ .../components/django.cms.blog.app.page.css | 21 ++- .../components/django.cms.blog.plugins.css | 140 +++++++++++------- .../components/django.cms.blog.selectors.css | 1 - .../css/src/_imports/tools/x-news.css | 46 ++++-- .../djangocms_blog/includes/blog_item.html | 4 + .../tacc/layout-choice-form.html | 2 +- 10 files changed, 198 insertions(+), 143 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7fd1c2650..98bb40f2a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,7 @@ "minimist": "^1.2.6" }, "devDependencies": { - "@tacc/core-styles": "github:TACC/Core-Styles#42cb137" + "@tacc/core-styles": "github:TACC/Core-Styles#a7c0011" }, "engines": { "node": ">=16", @@ -1133,7 +1133,7 @@ }, "node_modules/@tacc/core-styles": { "version": "2.50.2", - "resolved": "git+ssh://git@github.com/TACC/Core-Styles.git#42cb137efe30652bac90686d47c4418a41f8d97e", + "resolved": "git+ssh://git@github.com/TACC/Core-Styles.git#a7c00118999569ac06793df63a80bb27da977553", "dev": true, "license": "MIT", "bin": { @@ -4732,9 +4732,9 @@ } }, "@tacc/core-styles": { - "version": "git+ssh://git@github.com/TACC/Core-Styles.git#42cb137efe30652bac90686d47c4418a41f8d97e", + "version": "git+ssh://git@github.com/TACC/Core-Styles.git#a7c00118999569ac06793df63a80bb27da977553", "dev": true, - "from": "@tacc/core-styles@github:TACC/Core-Styles#42cb137", + "from": "@tacc/core-styles@github:TACC/Core-Styles#a7c0011", "requires": {} }, "@trysound/sax": { diff --git a/package.json b/package.json index af0a7c7ed..8d5378755 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,7 @@ }, "homepage": "https://github.com/TACC/Core-CMS", "devDependencies": { - "@tacc/core-styles": "github:TACC/Core-Styles#42cb137" + "@tacc/core-styles": "github:TACC/Core-Styles#a7c0011" }, "// devDependencies": { "@tacc/core-styles": "after v2.50.0, use NPM (because NPM and GitHub v2.50.0 differ)" diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.css b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.css index a13af62d1..a64d56913 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.css @@ -18,7 +18,6 @@ Styleguide Components.DjangoCMS.Blog.App @import url("./django.cms.blog.selectors.css"); - /* Root */ .app-blog { @@ -26,6 +25,30 @@ Styleguide Components.DjangoCMS.Blog.App } +/* Header */ + +.post-item:not(.post-detail) header { + @mixin news-feed-article__header; + + & h3 { grid-area: title } + & h4 { grid-area: subtitle } + & .attrs { grid-area: attr /* attribution */} + & .dates { grid-area: dates } + & .categories { grid-area: cats } + & .tags { grid-area: tags } + + .app-blog.no-categories.no-tags & { + @mixin news-feed-article__header--hide-cats-hide-tags; + } + .app-blog:not(.no-categories).no-tags & { + @mixin news-feed-article__header--show-cats-hide-tags; + } + .app-blog.no-categories:not(.no-tags) & { + @mixin news-feed-article__header--hide-cats-show-tags; + } +} + + /* Details */ .app-blog .post-detail { @@ -67,6 +90,16 @@ Styleguide Components.DjangoCMS.Blog.App } +/* Lead */ + +/* To undo inline content styles */ +/* FAQ: In case author pasted such markup from another source */ +.blog-lead [style]:not( + [data-style="admin"] /* HACK: so CMS admin can override this */ +) { + all: revert !important; /* force undo all inline styles */ +} + /* Social Media */ diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.item.css b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.item.css index 3dfd46de8..909e9807a 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.item.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.item.css @@ -19,9 +19,21 @@ Styleguide Components.DjangoCMS.Blog.App.Item /* List */ -/* To support rendering list as a grid */ -:--article-list--as-grid { - @mixin news-feed--as-grid; +:--article-list { + @mixin news-feed; +} +@media (--medium-and-above) { + :--article-list--as-grid { + @mixin news-feed--as-grid; + } + :--article-list--as-list { + @mixin news-feed--as-list; + } +} +@media (--medium-and-below) { + :--article-list { + @mixin news-feed--as-list; + } } /* List - Header */ @@ -46,22 +58,22 @@ Styleguide Components.DjangoCMS.Blog.App.Item /* Item */ - - -/* Item (Structure) */ - /* For all layouts */ :--article-item { @mixin news-feed__article; + + & header { grid-area: head; } + & .blog-lead { grid-area: lead; } + & .blog-visual { grid-area: media; } } /* For layout variants */ -@media (--narrow-and-below) { +@media (--medium-and-below) { :--article-item { @mixin news-feed--list-layout__article; } } -@media (--narrow-and-above) { +@media (--medium-and-above) { :--article-item--in-list { @mixin news-feed--list-layout__article; } @@ -76,39 +88,7 @@ Styleguide Components.DjangoCMS.Blog.App.Item - - -/* Header */ - - - -/* Header (Structure) */ - -:--article-item header { - @mixin news-feed-article__header; - - .app-blog.no-categories.no-tags & { - @mixin news-feed-article__header--hide-cats-hide-tags; - } - .app-blog:not(.no-categories).no-tags & { - @mixin news-feed-article__header--show-cats-hide-tags; - } - .app-blog.no-categories:not(.no-tags) & { - @mixin news-feed-article__header--hide-cats-show-tags; - } - - grid-area: head; -} -:--article-item header h3 { grid-area: title } -:--article-item header h4 { grid-area: subtitle } -:--article-item .attrs { grid-area: attr /* attribution */} -:--article-item .dates { grid-area: dates } -:--article-item .categories { grid-area: cats } -:--article-item .tags { grid-area: tags } - - - -/* Header - Titles */ +/* Titles */ :--article-item h3 { margin-bottom: unset; /* overrides Core-Styles headings--cms.css */ @@ -141,16 +121,14 @@ Styleguide Components.DjangoCMS.Blog.App.Item /* Visual */ :--article-item .blog-visual { - grid-area: media; - @mixin news-feed-article__media; } -@media (--narrow-and-below) { +@media (--medium-and-below) { :--article-item .blog-visual { @mixin news-feed-article__media--above-text; } } -@media (--narrow-and-above) { +@media (--medium-and-above) { :--article-item--in-grid .blog-visual { @mixin news-feed-article__media--above-text; } @@ -165,16 +143,6 @@ Styleguide Components.DjangoCMS.Blog.App.Item :--article-item .blog-lead { @mixin news-feed-article__lead; - - grid-area: lead; -} - -/* To undo inline content styles */ -/* FAQ: In case author pasted such markup from another source */ -:--article-item .blog-lead [style]:not( - [data-style="admin"] /* HACK: so CMS admin can override this */ -) { - all: revert !important; /* force undo all inline styles */ } @@ -183,6 +151,6 @@ Styleguide Components.DjangoCMS.Blog.App.Item /* Footer */ -.read-more { +:--article-item .read-more { @mixin news-feed-article__link-overlay; } diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.page.css b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.page.css index daddd1fec..48931956a 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.page.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.page.css @@ -33,6 +33,14 @@ Styleguide Components.DjangoCMS.Blog.App.Page :--article-page header { @mixin news-article-page__header; + & h1 { grid-area: title; } + & h2 { grid-area: subtitle; } + & .attrs { grid-area: attr /* attribution */ } + & .dates { grid-area: dates } + & .categories { grid-area: cats } + & .tags { grid-area: tags } + & .socials { grid-area: socials } + .app-blog.no-categories.no-tags & { @mixin news-article-page__header--hide-cats-hide-tags; } @@ -45,19 +53,10 @@ Styleguide Components.DjangoCMS.Blog.App.Page } :--article-page header h1 { @mixin news-article-page__title; - - grid-area: title; } :--article-page header h2 { @mixin news-article-page__subtitle; - - grid-area: subtitle; } -:--article-page .attrs { grid-area: attr /* attribution */ } -:--article-page .dates { grid-area: dates } -:--article-page .categories { grid-area: cats } -:--article-page .tags { grid-area: tags } -:--article-page .socials { grid-area: socials } @@ -178,7 +177,7 @@ Styleguide Components.DjangoCMS.Blog.App.Page /* To remove margin on narrow screens */ /* To overwrite @tacc/core-styles/…/components/align.css */ -@media (--narrow-and-below) { +@media (--medium-and-below) { :--article-page .blog-content .align-center, :--article-page .blog-content .align-right, :--article-page .blog-content .align-left { @@ -197,7 +196,7 @@ Styleguide Components.DjangoCMS.Blog.App.Page } /* To reduce image width on medium screens */ -@media (--narrow-and-above) and (--medium-and-below) { +@media (--medium-and-above) and (--medium-and-below) { :--article-page .blog-content .align-center, :--article-page .blog-content .align-right, :--article-page .blog-content .align-left { diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.plugins.css b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.plugins.css index b61225400..3af4799a6 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.plugins.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.plugins.css @@ -9,79 +9,117 @@ Reference: Styleguide Components.DjangoCMS.Blog.Plugins */ +@import url("@tacc/core-styles/src/lib/_imports/tools/media-queries.css"); -/* LATEST BLOG ARTICLES */ +@import url("../tools/x-news.css"); + +@import url("./django.cms.blog.selectors.css"); -/* settings from core-cms */ -/* https://github.com/TACC/Core-CMS/blob/v4.29.0/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.app.css#L23-L27 */ -.blog-latest-entries { - --article-buffer: 20px; -} + +/* ROOT */ /* to enable container queries */ -.blog-latest-entries { - container-type: inline-size; +.plugin-blog { + container-type: inline-size; } -/* to style h3 like an h4 */ -.blog-latest-entries article header h3 { - margin-bottom: 0.5rem; /* Bootstrap _type.css */ - font-size: var(--global-font-size--medium); - font-weight: var(--bold); +/* LATEST BLOG ARTICLES */ + +.blog-latest-entries { + @mixin news-feed; + + margin-bottom: var(--global-space--bootstrap-gap); + + @container (min-width: 992px) { + @mixin news-feed--as-grid; + + gap: var(--global-space--bootstrap-gap); + } + @container (max-width: 991px) { + @mixin news-feed--as-list; + } +} + +/* to hide article details (attribution and metadata) */ +.blog-latest-entries article .post-detail { + display: none; } -/* lay out image left of the header over the abstract */ +/* for all layouts */ .blog-latest-entries article { - display: grid; + @mixin news-feed__article; + + & header { grid-area: head; } + & .blog-visual { grid-area: media; } + & .blog-lead { grid-area: lead; } } -@container (min-width: 768px) { + +/* for layout variants */ +@container (min-width: 992px) { .blog-latest-entries article { - column-gap: var(--global-space--bootstrap-gap); - grid-template-columns: minmax(0, max-content) 1fr; - grid-template-rows: min-content 1fr; - grid-template-areas: - "media head" - "media desc"; + @mixin news-feed--grid-layout__article; + + & + & { + border-top-color: var(--global-color-primary--light); + } } } -@container (max-width: 767px) { +@container (max-width: 991px) { .blog-latest-entries article { - grid-auto-rows: min-content; - grid-template-areas: - "media" - "head" - "desc"; - } + @mixin news-feed--list-layout__article; - .blog-latest-entries article .blog-visual { - margin-bottom: 15px; - } - .blog-latest-entries article .blog-visual img { - height:auto; - max-width: 100% + column-gap: var(--global-space--bootstrap-gap); } } -.blog-latest-entries article header { grid-area: head; } -.blog-latest-entries article .blog-visual { grid-area: media; } -.blog-latest-entries article .blog-lead { grid-area: desc; } - -/* to add line and space between articles */ -.blog-latest-entries article + article { - border-top: var(--global-border-width--normal) solid var(--global-color-primary--light); - margin-top: var(--article-buffer); - padding-top: var(--article-buffer); +.blog-latest-entries article:not(:has(.blog-visual > *)) { + @mixin news-feed__article--no-media; } -/* to remove extra space at bottom of article */ -.blog-latest-entries article .blog-lead p:last-child { - margin-bottom: 0; + +/* Titles */ + +/* to style h3 like an h4 */ +.blog-latest-entries article h3 { + margin-bottom: 0.5rem; /* Bootstrap _type.css */ + + font-size: var(--global-font-size--medium); + font-weight: var(--bold); +} +.blog-latest-entries article h4 { + display: none; } + +/* Details */ + /* to hide stuff that is not in a simple feed */ -.blog-latest-entries article *:where( - header > *:not(h3) /* everything in header that is not the title */, - .read-more /* the footer link to article (header link is adequate) */ -) { +.blog-latest-entries article h4, +.blog-latest-entries article .post-detail { display: none; } + + +/* Visual */ + +.blog-latest-entries article .blog-visual { + @mixin news-feed-article__media; + + @container (min-width: 992px) { + @mixin news-feed-article__media--above-text; + } +} + + +/* Lead */ + +.blog-latest-entries article .blog-lead { + @mixin news-feed-article__lead; +} + + +/* Footer */ + +.blog-latest-entries article .read-more { + @mixin news-feed-article__link-overlay; +} diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.selectors.css b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.selectors.css index 1103ab670..c6babc78e 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.selectors.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.blog.selectors.css @@ -2,7 +2,6 @@ /* To make these selectors easier to remember (rather than add classnames) */ /* FAQ: Avoiding changing blog templates to limit app upgrade maintenance */ -@custom-selector :--article article; @custom-selector :--article-page article.post-detail; @custom-selector :--article-list .blog-list; @custom-selector :--article-list--as-list :--article-list:not(.as-grid); diff --git a/taccsite_cms/static/site_cms/css/src/_imports/tools/x-news.css b/taccsite_cms/static/site_cms/css/src/_imports/tools/x-news.css index 031587b65..b4e29cb5f 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/tools/x-news.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/tools/x-news.css @@ -90,13 +90,24 @@ /* Root */ +@define-mixin news-feed { + margin-bottom: 20px; +} +@define-mixin news-feed--as-list { + /* … */ +} @define-mixin news-feed--as-grid { display: grid; grid-template-columns: repeat( auto-fit, minmax(350px, 1fr) ); - column-gap: var(--global-space--pattern-pad); + + gap: var(--global-space--pattern-pad); } @define-mixin news-feed--as-grid__header { - grid-column: 1 / -1; /* so page title spans all columns */ + /* So feed title spans all columns */ + grid-column: 1 / -1; + + /* To remove gap between feed title and feed articles */ + margin-bottom: calc(-1 * var(--global-space--bootstrap-gap)); } /* Title */ @@ -121,15 +132,6 @@ @define-mixin news-feed__article { display: grid; - - column-gap: 50px; /* for horz. space between image and content */ - - /* To add
        (and space) between articles */ - & + & { - border-top: var(--global-border-width--normal) solid var(--global-color-primary--light); - margin-top: 20px; - padding-top: 20px; - } } @define-mixin news-feed--grid-layout__article { grid-template-areas: @@ -147,8 +149,17 @@ 'media lead'; /* To shrinkwrap media and flexible text content */ grid-template-columns: minmax(0, max-content) 1fr; - /* To let 'lead' take remaining space (removes gap between head and desc) */ + /* To let 'lead' take remaining space (removes gap between head and lead) */ grid-template-rows: min-content 1fr; + + column-gap: 50px; /* for horz. space between image and content */ + + /* To add
        (and space) between articles */ + & + & { + margin-top: 20px; + border-top: var(--global-border-width--normal) solid var(--global-color-primary--dark); + padding-top: 20px; + } } @define-mixin news-feed__article--no-media { grid-template-areas: @@ -263,7 +274,10 @@ /* Pagination */ @define-mixin news-pagination { - margin-block: 40px; + margin-top: 20px; + border-top: var(--global-border-width--normal) solid var(--global-color-primary--dark); + padding-block: var(--global-space--x-large); + border-radius: unset; /* undo Bootstrap */ } @@ -342,10 +356,10 @@ /* Media */ @define-mixin news-article-page__media { - @media (--narrow-and-below) { + @media (--medium-and-below) { @mixin news-article-page__media--slim-context; } - @media (--narrow-and-above) { + @media (--medium-and-above) { @mixin news-article-page__media--wide-context; } } @@ -356,5 +370,5 @@ @define-mixin news-article-page__media--wide-context { float: right; max-width: 50%; - margin-left: var(--blog-item-media-buffer); + margin-left: 45px; } diff --git a/taccsite_cms/templates/djangocms_blog/includes/blog_item.html b/taccsite_cms/templates/djangocms_blog/includes/blog_item.html index 6301198e6..158eee49e 100644 --- a/taccsite_cms/templates/djangocms_blog/includes/blog_item.html +++ b/taccsite_cms/templates/djangocms_blog/includes/blog_item.html @@ -13,6 +13,8 @@

        {{ post.subtitle }}

        {% include "djangocms_blog/includes/blog_meta.html" %} {% endblock %} + {# TACC (remove whitespace to support css `:empty`): #} + {% spaceless %} {% if image and post.main_image %}
        {% thumbnail post.main_image post.thumbnail_options.size crop=post.thumbnail_options.crop upscale=post.thumbnail_options.upscale subject_location=post.main_image.subject_location as thumb %} @@ -24,6 +26,8 @@

        {{ post.subtitle }}

        {% for preview in previews %}{% endfor %}
        {% endif %} + {% endspaceless %} + {# /TACC #}
        {% if not TRUNCWORDS_COUNT %} {% render_model post "abstract" "" "" "safe" %} diff --git a/taccsite_cms/templates/djangocms_blog/tacc/layout-choice-form.html b/taccsite_cms/templates/djangocms_blog/tacc/layout-choice-form.html index 5aafc5637..ba251dfbb 100644 --- a/taccsite_cms/templates/djangocms_blog/tacc/layout-choice-form.html +++ b/taccsite_cms/templates/djangocms_blog/tacc/layout-choice-form.html @@ -3,7 +3,7 @@ {# To support user changing layout of news list #} {# FAQ: The form is hidden, because styles are not complete #} {# FAQ: The script is active, so new styles can be tested on a server #} -