GH-88: System Specs Plugin

[wesleyboar]

To Do (Done)

• GH-83: Callout Plugin #324
• Quick: Support Non-Bootstrap Link & Picture Plugins #278
• GH-89: (Minimal) System Monitor Plugin (a.k.a. SysMon) #297
• GH-298: Add "See All" Link Component #300
• GH-75: Data List - Plugin #308
• GH-98: Typography #312
• GH-310: Breadcrumbs & Standard Template #311
• Resolve description length inquiry.
• Test suggested boolean logic simplification.

Overview

Create System Specs plugin.

Issues

• Closes System Specs - Styles & Plugin #88

Screenshots

Form

Specifications	Footer Link & Subsystems	Sub. Data, Image, Monitor, Adv.

Render

576px	768px	992px	1200px

TACC: Shared UI - Constants - Breakpoints

Structure

The "Style" elements are a necessary evil until I create Section plugin (GH-91).

Testing

1. If no environment, then prepare to test CMS changes.

2. In CMS container, run python3 manage.py migrate.

3. On CMS website, logged in as admin, create a new "Frontera System" page.

4. On the new page:

   Optional steps produce a webpage that more exactly matches the Frontera System page design.

   • (optional) Choose "Standard" template (to get Breadcrumbs).

   • (optional) Add two "Generic" > "Style" plugins (to create Sections) with:

     Details

     • "CLASS NAME": ---------
     • "TAG TYPE": section
     • "Advanced settings" "ADDITIONAL CLASSES": o-section, o-section--style-light

   • (required) Add "TACC Site" > "System Specs" plugin (optionally within "Style" plugin).

   • (optional) Add "TACC Site" > "Callout" plugin with any content (optionally within "Style" plugin).

5. Ensure the following behavior:

   Required Behavior

   1. The "Description" is required.
   2. All "Specifications" specs are optional.
   3. Any "Specifications" specs provided appear as table row with appropriate label and value.
   4. The "Footer link" is optional.
   5. The "Footer link" fields still work like those from a "Generic" > "Link" plugin.
   6. The "Subsystems … - Intro…" "… Title" is optional.
   7. The "Subsystems … - Intro…" "Description" is optional.
   8. The "Subsystems … - Data", "Image", and "System monitor" instructions are clear.
   9. The plugins available for "Subsystems … - Data", "Image", and "System monitor" are:
      • "Generic" > "Image"
      • "TACC Site" > "Data List"
      • "TACC Site" > "System Monitor"
   10. The "Subsystems … - Data", "Image", and "System monitor" instructions work as written:
       • Adding/Nesting a "TACC Site" > "Data List" shows the data on the bottom(-right).
       • Adding/Nesting a "Generic" > "Image" shows the image on the left (or top).
       • Adding/Nesting a "TACC Site" > "System Monitor" shows the monitor a bottom of image.
   11. Styles match those of the Frontera System page design with expected differences:
       • Spacing in webpage will be similar to, but more consistent than, Design spacing.
       • Spacing between System Specs and Callout will be 45px (averaged from multiple designs).
       • (I can think of no others. Let me know what you find. I'll confirm whether it's a bug.)
   12. Viewing page on very narrow screen matches Frontera System page mobile design.

Notes

This plugin will be used first on [Frontera System page], and then on TACC system pages (e.g. stampede2, longhorn, stockyard).

[iamthatian]

Everything works well! Will approve.

One question I had was if there should be a limit to how long the description should be?
It seemed to break the style if the description gets too long.

[wesleyboar]

@duckonomy Changes made.

• 755fbbd
• f32ac38

[Should there] be a limit to how long the description should be?

Yes. Excellent catch. I've set 500, which is:

Reasoning

• twice the description for the first use case (Frontera System Page, in screenshots)
• enough for someone to use more paragraph (but not too much more) than data table
• easy to change if Design later thinks users should be allowed to add more

---

Extra Thoughts

The problem with text limits is that on some window widths the text may be "too much" and on some window widths the text is not enough. But some limit should exist to prevent someone from entering the text of a novel, or relying solely on "Description" when they should use a Data List table.

[iamthatian]

LGTM!