From 1cf5c4258985ecfef085216f88737ff87152104c Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Tue, 3 Aug 2021 19:19:32 -0500 Subject: [PATCH 1/4] GH-75: Data List - Styles --- .../src/_imports/components/c-data-list.css | 100 +++++++++++++ .../src/_imports/components/c-data-list.html | 141 ++++++++++++++++++ taccsite_cms/static/site_cms/css/src/site.css | 1 + 3 files changed, 242 insertions(+) create mode 100644 taccsite_cms/static/site_cms/css/src/_imports/components/c-data-list.css create mode 100644 taccsite_cms/static/site_cms/css/src/_imports/components/c-data-list.html diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/c-data-list.css b/taccsite_cms/static/site_cms/css/src/_imports/components/c-data-list.css new file mode 100644 index 000000000..fe4cfe39b --- /dev/null +++ b/taccsite_cms/static/site_cms/css/src/_imports/components/c-data-list.css @@ -0,0 +1,100 @@ +/* +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. + +__Notice__: +- User _should_ add arrangement and spacing modifiers. See Caveat #1. +- The _recommended_ markup is a definition list (`
`) or a table (``). + +__Caveat__: +1. With no modifiers added, the result is an incomplete vertical arrangement. +2. No provided repsonsive design solutions; users must apply their own. +3. Limited support for (table) `
` markup and `.c-data-list--is-horz`. + +.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 */ + +.c-data-list--is-horz, +.c-data-list--is-horz dd { + margin-bottom: 0; /* overwrite Bootstrap's `_reboot.scss` */ +} + + + +/* Elements i.e. Children */ + +.c-data-list__key { + --text-overflow: ':'; + @extend %x-truncate--one-line; +} +.c-data-list__key::after { + content: ':'; + display: inline; + padding-right: 0.25em; +} +.c-data-list--is-horz +> .c-data-list__value { + white-space: nowrap; +} + + + +/* Modifiers i.e. Types */ + +.c-data-list--is-horz { + display: flex; + flex-direction: row; +} +.c-data-list--is-horz +> .c-data-list__key ~ .c-data-list__key::before { + content: '|'; + display: inline-block; +} + +.c-data-list--is-horz.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.c-data-list--is-wide +> .c-data-list__key ~ .c-data-list__key::before { + padding-left: 1em; + padding-right: 1em; +} + +/* Overwrite Bootstrap `_reboot.scss` */ +.c-data-list--is-vert +> .c-data-list__value { + margin-left: 0; +} +.c-data-list--is-vert.c-data-list--is-narrow +> .c-data-list__value { + padding-left: 0; +} +.c-data-list--is-vert.c-data-list--is-wide +> .c-data-list__value { + padding-left: 2.5em; /* font-size 10px gives 40px (Firefox default margin) */ +} + +/* Truncate specific edge cases */ +.c-data-list--is-horz.c-data-list--is-wide +> .c-data-list__value { + @extend %x-truncate--one-line; +} +.c-data-list--is-vert.c-data-list--is-narrow +> .c-data-list__value { + @extend %x-truncate--one-line; +} diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/c-data-list.html b/taccsite_cms/static/site_cms/css/src/_imports/components/c-data-list.html new file mode 100644 index 000000000..f2e3aa085 --- /dev/null +++ b/taccsite_cms/static/site_cms/css/src/_imports/components/c-data-list.html @@ -0,0 +1,141 @@ + +
+

Horizontal & Wide

+
+
Given Name
+
King
+
Surname
+
Kong
+
Favorite Fruit
+
Banana
+
+
+
+

Horizontal & Narrow

+
+
Given Name
+
King
+
Surname
+
Kong
+
Favorite Fruit
+
Banana
+
+
+
+

Vertical & Wide

+
+
Given Name
+
King
+
Surname
+
Kong
+
Favorite Fruit
+
Banana
+
+
+
+

Horizontal & Narrow

+
+
Given Name
+
King
+
Surname
+
Kong
+
Favorite Fruit
+
Banana
+
+
+ + + + +
+

