From ff6f05a24964c1f668310a75e733d2c6fe9d135f Mon Sep 17 00:00:00 2001 From: Wesley B <62723358+wesleyboar@users.noreply.github.com> Date: Thu, 24 Apr 2025 14:04:00 -0500 Subject: [PATCH 1/2] feat: o-media-spread --- dist/objects/o-media-spread.css | 1 + .../_partials/img-fluid-with-srcset.hbs | 17 ++++++ src/lib/_imports/objects/o-media-spread.css | 56 +++++++++++++++++++ .../objects/o-media-spread/config.yml | 13 +++++ .../objects/o-media-spread/o-media-spread.hbs | 25 +++++++++ 5 files changed, 112 insertions(+) create mode 100644 dist/objects/o-media-spread.css create mode 100644 src/lib/_imports/_partials/img-fluid-with-srcset.hbs create mode 100644 src/lib/_imports/objects/o-media-spread.css create mode 100644 src/lib/_imports/objects/o-media-spread/config.yml create mode 100644 src/lib/_imports/objects/o-media-spread/o-media-spread.hbs diff --git a/dist/objects/o-media-spread.css b/dist/objects/o-media-spread.css new file mode 100644 index 000000000..6ab451d86 --- /dev/null +++ b/dist/objects/o-media-spread.css @@ -0,0 +1 @@ +/*! @tacc/core-styles 2.43.2+ | MIT | github.com/TACC/Core-Styles */.o-media-spread{container-type:inline-size;display:grid;gap:var(--global-space--grid-gap)}@container (min-width: 400px){.o-media-spread--2-cols{grid-template-columns:repeat(2,1fr)}.o-media-spread--2-cols>:last-child:nth-child(2n - 1){grid-column:span 2}}@container (max-width: 399px){.o-media-spread--2-cols{grid-template-columns:repeat(1,1fr)}.o-media-spread--2-cols>:last-child:nth-child(1n - 0){grid-column:span 1}}@container (min-width: 600px){.o-media-spread--3-cols{grid-template-columns:repeat(3,1fr)}.o-media-spread--3-cols>:last-child:nth-child(3n - 2){grid-column:span 3}}@container (max-width: 599px){.o-media-spread--3-cols{grid-template-columns:repeat(2,1fr)}.o-media-spread--3-cols>:last-child:nth-child(2n - 1){grid-column:span 1}}@container (min-width: 400px){.o-media-spread--4-cols{grid-template-columns:repeat(4,1fr)}.o-media-spread--4-cols>:last-child:nth-child(4n - 3){grid-column:span 2}}@container (max-width: 399px){.o-media-spread--4-cols{grid-template-columns:repeat(3,1fr)}.o-media-spread--4-cols>:last-child:nth-child(3n - 2){grid-column:span 1}} \ No newline at end of file diff --git a/src/lib/_imports/_partials/img-fluid-with-srcset.hbs b/src/lib/_imports/_partials/img-fluid-with-srcset.hbs new file mode 100644 index 000000000..4373d5424 --- /dev/null +++ b/src/lib/_imports/_partials/img-fluid-with-srcset.hbs @@ -0,0 +1,17 @@ +{{! Image using: + - `srcset` attribute (like Django CMS "Picture") + - Bootstrap's `.img-fluid` class +}} + \ No newline at end of file diff --git a/src/lib/_imports/objects/o-media-spread.css b/src/lib/_imports/objects/o-media-spread.css new file mode 100644 index 000000000..293ee1cf0 --- /dev/null +++ b/src/lib/_imports/objects/o-media-spread.css @@ -0,0 +1,56 @@ +.o-media-spread { + display: grid; + container-type: inline-size; + gap: var(--global-space--grid-gap); +} + +@container (min-width: 400px) { + .o-media-spread--2-cols { + grid-template-columns: repeat(2, 1fr); + } + .o-media-spread--2-cols > *:last-child:nth-child(2n - 1) { + grid-column: span 2; + } +} +@container (max-width: 399px) { + .o-media-spread--2-cols { + grid-template-columns: repeat(1, 1fr); + } + .o-media-spread--2-cols > *:last-child:nth-child(1n - 0) { + grid-column: span 1; + } +} + +@container (min-width: 600px) { + .o-media-spread--3-cols { + grid-template-columns: repeat(3, 1fr); + } + .o-media-spread--3-cols > *:last-child:nth-child(3n - 2) { + grid-column: span 3; + } +} +@container (max-width: 599px) { + .o-media-spread--3-cols { + grid-template-columns: repeat(2, 1fr); + } + .o-media-spread--3-cols > *:last-child:nth-child(2n - 1) { + grid-column: span 1; + } +} + +@container (min-width: 400px) { + .o-media-spread--4-cols { + grid-template-columns: repeat(4, 1fr); + } + .o-media-spread--4-cols > *:last-child:nth-child(4n - 3) { + grid-column: span 2; + } +} +@container (max-width: 399px) { + .o-media-spread--4-cols { + grid-template-columns: repeat(3, 1fr); + } + .o-media-spread--4-cols > *:last-child:nth-child(3n - 2) { + grid-column: span 1; + } +} diff --git a/src/lib/_imports/objects/o-media-spread/config.yml b/src/lib/_imports/objects/o-media-spread/config.yml new file mode 100644 index 000000000..cf5b6cae2 --- /dev/null +++ b/src/lib/_imports/objects/o-media-spread/config.yml @@ -0,0 +1,13 @@ +context: + shouldLoadBootstrap: true + shouldSkipPattern: false + 📝 shouldSkipPattern: because core-styles.….css does not import this + supportStyles: + - ../../assets/objects/o-section.css + types: + - cols: 2 + section: light + - cols: 3 + section: dark + - cols: 4 + section: light diff --git a/src/lib/_imports/objects/o-media-spread/o-media-spread.hbs b/src/lib/_imports/objects/o-media-spread/o-media-spread.hbs new file mode 100644 index 000000000..16d6ff07e --- /dev/null +++ b/src/lib/_imports/objects/o-media-spread/o-media-spread.hbs @@ -0,0 +1,25 @@ +{{#types}} +
+

{{this.cols}} Columns

+
+ {{#if (eq this.cols "2")}} + {{> @img-fluid-with-srcset }} + {{> @img-fluid-with-srcset }} + {{> @img-fluid-with-srcset }} + {{/if}} + {{#if (eq this.cols "3")}} + {{> @img-fluid-with-srcset }} + {{> @img-fluid-with-srcset }} + {{> @img-fluid-with-srcset }} + {{> @img-fluid-with-srcset }} + {{/if}} + {{#if (eq this.cols "4")}} + {{> @img-fluid-with-srcset }} + {{> @img-fluid-with-srcset }} + {{> @img-fluid-with-srcset }} + {{> @img-fluid-with-srcset }} + {{> @img-fluid-with-srcset }} + {{/if}} +
+
+{{/types}} From a8466825095b91308f6397267de8a186d87a3236 Mon Sep 17 00:00:00 2001 From: Wesley B <62723358+wesleyboar@users.noreply.github.com> Date: Thu, 24 Apr 2025 14:19:22 -0500 Subject: [PATCH 2/2] fix: o-media-spread no need for bootstrap --- dist/objects/o-media-spread.css | 2 +- src/lib/_imports/objects/o-media-spread.css | 3 +++ src/lib/_imports/objects/o-media-spread/config.yml | 1 - 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/dist/objects/o-media-spread.css b/dist/objects/o-media-spread.css index 6ab451d86..acf8cfaf8 100644 --- a/dist/objects/o-media-spread.css +++ b/dist/objects/o-media-spread.css @@ -1 +1 @@ -/*! @tacc/core-styles 2.43.2+ | MIT | github.com/TACC/Core-Styles */.o-media-spread{container-type:inline-size;display:grid;gap:var(--global-space--grid-gap)}@container (min-width: 400px){.o-media-spread--2-cols{grid-template-columns:repeat(2,1fr)}.o-media-spread--2-cols>:last-child:nth-child(2n - 1){grid-column:span 2}}@container (max-width: 399px){.o-media-spread--2-cols{grid-template-columns:repeat(1,1fr)}.o-media-spread--2-cols>:last-child:nth-child(1n - 0){grid-column:span 1}}@container (min-width: 600px){.o-media-spread--3-cols{grid-template-columns:repeat(3,1fr)}.o-media-spread--3-cols>:last-child:nth-child(3n - 2){grid-column:span 3}}@container (max-width: 599px){.o-media-spread--3-cols{grid-template-columns:repeat(2,1fr)}.o-media-spread--3-cols>:last-child:nth-child(2n - 1){grid-column:span 1}}@container (min-width: 400px){.o-media-spread--4-cols{grid-template-columns:repeat(4,1fr)}.o-media-spread--4-cols>:last-child:nth-child(4n - 3){grid-column:span 2}}@container (max-width: 399px){.o-media-spread--4-cols{grid-template-columns:repeat(3,1fr)}.o-media-spread--4-cols>:last-child:nth-child(3n - 2){grid-column:span 1}} \ No newline at end of file +/*! @tacc/core-styles 2.43.2+ | MIT | github.com/TACC/Core-Styles */.o-media-spread{container-type:inline-size;display:grid;gap:var(--global-space--grid-gap)}.o-media-spread>*{width:100%}@container (min-width: 400px){.o-media-spread--2-cols{grid-template-columns:repeat(2,1fr)}.o-media-spread--2-cols>:last-child:nth-child(2n - 1){grid-column:span 2}}@container (max-width: 399px){.o-media-spread--2-cols{grid-template-columns:repeat(1,1fr)}.o-media-spread--2-cols>:last-child:nth-child(1n - 0){grid-column:span 1}}@container (min-width: 600px){.o-media-spread--3-cols{grid-template-columns:repeat(3,1fr)}.o-media-spread--3-cols>:last-child:nth-child(3n - 2){grid-column:span 3}}@container (max-width: 599px){.o-media-spread--3-cols{grid-template-columns:repeat(2,1fr)}.o-media-spread--3-cols>:last-child:nth-child(2n - 1){grid-column:span 1}}@container (min-width: 400px){.o-media-spread--4-cols{grid-template-columns:repeat(4,1fr)}.o-media-spread--4-cols>:last-child:nth-child(4n - 3){grid-column:span 2}}@container (max-width: 399px){.o-media-spread--4-cols{grid-template-columns:repeat(3,1fr)}.o-media-spread--4-cols>:last-child:nth-child(3n - 2){grid-column:span 1}} \ No newline at end of file diff --git a/src/lib/_imports/objects/o-media-spread.css b/src/lib/_imports/objects/o-media-spread.css index 293ee1cf0..1d563bbec 100644 --- a/src/lib/_imports/objects/o-media-spread.css +++ b/src/lib/_imports/objects/o-media-spread.css @@ -3,6 +3,9 @@ container-type: inline-size; gap: var(--global-space--grid-gap); } +.o-media-spread > * { + width: 100%; +} @container (min-width: 400px) { .o-media-spread--2-cols { diff --git a/src/lib/_imports/objects/o-media-spread/config.yml b/src/lib/_imports/objects/o-media-spread/config.yml index cf5b6cae2..79abf4569 100644 --- a/src/lib/_imports/objects/o-media-spread/config.yml +++ b/src/lib/_imports/objects/o-media-spread/config.yml @@ -1,5 +1,4 @@ context: - shouldLoadBootstrap: true shouldSkipPattern: false 📝 shouldSkipPattern: because core-styles.….css does not import this supportStyles: