GH-245/FP-1097: v1–v2 Migration Stylesheet

_shared/__init__.md

@@ -0,0 +1,8 @@
+# Why Does `__init.py__ Exist Here?
+
+Locally, this file is unnecessary. But when deployed to a remote server, it prevents an error.
+
+## Reference
+
+- https://github.com/TACC/Core-Portal-Deployments/commit/f2ea0d094da19b9942288fb5660fe00fb0e6778b
+- https://github.com/TACC/Core-Portal-Deployments/commit/62f9d225c5049f29daedc95af2da546b83c9a474

_shared/static/css/src/README.md

@@ -0,0 +1,15 @@
+# TACC CMS Per-Site Resources - Shared - Stylesheets
+
+See [Core CMS Stylesheets `README.md`][core-css-readme].
+
+## Naming Format
+
+| Format | Description |
+| :- | :- |
+| [...][core-css-readme-naming] | [...][core-css-readme-naming]
+| `migrate.*.css` | styles that apply to websites that have been migrated[^1]
+
+[^1]: When sensible, use the migration folder name, i.e. `migrate.v1_v2.css`.
+
+[core-css-readme]: https://github.com/TACC/Core-CMS/blob/main/taccsite_cms/static/site_cms/css/src/README.md
+[core-css-readme-naming]: https://github.com/TACC/Core-CMS/blob/main/taccsite_cms/static/site_cms/css/src/README.md#naming-format

_shared/static/css/src/_migrations/README.md

