GH-93: Article List Styles

[wesleyboar]

Important

This version is older than:

• GH-93, GH-142, GH-133: Article List Plugins & Styles #280

To Do

Done

• 96761a8 Tweak Home Scope .s-home(...) selectors to use classnames not tags (but not for banner¹).
• 658ae01 (Optional) Move deprecated/s-article-preview to Frontera-only code.
• 50d6a9b Make line-height match for Docs and Events articles.
• Add "Testing" to PR.
• Add "Screenshots" to PR.

¹ Banner articles should not be updated until GH-134, because banner article markup is different.

Overview

Implement all plugins and styles required for Article Lists on new Frontera homepage.

Issues

• Article Lists Styles #93
• Article Lists: Events - as Static Content (with Plugin) #142
• Article Lists: News & Allocations - as Static Content (with Plugin) #133
   +
• Open "External Link" in New Window - TACC Plugin #291
• How to Support External News Articles #112

Hotfixes:

• Task/gh 93 article list styles - Submod Update #266
• Hotfix: GH-93: Clearer & Accurate Date Logic #268
• Hotfix: GH-93: 7c49db5d But Do It Right #269

Changes

Plugins:

• Doc: Add plugin documentation.
• Doc: Describe intent and architecture of static article plugins.
• Doc: Fix typos and add missing comments.
• New: Add many plugin helper methods.
• Fix: Blockquote CMS Plugin: Fix small mistakes.
• New: Blockquote & Offset CMS Plugin: couple direction choices with classnames.*
• Fix: Sample Plugin: small mistakes.
• New: Article List (Static) Plugin.
• New: Article Preview (Static) Plugin.

* The choice values and descriptions and resulting classnames are in a dictionary (just like the Article plugins).

Styles:

• New: Article List Component .c-article-list.
• New: Article Preview Component .c-article-preview.
• New: Date Component.
• Minor: Tweak HTML Elements dt.
• New: Remove class mixin name .x-article-....
• New: Remove mixin x-article-...--gapless.
• Minor: Deprecate previous Article List Scope .s-article-list.
• Minor: Deprecate previous Article Preview Scope .s-article-preview.
• New: Article List Scope .s-article-preview.
• (INCOMPLETE) Minor: Tweak Home Scope .s-home(...) selectors to use classnames not tags.

Screenshots

Notice: Review homepage content (not header). Irrelevant differences: Banner & Intro texts, System Monitor content.

New, Dev Screenshots Taken on Dev After Original Review:

• FP-93 - 576
• FP-93 - 768
• FP-93 - 992
• FP-93 - 1200
• FP-93 - 1400
• FP-93 - 1680

Localhost Screenshots Used for Original Review

• FP-93 - 576
• FP-93 - 768
• FP-93 - 992
• FP-93 - 1200
• FP-93 - 1400
• FP-93 - 1680

Testing

1. Recreate bottom half of homepage using these new plugins:
   • News Article List (Static)
     • News Article Preview (Static)
   • Allocations Article List (Static)
     • Allocations Article Preview (Static)
   • Document Article List (Static)
     • Document Article Preview (Static)
   • Event Article List (Static)
     • Event Article Preview (Static)
2. Skip/Remove the following classes from the Container around News article list section:
   • s-article-list--layout-d
   • s-article-list--layout-compact
   • s-article-list--news
3. Skip/Remove all classes from the other article list section.
4. Result looks* like Frontera New Homepage, except:
   • Docs article preview title and line height matches those of Events.
5. Result behaves* like Frontera New Homepage, except:
   • Allocations has more vertical space available from 992px to 1680px.†

* Where "looks like" is static UI, and "behaves like" is responsive UI (UI adapts to window size change).

† Because Docs article preview styling uses more vertical space because styles we updated to match Events.

Notes

Questions

Should we limit Bootstrap Image & Link plugins?

Tasks:

• Hide plugins from plugin add list from non-admin users (so admins retain full control).
• But show plugins in structure list (so they can be edited if already in use).

Ideas:

• CSS:

  /* HELP: How to limit this to non-admin users? */
  div.cms .cms-plugin-picker .cms-submenu-item a[data-rel="add"][href="TaccsiteNewsArticleListPlugin"] {
      display: none;
  }

[wesleyboar]

Self-merging because:

1. This PR to dev
2. I will review (non-style) changes with peers via dev → main (GH-73, GH-66 & FP-1099 & GH-93, GH-142, GH-133) #259.
3. This code needs to be tested with GH-101/FP-1458: Header Redesign #222.