From c92c2ce7214608ba9c77cedda588f368492e6c11 Mon Sep 17 00:00:00 2001 From: Lam Nguyen Date: Wed, 5 Feb 2025 13:28:57 -0800 Subject: [PATCH 1/6] feat: added table styling --- assets/css/v2/style.css | 43 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 43 insertions(+) diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css index 7bd1282f..6411f42e 100644 --- a/assets/css/v2/style.css +++ b/assets/css/v2/style.css @@ -19,6 +19,7 @@ --color-footer: #1D1D1D; --color-footer-text: #E2E2E2; --color-product-title: #8D8D8D; + --color-table-divider: #CCCCCC; --sidebar-margin: 24px; --sidebar-line-box-side-length: 8px; @@ -27,6 +28,10 @@ --sidebar-width: 24rem; --sidebar-line-width: 11.5px; --side-gutter-width: 20rem; + --table-top-bottom-spacing: 3rem; + --table-min-column-spacing: 1.5rem; + --table-header-bottom-spacing: 1rem; + --table-line-extension: 1rem; --text-content-width-iphone-13: 30rem; --text-content-width-mbp-14: 40rem; --text-content-width-mbp-16: 50rem; @@ -672,6 +677,44 @@ h2 { margin: 3rem 0 1rem 0; } +/* tables */ +table { + min-width: 100%; + margin: var(--table-top-bottom-spacing) 0; + border-collapse: collapse; +} + +td { + padding: 1.5rem 0; + padding-left: var(--table-min-column-spacing); +} + +th { + font-weight: bold; + text-align: start; + vertical-align: top; + padding-bottom: var(--table-header-bottom-spacing); + padding-left: var(--table-min-column-spacing); +} + +tr { + position: relative; +} + +tr::after { + content: ''; + position: absolute; + border-bottom: 1px solid var(--color-table-divider); + bottom: 0; + left: calc(-1 * var(--table-line-extension)); + width: calc(100% + (2 * var(--table-line-extension))); +} + +th:first-child, +td:first-child { + padding-left: 0; +} + /* callouts */ blockquote { border: 1px solid var(--color-foreground); From 2b58be70e4c09b1d1bc1f14e772d9ae4191d3633 Mon Sep 17 00:00:00 2001 From: Lam Nguyen Date: Wed, 5 Feb 2025 16:12:33 -0800 Subject: [PATCH 2/6] added new shortcode for supporting narrow and wide tables --- assets/css/v2/style.css | 63 ++++++++++++++++--------- layouts/shortcodes/table-mainframe.html | 19 ++++++++ 2 files changed, 59 insertions(+), 23 deletions(-) create mode 100644 layouts/shortcodes/table-mainframe.html diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css index 6411f42e..d286971e 100644 --- a/assets/css/v2/style.css +++ b/assets/css/v2/style.css @@ -29,7 +29,9 @@ --sidebar-line-width: 11.5px; --side-gutter-width: 20rem; --table-top-bottom-spacing: 3rem; - --table-min-column-spacing: 1.5rem; + --table-row-space-between: 1.5rem; + --table-min-column-spacing-narrow: 1.5rem; + --table-min-column-spacing-wide: 0.75rem; --table-header-bottom-spacing: 1rem; --table-line-extension: 1rem; --text-content-width-iphone-13: 30rem; @@ -679,39 +681,54 @@ h2 { /* tables */ table { + td { + padding: var(--table-row-space-between) 0; + } + + th { + font-weight: bold; + text-align: start; + vertical-align: top; + padding-bottom: var(--table-header-bottom-spacing); + } + + tr { + position: relative; + } + + tr::after { + content: ''; + position: absolute; + border-bottom: 1px solid var(--color-table-divider); + bottom: 0; + left: calc(-1 * var(--table-line-extension)); + width: calc(100% + (2 * var(--table-line-extension))); + } +} + +.narrow table { min-width: 100%; margin: var(--table-top-bottom-spacing) 0; border-collapse: collapse; } -td { - padding: 1.5rem 0; - padding-left: var(--table-min-column-spacing); -} - -th { - font-weight: bold; - text-align: start; - vertical-align: top; - padding-bottom: var(--table-header-bottom-spacing); - padding-left: var(--table-min-column-spacing); +.wide table { + margin: var(--table-top-bottom-spacing) 0; + border-collapse: collapse; } -tr { - position: relative; +.narrow table th, +.narrow table td { + padding-left: var(--table-min-column-spacing-narrow); } -tr::after { - content: ''; - position: absolute; - border-bottom: 1px solid var(--color-table-divider); - bottom: 0; - left: calc(-1 * var(--table-line-extension)); - width: calc(100% + (2 * var(--table-line-extension))); +.wide table th, +.wide table td { + padding-left: var(--table-min-column-spacing-wide); } -th:first-child, -td:first-child { +table th:first-child, +table td:first-child { padding-left: 0; } diff --git a/layouts/shortcodes/table-mainframe.html b/layouts/shortcodes/table-mainframe.html new file mode 100644 index 00000000..c512be2e --- /dev/null +++ b/layouts/shortcodes/table-mainframe.html @@ -0,0 +1,19 @@ + + +
+ {{ .Inner | markdownify }} +
\ No newline at end of file From 62473f57082094a81438ea00acc58a960412fcb2 Mon Sep 17 00:00:00 2001 From: Lam Nguyen Date: Thu, 6 Feb 2025 13:32:58 -0800 Subject: [PATCH 3/6] removed JS to resize wide tables + removed unneeded shortcode and moved to existing bootstrap-table --- assets/css/v2/style.css | 85 +++++++------------------ layouts/_default/baseof.html | 4 ++ layouts/shortcodes/bootstrap-table.html | 10 ++- layouts/shortcodes/table-mainframe.html | 19 ------ 4 files changed, 35 insertions(+), 83 deletions(-) delete mode 100644 layouts/shortcodes/table-mainframe.html diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css index d286971e..b811f486 100644 --- a/assets/css/v2/style.css +++ b/assets/css/v2/style.css @@ -195,11 +195,6 @@ nav { min-width: 100%; } -.main-layout { - display: grid; - grid-template-columns: 1fr; -} - .sidebar-layout { display: flex; flex-direction: column; @@ -212,58 +207,6 @@ nav { } } -.text-content { - grid-column-start: 1; -} - -@media (min-width: 1512px) { /* Macbook Pro 14 */ - .main-layout { - display: grid; - grid-template-columns: var(--sidebar-width) 1fr; - column-gap: var(--component-gap); - } - - .content-layout { - display: grid; - grid-template-columns: var(--text-content-width-mbp-14) var(--side-gutter-width); - column-gap: var(--component-gap); - } - - .content-layout .side-gutter { - grid-column-start: 2; - } - - .base-layout { - display: grid; - grid-template-rows: repeat(2, auto); - column-gap: var(--component-gap); - } - - .breadcrumb-layout { - display: grid; - grid-template-columns: var(--sidebar-width) 1fr; - column-gap: var(--component-gap); - align-items: center; - margin: 0 2rem; - } -} - -@media (min-width: 1728px) { /* Macbook Pro 16 */ - .content-layout { - display: grid; - grid-template-columns: var(--text-content-width-mbp-16) var(--side-gutter-width); - column-gap: var(--component-gap); - } -} - -@media (min-width: 2560px) { /* 4k Desktop */ - .content-layout { - display: grid; - grid-template-columns: var(--text-content-width-4k-display) var(--side-gutter-width); - column-gap: var(--component-gap); - } -} - #searchbox { width: 24rem; display:none; @@ -293,14 +236,17 @@ nav { flex-direction: column; } -.content-layout { +.text-content { + grid-column-start: 1; display: grid; - grid-template-columns: var(--text-content-width-iphone-13) var(--side-gutter-width); - column-gap: var(--component-gap); } -.text-content { - grid-column-start: 1; +.text-content > :not(.wide) { + grid-column: 1; +} + +.text-content .wide { + grid-column: 1 / -1; } @media (min-width: 1512px) { /* Macbook Pro 14 */ @@ -317,6 +263,11 @@ nav { align-items: center; } + .text-content { + grid-template-columns: var(--text-content-width-mbp-14) var(--side-gutter-width); + column-gap: var(--component-gap); + } + .main-layout { display: grid; grid-template-columns: var(--sidebar-width) 1fr; @@ -340,6 +291,11 @@ nav { grid-template-columns: var(--text-content-width-mbp-16) var(--side-gutter-width); column-gap: var(--component-gap); } + + .text-content { + grid-template-columns: var(--text-content-width-mbp-16) var(--side-gutter-width); + column-gap: var(--component-gap); + } } @media (min-width: 2560px) { /* 4k Desktop */ @@ -348,6 +304,11 @@ nav { grid-template-columns: var(--text-content-width-4k-display) var(--side-gutter-width); column-gap: var(--component-gap); } + + .text-content { + grid-template-columns: var(--text-content-width-4k-display) var(--side-gutter-width); + column-gap: var(--component-gap); + } } .main { diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 479d389c..f6de9e28 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -72,6 +72,10 @@ } }); + document.querySelectorAll(".table-v1").forEach((table) => { + table.style.display = isNewTheme ? "none" : ""; + }); + const mfElements = ['[data-mf="true"]']; mfElements.forEach((elementId) => { document.querySelectorAll(elementId).forEach( diff --git a/layouts/shortcodes/bootstrap-table.html b/layouts/shortcodes/bootstrap-table.html index c1991d98..aea902a3 100644 --- a/layouts/shortcodes/bootstrap-table.html +++ b/layouts/shortcodes/bootstrap-table.html @@ -1,6 +1,12 @@ {{ $htmlTable := .Inner | markdownify }} {{ $class := .Get 0 }} {{ $old := "" }} -{{ $new := printf "
" $class }} +{{ $new := printf "
" $class "table-v1" }} {{ $htmlTable := replace $htmlTable $old $new }} -{{ $htmlTable | safeHTML }} \ No newline at end of file +{{ $htmlTable | safeHTML }} + + + \ No newline at end of file diff --git a/layouts/shortcodes/table-mainframe.html b/layouts/shortcodes/table-mainframe.html deleted file mode 100644 index c512be2e..00000000 --- a/layouts/shortcodes/table-mainframe.html +++ /dev/null @@ -1,19 +0,0 @@ - - -
- {{ .Inner | markdownify }} -
\ No newline at end of file From 354af3d6e39d723f8af02d18a31e93a73b9f8d89 Mon Sep 17 00:00:00 2001 From: Lam Nguyen Date: Thu, 6 Feb 2025 13:44:28 -0800 Subject: [PATCH 4/6] added hugo code to default a table size if not given in params --- layouts/shortcodes/bootstrap-table.html | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/layouts/shortcodes/bootstrap-table.html b/layouts/shortcodes/bootstrap-table.html index aea902a3..9489b8ac 100644 --- a/layouts/shortcodes/bootstrap-table.html +++ b/layouts/shortcodes/bootstrap-table.html @@ -5,8 +5,13 @@ {{ $htmlTable := replace $htmlTable $old $new }} {{ $htmlTable | safeHTML }} + +{{ $narrowOption := "narrow" }} +{{ $wideOption := "wide" }} +{{ if and (not (strings.Contains $class $narrowOption)) (not (strings.Contains $class $wideOption)) }} + {{ $class = printf "%s %s" $class $narrowOption }} +{{ end }} -