@@ -0,0 +1,38 @@
+# TACC CMS - Stylesheets - Migrations
+
+ORGANIZE STYLES HERE!
+
+These folders' styles are only to be imported by other stylesheets.
+
+CMS websites that were migrated from earlier instances may need these styles.
+
+## Rules
+
+1. Folders __must__ include any top-of-file comments from source file.
+1. Folders __must__ be [named with appropriate format](#Naming%20Format).
+1. Files __should__ [comment on purpose and means of acquisition](#Documentation%20Format).
+1. Files __must__ include a top-of-file comments (from source file or by TACC).
+1. Files (except this document) __must__ be in a folder.
+
+## Documentation Format
+
+```css
+/*
+Pre-2020 Django CMS Bootstrap 3.3.7
+HOW: https://dev.help.com/some-tool
+HOW: Included code that ...
+HOW: Included code that ... (because ...) e.g.:
+  - ...
+HOW: Did NOT incude code that ...
+SRC: https://bitbucket.org/taccaci/frontera/src/master/client/css/bootstrap.min.css
+*/
+```
+
+## Naming Format
+
+| Format | Description |
+| :- | :- |
+| `A_B/` | from old "A" to new "B"[^1]
+| `v1_v2/` | from Core__V1__ CMS (pre-2020) to Core__V2__ CMS (2020+)
+
+[^1]: Where "A" and "B" represent a version, or historical state, of the CMS.

frontera-cms/static/frontera-cms/css/archive/angular-material.1.1.8.css → _shared/static/css/src/_migrations/v1_v2/angular-material.1.1.8.css

@@ -1,10 +1,10 @@
 /*
-NOTE: Relevant styles for Pre-2020 AngularJS Material Design
-      - How: https://developers.google.com/web/tools/chrome-devtools/coverage
-      - How: Include code that _is being_ used
-      - How: Include code that _could be_ used (because it is generic enough)
-            - `[tabindex="-1"]:focus`
-      - Source CSS: https://ajax.googleapis.com/ajax/libs/angular_material/1.1.8/angular-material.min.css
+CoreV1 Portal AngularJS Material Design
+HOW: https://developers.google.com/web/tools/chrome-devtools/coverage
+HOW: Included code that _is being_ used
+HOW: Included code that _could be_ used (because it is generic enough) e.g.:
+  - `[tabindex="-1"]:focus`
+SRC: https://ajax.googleapis.com/ajax/libs/angular_material/1.1.8/angular-material.min.css
 */
 
 /*!

frontera-cms/static/frontera-cms/css/archive/bootstrap.3.3.7.css → _shared/static/css/src/_migrations/v1_v2/bootstrap.3.3.7.css

@@ -1,13 +1,15 @@
 /*
-NOTE: Relevant styles for Pre-2020 Bootstrap 3.3.7
-      - How: https://developers.google.com/web/tools/chrome-devtools/coverage
-      - How: Include code that _is being_ used
-      - How: Include code that _could be_ used (because it includes used selector)
-            - `__selector_start__` `__used_selector__` `__selector_end__`
-      - How: Did NOT incude code that is already in Bootstrap 4.0.0
-      - How: Did NOT incude code that represents outdated web practices
-            - `outline: none`
-      - Source CSS: https://bitbucket.org/taccaci/frontera/src/master/client/css/bootstrap.min.css
+CoreV1 Django CMS Bootstrap 3.3.7
+HOW: https://developers.google.com/web/tools/chrome-devtools/coverage
+HOW: Included code that _is being_ used
+HOW: Included code that _could be_ used (because it has used selector) e.g.:
+  - `used_selector …`
+  - `used_selector`
+  - `… used_selector`
+HOW: Did NOT incude code that is already in Bootstrap 4.0.0
+HOW: Did NOT incude code that represents outdated web practices e.g.:
+  - `outline: none`
+SRC: https://bitbucket.org/taccaci/frontera/src/master/client/css/bootstrap.min.css
 */
 
 @import url("https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700");
@@ -137,7 +139,9 @@ th {
 /* … */
 
 html {
- font-size:10px;
+ /* Disabled by TACC */
+ /* FAQ: Let TACC handle influence `rem`; this and more may be deleted anyway */
+ /* font-size:10px; */
  -webkit-tap-highlight-color:rgba(0,0,0,0)
 }
 body {
@@ -260,6 +264,12 @@ p {
 
 /* … */
 
+table {
+ background-color: transparent
+}
+
+/* … */
+
 .btn {
  display:inline-block;
  margin-bottom:0;
@@ -425,6 +435,12 @@ input[type="button"].btn-block {
 
 /* … */
 
+table {
+ font-size: 12px
+}
+
+/* … */
+
 .label {
  padding-left:1em;
  padding-right:1em;

_shared/static/css/src/_migrations/v1_v2/main.portal.css

@@ -0,0 +1,29 @@
+/*
+CoreV1 Portal Stylesheet `portal.css`
+HOW: Manually find and retain code that is still used
+SRC: https://bitbucket.org/taccaci/frontera/src/master/client/css/portal.css
+*/
+
+/*!
+ * CoreV1 Portal Stylesheet `portal.css`
+ * https://bitbucket.org/taccaci/frontera/src/master/client/css/portal.css
+ * 59e345f
+ */
+
+/* … */
+
+body {
+  font-family: 'Roboto', sans-serif;
+
+  /* TACC: Disabled */
+  /* FAQ: Wesley forgot why; this and more may be deleted anyway */
+  /* min-height: 100%; */
+  /* position: relative; */
+}
+
+/* … */
+
+footer {
+  /* … */
+  margin-top: 1em;
+}

_shared/static/css/src/migrate.v1_v2.css

@@ -0,0 +1,5 @@
+/* DO NOT ADD STYLES HERE; ONLY IMPORT OTHER STYLESHEETS */
+
+@import url("_migrations/v1_v2/bootstrap.3.3.7.css");
+@import url("_migrations/v1_v2/angular-material.1.1.8.css");
+@import url("_migrations/v1_v2/main.portal.css");

a2cps-cms/snippets/gh-245-markup-single-paragraph-whitespace.html

@@ -0,0 +1 @@
+<p>&nbsp;<!-- To mimic 2020 site whitespace in Cards with reusable tracable code --></p>

a2cps-cms/static/a2cps-cms/css/src/_migrations/v1_v2/a2cps.css

@@ -0,0 +1,114 @@
+/*
+A2CPS Migration Styles
+HOW: Manually find discrepencies in UI that seem specific to A2CPS
+*/
+
+/*!
+ * A2CPS Migration Styles
+ */
+
+
+
+
+
+/* ELEMENTS */
+
+/* Table Content */
+
+table,
+td,
+th {
+  /* To mimic 2020 site by restoring browser default */
+  border-color: inherit; /* override `site.css` */
+}
+
+/* To mimic unscoped styles from Angular component that v1 CMS assumes exist */
+/* SEE: https://bitbucket.org/taccaci/frontera/src/8167403/client/src/angular/data_depot/projects/components/project-meta/project-meta.css?#project-meta.css-34 */
+td {
+  padding-right: 2.25em;
+  padding-bottom: 0.5em;
+}
+
+
+
+
+
+/* COMPONENTS */
+
+
+
+/* COMPONENTS: TACC */
+
+/* Footer */
+
+.c-footer {
+  /* To mimic 2020 site `#footer` styles */
+  margin: 0;
+}
+
+
+
+/* COMPONENTS: Bootstrap */
+
+/* Cards */
+
+/* To mimic 2020 site faux cards via Bootstrap cards */
+/* SEE: https://a2cps.org/patients/.../ */
+/* SEE: https://a2cps.org/researchers/ */
+/* FAQ: A faux cards was a <div> (card) with two <p>'s (header, body) */
+.card {
+  /* To clear `.card` styles */
+  border-radius: 0;
+
+  /* To mimic header <p> (from inline styles) */
+  margin-top: 20px;
+
+  /* To mimic body <img> (from inline styles) */
+  margin-bottom: 20px;
+}
+
+.card-header {
+  /* To mimic header <p> (from inline styles) */
+  padding: 15px;
+
+  /* To mimic header <p>'s typography (from inline styles) */
+  text-align: center;
+  font-weight: bold;
+  font-size: 16px;
+}
+.card-header:first-child {
+  /* To clear `.card` styles */
+  border-radius: 0;
+}
+
+.card-body {
+  /* SEE: https://a2cps.org/connect/ */
+  padding: 15px;
+}
+
+/* To mimic faux card inline styles */
+.card.bg-light .card-header,
+.card.bg-transparent .card-header {
+  background-color: #DFDFDF;
+  border-bottom-color: #DFDFDF;
+}
+.card.bg-light .card-body,
+.card.bg-transparent .card-body {
+  /* SEE: https://a2cps.org/connect/ */
+  border-color: #DFDFDF;
+}
+
+/* Cards: "For ..." Pages */
+.s-page-cards .card,
+.s-page-cards .card-header {
+  /* To clear `.card` styles */
+  border: none;
+}
+.s-page-cards .card-header p {
+  /* To prevent <p> (forced by Text plugin WYSIWIG) from breaking layout */
+  margin: 0;
+}
+.s-page-cards .card-body {
+  /* To clear `.card` styles */
+  padding: 0;
+}

a2cps-cms/static/a2cps-cms/css/src/migrate.v1_v2.css

@@ -0,0 +1,4 @@
+/* DO NOT ADD STYLES HERE; ONLY IMPORT OTHER STYLESHEETS */
+
+@import url("../../../../../_shared/static/css/src/migrate.v1_v2.css");
+@import url("./_migrations/v1_v2/a2cps.css");

a2cps-cms/templates/fullwidth.html

@@ -14,6 +14,9 @@
 {% block assets_custom %}
   {{ block.super }}
 
-  <!-- TODO: GH-56 a.k.a. TACC/Core-CMS#245: Pending v1 styles -->
+  <!-- To style old CMS content on new CMS -->
+  <link rel="stylesheet" href="{% static 'a2cps-cms/css/build/migrate.v1_v2.css' %}">
+
+  <!-- To customize styles for this project -->
   <link rel="stylesheet" href="{% static 'a2cps-cms/css/build/site.css' %}">
 {% endblock assets_custom %}

example-cms/static/example-cms/css/src/migrate.v1_v2.css

@@ -0,0 +1,3 @@
+/* DO NOT ADD STYLES HERE; ONLY IMPORT OTHER STYLESHEETS */
+
+@import url("../../../../../_shared/static/css/src/migrate.v1_v2.css");

example-cms/templates/fullwidth.html

@@ -14,5 +14,9 @@
 {% block assets_custom %}
   {{ block.super }}
 
+  <!-- To style old CMS content on new CMS -->
+  <!-- <link rel="stylesheet" href="{% static 'example-cms/css/build/migrate.v1_v2.css' %}"> -->
+
+  <!-- To customize styles for this project -->
   <link rel="stylesheet" href="{% static 'example-cms/css/build/site.css' %}">
 {% endblock assets_custom %}

frontera-cms/static/frontera-cms/css/archive/main.frontera.css → frontera-cms/static/frontera-cms/css/src/_migrations/v1_v2/frontera.css

@@ -1,10 +1,15 @@
 /*
-NOTE: Relevant styles for Pre-2020 `frontera.scss`
-      - How: Manually find and retain code that is still used
-      - Source CSS: https://fronteraweb.tacc.utexas.edu/static/main.….css
-      - Source SCSS: https://bitbucket.org/taccaci/frontera/src/master/client/css/frontera.scss
+CoreV1 Portal Stylesheet `frontera.scss`
+HOW: Manually find and retain code that is still used
+SRC: https://fronteraweb.tacc.utexas.edu/static/main.___.css
+SRC: https://bitbucket.org/taccaci/frontera/src/master/client/css/frontera.scss
 */
 
+/*!
+ * CoreV1 Portal Stylesheet `frontera.css`
+ * https://bitbucket.org/taccaci/frontera/src/master/client/css/frontera.scss
+ */
+/* FAQ: Though CMS default font is `Benton Sans`, old content uses these */
 @font-face {
     font-family: BentonSansBold;
     src: url("/static/frontera-cms/fonts/archive/BentonSans-Bold.otf");
@@ -22,6 +27,7 @@ NOTE: Relevant styles for Pre-2020 `frontera.scss`
 
 /* … */
 
+/* HELP: Wesley assumes that old content uses these… but where? */
 @font-face {
 	font-family: 'icon-worksregular';
 	src: url('/static/frontera-cms/fonts/archive/icon-works-webfont.eot');

frontera-cms/static/frontera-cms/css/src/migrate.v1_v2.css

@@ -0,0 +1,5 @@
+/* DO NOT ADD STYLES HERE; ONLY IMPORT OTHER STYLESHEETS */
+
+@import url("../../../../../_shared/static/css/src/migrate.v1_v2.css");
+
+@import url("_migrations/v1_v2/frontera.css");

frontera-cms/static/frontera-cms/css/src/site.css

@@ -16,7 +16,7 @@
 /* … */
 
 /* COMPONENTS */
-@import url("_imports/components/tacc.c-footer.css");
+/* … */
 
 /* TRUMPS */
 /* … */