From a7134e21c129ab8ce1cea9f229b393169275429f Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Tue, 24 Aug 2021 13:25:01 -0500 Subject: [PATCH 1/4] GH-83: Quick: Update script comments & equality - Update comments for clarity and accuracy and scope. - Update equality that was not explicit enough. --- .../site_cms/js/modules/elementTransformer.js | 22 ++++++++++--------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/taccsite_cms/static/site_cms/js/modules/elementTransformer.js b/taccsite_cms/static/site_cms/js/modules/elementTransformer.js index f77d05a75..c5897d094 100644 --- a/taccsite_cms/static/site_cms/js/modules/elementTransformer.js +++ b/taccsite_cms/static/site_cms/js/modules/elementTransformer.js @@ -1,8 +1,10 @@ /** - * Resize content to fit parent height + * Transform elements (when CSS cannot) * * - Manipulates attributes within existing markup. - * - Size is NOT dynamically updated after initial load. + * - Transformations are NOT dynamically updated after initial load. + * + * This is a back-up solution. Try using CSS to solve the problem first. * @module elementTransformer */ @@ -51,9 +53,9 @@ export class SizeContentToFit { this.container.dataset.transformState = null; } - /** Whether transformation is in given state */ + /** Whether transformation is in the given state */ isState(state) { - return (this.container.dataset.transformState == state); + return (this.container.dataset.transformState === state); } /** Whether to resize the content */ @@ -68,26 +70,26 @@ export class SizeContentToFit { /** Resize the content */ resizeContent() { /* To prevent natural height of content from increasing container height */ - /* FAQ: Module will set wrong height if content is taller than is desired */ + /* FAQ: Script will set wrong height if content is taller than is desired */ if (this.container.getAttribute('hidden') !== null) { this.content.style.height = '0'; this.container.removeAttribute('hidden'); } - /* To inform observers that this module is active */ + /* To inform observers that this transformation is active */ this.setState('resizing-content'); /* To make container (and its content) the same height as a root element */ - /* FAQ: Given tall content, figure height equals content height */ - /* FAQ: Given hidden content, figure height equals desired content height */ + /* FAQ: With tall content… container height = excessive content height */ + /* FAQ: With hidden content… container height = desired content height */ this.container.style.height = '100%'; this.content.style.height = this.container.offsetHeight + 'px'; this.container.style.height = null; - /* To clean up mess (only if it appears to be the mess of this module) */ + /* To clean up mess (only if it appears to be the mess of this script) */ if (this.isState('resizing-content')) { this.removeState('resizing-content'); - if ( ! this.container.getAttribute('style')) { + if (this.container.getAttribute('style') === '') { this.container.removeAttribute('style'); } } From 66eae8f47b8cee14b0a2bd5b8214c824b15a161c Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Tue, 24 Aug 2021 13:35:59 -0500 Subject: [PATCH 2/4] GH-321: Fix figure size and note about its resize --- taccsite_cms/contrib/taccsite_callout/models.py | 2 +- .../static/site_cms/css/src/_imports/components/c-callout.css | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/taccsite_cms/contrib/taccsite_callout/models.py b/taccsite_cms/contrib/taccsite_callout/models.py index 9460c4f25..86bb60ba1 100644 --- a/taccsite_cms/contrib/taccsite_callout/models.py +++ b/taccsite_cms/contrib/taccsite_callout/models.py @@ -27,7 +27,7 @@ class TaccsiteCallout(AbstractLink): resize_figure_to_fit = models.BooleanField( verbose_name=_('Resize any image to fit'), - help_text=_('Make image shorter or taller to match the height of text beside it.'), + help_text=_('Make image shorter or taller to match the height of text beside it (as it would be without the image).'), blank=False, default=False ) diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/c-callout.css b/taccsite_cms/static/site_cms/css/src/_imports/components/c-callout.css index 94acb1954..1499fed0b 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/components/c-callout.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/components/c-callout.css @@ -38,6 +38,7 @@ Styleguide Components.Callout .c-callout { display: grid; grid-template-rows: auto 1fr; + grid-template-columns: auto 1fr; padding: 20px; } From fa185d0140f45607df01f73cf91f5e2f2fffcd79 Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Tue, 24 Aug 2021 15:04:29 -0500 Subject: [PATCH 3/4] GH-83/GH-321: Show image on narrow windows --- .../css/src/_imports/components/c-callout.css | 41 +++++++++++++------ 1 file changed, 29 insertions(+), 12 deletions(-) diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/c-callout.css b/taccsite_cms/static/site_cms/css/src/_imports/components/c-callout.css index 1499fed0b..2b167c41d 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/components/c-callout.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/components/c-callout.css @@ -37,15 +37,11 @@ Styleguide Components.Callout .c-callout { display: grid; - grid-template-rows: auto 1fr; - grid-template-columns: auto 1fr; padding: 20px; } .c-callout--has-figure { - grid-template-areas: - 'figure title' - 'figure desc'; + /* See @media queries */ } .c-callout:not(.c-callout--has-figure) { grid-template-areas: @@ -56,19 +52,40 @@ Styleguide Components.Callout .c-callout__title { grid-area: title; } .c-callout__desc { grid-area: desc; } -/* To hide figure on narrow window */ -@media only screen and (--narrow-and-below) { - .c-callout--has-figure { column-gap: 0px; } - .c-callout--has-figure .c-callout__figure { display: none; } -} @media only screen and (--narrow-and-above) { - .c-callout--has-figure { column-gap: 40px; } + .c-callout--has-figure { + grid-template-rows: auto 1fr; + grid-template-columns: auto 1fr; + grid-template-areas: + 'figure title' + 'figure desc'; + + column-gap: 40px; + } + .c-callout__figure { margin: 0; /* override Bootstrap */ } +} + +@media only screen and (--narrow-and-below) { + .c-callout--has-figure { + grid-template-areas: + 'figure' + 'title' + 'desc'; + + column-gap: 0px; + } + .c-callout__figure { margin: 0 0 20px; /* override Bootstrap */ } + + /* To "disable" image resize */ + .c-callout__figure[data-transform], + .c-callout__figure[data-transform] img { + height: unset !important; /* overwrite inline style tag (via JavaScript) */ + } } /* To align figure to exact center */ .c-callout__figure { place-self: center; - margin: 0; /* override Bootstrap and browser */ } /* To fit (expected) figure content to available horizontal space */ .c-callout__figure img { From 75a6ecebd1e9cc68626885f427422b060c67b3db Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Mon, 30 Aug 2021 09:51:01 -0500 Subject: [PATCH 4/4] GH-83: Fix: Ensure 0001 taccsite_callout migration See d01c8cf for details. --- .../contrib/taccsite_callout/migrations/0001_initial.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/taccsite_cms/contrib/taccsite_callout/migrations/0001_initial.py b/taccsite_cms/contrib/taccsite_callout/migrations/0001_initial.py index 0b9b86201..6da3754da 100644 --- a/taccsite_cms/contrib/taccsite_callout/migrations/0001_initial.py +++ b/taccsite_cms/contrib/taccsite_callout/migrations/0001_initial.py @@ -9,7 +9,7 @@ class Migration(migrations.Migration): - replaces = [('taccsite_callout', '0001_initial'), ('taccsite_callout', '0003_auto_20210823_1902')] + initial = True dependencies = [ ('filer', '0012_file_mime_type'),