Skip to content

Commit ecee2b1

Browse files
nginx-jacknginx-jack
committed
Tables: Add table themes and use data-grid
1 parent d547d57 commit ecee2b1

File tree

4 files changed

+102
-45
lines changed

4 files changed

+102
-45
lines changed

‎assets/css/v2/style.css‎

Lines changed: 33 additions & 38 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,66 @@ 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);
1684+
border: var(--table-line-height) solid oklch(var(--table-color-divider));
1685+
border-top: var(--table-line-height) dashed
1686+
oklch(var(--table-color-divider));
1687+
border-bottom: var(--table-line-height) solid oklch(var(--color-foreground));
16771688
}
16781689

16791690
tr {
16801691
position: relative;
16811692
}
16821693

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)));
1694+
tr:nth-child(even) td {
1695+
background: oklch(var(--table-color-divider) / 0.075);
16901696
}
16911697
}
16921698

16931699
.table {
16941700
margin: var(--margin-table);
1701+
&.borderless {
1702+
th {
1703+
background: none;
1704+
border: none;
1705+
}
1706+
1707+
tr:nth-child(even) td {
1708+
background: none;
1709+
}
1710+
}
16951711
}
16961712

16971713
.md-table-scroll-x {
16981714
overflow-x: auto;
16991715
width: 100%;
17001716
}
17011717

1702-
.narrow table {
1703-
min-width: 100%;
1704-
margin: var(--table-top-bottom-spacing) 0;
1705-
border-collapse: collapse;
1706-
}
1707-
1708-
.wide table {
1709-
margin: var(--table-top-bottom-spacing) 0;
1710-
border-collapse: collapse;
1711-
}
1712-
1713-
.narrow table th,
1714-
.narrow table td {
1715-
padding-inline-start: var(--table-min-column-spacing-narrow);
1716-
}
1717-
1718-
.wide table th,
1719-
.wide table td {
1720-
padding-inline-start: var(--table-min-column-spacing-wide);
1721-
}
1722-
1723-
table th:first-child,
1724-
table td:first-child {
1725-
padding-inline-start: 0;
1726-
}
1727-
17281718
table hr {
17291719
color: oklch(var(--color-divider));
17301720
border: none;
1731-
border-bottom: var(--table-line-height) solid oklch(var(--color-divider));
1721+
border-bottom: var(--table-line-height) solid
1722+
oklch(var(--table-color-divider));
1723+
/*stops HR overflow outside of collapse style tables*/
1724+
margin-right: -10px;
1725+
margin-left: -10px;
1726+
width: auto;
17321727
}
17331728

17341729
/* MARK: Callouts

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

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
---
2+
description: Table Variations
3+
title: Table Variations
4+
toc: true
5+
---
6+
7+
Wrapping a table with the `table` shortcode allows for the use of variant and theme.
8+
9+
The `variant` parameter can be set to `narrow` or `wide`, while the `theme` parameter can be set to `bordered` or `borderless`.
10+
11+
``` go-html-template
12+
{{</*table variant="wide" theme="bordered"*/>}}
13+
14+
| Parameter | Description |
15+
| ------------------------ | -------------------------------------------------------------------------------------|
16+
| `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. |
17+
| `CONFPATHS` | List of files and directories to distribute from the primary to the peers. |
18+
| `EXCLUDE` | (Optional) List of configuration files on the primary not to distribute to the peers.|
19+
20+
{{</*/table*/>}}
21+
```
22+
23+
Results in the following table:
24+
25+
{{<table variant="wide" theme="bordered">}}
26+
27+
| Parameter | Description |
28+
| ------------------------ | -------------------------------------------------------------------------------------|
29+
| `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. |
30+
| `CONFPATHS` | List of files and directories to distribute from the primary to the peers. |
31+
| `EXCLUDE` | (Optional) List of configuration files on the primary not to distribute to the peers.|
32+
33+
{{</table>}}
34+
35+
Or set to `{{</*table variant="wide" theme="bordered"*/>}}`:
36+
37+
{{<table variant="narrow" theme="borderless">}}
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>}}

‎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: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,26 @@
11
<!-- Use this shortcode to allow tables to be scrollable across the x-axis -->
22
<!-- Params: variant=['narrow' | 'wide'] (defaults to "narrow") -->
33

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

622
{{ partial "table.html" (dict
723
"variant" $variant
24+
"theme" $theme
825
"content" .Inner
9-
)}}
26+
)}}

0 commit comments

Comments
 (0)