Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
wesleyboar merged 28 commits into from
Nov 15, 2021
Merged

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

wesleyboar merged 28 commits into from
Nov 15, 2021

Conversation

@wesleyboar
Copy link
Member

@wesleyboar wesleyboar commented Jul 13, 2021 •
edited
Loading

Important

Merged for posterity. This version is newer than:

To Do

Done
  1. Resolve merge conflicts with main.
  2. Redeploy (with latest main merged in).
  3. FP-1252: Clone Frontera CMS Prod to Pre-Prod
  4. Perform testing steps on pre-prod.
  5. Test and either (X) merge or (✓) determine next step.
  6. As part of or follow-up to FP-1231, review:
  • Create ticket to not use plugins* but retain otherwise desirable changes: FP-1249

* Belated evaluation decrees that static article plugins are not necessary.

Requires

Overview

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

Issues

Changes

Plugins

  • Add article plugins.

  • Add plugin helper functions.

  • complete changelog
    • 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

  • Add new stylesheets for article components.

  • Update stylesheets for article-scoped styles.

  • Cleanup article mixins.

  • Tweak homepage-specific/relevant styles.

  • (complete changelog)
    • New: Article List Component .c-article-list.
    • New: Article Preview Component .c-article-preview.
    • New: Date Component.
    • Minor: Tweak HTML Elements dt.
    • New: Replace class mixin .x-article-... with invisible mixin %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.
    • Minor: Tweak Home Scope .s-home(...) selectors—for article styling—to use classnames not tags.

Screenshots

Ignore header, banner, intro text, and system monitor.

Deployed at Frontera (dev) homepage.

Dev Server Screenshots Taken on After Original Review
576px 768px 992px 1200px 1400px 1680px
FP-93 - 576 FP-93 - 768 FP-93 - 992 FP-93 - 1200 FP-93 - 1400 FP-93 - 1680
Local Server Screenshots Used for Original Review
576px 768px 992px 1200px 1400px 1680px
FP-93 - 576 FP-93 - 768 FP-93 - 992 FP-93 - 1200 FP-93 - 1400 FP-93 - 1680

Testing

Last Recorded Deploys

☑️  Convert Frontera Dev Homepage to Use New Article Plugins

Notice: @tacc-wbomar already did this.

  1. Recreate bottom half of homepage (beneath System Monitor) 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.
➡️  Duplicate Frontera Dev Homepage and Play Around with its New Plugins
  1. Clone the Frontera (dev) homepage.
  2. Poke around at the plugins below the System Monitor.
  3. Report any oddities or failures.
➡️  Compare Homepage with Plugins to Prod Homepage
  1. Result looks* like Frontera (prod) Homepage, except:
    • Docs article preview title and line height matches those of Events.
    • Articles may be different (because @tacc-wbomar did not update images & text).
    • The "See ..." links beneath each set of articles has a new encircled-arrow icon.
  2. Result behaves* like Frontera (prod) 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

  1. Independent Repos for Plugins

    This has been tested using the following independent plugins via task/FP-1231-extract-plugins (reverted) commit 2c19af7:

@wesleyboar wesleyboar force-pushed the task/GH-93-GH-142-GH-133-article-list-plugins-and-styles--no-reverts branch from 84d7a6c to edc1030 Compare July 13, 2021 01:59
@wesleyboar wesleyboar mentioned this pull request Jul 13, 2021
Closed
This was linked to issues Jul 13, 2021
Article Lists Styles #93
Closed
Article Lists: News & Allocations - as Static Content (with Plugin) #133
Closed
Article Lists: Events - as Static Content (with Plugin) #142
Closed
How to Support External News Articles #112
Closed
How to Open "External Link" in New Window via CMS? #7
Closed
@wesleyboar wesleyboar force-pushed the task/GH-93-GH-142-GH-133-article-list-plugins-and-styles--no-reverts branch from edc1030 to 2bdf7e7 Compare July 13, 2021 02:11
@wesleyboar wesleyboar changed the title GH-93, GH-142, GH-133: Article List Plugins+Styles GH-93, GH-142, GH-133: Article List Plugins & Styles Jul 13, 2021
@wesleyboar wesleyboar mentioned this pull request Jul 13, 2021
Draft
7 tasks
@wesleyboar wesleyboar marked this pull request as ready for review July 13, 2021 02:17
@wesleyboar wesleyboar added the priority ▲ High priority label Jul 13, 2021
@wesleyboar wesleyboar mentioned this pull request Jul 13, 2021
Closed
This was referenced Jul 23, 2021
Closed
Closed
@wesleyboar wesleyboar removed a link to an issue Jul 23, 2021
How to Open "External Link" in New Window via CMS? #7
Closed
5 tasks
@wesleyboar wesleyboar linked an issue Jul 23, 2021 that may be closed by this pull request
Open "External Link" in New Window - TACC Plugin #291
Closed
@wesleyboar
Copy link
Member Author

