refactor: blog styles & features

[wesleyboar]

Overview

• Style plugins:
  • "Latest Blog Entries"
  • "Author Blog Articles List"
• Delete unused features.
• Refactor template tags.
• Update Core-Styles.
• Construct blog styles via mixins.
  ^{(so reuse within plugins does not duplicate and tweak code)}

Related

• requires TACC/Core-Styles@v2.51.0
• replaces feat: blog latest entries - WIP Core-Styles#515

Changes

• deletes PORTAL_BLOG_CUSTOM_MEDIA_POST_CATEGORY
• changes example settings
• changes blog news to use mixins
• deletes unused custom selector :--article
• adds news- mixins
• adds blog plugin styles for "Latest Blog Entries"
• adds templatetag blog_is_installed
• renames templates:
  • blog_cats_organized → blog_cats_sorted
• fixes troublesome whitespace in markup for .blog-visual
• renames templatetags:
  • blog_post_use_custom_media → blog_post_has_category
  • blog_post_is_show_abstract → blog_post_has_tag
• renames custom blog class from links to socials
• deletes custom media logic
• deletes snippets/news/hide-article-main-image.html
  ^{Sites can instead hide with CSS globally.}
• refactors blog templatetags into one file

Testing & UI

Blog App

Article Feed

1. Create blog feed with several articles.

List Layout

2. Verify layout is a list.
   ^{This is the default and familiar layout.}
3. View at different screen sizes.
4. Verify no change compared to TACC.
5. Verify:
   • thumbnail image:
     • maintains ratio
     • if big enough, fills grid cell
     • if absent, space is usurped by text content
     • is atop text at narrow screen width
   • list:
     • is 1 articles wide maximum (all screen widths)
     • has space and border between articles
     • has space at the bottom of it

list.layout.mov

Grid Layout

6. Change layout to grid.
   ^{Inspect elements. Find <form … hidden>. Remove hidden attribute. Click grid icon/option.}
7. View at different screen sizes.
8. Verify:
   • thumbnail image:
     • maintains ratio
     • if big enough, fills grid cell
     • if absent, space is usurped by text content
   • list:
     • is 4 articles wide maximum (wide screen)
     • is 1 article wide minimum (narrow screen)
     • has space but no border between articles
       ^{double check narrow screen sizes}
     • fits successively more articles as screen widens
     • has space at the bottom of it
   • list title:
     • has same position and width as in list layout
       ^{double check narrow screen sizes}
     • has same space between it and articles as in list layout
       ^{double check narrow screen sizes}

grid.layout.mov

Article Page

1. Create blog feed with several articles.

Blog Plugins

Feed: Latest Blog Articles

1. Add/View "Latest Blog Articles" plugin.
2. View at different screen sizes.
3. Verify:
   • list:
     • is 3 articles wide maximum (wide screen)
     • is never 2 articles wide (any screen width)
     • is 1 article wide minimum (narrow screen)
     • has space but no border between articles
     • space between articles matches Bootstrap col/rows (30px)
     • has space at the bottom of it

latest.blog.articles.mov

Feed: Author Blog Articles List

1. Add/View "Author Blog Articles List" plugin.
2. View at different screen sizes.
3. Verify article list matches "Latest Blog Articles".
   ^{style, layout, responsiveness, flexibility}