Skip to content

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

Merged
wesleyboar merged 31 commits intomainfrom
task/GH-245-aka-GH-56-fix-cepv1-style-migration
Aug 13, 2021
Merged

GH-245/FP-1097: v1–v2 Migration Stylesheet (via submod)#274
wesleyboar merged 31 commits intomainfrom
task/GH-245-aka-GH-56-fix-cepv1-style-migration

Conversation

@wesleyboar
Copy link
Member

@wesleyboar wesleyboar commented Jul 9, 2021 •
edited
Loading

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 added 15 commits June 3, 2021 17:59
@wesleyboar
GH-245: v1–v2 Migration Fix (Source FIles)
ddee682
@wesleyboar
GH-245: Standardize Migration Stylesheets
8d810a0
@wesleyboar
GH-245: Frontera to Use Standard Migration CSS
b5b1bb9
@wesleyboar
GH-245: Reduce Font Size Overrides by 2
e426622 
Also, add comments about certain commented-out code.
@wesleyboar
GH-245: Perma-comment for Portal CSS (required)
8f374e8
@wesleyboar
Merge branch 'main' into task/GH-245-fix-cepv1-style-migration
8bd6312
@wesleyboar
Merge branch 'main' into task/GH-245-fix-cepv1-style-migration
b38f820
@wesleyboar
GH-245: Update submodule to merge of main
dcf018f
@wesleyboar
Merge branch 'main' into task/GH-245-fix-cepv1-style-migration
09ee6c8
@wesleyboar
Merge branch 'main' into task/GH-245-fix-cepv1-style-migration
7f628c9
@wesleyboar
GH-245: 3Dem: Load migration stylesheet
41b521d
@wesleyboar
GH-245: Noop: Readme tweak (to trigger new build)
381db73
@wesleyboar
GH-245: Update submod
4b14872
@wesleyboar
GH-245/GH-56: Move migration styles to submodule
abc1456
@wesleyboar
Merge branch 'main' into task/GH-245-fix-cepv1-style-migration
e296622
@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 mentioned this pull request Jul 9, 2021
Closed
9 tasks
@wesleyboar wesleyboar added the priority ▲▲ Very high priority label Jul 9, 2021
@wesleyboar wesleyboar mentioned this pull request Jul 9, 2021
Merged
1 task
@wesleyboar wesleyboar linked an issue Jul 9, 2021 that may be closed by this pull request
Fix CEPv1 Migration Style Discrepancies #245
Closed
wesleyboar added 3 commits July 9, 2021 16:02
@wesleyboar
GH-245/GH-56: Try to avoid server crash
e8d864e 
Avoid this error that occurred on A2CPS

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

via Core-Portal-Deployments 91966f8.
@wesleyboar
GH-245/GH-56: Try to avoid server crash (new way)
9502d7e
@wesleyboar
GH-245/GH-56: Submod: Add small doc
9b0a0ef
@wesleyboar wesleyboar requested review from rstijerina and taoteg July 9, 2021 22:22
@wesleyboar wesleyboar mentioned this pull request Jul 12, 2021
Merged
@wesleyboar
Copy link
Member Author

wesleyboar commented Jul 21, 2021

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

taoteg
taoteg approved these changes Jul 29, 2021
View reviewed changes
Copy link
Contributor

@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 •
edited
Loading

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

taoteg
taoteg approved these changes Aug 12, 2021
View reviewed changes
Copy link
Contributor

@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
@wesleyboar wesleyboar mentioned this pull request Aug 31, 2021
Merged
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

@rstijerina rstijerina Awaiting requested review from rstijerina

Assignees

No one assigned

Labels

priority ▲▲ Very high priority

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Fix CEPv1 Migration Style Discrepancies

2 participants

@wesleyboar @taoteg