wesleyboar commented Jul 30, 2021

@taoteg I added a commit relevant to testing this PR. Please pull. Sorry for the unexpected change.

Why the Change?
  1. eea0768 Merge from main to resolve any possible conflicts before merging to main.
  2. 1729430 When I Frankenstein-ed this PR out of a larger PR, I neglected the complete content of helpers.py.

@wesleyboar wesleyboar added priority ▲▲ Very high priority and removed priority ▲ High priority labels Aug 5, 2021
@wesleyboar wesleyboar requested a review from taoteg August 5, 2021 20:45
@wesleyboar wesleyboar mentioned this pull request Aug 8, 2021
Merged
2 tasks
@wesleyboar
Copy link
Member Author

wesleyboar commented Sep 30, 2021 •
edited
Loading

In the future, perhaps we can find a way to define test content that lives outside another CMS for testing? Perhaps as a fixture (not sure how that would work for CMS content) or as a documented 'lorem ipsum-esque' design that can be manually created in the cms structure view without needing specific assets or admin in a host system?

@taoteg Yes, please. I am hoping an automated CMS pattern library would provide isolated test cases for plugins (this PR added many). I don't know how to do that yet.

@wesleyboar wesleyboar force-pushed the task/GH-93-GH-142-GH-133-article-list-plugins-and-styles--no-reverts branch from d360e73 to d452772 Compare October 8, 2021 00:51
wesleyboar added a commit that referenced this pull request Oct 8, 2021
@wesleyboar
Squashed merge of task/GH-93-GH-142-GH-133-article-list-plugins-and-s…
b718302 
…tyles--no-reverts of the following:

commit d452772
Author: Wesley Bomar <wbomar@tacc.utexas.edu>
Date:   Thu Oct 7 16:59:43 2021 -0500

    GH-93: Fix bug from intro of `x-overlay--` mixin

    Bug Source:
    - #368
        - #361
            - TACC/Core-CMS-Resources@6d253e1...522c296#diff-5894bbc

commit 17d5174
Author: Wesley Bomar <wbomar@tacc.utexas.edu>
Date:   Thu Oct 7 13:30:24 2021 -0500

    Major: Deprecate `.x-overlay--` classes

    Affects Frontera and UTRC. Both are updated in this commit.

commit 9525e25
Author: Wesley Bomar <wbomar@tacc.utexas.edu>
Date:   Thu Oct 7 13:18:53 2021 -0500

    GH-93: Fix: Do NOT load migrate CSS on homepage

commit 23abf1d
Author: Wesley Bomar <wbomar@tacc.utexas.edu>
Date:   Thu Oct 7 12:54:04 2021 -0500

    GH-93: Frontera homepage banner fixes/improvements

commit 7ffbd47
Merge: 265fec0 666bf95
Author: Wesley Bomar <wbomar@tacc.utexas.edu>
Date:   Thu Oct 7 12:32:14 2021 -0500

    Merge branch 'main' into task/GH-93-GH-142-GH-133-article-list-plugins-and-styles--no-reverts

commit 265fec0
Merge: fc21621 c117ee6
Author: Wesley Bomar <wbomar@tacc.utexas.edu>
Date:   Tue Sep 28 17:01:07 2021 -0500

    Merge branch 'main' into task/GH-93-GH-142-GH-133-article-list-plugins-and-styles--no-reverts

commit fc21621
Author: Wesley Bomar <wbomar@tacc.utexas.edu>
Date:   Tue Sep 28 17:00:43 2021 -0500

    GH-93-ETC: Update submod to have its latest main

commit cb9c1a1
Merge: c4186df 1248117
Author: Wesley Bomar <wbomar@tacc.utexas.edu>
Date:   Thu Sep 2 14:24:54 2021 -0500

    Merge branch 'main' into task/GH-93-GH-142-GH-133-article-list-plugins-and-styles--no-reverts

commit c4186df
Author: Wesley Bomar <wbomar@tacc.utexas.edu>
Date:   Wed Sep 1 16:22:57 2021 -0500

    GH-93/GH-142/GH-133: Remove errant submod commits

commit 7563f7c
Merge: 579f5c6 97f7df0
Author: Wesley Bomar <wbomar@tacc.utexas.edu>
Date:   Tue Aug 31 13:59:51 2021 -0500

    Merge branch 'main' into task/GH-93-GH-142-GH-133-article-list-plugins-and-styles--no-reverts

