Skip to content

GH-75: Data List - Styles / Component #305

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.

Sign up for GitHub

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

Merged
wesleyboar merged 4 commits into from
Aug 9, 2021
Merged

GH-75: Data List - Styles / Component #305

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1cf5c42
GH-75: Data List - Styles
wesleyboar Aug 4, 2021
a6206c0
GH-75: Data List - Styles: Support tables
wesleyboar Aug 4, 2021
f5d4d5f
GH-75: Data List - Styles: Upgrades & New Caveat
wesleyboar Aug 4, 2021
eb86d50
GH-75: Data List - Styles: Better Comments
wesleyboar Aug 4, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
216 changes: 216 additions & 0 deletions taccsite_cms/static/site_cms/css/src/_imports/components/c-data-list.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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; }
145 changes: 145 additions & 0 deletions taccsite_cms/static/site_cms/css/src/_imports/components/c-data-list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,145 @@
<!-- D. Lists -->
<article>
<h4>Horizontal &amp; Wide &amp; Truncate Values</h4>
<dl class="c-data-list
c-data-list--is-horz
c-data-list--is-wide
c-data-list--should-truncate-values">
<dt class="c-data-list__key">Name</dt>
<dd class="c-data-list__value">King</dd>
<dt class="c-data-list__key">Surname</dt>
<dd class="c-data-list__value">Kong</dd>
<dt class="c-data-list__key">Favorite Fruit</dt>
<dd class="c-data-list__value">Banana</dd>
</dl>
</article>
<article>
<h4>Horizontal &amp; Narrow</h4>
<dl class="c-data-list
c-data-list--is-horz
c-data-list--is-narrow">
<dt class="c-data-list__key">Name</dt>
<dd class="c-data-list__value">King</dd>
<dt class="c-data-list__key">Surname</dt>
<dd class="c-data-list__value">Kong</dd>
<dt class="c-data-list__key">Favorite Fruit</dt>
<dd class="c-data-list__value">Banana</dd>
</dl>
</article>
<article>
<h4>Vertical &amp; Wide</h4>
<dl class="c-data-list
c-data-list--is-vert
c-data-list--is-wide">
<dt class="c-data-list__key">Name</dt>
<dd class="c-data-list__value">King</dd>
<dt class="c-data-list__key">Surname</dt>
<dd class="c-data-list__value">Kong</dd>
<dt class="c-data-list__key">Favorite Fruit</dt>
<dd class="c-data-list__value">Banana</dd>
</dl>
</article>
<article>
<h4>Vertical &amp; Narrow &amp; Truncate Values</h4>
<dl class="c-data-list
c-data-list--is-vert
c-data-list--is-narrow
c-data-list--should-truncate-values">
<dt class="c-data-list__key">Name</dt>
<dd class="c-data-list__value">King</dd>
<dt class="c-data-list__key">Surname</dt>
<dd class="c-data-list__value">Kong</dd>
<dt class="c-data-list__key">Favorite Fruit</dt>
<dd class="c-data-list__value">Banana</dd>
</dl>
</article>



<!-- Tables -->
<article>
<h4>Horizontal &amp; Wide</h4>
<table class="c-data-list
c-data-list--is-horz
c-data-list--is-wide">
<tbody>
<tr>
<th class="c-data-list__key">Name</th>
<td class="c-data-list__value">King</td>
</tr>
<tr>
<th class="c-data-list__key">Surname</th>
<td class="c-data-list__value">Kong</td>
</tr>
<tr>
<th class="c-data-list__key">Favorite Fruit</th>
<td class="c-data-list__value">Banana</td>
</tr>
</tbody>
</table>
</article>
<article>
<h4>Horizontal &amp; Narrow</h4>
<table class="c-data-list
c-data-list--is-horz
c-data-list--is-narrow">
<tbody>
<tr>
<th class="c-data-list__key">Name</th>
<td class="c-data-list__value">King</td>
</tr>
<tr>
<th class="c-data-list__key">Surname</th>
<td class="c-data-list__value">Kong</td>
</tr>
<tr>
<th class="c-data-list__key">Favorite Fruit</th>
<td class="c-data-list__value">Banana</td>
</tr>
</tbody>
</table>
</article>
<article>
<h4>Vertical &amp; Wide &amp; Truncate Values</h4>
<table class="c-data-list
c-data-list--is-vert
c-data-list--is-wide
c-data-list--should-truncate-values">
<tbody>
<tr>
<th class="c-data-list__key">Name</th>
<td class="c-data-list__value">King</td>
</tr>
<tr>
<th class="c-data-list__key">Surname</th>
<td class="c-data-list__value">Kong</td>
</tr>
<tr>
<th class="c-data-list__key">Favorite Fruit</th>
<td class="c-data-list__value">Banana</td>
</tr>
</tbody>
</table>
</article>
<article>
<h4>Vertical &amp; Narrow &amp; Truncate Values</h4>
<table class="c-data-list
c-data-list--is-vert
c-data-list--is-narrow
c-data-list--should-truncate-values">
<tbody>
<tr>
<th class="c-data-list__key">Name</th>
<td class="c-data-list__value">King</td>
</tr>
<tr>
<th class="c-data-list__key">Surname</th>
<td class="c-data-list__value">Kong</td>
</tr>
<tr>
<th class="c-data-list__key">Favorite Fruit</th>
<td class="c-data-list__value">Banana</td>
</tr>
</tbody>
</table>
</article>
1 change: 1 addition & 0 deletions taccsite_cms/static/site_cms/css/src/site.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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");
Expand Down