Skip to content
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.

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

GH-245/FP-1097: v1–v2 Migration Stylesheet (via submod) #274

Merged
merged 31 commits into from
Aug 13, 2021

Conversation

wesleyboar
Copy link
Member

@wesleyboar wesleyboar commented Jul 9, 2021

Related

This PR relies on TACC/Core-CMS-Resources#59.

Overview

Add optional stylesheet to load v1 styles for CMS migrations that don't have a new design.

Issues

Changes

  • Core:
    • Docs: Add instructions to main Readme for migration.
  • Submodule (Summary):
    • New: Update submodule to support "migration" stylesheet per project.
    • New: Update submodule custom projects accordingly.

Screenshots

Homepage
Paragraph Font Size

* Frontera Dev may be running another branch (such as dev for #259).

Testing

Environments

Changes

  1. Dropdown font size should be:

    • 16px
  2. Paragraph font size should be:

    • 15px
    • applied last by migrate.v1_v2.css
    • (Frontera*) have less overrides than on Production

    Screenshots
  3. All style should match between:

    • of 3Dem Staging and 3Dem Prod
    • of Frontera Dev* and Frontera Prod
    • of A2CPS Pre-Prod and A2CPS Prod

    on all pages (excluding content within iframes†).

    Obvious failures would be…
    • heading font size
    • heading font-family
    • spacing between content
    • header styles

* Frontera Dev may be running another branch (such as dev for #259).
This content, and its styling, is maintained by WMA.

Built Output

  1. Test .env as CUSTOM_ASSET_DIR=frontera-cms and run npm run build

    Expect no errors. Expect the following CSS build file output:

    Output taccsite_custom/…/static/…/css/build/migrate.v1_v2.css
    (...)
    /*!
    * bootswatch v3.3.7
    (...)
    */
    /*!
    * Bootstrap v3.3.7 (http://getbootstrap.com)
    (...)
    */
    /*! normalize.css v3.0.3 (...) */(...)
    /*!
    * AngularJS Material Design
    (...)
    */(...)
    /*!
    * CoreV1 Portal Stylesheet `portal.css`
    (...)
    */(...)
    /*!
    * CoreV1 Portal Stylesheet `frontera.css`
    (...)
    */(...)
    
  2. Test .env as the following and run npm run build

    • CUSTOM_ASSET_DIR=example-cms
    • CUSTOM_ASSET_DIR=a2cps-cms
    • CUSTOM_ASSET_DIR=neuronex-cms

    Expect no errors. Expect the following CSS build file output:

    taccsite_custom/…/static/…/css/build/migrate.v1_v2.css
    (...)
    /*!
    * bootswatch v3.3.7
    (...)
    */
    /*!
    * Bootstrap v3.3.7 (http://getbootstrap.com)
    (...)
    */
    /*! normalize.css v3.0.3 (...) */(...)
    /*!
    * AngularJS Material Design
    (...)
    */(...)
    /*!
    * CoreV1 Portal Stylesheet `portal.css`
    (...)
    */(...)
    

Notes

To Do (Done)
  • Fix taccsite_custom conflict.
  • Confirm approval with approve-er.

Known Issues

Layout Change at Different Screen Widths than v1

Layout changes happen at slightly different screen widths, because Bootstrap 3 → Bootstrap 4 moves breakpoints by one notch.

Note that the changes to the grid breakpoints in v4 means that you’ll need to go one breakpoint larger to achieve the same results.

Snippets

For Sites Migrated Before GH-245 (Frontera)

Pros:

Cons:

NAME:

GH-245: CSS: Temp. Fix Migration Style Discrepancies

HTML:
<style type="text/css">
/* TODO: After GH-245 is merged and deployed to this site, remove this code */
/* FAQ: To make `1rem` equal the size that CoreV2 CMS Bootstrap expects */
/* FAQ: This fixes things like:
        - Dropdown Font Size (in 2020– header design)
*/
/* !!!: Do NOT unset <html> font size on Frontera */
/* FAQ: Frontera homepage redesign relies on its `html { font-size: 10px }` */
/*
html { font-size: unset; }
*/
.s-header .dropdown-menu { font-size: 16px; }
</style>
SLUG:

gh-245-css-temp-fix-migration-style-discrepancies

For Sites Migrated During/After GH-245 (3Dem.org, etc.)

Pros:

Cons:

NAME:

GH-245: CSS: Migration Stylesheet CoreV1 to CoreV2 (last commit: …)

HTML:
<style type="text/css">
/* … *//* FAQ: Copy the content of the built file `taccsite_cms/static/site_cms/css/build/migrate.v1_v2.css` */
</style>
SLUG:

gh-245-css-migration-stylesheet-corev1-corev2

@wesleyboar wesleyboar changed the title GH-245: v1–v2 Migration Fix (Source FIles) GH-245/FP-1097: v1–v2 Migration Stylesheet (move to submod) Jul 9, 2021
@wesleyboar wesleyboar changed the title GH-245/FP-1097: v1–v2 Migration Stylesheet (move to submod) GH-245/FP-1097: v1–v2 Migration Stylesheet (via submod) Jul 9, 2021
@wesleyboar wesleyboar added the priority ▲▲ Very high priority label Jul 9, 2021
@wesleyboar wesleyboar linked an issue Jul 9, 2021 that may be closed by this pull request
Avoid this error that occurred on A2CPS

```
AttributeError: module 'taccsite_custom._shared' has no attribute 'default_app_config'
```

via Core-Portal-Deployments 91966f8.
@wesleyboar wesleyboar requested review from taoteg and rstijerina July 9, 2021 22:22
@wesleyboar wesleyboar mentioned this pull request Jul 12, 2021
@wesleyboar
Copy link
Member Author

A2CPS CSS Fixes (to match v1 UI more closely, and in an isolated manner) have been added.

Copy link
Collaborator

@taoteg taoteg left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@wesleyboar
Copy link
Member Author

wesleyboar commented Aug 12, 2021

The approve-er has has requested (private message) to confirm his approval before I merge.

Copy link
Collaborator

@taoteg taoteg left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@wesleyboar wesleyboar merged commit e36f93c into main Aug 13, 2021
@wesleyboar wesleyboar deleted the task/GH-245-aka-GH-56-fix-cepv1-style-migration branch August 13, 2021 00:26
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
priority ▲▲ Very high priority
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Fix CEPv1 Migration Style Discrepancies
2 participants