commit 579f5c6
Author: Wesley Bomar <wbomar@tacc.utexas.edu>
Date:   Mon Aug 23 20:25:31 2021 -0500

    Docs: Corrections to "How to Extend Plugin" doc

commit 3bdde39
Merge: 266a9ad 1d50a7b
Author: Wesley Bomar <wbomar@tacc.utexas.edu>
Date:   Mon Aug 16 18:18:22 2021 -0500

    Merge branch 'main' into task/GH-93-GH-142-GH-133-article-list-plugins-and-styles--no-reverts

commit 266a9ad
Merge: 647d394 a66033a
Author: Wesley Bomar <wbomar@tacc.utexas.edu>
Date:   Mon Aug 16 18:09:17 2021 -0500

    Merge branch 'main' into task/GH-93-GH-142-GH-133-article-list-plugins-and-styles--no-reverts

commit 647d394
Merge: dcf606c ac6d873
Author: Wesley Bomar <wbomar@tacc.utexas.edu>
Date:   Mon Aug 16 17:19:26 2021 -0500

    Merge branch 'main' into task/GH-93-GH-142-GH-133-article-list-plugins-and-styles--no-reverts

commit dcf606c
Merge: 74b9a9c e0e420d
Author: Wesley Bomar <wbomar@tacc.utexas.edu>
Date:   Mon Aug 16 17:04:52 2021 -0500

    Merge branch 'main' into task/GH-93-GH-142-GH-133-article-list-plugins-and-styles--no-reverts

commit 74b9a9c
Author: Wesley Bomar <wbomar@tacc.utexas.edu>
Date:   Fri Aug 13 05:52:08 2021 -0500

    GH-93: Avoid title color bug with upcoming PR #312

    Ensure heading turns white.

commit 1729430
Author: Wesley Bomar <wbomar@tacc.utexas.edu>
Date:   Fri Jul 30 13:43:29 2021 -0500

    GH-142, GH-133: Article List Plugin Helpers

    This code was lost during re-creation:
    - of #264
    - as #280.

commit eea0768
Merge: 89b1136 374b78e
Author: Wesley Bomar <wbomar@tacc.utexas.edu>
Date:   Fri Jul 30 12:46:27 2021 -0500

    Merge branch 'main' into task/GH-93-GH-142-GH-133-article-list-plugins-and-styles--no-reverts

commit 89b1136
Author: Wesley Bomar <wbomar@tacc.utexas.edu>
Date:   Tue Jul 20 17:24:37 2021 -0500

    GH-93: Frontera: Plugin-less style … — Real Fix

commit 5bd6484
Author: Wesley Bomar <wbomar@tacc.utexas.edu>
Date:   Tue Jul 20 17:23:30 2021 -0500

    GH-93: Frontera: Plugin-less style … snippet — Fix

commit f6b8f3a
Author: Wesley Bomar <wbomar@tacc.utexas.edu>
Date:   Tue Jul 20 17:03:17 2021 -0500

    GH-93: Frontera: Plugin-less style updates snippet

commit b531503
Merge: 2b66f11 302fe3b
Author: Wesley Bomar <wbomar@tacc.utexas.edu>
Date:   Tue Jul 20 16:58:15 2021 -0500

    Merge branch 'main' into task/GH-93-GH-142-GH-133-article-list-plugins-and-styles--no-reverts

commit 2b66f11
Merge: 2bdf7e7 d0a5151
Author: Wesley Bomar <wbomar@tacc.utexas.edu>
Date:   Mon Jul 12 21:38:53 2021 -0500

    Merge branch 'main' into task/GH-93-GH-142-GH-133-article-list-plugins-and-styles--no-reverts

commit 2bdf7e7
Author: Wesley Bomar <wbomar@tacc.utexas.edu>
Date:   Mon Jul 12 20:55:42 2021 -0500

    GH-93, GH-142, GH-133: Article List Plugins+Styles
@wesleyboar wesleyboar added the blocked Unable to continue work label Oct 8, 2021
@wesleyboar wesleyboar removed the priority ▲ High priority label Oct 15, 2021
@wesleyboar wesleyboar added priority ▼ Low priority paused Started but not actively in progress and removed blocked Unable to continue work labels Oct 27, 2021
@wesleyboar wesleyboar marked this pull request as draft October 27, 2021 20:39
@wesleyboar wesleyboar added blocked Unable to continue work and removed paused Started but not actively in progress labels Nov 4, 2021
wesleyboar added a commit that referenced this pull request Nov 12, 2021
@wesleyboar
Squashed merge of task/GH-93-GH-142-GH-133-article-list-plugins-and-s…
f6cb452 
…tyles--no-reverts of the following:

