Skip to content

Commit 715426c

Browse files
nginx-jacknginx-jack
authored
Tables: Add table themes and use data-grid (#348)
1 parent d547d57 commit 715426c

File tree

4 files changed

+137
-48
lines changed

4 files changed

+137
-48
lines changed

‎assets/css/v2/style.css‎

Lines changed: 41 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -207,6 +207,8 @@ textarea:not([rows]) {
207207
--table-min-column-spacing-wide: 0.75rem;
208208
--table-header-bottom-spacing: 1rem;
209209
--table-line-height: 1px;
210+
--table-inner-padding: 6px 10px;
211+
--table-color-divider: 0.7 0 0;
210212

211213
/* Details */
212214
--details-margin: 0.5rem 0rem;
@@ -1662,73 +1664,72 @@ a:hover {
16621664
/* MARK: Tables
16631665
*/
16641666
table {
1667+
border-collapse: collapse;
16651668
position: relative;
16661669
z-index: 0;
1670+
font-size: var(--font-step-0);
16671671

16681672
td {
1669-
padding: var(--table-row-space-between) 0;
1673+
vertical-align: middle;
1674+
padding: var(--table-inner-padding);
1675+
background: transparent;
1676+
border: var(--table-line-height) solid oklch(var(--table-color-divider));
16701677
}
16711678

16721679
th {
1673-
font-weight: bold;
1680+
font-weight: 500;
16741681
text-align: start;
1675-
vertical-align: top;
1676-
padding-block-end: var(--table-header-bottom-spacing);
1682+
vertical-align: bottom;
1683+
padding: var(--table-inner-padding);
16771684
}
16781685

16791686
tr {
16801687
position: relative;
16811688
}
1682-
1683-
tr::after {
1684-
content: "";
1685-
position: absolute;
1686-
border-bottom: var(--table-line-height) solid oklch(var(--color-divider));
1687-
bottom: 0;
1688-
left: calc(-1 * var(--overflow-gutter-extension));
1689-
width: calc(100% + (2 * var(--overflow-gutter-extension)));
1690-
}
16911689
}
16921690

16931691
.table {
16941692
margin: var(--margin-table);
1695-
}
1696-
1697-
.md-table-scroll-x {
1698-
overflow-x: auto;
1699-
width: 100%;
1700-
}
1701-
1702-
.narrow table {
1703-
min-width: 100%;
1704-
margin: var(--table-top-bottom-spacing) 0;
1705-
border-collapse: collapse;
1706-
}
1693+
&.borderless {
1694+
th {
1695+
background: none;
1696+
border: none;
1697+
}
17071698

1708-
.wide table {
1709-
margin: var(--table-top-bottom-spacing) 0;
1710-
border-collapse: collapse;
1711-
}
1699+
tr:nth-child(even) td {
1700+
background: none;
1701+
}
1702+
}
17121703

1713-
.narrow table th,
1714-
.narrow table td {
1715-
padding-inline-start: var(--table-min-column-spacing-narrow);
1716-
}
1704+
&.bordered {
1705+
th {
1706+
border: var(--table-line-height) solid oklch(var(--table-color-divider));
1707+
border-top: var(--table-line-height) dashed
1708+
oklch(var(--table-color-divider));
1709+
border-bottom: var(--table-line-height) solid
1710+
oklch(var(--color-foreground));
1711+
}
17171712

1718-
.wide table th,
1719-
.wide table td {
1720-
padding-inline-start: var(--table-min-column-spacing-wide);
1713+
tr:nth-child(even) td {
1714+
background: oklch(var(--table-color-divider) / 0.075);
1715+
}
1716+
}
17211717
}
17221718

1723-
table th:first-child,
1724-
table td:first-child {
1725-
padding-inline-start: 0;
1719+
.md-table-scroll-x {
1720+
overflow-x: auto;
1721+
width: 100%;
17261722
}
17271723

17281724
table hr {
17291725
color: oklch(var(--color-divider));
17301726
border: none;
1731-
border-bottom: var(--table-line-height) solid oklch(var(--color-divider));
1727+
border-bottom: var(--table-line-height) solid
1728+
oklch(var(--table-color-divider));
1729+
/*stops HR overflow outside of collapse style tables*/
1730+
margin-right: -10px;
1731+
margin-left: -10px;
1732+
width: auto;
17321733
}
17331734

17341735
/* MARK: Callouts

‎exampleSite/content/test-product/tables/variations.md‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
---
2+
description: Table Variations
3+
title: Table Variations
4+
toc: true
5+
---
6+
### Plain markdown
7+
A pure markdown table, will have the default attributes of `narrow` and `borderless`.
8+
9+
| Parameter | Description |
10+
| ------------------------ | -------------------------------------------------------------------------------------|
11+
| `NODES` | List of peers that receive the configuration from the primary. List of peers that receive the configuration from the primary. List of peers that receive the configuration from the primary. |
12+
| `CONFPATHS` | List of files and directories to distribute from the primary to the peers. |
13+
| `EXCLUDE` | (Optional) List of configuration files on the primary not to distribute to the peers.|
14+
15+
### Table with `table` shortcode
16+
17+
Wrapping a table with the `table` shortcode allows for the use of variant and theme.
18+
19+
The `variant` parameter can be set to `narrow` or `wide`, while the `theme` parameter can be set to `bordered` or `borderless`.
20+
21+
The default behaviour for `table` is `wide` and `bordered`.
22+
23+
``` go-html-template
24+
{{</*table*/>}}
25+
26+
| Parameter | Description |
27+
| ------------------------ | -------------------------------------------------------------------------------------|
28+
| `NODES` | List of peers that receive the configuration from the primary. List of peers that receive the configuration from the primary. List of peers that receive the configuration from the primary. |
29+
| `CONFPATHS` | List of files and directories to distribute from the primary to the peers. |
30+
| `EXCLUDE` | (Optional) List of configuration files on the primary not to distribute to the peers.|
31+
32+
{{</*/table*/>}}
33+
```
34+
35+
Results in the following table:
36+
37+
{{<table variant="wide" theme="bordered">}}
38+
39+
| Parameter | Description |
40+
| ------------------------ | -------------------------------------------------------------------------------------|
41+
| `NODES` | List of peers that receive the configuration from the primary. List of peers that receive the configuration from the primary. List of peers that receive the configuration from the primary. |
42+
| `CONFPATHS` | List of files and directories to distribute from the primary to the peers. |
43+
| `EXCLUDE` | (Optional) List of configuration files on the primary not to distribute to the peers.|
44+
45+
{{</table>}}
46+
47+
Or set to `{{</*table variant="wide" theme="borderless"*/>}}`:
48+
49+
{{<table variant="wide" theme="borderless">}}
50+
51+
| Parameter | Description |
52+
| ------------------------ | -------------------------------------------------------------------------------------|
53+
| `NODES` | List of peers that receive the configuration from the primary. List of peers that receive the configuration from the primary. List of peers that receive the configuration from the primary. |
54+
| `CONFPATHS` | List of files and directories to distribute from the primary to the peers. |
55+
| `EXCLUDE` | (Optional) List of configuration files on the primary not to distribute to the peers.|
56+
57+
{{</table>}}
58+
59+
60+
Or set to `{{</*table variant="narrow" theme="bordered"*/>}}`:
61+
62+
{{<table variant="narrow" theme="bordered">}}
63+
64+
| Parameter | Description |
65+
| ------------------------ | -------------------------------------------------------------------------------------|
66+
| `NODES` | List of peers that receive the configuration from the primary. List of peers that receive the configuration from the primary. List of peers that receive the configuration from the primary. |
67+
| `CONFPATHS` | List of files and directories to distribute from the primary to the peers. |
68+
| `EXCLUDE` | (Optional) List of configuration files on the primary not to distribute to the peers.|
69+
70+
{{</table>}}

‎layouts/partials/table.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
{{ if and (not (eq .variant "narrow")) (not (eq .variant "wide")) }}
2-
{{ errorf "Invalid variant supplied to <table> shortcode: Received %s. Wanted: 'narrow', 'wide'" .variant }}
3-
{{ end }}
1+
{{$variant := .variant | default "narrow"}}
2+
{{$theme := .theme | default "bordered"}}
3+
{{$dataGrid := cond (eq $variant "narrow") "first-two-thirds" (cond (eq $variant "wide") "wide" "") }}
44

5-
<div class="table md-table-scroll-x {{ .variant }}">
6-
{{ .content | markdownify}}
5+
<div class="table md-table-scroll-x {{ $theme }}" data-grid="{{$dataGrid}}">
6+
{{ .content | markdownify }}
77
</div>

‎layouts/shortcodes/table.html‎

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,27 @@
11
<!-- Use this shortcode to allow tables to be scrollable across the x-axis -->
2-
<!-- Params: variant=['narrow' | 'wide'] (defaults to "narrow") -->
2+
<!-- Params: variant=['narrow' | 'wide'] (defaults to "wide") -->
3+
<!-- Params: theme=['bordered' | 'borderless'] (defaults to "bordered") -->
34

4-
{{ $variant := default "narrow" (.Get "variant") }}
5+
{{ $variantRaw := .Get "variant" }}
6+
{{ $themeRaw := or (.Get "theme") "" }}
7+
8+
{{ $variant := "wide" }}
9+
{{ $theme := "bordered" }}
10+
11+
{{ if in (slice "narrow" "wide") $variantRaw }}
12+
{{ $variant = $variantRaw }}
13+
{{ else if $variantRaw }}
14+
{{ errorf "Invalid variant supplied to <table> shortcode: Received %s. Wanted: 'narrow', 'wide'" $variantRaw }}
15+
{{ end }}
16+
17+
{{ if in (slice "bordered" "borderless") $themeRaw }}
18+
{{ $theme = $themeRaw }}
19+
{{ else if $themeRaw }}
20+
{{ errorf "Invalid theme supplied to <table> shortcode</table>: Received %s. Wanted: 'bordered', 'borderless'" $themeRaw }}
21+
{{ end }}
522

623
{{ partial "table.html" (dict
724
"variant" $variant
25+
"theme" $theme
826
"content" .Inner
9-
)}}
27+
)}}

0 commit comments

Comments
 (0)