From 49a0e222db8f22c8b4eb4a6267456e00b3774f98 Mon Sep 17 00:00:00 2001 From: nikhil trivedi Date: Fri, 13 Dec 2024 10:58:09 -0600 Subject: [PATCH 1/8] Output timestamp after webpack builds [WEB-2976] --- webpack.config.js | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/webpack.config.js b/webpack.config.js index f3d2d1dba..c482c1efd 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -7,6 +7,18 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const CopyPlugin = require('copy-webpack-plugin'); const generateRevManifestPlugin = require('./scripts/webpack/GenerateRevManifestPlugin'); +class TimestampPlugin { + apply(compiler) { + compiler.hooks.done.tap('TimestampPlugin', () => { + const timestamp = new Date().toLocaleString(); + setImmediate(() => { + const emoji = "✅" + console.log(`${emoji} build completed ${timestamp}`); + }); + }); + } +} + const outputDir = path.resolve(__dirname, 'public', 'dist'); // Async delete any directories passed in and wait for all deletions to complete @@ -108,7 +120,8 @@ module.exports = async () => { manifestPath: path.resolve(outputDir, 'rev-manifest.json'), }), ] : [] - ) + ), + new TimestampPlugin(), ], module: { rules: [ From 92eaa8af17f973cb339375bca61b5b8876742b50 Mon Sep 17 00:00:00 2001 From: nikhil trivedi Date: Fri, 13 Dec 2024 10:59:23 -0600 Subject: [PATCH 2/8] Remove unused landing page types [WEB-2976] --- app/Models/LandingPage.php | 15 ++++++++------- .../landingPage/_footer----articles.blade.php | 0 .../_footer----collection.blade.php | 0 .../_footer----exhibition-history.blade.php | 0 ..._footer----exhibitions-and-events.blade.php | 0 .../landingPage/_header----articles.blade.php | 0 .../_header----collection.blade.php | 18 ------------------ .../_header----exhibition-history.blade.php | 0 ..._header----exhibitions-and-events.blade.php | 0 ..._header----research-and-resources.blade.php | 0 10 files changed, 8 insertions(+), 25 deletions(-) delete mode 100644 resources/views/site/landingPage/_footer----articles.blade.php delete mode 100644 resources/views/site/landingPage/_footer----collection.blade.php delete mode 100644 resources/views/site/landingPage/_footer----exhibition-history.blade.php delete mode 100644 resources/views/site/landingPage/_footer----exhibitions-and-events.blade.php delete mode 100644 resources/views/site/landingPage/_header----articles.blade.php delete mode 100644 resources/views/site/landingPage/_header----collection.blade.php delete mode 100644 resources/views/site/landingPage/_header----exhibition-history.blade.php delete mode 100644 resources/views/site/landingPage/_header----exhibitions-and-events.blade.php delete mode 100644 resources/views/site/landingPage/_header----research-and-resources.blade.php diff --git a/app/Models/LandingPage.php b/app/Models/LandingPage.php index 67ac8c703..d6e48e876 100644 --- a/app/Models/LandingPage.php +++ b/app/Models/LandingPage.php @@ -39,16 +39,17 @@ class LandingPage extends AbstractModel implements Sortable public const TYPES = [ 0 => 'RLC', 1 => 'Home', - 2 => 'Exhibitions and Events', - 3 => 'Collection', + // 2 => 'Exhibitions and Events', + // 3 => 'Collection', 4 => 'Visit', - 5 => 'Articles', - 6 => 'Exhibition History', - 7 => 'Art and Ideas', - 8 => 'Research and Resources', - 9 => 'Articles and Publications', + // 5 => 'Articles', + // 6 => 'Exhibition History', + // 7 => 'Art and Ideas', + // 8 => 'Research and Resources', + // 9 => 'Articles and Publications', 10 => 'Editorial', 11 => 'My Museum Tour', + 12 => 'Publications', 99 => 'Custom', ]; diff --git a/resources/views/site/landingPage/_footer----articles.blade.php b/resources/views/site/landingPage/_footer----articles.blade.php deleted file mode 100644 index e69de29bb..000000000 diff --git a/resources/views/site/landingPage/_footer----collection.blade.php b/resources/views/site/landingPage/_footer----collection.blade.php deleted file mode 100644 index e69de29bb..000000000 diff --git a/resources/views/site/landingPage/_footer----exhibition-history.blade.php b/resources/views/site/landingPage/_footer----exhibition-history.blade.php deleted file mode 100644 index e69de29bb..000000000 diff --git a/resources/views/site/landingPage/_footer----exhibitions-and-events.blade.php b/resources/views/site/landingPage/_footer----exhibitions-and-events.blade.php deleted file mode 100644 index e69de29bb..000000000 diff --git a/resources/views/site/landingPage/_header----articles.blade.php b/resources/views/site/landingPage/_header----articles.blade.php deleted file mode 100644 index e69de29bb..000000000 diff --git a/resources/views/site/landingPage/_header----collection.blade.php b/resources/views/site/landingPage/_header----collection.blade.php deleted file mode 100644 index c773e1463..000000000 --- a/resources/views/site/landingPage/_header----collection.blade.php +++ /dev/null @@ -1,18 +0,0 @@ -
- - - - @component('site.shared._schemaItemProps') - @slot('itemprops',$itemprops ?? null) - @endcomponent - - @component('components.molecules._m-media') - @slot('item', $headerMedia) - @slot('tag', 'span') - @slot('imageSettings', array( - 'srcset' => array(300,600,1000,1500,3000), - 'sizes' => '100vw', - )) - @slot('variation', 'm-landing-header') - @endcomponent -
\ No newline at end of file diff --git a/resources/views/site/landingPage/_header----exhibition-history.blade.php b/resources/views/site/landingPage/_header----exhibition-history.blade.php deleted file mode 100644 index e69de29bb..000000000 diff --git a/resources/views/site/landingPage/_header----exhibitions-and-events.blade.php b/resources/views/site/landingPage/_header----exhibitions-and-events.blade.php deleted file mode 100644 index e69de29bb..000000000 diff --git a/resources/views/site/landingPage/_header----research-and-resources.blade.php b/resources/views/site/landingPage/_header----research-and-resources.blade.php deleted file mode 100644 index e69de29bb..000000000 From e708e774f86b3e3a2b600c920868e87cc144ce97 Mon Sep 17 00:00:00 2001 From: nikhil trivedi Date: Fri, 13 Dec 2024 11:01:06 -0600 Subject: [PATCH 3/8] Add Publishing landing page type and initial gridboard component [WEB-2976] --- .../Controllers/LandingPagesController.php | 9 +- frontend/scss/_importsCore.scss | 1 + frontend/scss/organisms/_o-gridboard.scss | 561 ++++++++++++++++++ .../landingPages/publications/form.blade.php | 102 ++++ .../organisms/_o-gridboard.blade.php | 6 + .../_footer----publications.blade.php | 12 + .../_header----publications.blade.php | 0 .../views/site/publications/_items.blade.php | 31 + 8 files changed, 721 insertions(+), 1 deletion(-) create mode 100644 frontend/scss/organisms/_o-gridboard.scss create mode 100644 resources/views/admin/landingPages/publications/form.blade.php create mode 100644 resources/views/components/organisms/_o-gridboard.blade.php create mode 100644 resources/views/site/landingPage/_footer----publications.blade.php create mode 100644 resources/views/site/landingPage/_header----publications.blade.php create mode 100644 resources/views/site/publications/_items.blade.php diff --git a/app/Http/Controllers/LandingPagesController.php b/app/Http/Controllers/LandingPagesController.php index 0b5655c5f..ed8f56cd0 100644 --- a/app/Http/Controllers/LandingPagesController.php +++ b/app/Http/Controllers/LandingPagesController.php @@ -6,6 +6,7 @@ use App\Models\Hour; use App\Models\Lightbox; use App\Models\LandingPage; +use App\Models\PrintedPublication; use App\Repositories\LandingPageRepository; use Carbon\Carbon; use Illuminate\Support\Str; @@ -268,7 +269,7 @@ public function viewData($item) 'label' => 'Research', 'active' => true, ], - ], + ] ]; break; @@ -290,6 +291,12 @@ public function viewData($item) ]; break; + case $types->search('Publications'): + $viewData = [ + 'publications' => PrintedPublication::all(), + ]; + break; + default: $viewData = array(); break; diff --git a/frontend/scss/_importsCore.scss b/frontend/scss/_importsCore.scss index 4b22cc1fe..f7eb55d1d 100755 --- a/frontend/scss/_importsCore.scss +++ b/frontend/scss/_importsCore.scss @@ -110,6 +110,7 @@ @import 'organisms/o-gallery'; @import 'organisms/o-accordion'; @import 'organisms/o-pinboard'; +@import 'organisms/o-gridboard'; @import 'organisms/o-fullscreen-image'; @import 'organisms/o-feature-plus-4'; @import 'organisms/o-color-picker-filter'; diff --git a/frontend/scss/organisms/_o-gridboard.scss b/frontend/scss/organisms/_o-gridboard.scss new file mode 100644 index 000000000..9884837df --- /dev/null +++ b/frontend/scss/organisms/_o-gridboard.scss @@ -0,0 +1,561 @@ +@keyframes fadeIn { + from { + opacity: 0; + } + + to { + opacity: 1; + } +} + +.explore-further-injected { + opacity: unset; + + &.s-loading { + transition: .15s ease-in-out; + opacity: .7; + } +} + +.explore-further-injected>.o-gridboard { + transition: .15s ease-in-out; + opacity: unset; + animation: fadeIn .75s ease-in-out; +} + +.o-gridboard { + position: relative; + padding-top: 0.02px; + border-top: 1px solid $color__rules--primary; +} + +.m-title-bar+.o-gridboard { + margin-top: 19px; + + &:first-child { + margin-top: 0; + } + + @include breakpoint('small+') { + margin-top: 36px; + + &:first-child { + margin-top: 0; + } + } + + @include breakpoint('medium+') { + margin-top: 40px; + + &:first-child { + margin-top: 0; + } + } +} + +.m-links-bar+.o-gridboard { + margin-top: 0; +} + +.m-search-actions+.o-gridboard { + margin-top: 20px; +} + +.o-gridboard::before, +.o-gridboard::after { + content: ''; + display: none; + position: absolute; + z-index: 0; + top: 0; + bottom: 0; + width: 1px; + background-color: $color__rules--tertiary; + pointer-events: none; +} + +.o-gridboard>*::before { + content: ''; + position: absolute; + left: 0; + right: 0; + top: 0; + height: 1px; + background-color: $color__rules--primary; + pointer-events: none; +} + +.o-gridboard>*:first-child { + padding-top: 0; + + &::before { + content: none; + display: none; + } +} + +.o-gridboard__footer { + margin-top: 40px; + padding-top: 25px; + border-top: 1px solid $color__rules--primary; + + @include breakpoint('small+') { + margin-top: 0; + } +} + +@each $name, +$point in $breakpoints { + @include breakpoint('#{$name}') { + .o-gridboard>* { + @if ($name=='xsmall') { + margin-top: 56px; + + &:first-child:not(.s-positioned) { + margin-top: 16px; + } + } + + & { + padding-top: colspan(map-get($grid-padding-tops, $name), #{$name}); + } + } + + .o-gridboard[class*="col@#{$name}"] { + display: flex; + flex-flow: row wrap; + align-items: flex-start; + justify-content: space-between; + padding-top: 0; + } + + .o-gridboard[class*="col@#{$name}"]>* { + left: 0; + top: 0; + flex: 0 0 auto; + + @if ($name=='xsmall') { + margin-top: #{map-get($grid-margin-tops, $name)}px; + padding-top: #{map-get($grid-padding-tops, $name)}px; + } + + @else if ($name=='small') { + margin-top: colspan(1.5, small); + padding-top: colspan(1.5, small, -1px); + border-top: 1px solid $color__rules--primary; + } + + @else { + margin-top: #{map-get($grid-margin-tops, $name)}px; + padding-top: #{map-get($grid-padding-tops, $name) - 1}px; + border-top: 1px solid $color__rules--primary; + } + + opacity: 0; + transition: opacity .25s; + + &::before { + content: none; + display: none; + } + } + + .o-gridboard[class*="col@#{$name}"]>.s-positioned { + position: absolute; + z-index: 1; + flex: none; + opacity: 1; + transition: top .3s $bezier--marius-mosaic, left .3s $bezier--marius-mosaic, height .3s $bezier--marius-mosaic; + } + + .o-gridboard[class*="col@#{$name}"]>.s-positioned:not(.s-repositioning) { + margin-top: 0; + } + + .o-gridboard[class*="col@#{$name}"]>*:nth-child(1) { + transition-delay: .1s; + } + + .o-gridboard[class*="col@#{$name}"]>*:nth-child(2) { + transition-delay: .2s; + } + + .o-gridboard[class*="col@#{$name}"]>*:nth-child(3) { + transition-delay: .3s; + } + + .o-gridboard[class*="col@#{$name}"]>*:nth-child(4) { + transition-delay: .4s; + } + + .o-gridboard[class*="col@#{$name}"]>*:nth-child(5) { + transition-delay: .5s; + } + + .o-gridboard[class*="col@#{$name}"]>*:nth-child(6) { + transition-delay: .6s; + } + + .o-gridboard[class*="col@#{$name}"]>*:nth-child(7) { + transition-delay: .7s; + } + + .o-gridboard[class*="col@#{$name}"]>*:nth-child(7)~* { + transition-delay: .8s; + } + } +} + +@include breakpoint('xsmall') { + .o-gridboard--2-col\@xsmall::before { + //display: block; + //left: colspan(29, xsmall); + } + + .o-gridboard--1-col\@xsmall>* { + width: colspan(grid-cols-to-colspan(1), 'xsmall'); + } + + .o-gridboard--1-col\@xsmall>*:nth-child(1), + .o-gridboard--1-col\@xsmall>*:nth-child(2) { + border-top-color: transparent; + } + + .o-gridboard--2-col\@xsmall>* { + width: colspan(grid-cols-to-colspan(2), 'xsmall'); + } + + .o-gridboard--2-col\@xsmall>*:nth-child(1), + .o-gridboard--2-col\@xsmall>*:nth-child(2) { + border-top-color: transparent; + } +} + +@include breakpoint('small') { + .o-gridboard--2-col\@small::before { + //display: block; + //left: colspan(29, small); + } + + .o-gridboard--2-col\@small>* { + width: colspan(grid-cols-to-colspan(2), 'small'); + } + + .o-gridboard--2-col\@small>*:nth-child(1), + .o-gridboard--2-col\@small>*:nth-child(2) { + border-top-color: transparent; + } +} + +@include breakpoint('medium') { + .o-gridboard--2-col\@medium::before { + display: block; + left: colspan(19, medium); + } + + .o-gridboard--2-col\@medium>* { + width: colspan(grid-cols-to-colspan(2), 'medium'); + } + + .o-gridboard--3-col\@medium::before { + display: block; + left: colspan(19, medium); + } + + .o-gridboard--3-col\@medium::after { + display: block; + left: colspan(39, medium); + } + + .o-gridboard--3-col\@medium>* { + width: colspan(grid-cols-to-colspan(3), 'medium'); + } + + .o-gridboard--2-col\@medium>*:nth-child(1), + .o-gridboard--2-col\@medium>*:nth-child(2), + .o-gridboard--3-col\@medium>*:nth-child(1), + .o-gridboard--3-col\@medium>*:nth-child(2), + .o-gridboard--3-col\@medium>*:nth-child(3) { + border-top-color: transparent; + } +} + +@include breakpoint('large') { + .o-gridboard--2-col\@large::before { + display: block; + left: colspan(19, large); + } + + .o-gridboard--2-col\@large>* { + width: colspan(grid-cols-to-colspan(2), 'large'); + } + + .o-gridboard--3-col\@large::before { + display: block; + left: colspan(19, large); + } + + .o-gridboard--3-col\@large::after { + display: block; + left: colspan(39, large); + } + + .o-gridboard--3-col\@large>* { + width: colspan(grid-cols-to-colspan(3), 'large'); + } + + .o-gridboard--4-col\@large::before { + display: block; + left: colspan(14, large); + width: colspan(15, large); + border-right: 1px solid $color__rules--tertiary; + border-left: 1px solid $color__rules--tertiary; + background: transparent; + } + + .o-gridboard--4-col\@large::after { + display: block; + left: colspan(44, large); + } + + .o-gridboard--4-col\@large>* { + width: colspan(grid-cols-to-colspan(4), 'large'); + } + + .o-gridboard--2-col\@large>*:nth-child(1), + .o-gridboard--2-col\@large>*:nth-child(2), + .o-gridboard--3-col\@large>*:nth-child(1), + .o-gridboard--3-col\@large>*:nth-child(2), + .o-gridboard--3-col\@large>*:nth-child(3), + .o-gridboard--4-col\@large>*:nth-child(1), + .o-gridboard--4-col\@large>*:nth-child(2), + .o-gridboard--4-col\@large>*:nth-child(3), + .o-gridboard--4-col\@large>*:nth-child(4) { + border-top-color: transparent; + } +} + +@include breakpoint('xlarge') { + .o-gridboard--2-col\@xlarge::before { + display: block; + left: colspan(19, xlarge); + } + + .o-gridboard--2-col\@xlarge>* { + width: colspan(grid-cols-to-colspan(2), 'xlarge'); + } + + .o-gridboard--3-col\@xlarge::before { + display: block; + left: colspan(19, xlarge); + } + + .o-gridboard--3-col\@xlarge::after { + display: block; + left: colspan(39, xlarge); + } + + .o-gridboard--3-col\@xlarge>* { + width: colspan(grid-cols-to-colspan(3), 'xlarge'); + } + + .o-gridboard--4-col\@xlarge::before { + display: block; + left: colspan(14, xlarge); + width: colspan(15, xlarge); + border-right: 1px solid $color__rules--tertiary; + border-left: 1px solid $color__rules--tertiary; + background: transparent; + } + + .o-gridboard--4-col\@xlarge::after { + display: block; + left: colspan(44, xlarge); + } + + .o-gridboard--4-col\@xlarge>* { + width: colspan(grid-cols-to-colspan(4), 'xlarge'); + } + + .o-gridboard--2-col\@xlarge>*:nth-child(1), + .o-gridboard--2-col\@xlarge>*:nth-child(2), + .o-gridboard--3-col\@xlarge>*:nth-child(1), + .o-gridboard--3-col\@xlarge>*:nth-child(2), + .o-gridboard--3-col\@xlarge>*:nth-child(3), + .o-gridboard--4-col\@xlarge>*:nth-child(1), + .o-gridboard--4-col\@xlarge>*:nth-child(2), + .o-gridboard--4-col\@xlarge>*:nth-child(3), + .o-gridboard--4-col\@xlarge>*:nth-child(4) { + border-top-color: transparent; + } +} + +.o-gallery--small-mosaic { + @include breakpoint('xsmall') { + .o-gridboard--1-col\@xsmall>* { + margin-left: 10px; + } + } + + @include breakpoint('small') { + .o-gridboard--2-col\@small>* { + margin-left: 20px; + } + } + + @include breakpoint('medium') { + .o-gridboard--2-col\@medium>* { + margin-left: 30px; + } + } + + @include breakpoint('large') { + .o-gridboard--3-col\@large>* { + width: colspan(grid-cols-to-colspan(4), 'large'); + border-top: 0; + } + + .o-gridboard--3-col\@large::before { + display: block; + left: colspan(18, large); + width: colspan(22, large); + border-right: 1px solid $color__rules--tertiary; + border-left: 1px solid $color__rules--tertiary; + background: transparent; + } + + .o-gridboard--3-col\@large::after { + display: none; + } + } + + @include breakpoint('xlarge') { + .o-gridboard--3-col\@xlarge>* { + width: colspan(grid-cols-to-colspan(4), 'xlarge'); + border-top: 0; + } + + .o-gridboard--3-col\@xlarge::before { + display: block; + left: colspan(18, xlarge); + width: colspan(22, xlarge); + border-right: 1px solid $color__rules--tertiary; + border-left: 1px solid $color__rules--tertiary; + background: transparent; + } + + .o-gridboard--3-col\@xlarge::after { + display: none; + } + } +} + +/** + * Themes for dark/light variations. Light is default. + */ +.o-gallery--small-mosaic.o-gallery----theme-1, +.o-gallery--small-mosaic.o-gallery----theme-2 { + &::after { + content: ''; + position: absolute; + width: 100%; + top: -1px; + left: 0; + right: 0; + height: 1px; + background-color: $color__white; + z-index: 2; + } +} + +.o-gallery--small-mosaic.o-gallery----theme-1 { + .o-gridboard { + border-top-color: $color__rules--contrast; + } + + .o-gridboard::before, + .o-gridboard::after { + background-color: $color__rules--focus; + } + + @each $name, + $point in $breakpoints { + @include breakpoint('#{$name}') { + .o-gridboard[class*="col@#{$name}"] > * { + @if ($name == 'xsmall') { + } @else { + margin-top: -1px; + } + } + } + } + + @include breakpoint('large') { + .o-gridboard--3-col\@large::before { + border-right: 1px solid $color__rules--contrast; + border-left: 1px solid $color__rules--contrast; + } + } + + @include breakpoint('xlarge') { + .o-gridboard--3-col\@xlarge::before { + border-right: 1px solid $color__rules--contrast; + border-left: 1px solid $color__rules--contrast; + } + } +} + +.o-gallery--small-mosaic.o-gallery----theme-2 { + + @each $name, + $point in $breakpoints { + @include breakpoint('#{$name}') { + .o-gridboard[class*="col@#{$name}"]>* { + @if ($name=='xsmall') {} + + @else { + border-top: 1px solid $color__rules--primary; + margin-top: -1px; + } + } + } + } + + @include breakpoint('large') { + .o-gridboard--3-col\@large::before { + border-right: 1px solid $color__rules--primary; + border-left: 1px solid $color__rules--primary; + } + } + + @include breakpoint('xlarge') { + .o-gridboard--3-col\@xlarge::before { + border-right: 1px solid $color__rules--primary; + border-left: 1px solid $color__rules--primary; + } + } +} + +.o-gallery--small-mosaic.o-gallery----theme-2 { + .o-gridboard { + border-top: 0; + } +} + +.o-gallery--small-mosaic.o-gallery----theme-3 { + .o-gridboard { + border-top: 0; + } + + @each $name, + $point in $breakpoints { + @include breakpoint('#{$name}') { + .o-gridboard[class*="col@#{$name}"]>* { + @if ($name!='xsmall') { + border-top: 1px solid $color__rules--primary; + margin-top: -1px; + } + } + } + } +} diff --git a/resources/views/admin/landingPages/publications/form.blade.php b/resources/views/admin/landingPages/publications/form.blade.php new file mode 100644 index 000000000..b0a17f8e1 --- /dev/null +++ b/resources/views/admin/landingPages/publications/form.blade.php @@ -0,0 +1,102 @@ +@extends('twill::layouts.form') + +@section('contentFields') + +@formField('select', [ + 'name' => 'header_variation', + 'label' => 'Header Style', + 'placeholder' => 'Select style of page header', + 'default' => 'default', + 'options' => [ + [ + 'value' => 'default', + 'label' => 'Default' + ], + [ + 'value' => 'small', + 'label' => 'Small Image' + ], + [ + 'value' => 'cta', + 'label' => 'Call to action' + ], + [ + 'value' => 'feature', + 'label' => 'Featured Content' + ], + ] +]) + +
+ +@component('twill::partials.form.utils._connected_fields', [ + 'fieldName' => 'header_variation', + 'fieldValues' => ['default', 'small', 'cta'], + 'renderForBlocks' => false +]) + + @formField('medias', [ + 'name' => 'hero', + 'label' => 'Hero image', + 'note' => 'Minimum image width 3000px' + ]) + + @formField('files', [ + 'name' => 'video', + 'label' => 'Hero video', + 'note' => 'Add an MP4 file' + ]) + + @formField('medias', [ + 'name' => 'mobile_hero', + 'label' => 'Hero image, mobile', + 'note' => 'Minimum image width 2000px' + ]) + +@endcomponent + +@component('twill::partials.form.utils._connected_fields', [ + 'fieldName' => 'header_variation', + 'fieldValues' => 'cta', + 'renderForBlocks' => false +]) + + @formField('input', [ + 'name' => 'header_cta_title', + 'label' => 'CTA Title' + ]) + + @formField('input', [ + 'name' => 'header_cta_button_label', + 'label' => 'Button Label' + ]) + + @formField('input', [ + 'name' => 'header_cta_button_link', + 'label' => 'Button Link' + ]) + +@endcomponent + +@component('twill::partials.form.utils._connected_fields', [ + 'fieldName' => 'header_variation', + 'fieldValues' => 'feature', + 'renderForBlocks' => false +]) + + @formField('browser', [ + 'routePrefix' => 'generic', + 'max' => 3, + 'moduleName' => 'pageFeatures', + 'name' => 'primaryFeatures', + 'label' => 'Main feature', + 'note' => 'Queue up to 3 home features for the large hero area', + ]) + +@endcomponent + +@stop + +@section('fieldsets') + +@stop diff --git a/resources/views/components/organisms/_o-gridboard.blade.php b/resources/views/components/organisms/_o-gridboard.blade.php new file mode 100644 index 000000000..f36ca9aed --- /dev/null +++ b/resources/views/components/organisms/_o-gridboard.blade.php @@ -0,0 +1,6 @@ +@if (isset($title)) +

{{ $title }}

+@endif + + {!! $slot !!} + diff --git a/resources/views/site/landingPage/_footer----publications.blade.php b/resources/views/site/landingPage/_footer----publications.blade.php new file mode 100644 index 000000000..2fd8e87c9 --- /dev/null +++ b/resources/views/site/landingPage/_footer----publications.blade.php @@ -0,0 +1,12 @@ +@component('components.organisms._o-gridboard') + @slot('id', 'publicationList') + @slot('cols_xsmall','2') + @slot('cols_small','2') + @slot('cols_medium','3') + @slot('cols_large','4') + @slot('cols_xlarge','4') + @slot('optionLayout','o-pinboard--2-col@xsmall o-pinboard--2-col@small o-pinboard--2-col@medium o-pinboard--3-col@large o-pinboard--3-col@xlarge') + @component('site.publications._items') + @slot('publications', $publications) + @endcomponent +@endcomponent diff --git a/resources/views/site/landingPage/_header----publications.blade.php b/resources/views/site/landingPage/_header----publications.blade.php new file mode 100644 index 000000000..e69de29bb diff --git a/resources/views/site/publications/_items.blade.php b/resources/views/site/publications/_items.blade.php new file mode 100644 index 000000000..3a57bad73 --- /dev/null +++ b/resources/views/site/publications/_items.blade.php @@ -0,0 +1,31 @@ +@php + use App\Helpers\GtmHelpers; +@endphp +@foreach ($publications as $item) + @component('components.molecules._m-listing----publication') + {{-- @slot('variation', 'o-pinboard__item') --}} + @slot('href', $item->present()->url) + @slot('image', $item->imageFront('listing')) + @slot('type', $item->present()->type) + @slot('title', $item->present()->title) + @slot('title_display', $item->present()->title_display) + @slot('list_description', $item->present()->list_description) + @slot('author_display', '') + @slot('imageSettings', array( + 'fit' => null, + 'ratio' => null, + 'srcset' => array(200,400,600,1000,1500), + 'sizes' => ImageHelpers::aic_imageSizes(array( + 'xsmall' => '58', + 'small' => '58', + 'medium' => '38', + 'large' => '28', + 'xlarge' => '28', + )), + )) + @slot('gtmAttributes', GtmHelpers::combineGtmAttributes([ + GtmHelpers::getGtmAttributesForClickMetaDataEventOnArtwork($item), + 'data-gtm-event="' . $item->title . '" data-gtm-event-category="publication-landing"', + ])) + @endcomponent +@endforeach From ae821d8d86ce9e14e21da6ed189aaed7a600930c Mon Sep 17 00:00:00 2001 From: nikhil trivedi Date: Fri, 13 Dec 2024 12:56:31 -0600 Subject: [PATCH 4/8] Layout gridboard with uniform rows [WEB-2976] --- frontend/js/behaviors/core/gridboard.js | 222 ++++++++++++++++++++++++ frontend/js/behaviors/core/index.js | 1 + 2 files changed, 223 insertions(+) create mode 100644 frontend/js/behaviors/core/gridboard.js diff --git a/frontend/js/behaviors/core/gridboard.js b/frontend/js/behaviors/core/gridboard.js new file mode 100644 index 000000000..955b85332 --- /dev/null +++ b/frontend/js/behaviors/core/gridboard.js @@ -0,0 +1,222 @@ +import { forEach, triggerCustomEvent } from '@area17/a17-helpers'; +import { mediaQuery } from '../../functions/core'; + +const gridboard = function(container) { + let colCounts = {}; + let colCount = 0; + let colCurrent = 0; + let cols; + let active = false; + let maintainOrder = false; + let primeLayout = container.className; + let optionLayout = container.getAttribute('data-gridboard-option-layout'); + const re = /([0-9])-col@(\w*)/gi; + + function _getColCounts(classes) { + let classListColInfo; + while ((classListColInfo = re.exec(classes)) !== null) { + colCounts[classListColInfo[2]] = classListColInfo[1]; + } + } + + function _minOfArray(array) { + return Math.min.apply(Math, array); + } + + function _maxOfArray(array) { + return Math.max.apply(Math, array); + } + + function _getMarginTop(node) { + let style = window.getComputedStyle(node); + return parseInt(style.getPropertyValue('margin-top')); + } + + function _unpositionBlocks() { + if (active) { + forEach(container.children, function(index, block) { + block.style.left = ''; + block.style.top = ''; + block.style.height = ''; + block.classList.remove('s-positioned'); + }); + container.style.height = ''; + } + } + + function _positionBlocks(resetPreviousPositions) { + let blocks = container.children; + if (blocks.length === 0) { + return; + } + + // Get the top margin of the first block + let firstChild = container.firstElementChild; + firstChild.classList.add('s-repositioning'); + let marginTop = _getMarginTop(firstChild); + firstChild.classList.remove('s-repositioning'); + + let colWidth = firstChild.offsetWidth; + let marginLeft = (container.offsetWidth - colWidth * colCount) / (colCount - 1); + marginTop = typeof marginTop === 'number' ? marginTop : 60; // Default margin top to 60px if calculation fails + + let rows = []; + let currentRow = []; + let currentRowHeight = 0; + + // Loop through each block and position them based on the column layout + forEach(blocks, function(index, block) { + if ( + !block.classList.contains('s-positioned') || + resetPreviousPositions + ) { + block.style.height = 'auto'; + block.style.top = "auto"; + block.style.left = "auto"; + + let colIndex = index % colCount; + let rowIndex = Math.floor(index / colCount); + + if (rowIndex !== rows.length) { + rows.push(currentRow); + currentRow = []; + currentRowHeight = 0; + } + + currentRow.push(block); + + // Calculate the top position based on the tallest element in the previous row + let topPosition = rowIndex === 0 ? 0 : rows[rowIndex - 1].reduce((maxHeight, el) => { + return Math.max(maxHeight, el.offsetTop + el.offsetHeight); + }, 0) + marginTop; + + // Set the `top` and `left` positions for the block + let leftPosition = colIndex * (colWidth + marginLeft); + block.style.position = "absolute"; + block.style.left = `${Math.round(leftPosition)}px`; + block.style.top = `${Math.round(topPosition)}px`; + + currentRowHeight = Math.max(currentRowHeight, block.offsetHeight); + + // Determine and set the height of the block + let computedStyle = window.getComputedStyle(block); + let paddingTop = parseFloat(computedStyle.paddingTop) || 0; + let paddingBottom = + parseFloat(computedStyle.paddingBottom) || 0; + + let newHeight = + block.offsetHeight + paddingTop + paddingBottom + 12; + + block.style.height = Math.round(newHeight) + 'px'; + + // Add the 's-positioned' class after a delay to mark it as positioned + setTimeout(function() { + block.classList.add('s-positioned'); + }, 250); + + // Update the overall container height to the height of the tallest column + container.style.height = (topPosition + newHeight) + 'px'; + + // Trigger a custom event to signal that the page has been updated + triggerCustomEvent(document, 'page:updated'); + } + }); + } + + function _setupBlocks() { + colCount = colCounts[A17.currentMediaQuery]; + if (colCount) { + cols = []; + for (var i = 0; i < colCount; i++) { + cols.push(0); + } + active = true; + _positionBlocks(true); + } else { + _unpositionBlocks(); + active = false; + } + } + + function _contentAdded() { + _positionBlocks(); + } + + function _resized() { + setTimeout(function() { + _getColCounts( + document.documentElement.classList.contains( + 's-collection-filters-active', + ) && optionLayout + ? optionLayout + : container.className, + ); + _setupBlocks(); + }, 32); + } + + function _showFilters() { + if (mediaQuery('medium+')) { + setTimeout(function() { + _getColCounts(optionLayout); + _setupBlocks(); + }, 432); + } + } + + function _hideFilters() { + if (mediaQuery('medium+')) { + setTimeout(function() { + _getColCounts(container.className); + _setupBlocks(); + }, 432); + } + } + + function _init() { + maintainOrder = + container.getAttribute('data-gridboard-maintain-order') === 'true'; + _getColCounts( + document.documentElement.classList.contains( + 's-collection-filters-active', + ) && optionLayout + ? optionLayout + : container.className, + ); + setTimeout(function() { + _setupBlocks(); + }, 32); // Add a slight delay for the initial setup similar to how resize behaves + container.addEventListener( + 'gridboard:contentAdded', + _contentAdded, + false, + ); + document.addEventListener('resized', _resized, false); + document.addEventListener('ajaxPageLoad:complete', _resized, false); + document.addEventListener( + 'collectionFilters:open', + _showFilters, + false, + ); + document.addEventListener( + 'collectionFilters:close', + _hideFilters, + false, + ); + } + + this.destroy = function() { + container.removeEventListener('gridboard:contentAdded', _contentAdded); + document.removeEventListener('resized', _resized); + document.removeEventListener('ajaxPageLoad:complete', _resized); + document.removeEventListener('collectionFilters:open', _showFilters); + document.removeEventListener('collectionFilters:close', _hideFilters); + A17.Helpers.purgeProperties(this); + }; + + this.init = function() { + _init(); + }; +}; + +export default gridboard; diff --git a/frontend/js/behaviors/core/index.js b/frontend/js/behaviors/core/index.js index 7e9237c62..ca9d666cf 100644 --- a/frontend/js/behaviors/core/index.js +++ b/frontend/js/behaviors/core/index.js @@ -12,6 +12,7 @@ export { default as sharePage } from './sharePage'; export { default as shareMenu } from './shareMenu'; export { default as mask } from './mask'; export { default as pinboard } from './pinboard'; +export { default as gridboard } from './gridboard'; export { default as bannerParallax } from './bannerParallax'; export { default as imageInfo } from './imageInfo'; export { default as headerGallery } from './headerGallery'; From 654c15e62710e96dcea2ecb19823252ec5cb8774 Mon Sep 17 00:00:00 2001 From: nikhil trivedi Date: Thu, 19 Dec 2024 12:55:01 -0600 Subject: [PATCH 5/8] Add buttons to demonstrate different functionality [WEB-2976] --- frontend/js/behaviors/core/gridboard.js | 176 +++++++++--------- .../organisms/_o-gridboard.blade.php | 13 +- resources/views/site/artworkDetail.blade.php | 4 +- .../_footer----publications.blade.php | 1 - .../views/site/publications/_items.blade.php | 1 + 5 files changed, 105 insertions(+), 90 deletions(-) diff --git a/frontend/js/behaviors/core/gridboard.js b/frontend/js/behaviors/core/gridboard.js index 955b85332..e0933af41 100644 --- a/frontend/js/behaviors/core/gridboard.js +++ b/frontend/js/behaviors/core/gridboard.js @@ -1,15 +1,12 @@ -import { forEach, triggerCustomEvent } from '@area17/a17-helpers'; -import { mediaQuery } from '../../functions/core'; +import { forEach, triggerCustomEvent, queryStringHandler, getUrlParameterByName } from '@area17/a17-helpers'; const gridboard = function(container) { let colCounts = {}; let colCount = 0; - let colCurrent = 0; let cols; let active = false; - let maintainOrder = false; - let primeLayout = container.className; - let optionLayout = container.getAttribute('data-gridboard-option-layout'); + let btnRandom = container.querySelector('.o-gridboard__btn-random'); + let btnPages = Array.from(container.querySelectorAll('.o-gridboard__btn-page')); const re = /([0-9])-col@(\w*)/gi; function _getColCounts(classes) { @@ -19,14 +16,6 @@ const gridboard = function(container) { } } - function _minOfArray(array) { - return Math.min.apply(Math, array); - } - - function _maxOfArray(array) { - return Math.max.apply(Math, array); - } - function _getMarginTop(node) { let style = window.getComputedStyle(node); return parseInt(style.getPropertyValue('margin-top')); @@ -34,31 +23,36 @@ const gridboard = function(container) { function _unpositionBlocks() { if (active) { - forEach(container.children, function(index, block) { + forEach(container.getElementsByClassName('o-gridboard')[0].children, function(index, block) { block.style.left = ''; block.style.top = ''; block.style.height = ''; block.classList.remove('s-positioned'); }); - container.style.height = ''; + container.getElementsByClassName('o-gridboard')[0].style.height = ''; } } function _positionBlocks(resetPreviousPositions) { - let blocks = container.children; + let allBlocks = container.getElementsByClassName('o-gridboard')[0].children; + + let blocks = Array.from(allBlocks).filter(child => { + return window.getComputedStyle(child).display !== 'none'; + }); + if (blocks.length === 0) { return; } // Get the top margin of the first block - let firstChild = container.firstElementChild; + let firstChild = blocks[0]; firstChild.classList.add('s-repositioning'); let marginTop = _getMarginTop(firstChild); + marginTop = typeof marginTop === 'number' ? marginTop : 60; // Default margin top to 60px if calculation fails firstChild.classList.remove('s-repositioning'); let colWidth = firstChild.offsetWidth; - let marginLeft = (container.offsetWidth - colWidth * colCount) / (colCount - 1); - marginTop = typeof marginTop === 'number' ? marginTop : 60; // Default margin top to 60px if calculation fails + let marginLeft = (container.getElementsByClassName('o-gridboard')[0].offsetWidth - colWidth * colCount) / (colCount - 1); let rows = []; let currentRow = []; @@ -70,11 +64,7 @@ const gridboard = function(container) { !block.classList.contains('s-positioned') || resetPreviousPositions ) { - block.style.height = 'auto'; - block.style.top = "auto"; - block.style.left = "auto"; - - let colIndex = index % colCount; + let colIndex = index % colCount; let rowIndex = Math.floor(index / colCount); if (rowIndex !== rows.length) { @@ -86,9 +76,17 @@ const gridboard = function(container) { currentRow.push(block); // Calculate the top position based on the tallest element in the previous row - let topPosition = rowIndex === 0 ? 0 : rows[rowIndex - 1].reduce((maxHeight, el) => { - return Math.max(maxHeight, el.offsetTop + el.offsetHeight); - }, 0) + marginTop; + let prevTop = 0; + let prevHeight = 0 + + if (rowIndex !== 0) { + prevTop = rows[rowIndex - 1][0].offsetTop; + prevHeight = rows[rowIndex - 1].reduce((maxHeight, el) => { + return Math.max(maxHeight, el.offsetHeight); + }, 0); + } + let topPosition = prevHeight + prevTop + marginTop; + // Set the `top` and `left` positions for the block let leftPosition = colIndex * (colWidth + marginLeft); @@ -98,25 +96,13 @@ const gridboard = function(container) { currentRowHeight = Math.max(currentRowHeight, block.offsetHeight); - // Determine and set the height of the block - let computedStyle = window.getComputedStyle(block); - let paddingTop = parseFloat(computedStyle.paddingTop) || 0; - let paddingBottom = - parseFloat(computedStyle.paddingBottom) || 0; - - let newHeight = - block.offsetHeight + paddingTop + paddingBottom + 12; - - block.style.height = Math.round(newHeight) + 'px'; + container.getElementsByClassName('o-gridboard')[0].style.height = (topPosition + currentRowHeight) + 'px'; // Add the 's-positioned' class after a delay to mark it as positioned setTimeout(function() { block.classList.add('s-positioned'); }, 250); - // Update the overall container height to the height of the tallest column - container.style.height = (topPosition + newHeight) + 'px'; - // Trigger a custom event to signal that the page has been updated triggerCustomEvent(document, 'page:updated'); } @@ -144,73 +130,93 @@ const gridboard = function(container) { function _resized() { setTimeout(function() { - _getColCounts( - document.documentElement.classList.contains( - 's-collection-filters-active', - ) && optionLayout - ? optionLayout - : container.className, - ); + _getColCounts(container.getElementsByClassName('o-gridboard')[0].className); _setupBlocks(); }, 32); } - function _showFilters() { - if (mediaQuery('medium+')) { - setTimeout(function() { - _getColCounts(optionLayout); - _setupBlocks(); - }, 432); + function _executeRandom() { + let blocks = container.getElementsByClassName('o-gridboard')[0].children; + if (blocks.length === 0) { + return; + } + + let shown = 0; + + // Loop through each block and position them based on the column layout + forEach(blocks, function(index, block) { + var random_boolean = Math.random() < 0.5; + if (random_boolean && shown < 50) { + block.style.display = 'flex'; + shown++; + } + else { + block.style.display = 'none'; } + }); + setTimeout(function() { + _setupBlocks(); + triggerCustomEvent(document, 'page:updated'); + }, 32); } - function _hideFilters() { - if (mediaQuery('medium+')) { - setTimeout(function() { - _getColCounts(container.className); - _setupBlocks(); - }, 432); + function _executePage(page) { + let blocks = container.getElementsByClassName('o-gridboard')[0].children; + if (blocks.length === 0) { + return; + } + + // Loop through each block and position them based on the column layout + forEach(blocks, function(index, block) { + if ((Math.floor(index / 50) + 1) == page) { + block.style.display = 'flex'; + } + else { + block.style.display = 'none'; } + }); + setTimeout(function() { + _setupBlocks(); + triggerCustomEvent(document, 'page:updated', {'page': page}); + + window.history.pushState("", queryStringHandler.updateParameter(window.location.href, 'page', page)); + }, 32); } function _init() { - maintainOrder = - container.getAttribute('data-gridboard-maintain-order') === 'true'; - _getColCounts( - document.documentElement.classList.contains( - 's-collection-filters-active', - ) && optionLayout - ? optionLayout - : container.className, - ); - setTimeout(function() { - _setupBlocks(); - }, 32); // Add a slight delay for the initial setup similar to how resize behaves - container.addEventListener( + _getColCounts(container.getElementsByClassName('o-gridboard')[0].className); + + let page = getUrlParameterByName('page', window.location.search); + + if (page) { + _executePage(page); + } + else { + setTimeout(function() { + _setupBlocks(); + }, 32); // Add a slight delay for the initial setup similar to how resize behaves + } + container.getElementsByClassName('o-gridboard')[0].addEventListener( 'gridboard:contentAdded', _contentAdded, false, ); document.addEventListener('resized', _resized, false); document.addEventListener('ajaxPageLoad:complete', _resized, false); - document.addEventListener( - 'collectionFilters:open', - _showFilters, - false, - ); - document.addEventListener( - 'collectionFilters:close', - _hideFilters, - false, - ); + btnRandom.addEventListener('click', _executeRandom); + forEach(btnPages, function(index, btn) { + btn.addEventListener('click', _executePage.bind(this, btn.innerText), false); + }); } this.destroy = function() { container.removeEventListener('gridboard:contentAdded', _contentAdded); document.removeEventListener('resized', _resized); document.removeEventListener('ajaxPageLoad:complete', _resized); - document.removeEventListener('collectionFilters:open', _showFilters); - document.removeEventListener('collectionFilters:close', _hideFilters); + btnRandom.removeEventListener('click', _executeRandom); + forEach(btnPages, function(index, btn) { + btn.removeEventListener('click', _executePage.bind(this, btn.innerText), false); + }); A17.Helpers.purgeProperties(this); }; diff --git a/resources/views/components/organisms/_o-gridboard.blade.php b/resources/views/components/organisms/_o-gridboard.blade.php index f36ca9aed..1fc0f967e 100644 --- a/resources/views/components/organisms/_o-gridboard.blade.php +++ b/resources/views/components/organisms/_o-gridboard.blade.php @@ -1,6 +1,15 @@ +
@if (isset($title))

{{ $title }}

@endif - + + + + + + + + {!! $slot !!} - + +
diff --git a/resources/views/site/artworkDetail.blade.php b/resources/views/site/artworkDetail.blade.php index 56c0f7ebf..ae7e070dd 100644 --- a/resources/views/site/artworkDetail.blade.php +++ b/resources/views/site/artworkDetail.blade.php @@ -112,7 +112,7 @@
@component('site.shared._loadRelatedSidebar') @slot('item', $item) - @endcomponent + @endcomponent
@endif @@ -148,7 +148,7 @@ @if ($exploreFurtherCollectionUrl) @component('components.molecules._m-links-bar') - @slot('variation', 'm-links-bar--buttons') + @slot('variation', 'm-links-bar-- s') @slot('linksPrimary', [ [ 'label' => 'See more results', diff --git a/resources/views/site/landingPage/_footer----publications.blade.php b/resources/views/site/landingPage/_footer----publications.blade.php index 2fd8e87c9..56b64fa2e 100644 --- a/resources/views/site/landingPage/_footer----publications.blade.php +++ b/resources/views/site/landingPage/_footer----publications.blade.php @@ -5,7 +5,6 @@ @slot('cols_medium','3') @slot('cols_large','4') @slot('cols_xlarge','4') - @slot('optionLayout','o-pinboard--2-col@xsmall o-pinboard--2-col@small o-pinboard--2-col@medium o-pinboard--3-col@large o-pinboard--3-col@xlarge') @component('site.publications._items') @slot('publications', $publications) @endcomponent diff --git a/resources/views/site/publications/_items.blade.php b/resources/views/site/publications/_items.blade.php index 3a57bad73..dd9ce7604 100644 --- a/resources/views/site/publications/_items.blade.php +++ b/resources/views/site/publications/_items.blade.php @@ -1,6 +1,7 @@ @php use App\Helpers\GtmHelpers; @endphp + @foreach ($publications as $item) @component('components.molecules._m-listing----publication') {{-- @slot('variation', 'o-pinboard__item') --}} From 94a8a3c82cab8d9f7145542534c423f98ea61ce5 Mon Sep 17 00:00:00 2001 From: nikhil trivedi Date: Wed, 8 Jan 2025 20:20:58 -0600 Subject: [PATCH 6/8] Refactor randon button as tag links [WEB-2976] --- frontend/js/behaviors/core/gridboard.js | 33 ++++++++++++++----- .../organisms/_o-gridboard.blade.php | 10 ++++-- 2 files changed, 31 insertions(+), 12 deletions(-) diff --git a/frontend/js/behaviors/core/gridboard.js b/frontend/js/behaviors/core/gridboard.js index e0933af41..6269658c7 100644 --- a/frontend/js/behaviors/core/gridboard.js +++ b/frontend/js/behaviors/core/gridboard.js @@ -5,7 +5,7 @@ const gridboard = function(container) { let colCount = 0; let cols; let active = false; - let btnRandom = container.querySelector('.o-gridboard__btn-random'); + let btnRandoms = Array.from(container.querySelectorAll('.o-gridboard__btn-random')); let btnPages = Array.from(container.querySelectorAll('.o-gridboard__btn-page')); const re = /([0-9])-col@(\w*)/gi; @@ -135,20 +135,18 @@ const gridboard = function(container) { }, 32); } - function _executeRandom() { + function _executeRandom(tag, hash) { let blocks = container.getElementsByClassName('o-gridboard')[0].children; if (blocks.length === 0) { return; } - let shown = 0; + let hashes = hash.split(''); // Loop through each block and position them based on the column layout forEach(blocks, function(index, block) { - var random_boolean = Math.random() < 0.5; - if (random_boolean && shown < 50) { + if (hashes[index] == '1') { block.style.display = 'flex'; - shown++; } else { block.style.display = 'none'; @@ -157,6 +155,10 @@ const gridboard = function(container) { setTimeout(function() { _setupBlocks(); triggerCustomEvent(document, 'page:updated'); + // Update history + triggerCustomEvent(document, 'history:pushstate', { + url: '?tag=' + kebabCase(tag), + }); }, 32); } @@ -179,10 +181,19 @@ const gridboard = function(container) { _setupBlocks(); triggerCustomEvent(document, 'page:updated', {'page': page}); - window.history.pushState("", queryStringHandler.updateParameter(window.location.href, 'page', page)); + triggerCustomEvent(document, 'history:pushstate', { + url: '?page=' + page, + }); }, 32); } + function kebabCase(string) { + return string.replace(/\W+/g, " ") + .split(/ |\B(?=[A-Z])/) + .map(word => word.toLowerCase()) + .join('-'); + } + function _init() { _getColCounts(container.getElementsByClassName('o-gridboard')[0].className); @@ -203,7 +214,9 @@ const gridboard = function(container) { ); document.addEventListener('resized', _resized, false); document.addEventListener('ajaxPageLoad:complete', _resized, false); - btnRandom.addEventListener('click', _executeRandom); + forEach(btnRandoms, function(index, btn) { + btn.addEventListener('click', _executeRandom.bind(this, btn.innerText, btn.getAttribute('data-hash')), false); + }); forEach(btnPages, function(index, btn) { btn.addEventListener('click', _executePage.bind(this, btn.innerText), false); }); @@ -213,10 +226,12 @@ const gridboard = function(container) { container.removeEventListener('gridboard:contentAdded', _contentAdded); document.removeEventListener('resized', _resized); document.removeEventListener('ajaxPageLoad:complete', _resized); - btnRandom.removeEventListener('click', _executeRandom); forEach(btnPages, function(index, btn) { btn.removeEventListener('click', _executePage.bind(this, btn.innerText), false); }); + forEach(btnRandoms, function(index, btn) { + btn.removeEventListener('click', _executeRandom.bind(this, btn.innerText, btn.getAttribute('data-hash')), false); + }); A17.Helpers.purgeProperties(this); }; diff --git a/resources/views/components/organisms/_o-gridboard.blade.php b/resources/views/components/organisms/_o-gridboard.blade.php index 1fc0f967e..dee619b6d 100644 --- a/resources/views/components/organisms/_o-gridboard.blade.php +++ b/resources/views/components/organisms/_o-gridboard.blade.php @@ -1,13 +1,17 @@ -
+
@if (isset($title))

{{ $title }}

@endif - + + + + + - + {!! $slot !!} From 91e25166623d0a106658cea2da5d8f495e56e24a Mon Sep 17 00:00:00 2001 From: nikhil trivedi Date: Thu, 9 Jan 2025 09:10:29 -0600 Subject: [PATCH 7/8] Cleanup [WEB-2976] --- resources/views/site/artworkDetail.blade.php | 2 +- resources/views/site/publications/_items.blade.php | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/resources/views/site/artworkDetail.blade.php b/resources/views/site/artworkDetail.blade.php index ae7e070dd..02c86b3fe 100644 --- a/resources/views/site/artworkDetail.blade.php +++ b/resources/views/site/artworkDetail.blade.php @@ -148,7 +148,7 @@ @if ($exploreFurtherCollectionUrl) @component('components.molecules._m-links-bar') - @slot('variation', 'm-links-bar-- s') + @slot('variation', 'm-links-bar--buttons') @slot('linksPrimary', [ [ 'label' => 'See more results', diff --git a/resources/views/site/publications/_items.blade.php b/resources/views/site/publications/_items.blade.php index dd9ce7604..698f69ff6 100644 --- a/resources/views/site/publications/_items.blade.php +++ b/resources/views/site/publications/_items.blade.php @@ -4,7 +4,6 @@ @foreach ($publications as $item) @component('components.molecules._m-listing----publication') - {{-- @slot('variation', 'o-pinboard__item') --}} @slot('href', $item->present()->url) @slot('image', $item->imageFront('listing')) @slot('type', $item->present()->type) From 25f97f98ac71a01bf8e5b13773957d5dd01a5770 Mon Sep 17 00:00:00 2001 From: nikhil trivedi Date: Thu, 9 Jan 2025 09:23:33 -0600 Subject: [PATCH 8/8] More cleanup [WEB-2976] --- .../views/components/organisms/_o-gridboard.blade.php | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/resources/views/components/organisms/_o-gridboard.blade.php b/resources/views/components/organisms/_o-gridboard.blade.php index dee619b6d..23969b4be 100644 --- a/resources/views/components/organisms/_o-gridboard.blade.php +++ b/resources/views/components/organisms/_o-gridboard.blade.php @@ -3,10 +3,10 @@

{{ $title }}

@endif - - - - + + + +