commit a854b0b
Merge: df7a458 82ffc16
Author: Wesley Bomar <wbomar@tacc.utexas.edu>
Date:   Fri Nov 12 17:35:44 2021 -0600

    Merge branch 'main' into task/GH-93-GH-142-GH-133-article-list-plugins-and-styles--no-reverts

commit df7a458
Author: Wesley Bomar <wbomar@tacc.utexas.edu>
Date:   Fri Nov 12 17:35:31 2021 -0600

    Quick: Submod update for GH-93, GH-142, GH-133

commit 7245196
Merge: 92b234e b9d08f8
Author: Wesley Bomar <wbomar@tacc.utexas.edu>
Date:   Thu Nov 4 12:02:30 2021 -0500

    Merge branch 'main' into task/GH-93-GH-142-GH-133-article-list-plugins-and-styles--no-reverts

commit 92b234e
Merge: d452772 4838e7e
Author: Wesley Bomar <wbomar@tacc.utexas.edu>
Date:   Thu Oct 14 16:31:54 2021 -0500

    Merge branch 'main' into task/GH-93-GH-142-GH-133-article-list-plugins-and-styles--no-reverts

commit d452772
Author: Wesley Bomar <wbomar@tacc.utexas.edu>
Date:   Thu Oct 7 16:59:43 2021 -0500

    GH-93: Fix bug from intro of `x-overlay--` mixin

    Bug Source:
    - #368
        - #361
            - TACC/Core-CMS-Resources@6d253e1...522c296#diff-5894bbc

commit 17d5174
Author: Wesley Bomar <wbomar@tacc.utexas.edu>
Date:   Thu Oct 7 13:30:24 2021 -0500

    Major: Deprecate `.x-overlay--` classes

    Affects Frontera and UTRC. Both are updated in this commit.

commit 9525e25
Author: Wesley Bomar <wbomar@tacc.utexas.edu>
Date:   Thu Oct 7 13:18:53 2021 -0500

    GH-93: Fix: Do NOT load migrate CSS on homepage

commit 23abf1d
Author: Wesley Bomar <wbomar@tacc.utexas.edu>
Date:   Thu Oct 7 12:54:04 2021 -0500

    GH-93: Frontera homepage banner fixes/improvements

commit 7ffbd47
Merge: 265fec0 666bf95
Author: Wesley Bomar <wbomar@tacc.utexas.edu>
Date:   Thu Oct 7 12:32:14 2021 -0500

    Merge branch 'main' into task/GH-93-GH-142-GH-133-article-list-plugins-and-styles--no-reverts

commit 265fec0
Merge: fc21621 c117ee6
Author: Wesley Bomar <wbomar@tacc.utexas.edu>
Date:   Tue Sep 28 17:01:07 2021 -0500

    Merge branch 'main' into task/GH-93-GH-142-GH-133-article-list-plugins-and-styles--no-reverts

commit fc21621
Author: Wesley Bomar <wbomar@tacc.utexas.edu>
Date:   Tue Sep 28 17:00:43 2021 -0500

    GH-93-ETC: Update submod to have its latest main

commit cb9c1a1
Merge: c4186df 1248117
Author: Wesley Bomar <wbomar@tacc.utexas.edu>
Date:   Thu Sep 2 14:24:54 2021 -0500

    Merge branch 'main' into task/GH-93-GH-142-GH-133-article-list-plugins-and-styles--no-reverts

commit c4186df
Author: Wesley Bomar <wbomar@tacc.utexas.edu>
Date:   Wed Sep 1 16:22:57 2021 -0500

    GH-93/GH-142/GH-133: Remove errant submod commits

commit 7563f7c
Merge: 579f5c6 97f7df0
Author: Wesley Bomar <wbomar@tacc.utexas.edu>
Date:   Tue Aug 31 13:59:51 2021 -0500

    Merge branch 'main' into task/GH-93-GH-142-GH-133-article-list-plugins-and-styles--no-reverts

commit 579f5c6
Author: Wesley Bomar <wbomar@tacc.utexas.edu>
Date:   Mon Aug 23 20:25:31 2021 -0500

    Docs: Corrections to "How to Extend Plugin" doc

commit 3bdde39
Merge: 266a9ad 1d50a7b
Author: Wesley Bomar <wbomar@tacc.utexas.edu>
Date:   Mon Aug 16 18:18:22 2021 -0500

    Merge branch 'main' into task/GH-93-GH-142-GH-133-article-list-plugins-and-styles--no-reverts

