Merge branch 'main' into task/GH-93-GH-142-GH-133-article-list-plugin…

…s-and-styles--no-reverts

README.md

@@ -93,6 +93,28 @@ To support multiple instances of the CMS on one machine (i.e. local development)
     docker-compose -f docker-compose.custom.yml …
     ```
 
+### (Optional) Migrate Website from Older Version
+
+Some websites need static resources to supplement their migration.
+
+1. __If__ you did not [create your project by cloning `example-cms`](#custom-resources), __then__:
+    1. Copy `templates/fullwidth.html` from `taccsite_custom/example-cms/` to `taccsite_custom/name-of-project/`.
+    2. Copy `static/.../css/src/migrate.v1_v2.css` from `taccsite_custom/example-cms/` to `taccsite_custom/name-of-project/`.
+2. Update `taccsite_custom/name-of-project/templates/fullwidth.html` to load migration assets e.g.:
+    - Change
+
+    ```html
+      <!-- To style old CMS content on new CMS -->
+      <!-- <link rel="stylesheet" href="{% static 'example-cms/css/build/migrate.v1_v2.css' %}"> -->
+    ```
+
+    - To
+
+    ```html
+      <!-- To style old CMS content on new CMS -->
+      <link rel="stylesheet" href="{% static 'name-of-project/css/build/migrate.v1_v2.css' %}">
+    ```
+
 ## Run the CMS
 
 ### Prerequisites

taccsite_cms/static/site_cms/css/src/_imports/branding_logos.css

@@ -2,9 +2,8 @@
 /* TODO: Convert to a component */
 
 /* WARNING: NO-R/EM: Until Frontera CMS drops Bootstrap 3.7.1 (for old design)…
-            No `em` nor `rem` allowed, because they aren't consitently reliable.
-            - On Frontera CMS, `1rem` = `10px` and `body { font-size: 15px }`
-            - On any other CMS, `1rem` = `16px` (browser default). */
+            `em` nor `rem` was not allowed because results were not consistent.
+            UPDATE: As of PR #312, this has likely changed (untested). */
 
 /* Shared by All Templates */
 

taccsite_cms/static/site_cms/css/src/_imports/components/c-data-list.css

@@ -0,0 +1,216 @@
+/*
+Data List
+
+A list of pairs of values, where the titles/names of the values are aligned with each other and the values themselves are aligned with each other.
+
+Features:
+- Layout can be horizontal or vertical, wide or narrow.
+- Narrow layouts have minimal spacing. Wide layouts have extra spacing.
+- All layouts truncate keys. Some layouts truncate values.
+- Table keys do not have colons. Other keys do have colons.
+
+Notices:
+- User _should_ add arrangement and spacing modifiers. See Caveats #1.
+- The _recommended_ markup is a description list (`<dl>`) or a `<table>`.
+
+Caveats:
+1. With no modifiers added, the result is feature-limited vertical arrangement.
+2. No provided repsonsive design solutions; users must apply their own.
+3. Inflexible support for `<table>`s (flex and truncation in table is fragile).
+    - No protection from nesting caveats (whether is-wide or is-narrow takes precedence when one is nested inside the other).
+    - Specific (yet semantic) markup is required to benefit from all features.
+
+.c-data-list--is-horz - (arrangement) A horizontal list
+.c-data-list--is-vert - (arrangement) A vertical list
+.c-data-list--is-narrow - (spacing) A list that has limited horizontal space
+.c-data-list--is-wide - (spacing) A list that has ample horizontal space
+
+Markup: c-data-list.html
+
+Styleguide Components.DataList
+*/
+@import url("_imports/tools/x-truncate.css");
+
+
+
+
+
+/* Base i.e. Container */
+
+table.c-data-list {
+  border-left: 0;
+  border-right: 0;
+}
+
+
+
+
+
+/* Elements i.e. Children */
+
+/* To truncate text */
+.c-data-list__key {
+  @extend %x-truncate--one-line;
+}
+@supports(text-overflow: ':') {
+  .c-data-list__key:not(th) {
+    --text-overflow: ':';
+  }
+}
+
+/* To add colon (non-tables) */
+.c-data-list__key:not(th)::after {
+  content: ':';
+  display: inline;
+  padding-right: 0.25em;
+}
+
+/* To add space (instead of colon) (tables) */
+th.c-data-list__key {
+  padding-right: 0.25em;
+}
+
+
+
+
+/* Modifiers i.e. Types */
+/* FAQ: The `:not(table)` selectors avoid nesting caveats by using `>` */
+
+
+
+/* Horizontal */
+
+.c-data-list--is-horz {
+  display: flex;
+  flex-direction: row;
+}
+dl.c-data-list--is-horz,
+.c-data-list--is-horz dd.c-data-list__value {
+  margin-bottom: 0; /* overwrite Bootstrap's `_reboot.scss` */
+}
+
+/* To propogate flexbox layout so cells are flex items */
+table.c-data-list--is-horz tr,
+table.c-data-list--is-horz tbody {
+  min-width: 0;
+
+  display: flex;
+  flex-direction: row;
+}
+
+/* To space out key and value (non-tables) */
+.c-data-list--is-horz:not(table).c-data-list--is-narrow
+  > .c-data-list__key ~ .c-data-list__key::before {
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+}
+.c-data-list--is-horz:not(table).c-data-list--is-wide
+  > .c-data-list__key ~ .c-data-list__key::before {
+  padding-left: 1em;
+  padding-right: 1em;
+}
+/* To space out key and value (tables) */
+table.c-data-list--is-horz.c-data-list--is-narrow
+  tr:not(:first-child) th.c-data-list__key {
+  padding-left: 0.5em;
+}
+table.c-data-list--is-horz.c-data-list--is-narrow
+  td.c-data-list__value {
+  margin-right: 0.5em; /* use margin because text would show through padding */
+}
+table.c-data-list--is-horz.c-data-list--is-wide
+  tr:not(:first-child) th.c-data-list__key {
+  padding-left: 1em;
+}
+table.c-data-list--is-horz.c-data-list--is-wide
+  td.c-data-list__value {
+  margin-right: 1em; /* use margin because text would show through padding */
+}
+
+
+
+/* Vertical */
+
+table.c-data-list--is-vert {
+  width: 100%;
+  table-layout: fixed;
+}
+
+/* To overwrite Bootstrap `_reboot.scss` */
+.c-data-list--is-vert:not(table) > .c-data-list__value {
+  margin-left: 0;
+}
+
+/* To space out key and value (tables) */
+.c-data-list--is-vert:not(table).c-data-list--is-narrow > .c-data-list__value,
+table.c-data-list--is-vert.c-data-list--is-narrow td.c-data-list__value {
+  padding-left: 0;
+}
+.c-data-list--is-vert:not(table).c-data-list--is-wide > .c-data-list__value,
+table.c-data-list--is-vert.c-data-list--is-wide td.c-data-list__value {
+  padding-left: 2.5em; /* font-size 10px gives 40px (Firefox default margin) */
+}
+
+
+
+
+
+/* Edge Cases */
+
+
+
+/* Element Borders */
+
+/* To remove most borders (tables) */
+table.c-data-list--is-vert th.c-data-list__key,
+td.c-data-list__value {
+  border-left: 0;
+  border-right: 0;
+}
+table.c-data-list--is-horz th.c-data-list__key,
+table.c-data-list--is-horz td.c-data-list__value {
+  border-top: 0;
+  border-bottom: 0;
+}
+
+/* To keep real border between key and value (tables) */
+/* CAVEAT: Certain fonts may limit border height (see "Font Alignment") */
+table.c-data-list--is-horz tr:first-child th.c-data-list__key {
+  border-left: 0;
+}
+table.c-data-list--is-horz th.c-data-list__key {
+  border-right: 0;
+}
+
+/* To add fake border between key and value (non-tables) */
+.c-data-list--is-horz:not(table)
+  > .c-data-list__key ~ .c-data-list__key::before {
+  content: '|';
+  display: inline-block;
+}
+
+
+
+/* Truncate Values */
+/* FAQ: Truncate when doing is unlikely to almost entirely obscure text */
+
+.c-data-list--should-truncate-values .c-data-list__value {
+  @extend %x-truncate--one-line;
+}
+
+
+
+/* Font Alignment */
+/* NOTE: If font has different internal baseline per weight, use these */
+/* FAQ: "Benton Sans" needs this solution (as of 2021-07) */
+
+/* NOTE: This assumes key and value are flex items, not inline display */
+.c-data-list--is-horz:not(table) { align-items: baseline; }
+
+/* CAVEAT: On Firefox (for "Benton Sans"), `align-items` is ineffectual */
+/* CAVEAT: This causes <th> and <td> cell borders to be offset */
+table.c-data-list--is-horz tr { align-items: baseline; }
+
+/* NOTE: This assumes key and value are inline display, not flex items */
+table.c-data-list--is-vert th.c-data-list__key,
+table.c-data-list--is-vert td.c-data-list__value { vertical-align: baseline; }