Horizontal & Wide

+
+ + + + + + + + + + + + + + +
Given NameKing
SurnameKong
Favorite FruitBanana
+ +
+

Horizontal & Narrow

+ + + + + + + + + + + + + + + +
Given NameKing
SurnameKong
Favorite FruitBanana
+
+
+

Vertical & Wide

+ + + + + + + + + + + + + + + +
Given NameKing
SurnameKong
Favorite FruitBanana
+
+
+

Vertical & Narrow

+ + + + + + + + + + + + + + + +
Given NameKing
SurnameKong
Favorite FruitBanana
+
diff --git a/taccsite_cms/static/site_cms/css/src/site.css b/taccsite_cms/static/site_cms/css/src/site.css index fab7ea028..2355299de 100644 --- a/taccsite_cms/static/site_cms/css/src/site.css +++ b/taccsite_cms/static/site_cms/css/src/site.css @@ -27,6 +27,7 @@ /* COMPONENTS */ /* GH-302: HELP: How should all of these become individually built files? */ /* GH-302: FAQ: Individually built stylesheets could be loaded explicitely. */ +@import url("_imports/components/c-data-list.css"); @import url("_imports/components/c-footer.css"); @import url("_imports/components/django.cms.css"); @import url("_imports/components/django.cms.blog.css"); From a6206c026dd232a121d297b60cec12ebccf52429 Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Wed, 4 Aug 2021 02:26:55 -0500 Subject: [PATCH 2/4] GH-75: Data List - Styles: Support tables --- .../src/_imports/components/c-data-list.css | 188 ++++++++++++++---- .../src/_imports/components/c-data-list.html | 48 ++--- 2 files changed, 175 insertions(+), 61 deletions(-) diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/c-data-list.css b/taccsite_cms/static/site_cms/css/src/_imports/components/c-data-list.css index fe4cfe39b..68f756d44 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/components/c-data-list.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/components/c-data-list.css @@ -3,14 +3,22 @@ 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. -__Notice__: -- User _should_ add arrangement and spacing modifiers. See Caveat #1. -- The _recommended_ markup is a definition list (`
`) or a table (``). - -__Caveat__: -1. With no modifiers added, the result is an incomplete vertical arrangement. +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 (`
`) or a `
`. + +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. Limited support for (table) `
` markup and `.c-data-list--is-horz`. +3. Inflexible support for `
`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 @@ -25,76 +33,182 @@ Styleguide Components.DataList + + /* Base i.e. Container */ -.c-data-list--is-horz, -.c-data-list--is-horz dd { - margin-bottom: 0; /* overwrite Bootstrap's `_reboot.scss` */ +table.c-data-list { + border-left: 0; + border-right: 0; } + + /* Elements i.e. Children */ +/* To truncate text */ .c-data-list__key { - --text-overflow: ':'; @extend %x-truncate--one-line; } -.c-data-list__key::after { +@supports(text-overflow: ':') { + .c-data-list__key:not(th) { + --text-overflow: ':'; + } +} + +/* To add colon */ +.c-data-list__key:not(th)::after { content: ':'; display: inline; padding-right: 0.25em; } -.c-data-list--is-horz -> .c-data-list__value { - white-space: nowrap; -} + + /* 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; } -.c-data-list--is-horz -> .c-data-list__key ~ .c-data-list__key::before { - content: '|'; - display: inline-block; +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; } -.c-data-list--is-horz.c-data-list--is-narrow -> .c-data-list__key ~ .c-data-list__key::before { +/* 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.c-data-list--is-wide -> .c-data-list__key ~ .c-data-list__key::before { +.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 */ -/* Overwrite Bootstrap `_reboot.scss` */ -.c-data-list--is-vert -> .c-data-list__value { +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; } -.c-data-list--is-vert.c-data-list--is-narrow -> .c-data-list__value { + +/* To space out key and value */ +.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.c-data-list--is-wide -> .c-data-list__value { +.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) */ } -/* Truncate specific edge cases */ -.c-data-list--is-horz.c-data-list--is-wide -> .c-data-list__value { - @extend %x-truncate--one-line; + + + + +/* Edge Cases */ + + + +/* Element Borders */ + +/* To remove most table borders */ +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 */ +/* 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; } -.c-data-list--is-vert.c-data-list--is-narrow -> .c-data-list__value { +table.c-data-list--is-horz th.c-data-list__key { + border-right: 0; +} + +/* To add fake border between key and value */ +.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 */ + +/* Non-table wide horz. layout is for areas expected to have enough space */ +.c-data-list--is-horz.c-data-list--is-wide:not(table) .c-data-list__value, +/* Non-table narr. vert. layout has enough space cuz values are beneath keys */ +.c-data-list--is-vert.c-data-list--is-narrow:not(table) .c-data-list__value, +/* Table vert. layout does NOT have enough space but text would escape table */ +table.c-data-list--is-vert .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) */ + +.c-data-list--is-horz:not(table) { align-items: baseline; } + +/* CAVEAT: This causes th and td cell borders to be offset */ +table.c-data-list--is-horz tr { align-items: baseline; } + +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; } diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/c-data-list.html b/taccsite_cms/static/site_cms/css/src/_imports/components/c-data-list.html index f2e3aa085..bccfd1c83 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/components/c-data-list.html +++ b/taccsite_cms/static/site_cms/css/src/_imports/components/c-data-list.html @@ -2,8 +2,8 @@

Horizontal & Wide

+ c-data-list--is-horz + c-data-list--is-wide">
Given Name
King
Surname
@@ -15,8 +15,8 @@

Horizontal & Wide

Horizontal & Narrow

+ c-data-list--is-horz + c-data-list--is-narrow">
Given Name
King
Surname
@@ -28,8 +28,8 @@

Horizontal & Narrow

Vertical & Wide

+ c-data-list--is-vert + c-data-list--is-wide">
Given Name
King
Surname
@@ -41,8 +41,8 @@

Vertical & Wide

Horizontal & Narrow

+ c-data-list--is-vert + c-data-list--is-narrow">
Given Name
King
Surname
@@ -57,10 +57,10 @@

Horizontal & Narrow

Horizontal & Wide

-
- +
+ @@ -78,10 +78,10 @@

Horizontal & Wide

Horizontal & Narrow

-
Given Name King
- +
+ @@ -99,10 +99,10 @@

Horizontal & Narrow

Vertical & Wide

-
Given Name King
- +
+ @@ -120,10 +120,10 @@

Vertical & Wide

Vertical & Narrow

-
Given Name King
- +
+ From f5d4d5fe3af9e1d22f0a5ba7893f72440d943759 Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Wed, 4 Aug 2021 10:06:44 -0500 Subject: [PATCH 3/4] GH-75: Data List - Styles: Upgrades & New Caveat - Replicate post-key colon with space for tables. - Replace implicit truncation with modifier `should-truncate-values`. - Comment on Firefox font alignment caveat. --- .../src/_imports/components/c-data-list.css | 15 ++++---- .../src/_imports/components/c-data-list.html | 36 ++++++++++--------- 2 files changed, 28 insertions(+), 23 deletions(-) diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/c-data-list.css b/taccsite_cms/static/site_cms/css/src/_imports/components/c-data-list.css index 68f756d44..b12de2e7d 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/components/c-data-list.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/components/c-data-list.css @@ -58,13 +58,17 @@ table.c-data-list { } } -/* To add colon */ +/* 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; +} @@ -191,11 +195,7 @@ table.c-data-list--is-horz th.c-data-list__key { /* FAQ: Truncate when doing is unlikely to almost entirely obscure text */ /* Non-table wide horz. layout is for areas expected to have enough space */ -.c-data-list--is-horz.c-data-list--is-wide:not(table) .c-data-list__value, -/* Non-table narr. vert. layout has enough space cuz values are beneath keys */ -.c-data-list--is-vert.c-data-list--is-narrow:not(table) .c-data-list__value, -/* Table vert. layout does NOT have enough space but text would escape table */ -table.c-data-list--is-vert .c-data-list__value { +.c-data-list--should-truncate-values .c-data-list__value { @extend %x-truncate--one-line; } @@ -207,7 +207,8 @@ table.c-data-list--is-vert .c-data-list__value { .c-data-list--is-horz:not(table) { align-items: baseline; } -/* CAVEAT: This causes th and td cell borders to be offset */ +/* CAVEAT: On Firefox (for "Benton Sans"), `align-items` is ineffectual */ +/* CAVEAT: This causes - + @@ -83,7 +85,7 @@

Horizontal & Narrow

c-data-list--is-narrow"> - + @@ -98,13 +100,14 @@

Horizontal & Narrow

Given Name King and cell borders to be offset */ table.c-data-list--is-horz tr { align-items: baseline; } table.c-data-list--is-vert th.c-data-list__key, diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/c-data-list.html b/taccsite_cms/static/site_cms/css/src/_imports/components/c-data-list.html index bccfd1c83..dde6d6c5b 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/components/c-data-list.html +++ b/taccsite_cms/static/site_cms/css/src/_imports/components/c-data-list.html @@ -1,10 +1,11 @@
-

Horizontal & Wide

+

Horizontal & Wide & Truncate Values

-
Given Name
+ c-data-list--is-wide + c-data-list--should-truncate-values"> +
Name
King
Surname
Kong
@@ -17,7 +18,7 @@

Horizontal & Narrow

-
Given Name
+
Name
King
Surname
Kong
@@ -30,7 +31,7 @@

Vertical & Wide

-
Given Name
+
Name
King
Surname
Kong
@@ -39,11 +40,12 @@

Vertical & Wide

-

Horizontal & Narrow

+

Vertical & Narrow & Truncate Values

-
Given Name
+ c-data-list--is-narrow + c-data-list--should-truncate-values"> +
Name
King
Surname
Kong
@@ -62,7 +64,7 @@

Horizontal & Wide

c-data-list--is-wide">
Given NameName King
Given NameName King
-

Vertical & Wide

+

Vertical & Wide & Truncate Values

+ c-data-list--is-wide + c-data-list--should-truncate-values"> - + @@ -119,13 +122,14 @@

Vertical & Wide

Given NameName King
-

Vertical & Narrow

+

Vertical & Narrow & Truncate Values

+ c-data-list--is-narrow + c-data-list--should-truncate-values"> - + From eb86d5065dcad9d7918647e03e61ec5ef2de6d1f Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Wed, 4 Aug 2021 11:58:31 -0500 Subject: [PATCH 4/4] GH-75: Data List - Styles: Better Comments --- .../css/src/_imports/components/c-data-list.css | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/c-data-list.css b/taccsite_cms/static/site_cms/css/src/_imports/components/c-data-list.css index b12de2e7d..374ac3c97 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/components/c-data-list.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/components/c-data-list.css @@ -141,7 +141,7 @@ table.c-data-list--is-vert { margin-left: 0; } -/* To space out key and value */ +/* 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; @@ -161,7 +161,7 @@ table.c-data-list--is-vert.c-data-list--is-wide td.c-data-list__value { /* Element Borders */ -/* To remove most table 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; @@ -173,7 +173,7 @@ table.c-data-list--is-horz td.c-data-list__value { border-bottom: 0; } -/* To keep real border between key and value */ +/* 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; @@ -182,7 +182,7 @@ table.c-data-list--is-horz th.c-data-list__key { border-right: 0; } -/* To add fake border between key and value */ +/* 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: '|'; @@ -194,7 +194,6 @@ table.c-data-list--is-horz th.c-data-list__key { /* Truncate Values */ /* FAQ: Truncate when doing is unlikely to almost entirely obscure text */ -/* Non-table wide horz. layout is for areas expected to have enough space */ .c-data-list--should-truncate-values .c-data-list__value { @extend %x-truncate--one-line; } @@ -205,11 +204,13 @@ table.c-data-list--is-horz th.c-data-list__key { /* 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
Given NameName King
and 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; }