commit 266a9ad
Merge: 647d394 a66033a
Author: Wesley Bomar <wbomar@tacc.utexas.edu>
Date:   Mon Aug 16 18:09:17 2021 -0500

    Merge branch 'main' into task/GH-93-GH-142-GH-133-article-list-plugins-and-styles--no-reverts

commit 647d394
Merge: dcf606c ac6d873
Author: Wesley Bomar <wbomar@tacc.utexas.edu>
Date:   Mon Aug 16 17:19:26 2021 -0500

    Merge branch 'main' into task/GH-93-GH-142-GH-133-article-list-plugins-and-styles--no-reverts

commit dcf606c
Merge: 74b9a9c e0e420d
Author: Wesley Bomar <wbomar@tacc.utexas.edu>
Date:   Mon Aug 16 17:04:52 2021 -0500

    Merge branch 'main' into task/GH-93-GH-142-GH-133-article-list-plugins-and-styles--no-reverts

commit 74b9a9c
Author: Wesley Bomar <wbomar@tacc.utexas.edu>
Date:   Fri Aug 13 05:52:08 2021 -0500

    GH-93: Avoid title color bug with upcoming PR #312

    Ensure heading turns white.

commit 1729430
Author: Wesley Bomar <wbomar@tacc.utexas.edu>
Date:   Fri Jul 30 13:43:29 2021 -0500

    GH-142, GH-133: Article List Plugin Helpers

    This code was lost during re-creation:
    - of #264
    - as #280.

commit eea0768
Merge: 89b1136 374b78e
Author: Wesley Bomar <wbomar@tacc.utexas.edu>
Date:   Fri Jul 30 12:46:27 2021 -0500

    Merge branch 'main' into task/GH-93-GH-142-GH-133-article-list-plugins-and-styles--no-reverts

commit 89b1136
Author: Wesley Bomar <wbomar@tacc.utexas.edu>
Date:   Tue Jul 20 17:24:37 2021 -0500

    GH-93: Frontera: Plugin-less style … — Real Fix

commit 5bd6484
Author: Wesley Bomar <wbomar@tacc.utexas.edu>
Date:   Tue Jul 20 17:23:30 2021 -0500

    GH-93: Frontera: Plugin-less style … snippet — Fix

commit f6b8f3a
Author: Wesley Bomar <wbomar@tacc.utexas.edu>
Date:   Tue Jul 20 17:03:17 2021 -0500

    GH-93: Frontera: Plugin-less style updates snippet

commit b531503
Merge: 2b66f11 302fe3b
Author: Wesley Bomar <wbomar@tacc.utexas.edu>
Date:   Tue Jul 20 16:58:15 2021 -0500

    Merge branch 'main' into task/GH-93-GH-142-GH-133-article-list-plugins-and-styles--no-reverts

commit 2b66f11
Merge: 2bdf7e7 d0a5151
Author: Wesley Bomar <wbomar@tacc.utexas.edu>
Date:   Mon Jul 12 21:38:53 2021 -0500

    Merge branch 'main' into task/GH-93-GH-142-GH-133-article-list-plugins-and-styles--no-reverts

commit 2bdf7e7
Author: Wesley Bomar <wbomar@tacc.utexas.edu>
Date:   Mon Jul 12 20:55:42 2021 -0500

    GH-93, GH-142, GH-133: Article List Plugins+Styles
@wesleyboar wesleyboar changed the base branch from main to main--v-3-5-0 November 15, 2021 22:46
@wesleyboar wesleyboar marked this pull request as ready for review November 15, 2021 22:47
@wesleyboar wesleyboar mentioned this pull request Nov 15, 2021
Merged
5 tasks
@wesleyboar wesleyboar merged commit 774a67c into main--v-3-5-0 Nov 15, 2021
@wesleyboar wesleyboar deleted the task/GH-93-GH-142-GH-133-article-list-plugins-and-styles--no-reverts branch November 15, 2021 22:51
@wesleyboar
Copy link
Member Author

wesleyboar commented Nov 15, 2021

Merged—not to main—for posterity.

@wesleyboar
Copy link
Member Author

wesleyboar commented Nov 15, 2021

The plugin instances used on frontera-home-2021-03 (which had existed at https://dev.fronteraweb.tacc.utexas.edu/ before FP-1360) are preserved in case needed for testing changes pulled from this PR:
plugins-frontera-home-2021-03-with-plugins--mod-for-import.zip

This was referenced Dec 22, 2021
Closed
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@taoteg taoteg taoteg approved these changes

Assignees

No one assigned

Labels

blocked Unable to continue work priority ▼ Low priority

Projects

None yet

Milestone

No milestone

3 participants

@wesleyboar @taoteg