From fe69956a076a97ff9bbfcccc07d75a15bccfe9ea Mon Sep 17 00:00:00 2001 From: Illya Moskvin Date: Mon, 20 Apr 2020 11:11:30 -0500 Subject: [PATCH 001/115] Reduce width of issue header text on medium [WEB-1615] --- frontend/scss/molecules/_m-article-header.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/scss/molecules/_m-article-header.scss b/frontend/scss/molecules/_m-article-header.scss index 85e9db759b..08c97c8ef8 100644 --- a/frontend/scss/molecules/_m-article-header.scss +++ b/frontend/scss/molecules/_m-article-header.scss @@ -889,7 +889,7 @@ } @include breakpoint('medium+') { - width: 50%; + width: 33%; } @include breakpoint('large+') { From e906538f5c24a509bb15228d1cc8bd241c773906 Mon Sep 17 00:00:00 2001 From: Illya Moskvin Date: Mon, 20 Apr 2020 11:18:06 -0500 Subject: [PATCH 002/115] Adjust hover behavior of article cards on issue [WEB-1615] - Turned off border color change - "Article" tag is now permanently blue - Animation is more subtle: less zoom, and slower --- frontend/scss/molecules/_m-listing.scss | 13 +++---------- 1 file changed, 3 insertions(+), 10 deletions(-) diff --git a/frontend/scss/molecules/_m-listing.scss b/frontend/scss/molecules/_m-listing.scss index db1bfe8b1a..4d490489ca 100644 --- a/frontend/scss/molecules/_m-listing.scss +++ b/frontend/scss/molecules/_m-listing.scss @@ -1951,7 +1951,7 @@ $f-audio-subtitle: generate-font-obj( border: thin solid $color__grey--100; .m-listing__img img { - transition: transform .1s ease-in-out; + transition: transform .35s ease-in-out; } .m-listing__meta { @@ -1966,7 +1966,7 @@ $f-audio-subtitle: generate-font-obj( > .f-tag { margin-top: 0; margin-bottom: 12px; - color: $color__black--90; + color: $color__blue--100; } .title { @@ -1997,18 +1997,11 @@ $f-audio-subtitle: generate-font-obj( &:hover, &:focus { - border-color: $color__blue--100; - .m-listing__img img { - transform: scale(1.2); + transform: scale(1.1); } .m-listing__meta { - - > .f-tag { - color: $color__blue--100; - } - .title { text-decoration: underline; } From edfdb3975fffcef29a8ba53b04c73319a2a988e9 Mon Sep 17 00:00:00 2001 From: Illya Moskvin Date: Mon, 20 Apr 2020 11:30:01 -0500 Subject: [PATCH 003/115] Fix spacing around xsmall article cards on issue [WEB-1615] --- frontend/scss/organisms/_o-grid-listing.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/frontend/scss/organisms/_o-grid-listing.scss b/frontend/scss/organisms/_o-grid-listing.scss index 881f0d5fd3..da11639fe2 100644 --- a/frontend/scss/organisms/_o-grid-listing.scss +++ b/frontend/scss/organisms/_o-grid-listing.scss @@ -907,6 +907,14 @@ Draws boxes around each grid item } } + // Override weird default above: no space to breathe! + @include breakpoint('xsmall') { + &.o-grid-listing[class*="col@xsmall"] > * { + margin-top: colspan(map-get($grid-padding-tops, 'xsmall'), xsmall); + width: colspan(58, xsmall); + } + } + // Ensure all cards after the first rows have the right margin-top: @each $name, $point in $breakpoints { @include breakpoint('#{$name}') { From 5e390cbad4779e537b83d872eaa1b34c6c627f81 Mon Sep 17 00:00:00 2001 From: Illya Moskvin Date: Mon, 20 Apr 2020 13:00:34 -0500 Subject: [PATCH 004/115] Add vertical rule between issue contents and sidebar [WEB-1597] --- frontend/scss/molecules/_m-article-header.scss | 16 ++++------------ frontend/scss/pages/_p-issue-show.scss | 18 ++++++++++++++++++ frontend/scss/setup/_variables.scss | 8 ++++++++ 3 files changed, 30 insertions(+), 12 deletions(-) diff --git a/frontend/scss/molecules/_m-article-header.scss b/frontend/scss/molecules/_m-article-header.scss index 08c97c8ef8..558315ae58 100644 --- a/frontend/scss/molecules/_m-article-header.scss +++ b/frontend/scss/molecules/_m-article-header.scss @@ -750,18 +750,10 @@ padding-left: 0; } - margin-bottom: 24px; - - @include breakpoint('small+') { - margin-bottom: 32px; - } - - @include breakpoint('medium+') { - margin-bottom: 48px; - } - - @include breakpoint('large+') { - margin-bottom: 60px; + @each $name, $point in $breakpoints { + @include breakpoint('#{$name}') { + margin-bottom: #{map-get($journal-header-margin-bottom, $name)}; + } } .m-article-header__img { diff --git a/frontend/scss/pages/_p-issue-show.scss b/frontend/scss/pages/_p-issue-show.scss index 761c3ee127..65ef2840f5 100644 --- a/frontend/scss/pages/_p-issue-show.scss +++ b/frontend/scss/pages/_p-issue-show.scss @@ -35,4 +35,22 @@ .o-article ~ hr { margin-top: 0; } + + .o-article__body::before { + position: absolute; + background-color: $color__rules--primary; + width: 1px; + + @include breakpoint('large+') { + content: ''; + } + + @each $name in ('large', 'xlarge') { + @include breakpoint('#{$name}') { + left: #{- colspan(1, '#{$name}')}; + top: #{- map-get($journal-header-margin-bottom, $name)}; + height: calc(100% + #{map-get($journal-header-margin-bottom, $name)}); + } + } + } } diff --git a/frontend/scss/setup/_variables.scss b/frontend/scss/setup/_variables.scss index e609fc6e90..5915b44ea2 100755 --- a/frontend/scss/setup/_variables.scss +++ b/frontend/scss/setup/_variables.scss @@ -102,6 +102,14 @@ $pinboard-grid-padding-tops: ( xlarge: 32, ); +$journal-header-margin-bottom: ( + xsmall: 24px, + small: 32px, + medium: 48px, + large: 60px, + xlarge: 60px, +); + // #################################################### // Site font stack variables // From d4f125b03b3e7559cdce4ec4b45692596ca24c2e Mon Sep 17 00:00:00 2001 From: nikhiltri Date: Wed, 29 Apr 2020 13:22:17 -0500 Subject: [PATCH 005/115] Output Prince output to a file in the 'storage/logs' directory [WEB-1595] --- app/Console/Commands/GeneratePdfs.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/Console/Commands/GeneratePdfs.php b/app/Console/Commands/GeneratePdfs.php index a26fcbd1b5..8880d0d1ac 100644 --- a/app/Console/Commands/GeneratePdfs.php +++ b/app/Console/Commands/GeneratePdfs.php @@ -55,7 +55,7 @@ public function handle() if (config('app.debug')) { $prince->setVerbose(true); - $prince->setLog('/Users/ntrive/tmp/prince.log'); + $prince->setLog(storage_path('logs/prince-' .date('Y-m-d') .'.log')); } set_time_limit(0); From 03bc6b7e9cad508d8d959bd372d5b9afdcf87caa Mon Sep 17 00:00:00 2001 From: nikhiltri Date: Wed, 29 Apr 2020 13:27:34 -0500 Subject: [PATCH 006/115] Move print mode flag to a service provider, rather than checking in multiple places [WEB-1595] --- app/Presenters/Admin/ArtworkPresenter.php | 2 +- app/Providers/AppServiceProvider.php | 21 +++++++++++++++++++ .../views/components/atoms/_img.blade.php | 2 +- resources/views/layouts/app.blade.php | 2 +- resources/views/layouts/block.blade.php | 2 +- 5 files changed, 25 insertions(+), 4 deletions(-) diff --git a/app/Presenters/Admin/ArtworkPresenter.php b/app/Presenters/Admin/ArtworkPresenter.php index 5c790fc761..af7478e29f 100644 --- a/app/Presenters/Admin/ArtworkPresenter.php +++ b/app/Presenters/Admin/ArtworkPresenter.php @@ -112,7 +112,7 @@ public function blocks() ] : [ "type" => 'text', "content" => '

Object information is a work in progress and may be updated as new research findings emerge. To help improve this record, please email ' - .(isset($_GET['print']) ? 'collections@artic.edu' : '') + .(app('printservice')->isPrintMode() ? 'collections@artic.edu' : '') .'. Information about image downloads and licensing is available here.

', ]); diff --git a/app/Providers/AppServiceProvider.php b/app/Providers/AppServiceProvider.php index 724d65933c..a8dfbc94f4 100644 --- a/app/Providers/AppServiceProvider.php +++ b/app/Providers/AppServiceProvider.php @@ -29,6 +29,7 @@ public function boot() $this->registerLakeviewImageService(); $this->registerEmbedConverterService(); $this->registerClosureService(); + $this->registerPrintService(); $this->composeTemplatesViews(); File::observe(FileObserver::class); @@ -122,6 +123,26 @@ public function getClosure() }); } + public function registerPrintService() + { + $this->app->singleton('printservice', function ($app) { + return new class() { + + private $isPrintMode; + + public function __construct() + { + $this->isPrintMode = isset($_GET['print']); + } + + public function isPrintMode() + { + return $this->isPrintMode; + } + }; + }); + } + /** * Register any application services. * diff --git a/resources/views/components/atoms/_img.blade.php b/resources/views/components/atoms/_img.blade.php index a50b38d6d3..9003683264 100644 --- a/resources/views/components/atoms/_img.blade.php +++ b/resources/views/components/atoms/_img.blade.php @@ -52,7 +52,7 @@ class="{{ $image['class'] ?? '' }} {{ $class ?? '' }} {{ $restrict ? 'restrict' @if (isset($behavior) || $restrict) data-behavior="{{ $behavior ?? '' }}{{ $restrict ? ' restrictDownload' : ''}}" @endif - @if (isset($_GET['print']) or (isset($settings['lazyload']) and $settings['lazyload'] === false)) + @if (app('printservice')->isPrintMode() or (isset($settings['lazyload']) and $settings['lazyload'] === false)) srcset="{{ $srcset ?? '' }}" @else data-srcset="{{ $srcset ?? '' }}" diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php index 2f0c07d857..62db834f4a 100644 --- a/resources/views/layouts/app.blade.php +++ b/resources/views/layouts/app.blade.php @@ -1,5 +1,5 @@ @php -$print = isset($_GET['print']); +$print = app('printservice')->isPrintMode(); $pClass = request()->route()->getAction()['controller'] ?? 'App\Http\Controllers\GenericPagesController'; $pClass = preg_replace('/App\\\\Http\\\\Controllers\\\\/i','p-',$pClass); $pClass = preg_replace('/Controller/i','',$pClass); diff --git a/resources/views/layouts/block.blade.php b/resources/views/layouts/block.blade.php index 85dc2b42f4..a49aaaaeca 100644 --- a/resources/views/layouts/block.blade.php +++ b/resources/views/layouts/block.blade.php @@ -1,5 +1,5 @@ @php -$print = isset($_GET['print']); +$print = app('printservice')->isPrintMode(); @endphp From dde32b566cf917046a9d0ef21aa14753c987a2a8 Mon Sep 17 00:00:00 2001 From: nikhiltri Date: Wed, 29 Apr 2020 13:28:14 -0500 Subject: [PATCH 007/115] Default img src to the largest srcset image when displaying in print mode, since not all print devices support srcset [WEB-1595] --- resources/views/components/atoms/_img.blade.php | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/resources/views/components/atoms/_img.blade.php b/resources/views/components/atoms/_img.blade.php index 9003683264..d787da0f74 100644 --- a/resources/views/components/atoms/_img.blade.php +++ b/resources/views/components/atoms/_img.blade.php @@ -15,6 +15,10 @@ $srcset = $settings['srcset']; $sizes = $settings['sizes']; $src = $settings['lqip'] ?? $settings['src']; + if (app('printservice')->isPrintMode()) { + $lastSrcset = trim(last(explode(',', $srcset))); + $src = substr($lastSrcset, 0, strrpos($lastSrcset, ' ')); + } $width = $settings['width']; $height = $settings['height']; $iiifId = $settings['iiifId']; From 070011ec8f17f89a14861fc0583210c117e0c486 Mon Sep 17 00:00:00 2001 From: nikhiltri Date: Wed, 29 Apr 2020 14:33:07 -0500 Subject: [PATCH 008/115] Add fallbacks to print src defaulting to largest srcset [WEB-1595] --- resources/views/components/atoms/_img.blade.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/resources/views/components/atoms/_img.blade.php b/resources/views/components/atoms/_img.blade.php index d787da0f74..50eedfd8b9 100644 --- a/resources/views/components/atoms/_img.blade.php +++ b/resources/views/components/atoms/_img.blade.php @@ -16,8 +16,8 @@ $sizes = $settings['sizes']; $src = $settings['lqip'] ?? $settings['src']; if (app('printservice')->isPrintMode()) { - $lastSrcset = trim(last(explode(',', $srcset))); - $src = substr($lastSrcset, 0, strrpos($lastSrcset, ' ')); + $lastSrcset = trim(last(explode(',', $srcset))) ?? ''; + $src = substr($lastSrcset, 0, strrpos($lastSrcset, ' ')) ?? $src; } $width = $settings['width']; $height = $settings['height']; From 3c9267e7516e334a57dce2cae5bfed8a29e6dd48 Mon Sep 17 00:00:00 2001 From: Illya Moskvin Date: Wed, 29 Apr 2020 10:02:16 -0500 Subject: [PATCH 009/115] Implement journal issue sidebar for desktop [WEB-1597] --- app/Http/Controllers/IssueController.php | 4 +- frontend/scss/molecules/_m-search-bar.scss | 6 +- frontend/scss/pages/_p-issue-show.scss | 72 +++++++++++++++++++ ...article-actions----journal-issue.blade.php | 52 ++++++++++++++ resources/views/site/issueDetail.blade.php | 4 +- 5 files changed, 133 insertions(+), 5 deletions(-) create mode 100644 resources/views/components/molecules/_m-article-actions----journal-issue.blade.php diff --git a/app/Http/Controllers/IssueController.php b/app/Http/Controllers/IssueController.php index 3c6a33a58f..0e1b28d5d3 100644 --- a/app/Http/Controllers/IssueController.php +++ b/app/Http/Controllers/IssueController.php @@ -17,7 +17,8 @@ public function __construct(IssueRepository $repository) public function show($issueNumber, $slug = null) { - $item = $this->repository->published()->where('issue_number', (Integer) $issueNumber)->first(); + $issues = $this->repository->published()->get(); + $item = $issues->where('issue_number', (Integer) $issueNumber)->first(); if (!$item) { abort(404); @@ -37,6 +38,7 @@ public function show($issueNumber, $slug = null) 'contrastHeader' => false, 'borderlessHeader' => false, 'item' => $item, + 'issues' => $issues, 'canonicalUrl' => route('issues.show', ['id' => $item->id, 'slug' => $item->getSlug()]), ]); } diff --git a/frontend/scss/molecules/_m-search-bar.scss b/frontend/scss/molecules/_m-search-bar.scss index 038b069152..5182f1f09d 100644 --- a/frontend/scss/molecules/_m-search-bar.scss +++ b/frontend/scss/molecules/_m-search-bar.scss @@ -53,7 +53,10 @@ .m-search-bar__submit, .m-search-bar__clear { - display: block; + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; width: 56px; height: 56px; @@ -92,7 +95,6 @@ .m-search-bar__clear svg { display: inline-block; position: relative; - top: -2px; vertical-align: middle; } diff --git a/frontend/scss/pages/_p-issue-show.scss b/frontend/scss/pages/_p-issue-show.scss index 65ef2840f5..fc52120835 100644 --- a/frontend/scss/pages/_p-issue-show.scss +++ b/frontend/scss/pages/_p-issue-show.scss @@ -36,6 +36,78 @@ margin-top: 0; } + .o-article__primary-actions { + + @each $name, $point in $breakpoints { + @include breakpoint('#{$name}') { + .m-article-actions--journal__blurb, + .m-search-bar, + hr, + ul { + margin-top: #{map-get(( + xsmall: 24, + small: 24, + medium: 24, + large: 24, + xlarge: 30 + ), $name)}px; + } + } + } + + .m-article-actions--journal__logo { + a { + color: $color__black--90; + } + + .icon--journal-logo { + height: 92px; + width: 120px; + } + } + + .m-article-actions--journal__blurb { + color: $color__black--54; + padding-right: 2em; + + a { + color: $color__black--54; + text-decoration: underline; + } + } + + .m-search-bar { + + input[type=text] { + height: 42px; + } + + .m-search-bar__submit, + .m-search-bar__clear { + width: 42px; + height: 42px; + } + } + + .tag--journal { + height: 60px; + padding-right: 16px; + line-height: 23px; + padding-left: 76px; + padding-top: 7px; + text-align: left; + + @include breakpoint('large+') { + display: block; + } + + img { + width: 60px; + height: 60px; + } + } + } + .o-article__body::before { position: absolute; background-color: $color__rules--primary; diff --git a/resources/views/components/molecules/_m-article-actions----journal-issue.blade.php b/resources/views/components/molecules/_m-article-actions----journal-issue.blade.php new file mode 100644 index 0000000000..44434c340e --- /dev/null +++ b/resources/views/components/molecules/_m-article-actions----journal-issue.blade.php @@ -0,0 +1,52 @@ +
{{-- See :nth-child(x) in _o-article.scss --}} + + + +

The Art Institute Review is dedicated to innovative object-centered scholarship and is published twice a year. Learn more.

+ + @component('components.molecules._m-search-bar') + @slot('placeholder','Search articles') + @slot('name', 'journal-search-mobile') + @slot('value', request('q')) + @slot('action', route('collection')) + @slot('gtmAttributes', 'data-gtm-event="click" data-gtm-event-category="journal f-search"') + @endcomponent + +
+ +
    + @foreach($issues as $issue) +
  • + @component('components.atoms._tag') + @slot('href', $issue->title) + @slot('dataAttributes',' data-ajax-scroll-target="collection"') + @slot('variation', 'tag--journal tag--senary tag--w-image') + @slot('gtmAttributes', 'data-gtm-event="' . getUtf8Slug( $issue->title ) . '" data-gtm-event-action="' . $seo->title . '" data-gtm-event-category="journal-sidebar-issue"') + @if (!empty($issue->imageFront('hero', 'default'))) + @component('components.atoms._img') + @slot('image', $issue->imageFront('hero', 'default')) + @slot('settings', array( + 'fit' => 'crop', + 'ratio' => '1:1', + 'srcset' => array(30,60), + 'sizes' => '60px', + )) + @endcomponent + @endif + Issue {!! $issue->issue_number !!} +
    + {!! $issue->present()->title !!} + @endcomponent +
    • + @endforeach +
+ +
+ +
diff --git a/resources/views/site/issueDetail.blade.php b/resources/views/site/issueDetail.blade.php index f42bc2e843..47fd7e6b53 100644 --- a/resources/views/site/issueDetail.blade.php +++ b/resources/views/site/issueDetail.blade.php @@ -13,8 +13,8 @@ @endcomponent
- @component('components.molecules._m-article-actions') - @slot('articleType', $item->articleType) + @component('components.molecules._m-article-actions----journal-issue') + @slot('issues', $issues) @endcomponent
From 0b1e33a4cddb79c24ced3dc4fed2d4241a199239 Mon Sep 17 00:00:00 2001 From: Illya Moskvin Date: Thu, 30 Apr 2020 16:41:08 -0500 Subject: [PATCH 010/115] Make journal issue sidebar sticky on desktop [WEB-1597] --- frontend/js/behaviors/index.js | 1 + frontend/js/behaviors/stickySidebar.js | 78 +++++++++++++++++++ frontend/scss/pages/_p-issue-show.scss | 19 +++++ ...article-actions----journal-issue.blade.php | 4 +- 4 files changed, 101 insertions(+), 1 deletion(-) create mode 100644 frontend/js/behaviors/stickySidebar.js diff --git a/frontend/js/behaviors/index.js b/frontend/js/behaviors/index.js index 8adc74e938..9e6f720c60 100644 --- a/frontend/js/behaviors/index.js +++ b/frontend/js/behaviors/index.js @@ -58,3 +58,4 @@ export { default as searchBarBlock } from './searchBarBlock'; export { default as restrictDownload } from './restrictDownload'; export { default as viewer3D } from './viewer3D'; export { default as fixedOnScroll } from './fixedOnScroll'; +export { default as stickySidebar } from './stickySidebar'; diff --git a/frontend/js/behaviors/stickySidebar.js b/frontend/js/behaviors/stickySidebar.js new file mode 100644 index 0000000000..65fd8e8ea0 --- /dev/null +++ b/frontend/js/behaviors/stickySidebar.js @@ -0,0 +1,78 @@ +import { purgeProperties, getOffset } from '@area17/a17-helpers'; +import { mediaQuery } from '../functions'; + +const stickySidebar = function(container){ + + const getOffsetTop = element => { + let offsetTop = 0; + while(element) { + offsetTop += element.offsetTop; + element = element.offsetParent; + } + return offsetTop; + } + + let stopper = document.querySelector('.o-article'); + let stickyOffset = parseInt(container.getAttribute('data-sticky-offset'), 10); + + let scrollTop; + + let windowHeight; + let containerHeight; + let containerTop; + let stopperOffset; + + function update() { + if(scrollTop > containerTop - stickyOffset) { + if(document.documentElement.classList.contains('is-sidebar-top')) { + document.documentElement.classList.remove('is-sidebar-top'); + } + if(!document.documentElement.classList.contains('is-sidebar-fixed')) { + document.documentElement.classList.add('is-sidebar-fixed'); + } + let offsetTop = (30 - Math.max(0, scrollTop + containerHeight - stopperOffset)); + container.setAttribute('style','top:' + offsetTop + 'px'); + } else { + if(document.documentElement.classList.contains('is-sidebar-top')) { + document.documentElement.classList.remove('is-sidebar-top'); + } + if(document.documentElement.classList.contains('is-sidebar-fixed')) { + document.documentElement.classList.remove('is-sidebar-fixed'); + } + container.removeAttribute('style'); + } + } + + function handleScroll() { + scrollTop = document.documentElement.scrollTop || document.body.scrollTop; + stopperOffset = getOffsetTop(stopper) + document.body.scrollTop + stopper.offsetHeight; + update(); + } + + function handleResize() { + windowHeight = window.innerHeight || document.documentElement.clientHeight; + containerHeight = container.offsetHeight; + containerTop = getOffsetTop(container) + document.body.scrollTop; + stopperOffset = getOffsetTop(stopper) + document.body.scrollTop + stopper.offsetHeight; + } + + function _init() { + window.addEventListener('scroll', handleScroll); + window.addEventListener('resized', handleResize); + handleResize(); + handleScroll(); + } + + this.destroy = function() { + window.removeEventListener('resized', handleResize); + window.removeEventListener('scroll', handleScroll); + // remove properties of this behavior + A17.Helpers.purgeProperties(this); + }; + + this.init = function() { + _init(); + }; +}; + +export default stickySidebar; diff --git a/frontend/scss/pages/_p-issue-show.scss b/frontend/scss/pages/_p-issue-show.scss index fc52120835..9ca0fe7f1b 100644 --- a/frontend/scss/pages/_p-issue-show.scss +++ b/frontend/scss/pages/_p-issue-show.scss @@ -125,4 +125,23 @@ } } } + + @include breakpoint('large+') { + &.is-sidebar-fixed { + .o-sticky-sidebar__sticker { + position: fixed; + @each $name in ('large', 'xlarge') { + @include breakpoint('#{$name}') { + width: #{colspan(13, '#{$name}')}; + } + } + } + .o-sticky-sidebar__placeholder::before { + content: ''; + } + .o-sticky-sidebar__stopper { + clear: both; + } + } + } } diff --git a/resources/views/components/molecules/_m-article-actions----journal-issue.blade.php b/resources/views/components/molecules/_m-article-actions----journal-issue.blade.php index 44434c340e..a58be82393 100644 --- a/resources/views/components/molecules/_m-article-actions----journal-issue.blade.php +++ b/resources/views/components/molecules/_m-article-actions----journal-issue.blade.php @@ -1,4 +1,4 @@ -
{{-- See :nth-child(x) in _o-article.scss --}} +
{{-- See :nth-child(x) in _o-article.scss --}} + +
From c635e4b4a82e33a2272c14f7f6b34c954b717345 Mon Sep 17 00:00:00 2001 From: Illya Moskvin Date: Thu, 30 Apr 2020 21:14:23 -0500 Subject: [PATCH 011/115] Adjust sticky sidebar behavior [WEB-1597] --- frontend/js/behaviors/stickySidebar.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/js/behaviors/stickySidebar.js b/frontend/js/behaviors/stickySidebar.js index 65fd8e8ea0..73803e6434 100644 --- a/frontend/js/behaviors/stickySidebar.js +++ b/frontend/js/behaviors/stickySidebar.js @@ -30,7 +30,7 @@ const stickySidebar = function(container){ if(!document.documentElement.classList.contains('is-sidebar-fixed')) { document.documentElement.classList.add('is-sidebar-fixed'); } - let offsetTop = (30 - Math.max(0, scrollTop + containerHeight - stopperOffset)); + let offsetTop = (30 - Math.max(0, scrollTop + containerHeight + stickyOffset - stopperOffset)); container.setAttribute('style','top:' + offsetTop + 'px'); } else { if(document.documentElement.classList.contains('is-sidebar-top')) { @@ -53,7 +53,7 @@ const stickySidebar = function(container){ windowHeight = window.innerHeight || document.documentElement.clientHeight; containerHeight = container.offsetHeight; containerTop = getOffsetTop(container) + document.body.scrollTop; - stopperOffset = getOffsetTop(stopper) + document.body.scrollTop + stopper.offsetHeight; + handleScroll(); } function _init() { From 4da7ef60702e31d240e71cb8477ece38f1007d91 Mon Sep 17 00:00:00 2001 From: Illya Moskvin Date: Fri, 1 May 2020 10:48:20 -0500 Subject: [PATCH 012/115] Adjust spacing in journal sidebar [WEB-1597] --- frontend/scss/pages/_p-issue-show.scss | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/frontend/scss/pages/_p-issue-show.scss b/frontend/scss/pages/_p-issue-show.scss index 9ca0fe7f1b..369edbd1ea 100644 --- a/frontend/scss/pages/_p-issue-show.scss +++ b/frontend/scss/pages/_p-issue-show.scss @@ -37,10 +37,10 @@ } .o-article__primary-actions { + margin-top: 0; @each $name, $point in $breakpoints { @include breakpoint('#{$name}') { - .m-article-actions--journal__blurb, .m-search-bar, hr, ul { @@ -55,6 +55,19 @@ } } + .m-article-actions--journal__blurb { + @include untuck(); + + @each $name in ('large', 'xlarge') { + @include breakpoint('#{$name}') { + margin-top: #{map-get(( + large: 24, + xlarge: 30 + ), $name)}px; + } + } + } + .m-article-actions--journal__logo { a { color: $color__black--90; From f4aad7f05874edd0c365ef43c4718cd914adbec9 Mon Sep 17 00:00:00 2001 From: nikhiltri Date: Fri, 1 May 2020 12:00:45 -0500 Subject: [PATCH 013/115] Align content properly on the page in PDF generated pages [WEB-1595] --- frontend/scss/print.scss | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/frontend/scss/print.scss b/frontend/scss/print.scss index 8468a548b8..75ec4e9ae8 100644 --- a/frontend/scss/print.scss +++ b/frontend/scss/print.scss @@ -46,10 +46,6 @@ header { } } -@page { - size: letter portrait; -} - article, aside, dialog, @@ -62,8 +58,17 @@ main { display: block; } +html { + left: 0; + right: 0; + margin-left: 0; + margin-right: 0; + width: auto; +} + body { line-height: 1; + width: auto; } blockquote, From 66296b84cf05e23df2bd11665e4012586826703f Mon Sep 17 00:00:00 2001 From: Illya Moskvin Date: Mon, 4 May 2020 19:21:52 -0500 Subject: [PATCH 014/115] Adjust layout for video detail [WEB-1635] --- frontend/scss/organisms/_o-article.scss | 26 +++++++++++++++++++ resources/views/site/videoDetail.blade.php | 30 ++++++++++++++-------- 2 files changed, 45 insertions(+), 11 deletions(-) diff --git a/frontend/scss/organisms/_o-article.scss b/frontend/scss/organisms/_o-article.scss index 58f9cde03b..16bcc109e2 100644 --- a/frontend/scss/organisms/_o-article.scss +++ b/frontend/scss/organisms/_o-article.scss @@ -273,6 +273,13 @@ } } +.o-article__body + .o-article__intro { + @include breakpoint('large+') { + padding-top: 0; + border-top: 0; + } +} + .o-article__inline-header { position: relative; padding-top: .02px; @@ -540,3 +547,22 @@ } } } + +// Positioned left of .m-article-header--default with date +.o-article__primary-actions--video { + display: flex; + justify-content: space-between; + + @include breakpoint('large+') { + min-height: 180px; + flex-direction: column; + } + + >:not(:nth-child(1)):not([class*=f-]):not(.o-collapsing-nav) { + margin-top: auto; + } + + .m-article-actions { + margin-bottom: 0; + } +} diff --git a/resources/views/site/videoDetail.blade.php b/resources/views/site/videoDetail.blade.php index f2ad307698..09da4bb437 100644 --- a/resources/views/site/videoDetail.blade.php +++ b/resources/views/site/videoDetail.blade.php @@ -4,7 +4,13 @@
-
+
+ @component('components.atoms._title') + @slot('tag','p') + @slot('font', 'f-tag-2') + Video + @endcomponent + @component('components.molecules._m-article-actions') @slot('articleType', 'video') @endcomponent @@ -16,16 +22,6 @@ @slot('formattedDate', $item->present()->date) @endcomponent - @if ($item->heading) -
- @component('components.blocks._text') - @slot('font', 'f-deck') - @slot('tag', 'div') - {!! $item->present()->heading !!} - @endcomponent -
- @endif -
@component('components.molecules._m-media') @slot('variation', 'o-blocks__block') @@ -42,7 +38,19 @@ 'fullscreen' => false, ]) @endcomponent +
+ + @if ($item->heading) +
+ @component('components.blocks._text') + @slot('font', 'f-deck') + @slot('tag', 'div') + {!! $item->present()->heading !!} + @endcomponent +
+ @endif +
{!! $item->renderBlocks(false, [], [ 'pageTitle' => $item->title ]) !!} From 8e44eaaa4be67f6b7825dfc17c61a1bd0a9c5f28 Mon Sep 17 00:00:00 2001 From: Illya Moskvin Date: Mon, 4 May 2020 14:16:57 -0500 Subject: [PATCH 015/115] Implement blocks for journal articles [WEB-1142] --- app/Http/Controllers/IssueArticleController.php | 1 + app/Repositories/IssueArticleRepository.php | 3 ++- resources/views/admin/issues/articles/form.blade.php | 9 +++++++++ 3 files changed, 12 insertions(+), 1 deletion(-) diff --git a/app/Http/Controllers/IssueArticleController.php b/app/Http/Controllers/IssueArticleController.php index b55823c890..365bf00225 100644 --- a/app/Http/Controllers/IssueArticleController.php +++ b/app/Http/Controllers/IssueArticleController.php @@ -33,6 +33,7 @@ public function show($id, $slug = null) 'contrastHeader' => false, 'borderlessHeader' => false, 'item' => $item, + 'unstickyHeader' => true, 'canonicalUrl' => route('issue-articles.show', ['id' => $item->id, 'slug' => $item->getSlug()]), ]); } diff --git a/app/Repositories/IssueArticleRepository.php b/app/Repositories/IssueArticleRepository.php index 9ea951e086..6d4842830a 100644 --- a/app/Repositories/IssueArticleRepository.php +++ b/app/Repositories/IssueArticleRepository.php @@ -5,13 +5,14 @@ use A17\Twill\Repositories\Behaviors\HandleSlugs; use A17\Twill\Repositories\Behaviors\HandleMedias; use A17\Twill\Repositories\Behaviors\HandleRevisions; +use A17\Twill\Repositories\Behaviors\HandleBlocks; use A17\Twill\Repositories\ModuleRepository; use App\Models\IssueArticle; use App\Models\Api\Search; class IssueArticleRepository extends ModuleRepository { - use HandleSlugs, HandleMedias, HandleRevisions; + use HandleSlugs, HandleMedias, HandleRevisions, HandleBlocks; public function __construct(IssueArticle $model) { diff --git a/resources/views/admin/issues/articles/form.blade.php b/resources/views/admin/issues/articles/form.blade.php index ef23b58e4f..802e81b071 100644 --- a/resources/views/admin/issues/articles/form.blade.php +++ b/resources/views/admin/issues/articles/form.blade.php @@ -106,4 +106,13 @@ 'label' => 'License text', ]) + @formField('block_editor', [ + 'blocks' => getBlocksForEditor([ + 'paragraph', 'image', 'video', 'gallery', 'media_embed', 'quote', + 'list', 'artwork', 'artworks', 'hr', 'citation', 'split_block', + 'membership_banner', 'digital_label', 'tour_stop', 'button', 'mobile_app', + '3d_model', '3d_tour', '3d_embed' + ]) + ]) + @stop From 61f16ddaa7a31e55c563e4d1dbdd9440d901806d Mon Sep 17 00:00:00 2001 From: Illya Moskvin Date: Mon, 4 May 2020 20:50:19 -0500 Subject: [PATCH 016/115] Clean up journal article template [WEB-1142] --- .../views/site/issueArticleDetail.blade.php | 187 ++++++++---------- 1 file changed, 83 insertions(+), 104 deletions(-) diff --git a/resources/views/site/issueArticleDetail.blade.php b/resources/views/site/issueArticleDetail.blade.php index d1315223aa..589b5d0359 100644 --- a/resources/views/site/issueArticleDetail.blade.php +++ b/resources/views/site/issueArticleDetail.blade.php @@ -3,87 +3,72 @@ @section('content')
- - @component('components.molecules._m-article-header') - @slot('editorial', ($item->articleType === 'editorial')) - @slot('headerType', $item->present()->headerType) - @slot('variation', ($item->headerVariation ?? null)) - @slot('title', $item->present()->title) - @slot('title_display', $item->present()->title_display) - @slot('date', $item->date) - @slot('type', $item->present()->subtype) - @slot('intro', $item->present()->heading) - @slot('img', $item->imageFront('hero')) - @slot('galleryImages', $item->galleryImages) - @slot('nextArticle', $item->nextArticle) - @slot('prevArticle', $item->prevArticle) - @endcomponent - -
- @component('components.molecules._m-article-actions') - @slot('articleType', $item->articleType) + @component('components.molecules._m-article-header') + @slot('editorial', ($item->articleType === 'editorial')) + @slot('headerType', $item->present()->headerType) + @slot('variation', ($item->headerVariation ?? null)) + @slot('title', $item->present()->title) + @slot('title_display', $item->present()->title_display) + @slot('date', $item->date) + @slot('type', $item->present()->subtype) + @slot('intro', $item->present()->heading) + @slot('img', $item->imageFront('hero')) + @slot('galleryImages', $item->galleryImages) + @slot('nextArticle', $item->nextArticle) + @slot('prevArticle', $item->prevArticle) @endcomponent - @if ($item->author) - @component('components.molecules._m-author') - @slot('variation', 'm-author---keyline-top') - @slot('editorial', ($item->articleType === 'editorial')) - @slot('img', $item->imageFront('author', 'square')); - @slot('name', $item->present()->author ?? null); - @slot('link', null); - @slot('date', $item->date ?? null); - @endcomponent - @endif +
+ @if ($item->author) + @component('components.molecules._m-author') + @slot('variation', 'm-author---keyline-top') + @slot('editorial', ($item->articleType === 'editorial')) + @slot('img', $item->imageFront('author', 'square')); + @slot('name', $item->present()->author ?? null); + @slot('link', null); + @slot('date', $item->date ?? null); + @endcomponent + @endif - @if ($item->nav) - {{-- dupe 😢 - shows xlarge+ --}} - @component('components.molecules._m-link-list') - @slot('variation', 'u-show@large+') - @slot('links', $item->nav); - @endcomponent - @endif -
+ @if ($item->nav) + {{-- dupe 😢 - shows xlarge+ --}} + @component('components.molecules._m-link-list') + @slot('variation', 'u-show@large+') + @slot('links', $item->nav); + @endcomponent + @endif +
- {{-- dupe 😢 - hides xlarge+ --}} - @if ($item->nav) -
+ {{-- dupe 😢 - hides xlarge+ --}} @if ($item->nav) - @component('components.molecules._m-link-list') - @slot('links', $item->nav); - @endcomponent +
+ @if ($item->nav) + @component('components.molecules._m-link-list') + @slot('links', $item->nav); + @endcomponent + @endif +
@endif -
- @endif - -
- @component('site.shared._featuredRelated') - @slot('featuredRelated', $item->featuredRelated ?? null) - @slot('variation', 'u-show@medium+') - @endcomponent -
- - @if ($item->heading and $item->headerType !== 'super-hero') -
- @component('components.blocks._text') - @slot('font', 'f-deck') - @slot('tag', 'div') - {!! $item->present()->heading !!} - @endcomponent -
- @endif - {{-- For articles, this shows below body, not float-right --}} - @if ($item->featuredRelated) -
+
@component('site.shared._featuredRelated') @slot('featuredRelated', $item->featuredRelated ?? null) + @slot('variation', 'u-show@medium+') @endcomponent -
- @endif - -
+
+ + @if ($item->heading and $item->headerType !== 'super-hero') +
+ @component('components.blocks._text') + @slot('font', 'f-deck') + @slot('tag', 'div') + {!! $item->present()->heading !!} + @endcomponent +
+ @endif - @php +
+ @php global $_collectedReferences; $_collectedReferences = []; @@ -92,37 +77,31 @@ global $_figureCount; $_figureCount = app()->environment('production') ? null : 0; - @endphp - - {!! $item->renderBlocks(false, [], [ - 'pageTitle' => $item->meta_title ?: $item->title - ]) !!} - - @if (sizeof($_collectedReferences)) - @component('components.organisms._o-accordion') - @slot('variation', 'o-accordion--section o-blocks__block') - @slot('items', array( - array( - 'title' => "References", - 'active' => true, - 'blocks' => array( - array( - "type" => 'references', - "items" => $_collectedReferences + @endphp + + {!! $item->renderBlocks(false, [], [ + 'pageTitle' => $item->meta_title ?: $item->title + ]) !!} + + @if (sizeof($_collectedReferences)) + @component('components.organisms._o-accordion') + @slot('variation', 'o-accordion--section o-blocks__block') + @slot('items', array( + array( + 'title' => "References", + 'active' => true, + 'blocks' => array( + array( + "type" => 'references', + "items" => $_collectedReferences + ), ), ), - ), - )) - @slot('loopIndex', 'references') - @endcomponent - @endif - - @component('components.molecules._m-article-actions') - @slot('variation','m-article-actions--keyline-top') - @slot('articleType', $item->articleType) - @endcomponent -
- + )) + @slot('loopIndex', 'references') + @endcomponent + @endif +
@if (isset($featuredArticles) && $featuredArticles) @@ -143,11 +122,11 @@ 'ratio' => '16:9', 'srcset' => array(200,400,600), 'sizes' => aic_imageSizes(array( - 'xsmall' => '216px', - 'small' => '216px', - 'medium' => '18', - 'large' => '13', - 'xlarge' => '13', + 'xsmall' => '216px', + 'small' => '216px', + 'medium' => '18', + 'large' => '13', + 'xlarge' => '13', )), )) @endcomponent From f1cf9241141ff0f8f64610d132836eb66343b200 Mon Sep 17 00:00:00 2001 From: Illya Moskvin Date: Mon, 4 May 2020 20:54:37 -0500 Subject: [PATCH 017/115] Add journal footer to journal article [WEB-1142] --- frontend/scss/organisms/_o-journal-footer.scss | 4 ++++ frontend/scss/pages/_p-issue-show.scss | 4 ---- resources/views/site/issueArticleDetail.blade.php | 4 +++- 3 files changed, 7 insertions(+), 5 deletions(-) diff --git a/frontend/scss/organisms/_o-journal-footer.scss b/frontend/scss/organisms/_o-journal-footer.scss index e2fd6bb62b..42b6dd1a1e 100644 --- a/frontend/scss/organisms/_o-journal-footer.scss +++ b/frontend/scss/organisms/_o-journal-footer.scss @@ -48,4 +48,8 @@ content: initial !important; } } + + + .m-aside-newsletter { + margin-top: 36px; + } } diff --git a/frontend/scss/pages/_p-issue-show.scss b/frontend/scss/pages/_p-issue-show.scss index 369edbd1ea..747734b7be 100644 --- a/frontend/scss/pages/_p-issue-show.scss +++ b/frontend/scss/pages/_p-issue-show.scss @@ -12,10 +12,6 @@ content: none; } - .m-aside-newsletter { - margin-top: 36px; - } - .o-article { padding-bottom: 0; diff --git a/resources/views/site/issueArticleDetail.blade.php b/resources/views/site/issueArticleDetail.blade.php index 589b5d0359..ec1aedc14a 100644 --- a/resources/views/site/issueArticleDetail.blade.php +++ b/resources/views/site/issueArticleDetail.blade.php @@ -134,6 +134,8 @@ @endcomponent @endif -
+
+ +@include('components.organisms._o-journal-footer') @endsection From 17e8a0387613e4aad77bfd18257dd767e8e01496 Mon Sep 17 00:00:00 2001 From: Illya Moskvin Date: Tue, 5 May 2020 00:21:24 -0500 Subject: [PATCH 018/115] Adjust block width for journal articles [WEB-1142] --- frontend/scss/organisms/_o-blocks.scss | 146 +++++++++++++++--- .../views/site/issueArticleDetail.blade.php | 2 +- 2 files changed, 129 insertions(+), 19 deletions(-) diff --git a/frontend/scss/organisms/_o-blocks.scss b/frontend/scss/organisms/_o-blocks.scss index 5f2053f6a6..62d77bc465 100644 --- a/frontend/scss/organisms/_o-blocks.scss +++ b/frontend/scss/organisms/_o-blocks.scss @@ -318,6 +318,134 @@ /**/ .o-blocks { + .m-media--m figcaption .f-caption { + @include breakpoint('large+') { + @include tucked-align-top($f-caption, 'large'); + } + + @include breakpoint('xlarge') { + @include tucked-align-top($f-caption, 'xlarge'); + } + } + + .m-media--m .m-media__share { + @include breakpoint('large+') { + display: block; + position: static; + margin-top: 24px; + } + } +} + +.o-blocks.o-blocks--with-sidebar { + .o-gallery, + .m-media--m, + .m-media--l, + .m-cta-banner, + .m-mobile-block, + .m-aside-newsletter--wide, + .o-grid-block { + @include breakpoint('medium+') { + width: colspan(58, medium); + margin-right: colspan(20, medium, 0, true); + } + + @include breakpoint('large+') { + width: colspan(43, large); + margin-left: 0; + margin-right: colspan(15, large, 0, true); + } + + @include breakpoint('xlarge') { + width: colspan(43, xlarge); + margin-right: colspan(15, xlarge, 0, true); + } + } + + .o-gallery::before { + left: 0; + + @include breakpoint('large') { + margin-left: colspan(1, large, 0, true); + } + + @include breakpoint('xlarge') { + margin-left: colspan(1, xlarge, 0, true); + } + } + + .o-gallery--mosaic .o-gallery__title, + .o-gallery--mosaic .o-gallery__caption, + .o-gallery--mosaic .o-gallery__media { + margin-left: 0; + } + + .o-gallery--mosaic .o-gallery__media { + @include breakpoint('large') { + width: colspan(42, large); + > * { + width: colspan(20, large); + } + } + + @include breakpoint('xlarge') { + width: colspan(42, xlarge); + > * { + width: colspan(20, xlarge); + } + } + } + + .m-media--m { + @include breakpoint('large+') { + display: flex; + flex-flow: row nowrap; + } + } + + .m-media--m .m-media__img { + @include breakpoint('large+') { + flex: 0 0 auto; + width: colspan(28, large); + } + + @include breakpoint('xlarge') { + width: colspan(28, xlarge); + } + } + + .m-media--m figcaption { + @include breakpoint('large+') { + flex: 0 0 auto; + margin-top: 0; + padding-right:0; + + width: colspan(13, large); + margin-left: colspan(2, large); + + &::before { + content: ''; + position: absolute; + left: 0; + top: 0; + width: colspan(13, large); + height: 1px; + background-color: $color__rules--primary; + } + } + + @include breakpoint('xlarge') { + width: colspan(13, xlarge); + margin-left: colspan(2, xlarge); + + &::before { + width: colspan(13, xlarge); + } + } + } +} + +.o-blocks:not(.o-blocks--with-sidebar) { .o-gallery, .m-media--m, .m-media--l, @@ -388,24 +516,6 @@ } } - .m-media--m figcaption .f-caption { - @include breakpoint('large+') { - @include tucked-align-top($f-caption, 'large'); - } - - @include breakpoint('xlarge') { - @include tucked-align-top($f-caption, 'xlarge'); - } - } - - .m-media--m .m-media__share { - @include breakpoint('large+') { - display: block; - position: static; - margin-top: 24px; - } - } - .m-inline-aside { @include breakpoint('small') { float: right; diff --git a/resources/views/site/issueArticleDetail.blade.php b/resources/views/site/issueArticleDetail.blade.php index ec1aedc14a..7f0db96dce 100644 --- a/resources/views/site/issueArticleDetail.blade.php +++ b/resources/views/site/issueArticleDetail.blade.php @@ -67,7 +67,7 @@
@endif -
+
@php global $_collectedReferences; $_collectedReferences = []; From bb3a76afa5c4aaf03d327135e64eb9554246d262 Mon Sep 17 00:00:00 2001 From: Illya Moskvin Date: Tue, 5 May 2020 01:14:43 -0500 Subject: [PATCH 019/115] Add rule between sidebar and content on journal article [WEB-1142] --- frontend/scss/_imports.scss | 1 + frontend/scss/pages/_p-issuearticle-show.scss | 19 ++++++++ .../views/site/issueArticleDetail.blade.php | 46 ++++--------------- 3 files changed, 28 insertions(+), 38 deletions(-) create mode 100644 frontend/scss/pages/_p-issuearticle-show.scss diff --git a/frontend/scss/_imports.scss b/frontend/scss/_imports.scss index 45ac4a4ebb..a69c271d4e 100755 --- a/frontend/scss/_imports.scss +++ b/frontend/scss/_imports.scss @@ -168,6 +168,7 @@ $include-icons: false; // see icons.scss! // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ pages */ @import 'pages/p-issue-show'; +@import 'pages/p-issuearticle-show'; // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ sections */ diff --git a/frontend/scss/pages/_p-issuearticle-show.scss b/frontend/scss/pages/_p-issuearticle-show.scss new file mode 100644 index 0000000000..c28154a005 --- /dev/null +++ b/frontend/scss/pages/_p-issuearticle-show.scss @@ -0,0 +1,19 @@ +.p-issuearticle-show { + .o-article__body::before { + position: absolute; + background-color: $color__rules--primary; + width: 1px; + + @include breakpoint('large+') { + content: ''; + } + + @each $name in ('large', 'xlarge') { + @include breakpoint('#{$name}') { + left: #{- colspan(1, '#{$name}')}; + top: -100%; + height: 200%; + } + } + } +} diff --git a/resources/views/site/issueArticleDetail.blade.php b/resources/views/site/issueArticleDetail.blade.php index 7f0db96dce..89116445c9 100644 --- a/resources/views/site/issueArticleDetail.blade.php +++ b/resources/views/site/issueArticleDetail.blade.php @@ -3,6 +3,11 @@ @section('content')
+ +
+ +
+ @component('components.molecules._m-article-header') @slot('editorial', ($item->articleType === 'editorial')) @slot('headerType', $item->present()->headerType) @@ -18,51 +23,16 @@ @slot('prevArticle', $item->prevArticle) @endcomponent -
- @if ($item->author) - @component('components.molecules._m-author') - @slot('variation', 'm-author---keyline-top') - @slot('editorial', ($item->articleType === 'editorial')) - @slot('img', $item->imageFront('author', 'square')); - @slot('name', $item->present()->author ?? null); - @slot('link', null); - @slot('date', $item->date ?? null); - @endcomponent - @endif - - @if ($item->nav) - {{-- dupe 😢 - shows xlarge+ --}} - @component('components.molecules._m-link-list') - @slot('variation', 'u-show@large+') - @slot('links', $item->nav); - @endcomponent - @endif -
- - {{-- dupe 😢 - hides xlarge+ --}} - @if ($item->nav) -
- @if ($item->nav) - @component('components.molecules._m-link-list') - @slot('links', $item->nav); - @endcomponent - @endif -
- @endif -
- @component('site.shared._featuredRelated') - @slot('featuredRelated', $item->featuredRelated ?? null) - @slot('variation', 'u-show@medium+') - @endcomponent + {{-- Intentionally left blank for layout --}}
- @if ($item->heading and $item->headerType !== 'super-hero') + @if ($item->description)
@component('components.blocks._text') @slot('font', 'f-deck') @slot('tag', 'div') - {!! $item->present()->heading !!} + {!! $item->present()->description !!} @endcomponent
@endif From da0fec60ace020d415229c92f7132214f386d323 Mon Sep 17 00:00:00 2001 From: Illya Moskvin Date: Tue, 5 May 2020 10:45:47 -0500 Subject: [PATCH 020/115] Adjust font style on journal article body [WEB-1142] --- frontend/scss/pages/_p-issuearticle-show.scss | 25 +++++++++++++++++++ .../views/site/issueArticleDetail.blade.php | 2 +- 2 files changed, 26 insertions(+), 1 deletion(-) diff --git a/frontend/scss/pages/_p-issuearticle-show.scss b/frontend/scss/pages/_p-issuearticle-show.scss index c28154a005..f0b3a7f358 100644 --- a/frontend/scss/pages/_p-issuearticle-show.scss +++ b/frontend/scss/pages/_p-issuearticle-show.scss @@ -16,4 +16,29 @@ } } } + + .s-sans-serif-loaded .o-blocks>p:not([class*=f-]), + .s-sans-serif-loaded .o-blocks>ol:not([class*=f-]):not([class*=o-]):not([class*=m-]), + .s-sans-serif-loaded .o-blocks>ul:not([class*=f-]):not([class*=o-]):not([class*=m-]) { + font-family: inherit; + } + + .o-blocks>p:not([class*=f-]), + .o-blocks>ol:not([class*=f-]):not([class*=o-]):not([class*=m-]), + .o-blocks>ul:not([class*=f-]):not([class*=o-]):not([class*=m-]) { + font-family: $serif-font; + } + + .s-serif-loaded .o-blocks>p:not([class*=f-]), + .s-serif-loaded .o-blocks>ol:not([class*=f-]):not([class*=o-]):not([class*=m-]), + .s-serif-loaded .o-blocks>ul:not([class*=f-]):not([class*=o-]):not([class*=m-]) { + font-family: $serif-font-loaded-class; + } + + .o-blocks > p { + @include f-body-editorial; + // &:first-of-type { + // @include f-dropcap-editorial; + // } + } } diff --git a/resources/views/site/issueArticleDetail.blade.php b/resources/views/site/issueArticleDetail.blade.php index 89116445c9..3f2dd2df2c 100644 --- a/resources/views/site/issueArticleDetail.blade.php +++ b/resources/views/site/issueArticleDetail.blade.php @@ -50,7 +50,7 @@ @endphp {!! $item->renderBlocks(false, [], [ - 'pageTitle' => $item->meta_title ?: $item->title + 'pageTitle' => $item->meta_title ?: $item->title, ]) !!} @if (sizeof($_collectedReferences)) From 426c5344514ae25c94753a2f8aed91885a7e90f1 Mon Sep 17 00:00:00 2001 From: Illya Moskvin Date: Tue, 5 May 2020 10:53:11 -0500 Subject: [PATCH 021/115] Hide paragraph count from journal articles [WEB-1142] Until we get a chance to fix the order. --- resources/views/site/issueArticleDetail.blade.php | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/resources/views/site/issueArticleDetail.blade.php b/resources/views/site/issueArticleDetail.blade.php index 3f2dd2df2c..c7cbe8153b 100644 --- a/resources/views/site/issueArticleDetail.blade.php +++ b/resources/views/site/issueArticleDetail.blade.php @@ -42,11 +42,11 @@ global $_collectedReferences; $_collectedReferences = []; - global $_paragraphCount; - $_paragraphCount = app()->environment('production') ? null : 0; + // global $_paragraphCount; + // $_paragraphCount = 0; global $_figureCount; - $_figureCount = app()->environment('production') ? null : 0; + $_figureCount = 0; @endphp {!! $item->renderBlocks(false, [], [ From 259df4d2bda75eebbfb411506be8600483ff4f95 Mon Sep 17 00:00:00 2001 From: Illya Moskvin Date: Tue, 5 May 2020 10:53:39 -0500 Subject: [PATCH 022/115] Remove prototype paragraph count from articles [WEB-1142] --- resources/views/site/articleDetail.blade.php | 6 ------ 1 file changed, 6 deletions(-) diff --git a/resources/views/site/articleDetail.blade.php b/resources/views/site/articleDetail.blade.php index 02724a3219..ed742a83a6 100644 --- a/resources/views/site/articleDetail.blade.php +++ b/resources/views/site/articleDetail.blade.php @@ -123,12 +123,6 @@ @php global $_collectedReferences; $_collectedReferences = []; - - global $_paragraphCount; - $_paragraphCount = app()->environment('production') ? null : 0; - - global $_figureCount; - $_figureCount = app()->environment('production') ? null : 0; @endphp {!! $item->renderBlocks(false, [], [ From 179458d5477dc18a44237e839c8aa37568a8c3a2 Mon Sep 17 00:00:00 2001 From: Illya Moskvin Date: Tue, 5 May 2020 12:22:17 -0500 Subject: [PATCH 023/115] Add abstract and author display to journal article [WEB-1142] --- .../views/site/issueArticleDetail.blade.php | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/resources/views/site/issueArticleDetail.blade.php b/resources/views/site/issueArticleDetail.blade.php index c7cbe8153b..c858421701 100644 --- a/resources/views/site/issueArticleDetail.blade.php +++ b/resources/views/site/issueArticleDetail.blade.php @@ -38,6 +38,24 @@ @endif
+ @if ($item->author_display) + @component('components.blocks._text') + @slot('font', 'f-tag-2') + @slot('tag', 'div') + {!! $item->present()->author_display !!} + @endcomponent +
+ @endif + + @if ($item->abstract) + @component('components.blocks._text') + @slot('font', 'f-body-editorial-emphasis') + @slot('tag', 'div') + {!! $item->present()->abstract !!} + @endcomponent +
+ @endif + @php global $_collectedReferences; $_collectedReferences = []; From d1537d294fbc756c210d1f9d3f0f330146b1956e Mon Sep 17 00:00:00 2001 From: nikhiltri Date: Tue, 5 May 2020 13:15:08 -0500 Subject: [PATCH 024/115] Create Video carousel block for homepage in CMS [WEB-1618] --- app/Models/Page.php | 5 +++ app/Repositories/PageRepository.php | 3 ++ ...20_05_05_110425_create_home_page_video.php | 35 +++++++++++++++++++ .../views/admin/pages/form_home.blade.php | 12 ++++++- 4 files changed, 54 insertions(+), 1 deletion(-) create mode 100644 database/migrations/2020_05_05_110425_create_home_page_video.php diff --git a/app/Models/Page.php b/app/Models/Page.php index 70377cb468..8890793b67 100644 --- a/app/Models/Page.php +++ b/app/Models/Page.php @@ -227,6 +227,11 @@ public function homeEvents() return $this->belongsToMany('App\Models\Event', 'page_home_event')->withPivot('position')->orderBy('position'); } + public function homeVideos() + { + return $this->belongsToMany('App\Models\Video', 'page_home_video')->withPivot('position')->orderBy('position'); + } + /** * DEPRECATED */ diff --git a/app/Repositories/PageRepository.php b/app/Repositories/PageRepository.php index 1bc8c82456..80f8ff45f3 100644 --- a/app/Repositories/PageRepository.php +++ b/app/Repositories/PageRepository.php @@ -25,6 +25,7 @@ public function hydrate($object, $fields) $this->hydrateOrderedBelongsTomany($object, $fields, 'homeExhibitions', 'position', 'Exhibition'); $this->hydrateOrderedBelongsTomany($object, $fields, 'homeEvents', 'position', 'Event'); $this->hydrateOrderedBelongsTomany($object, $fields, 'homeFeatures', 'position', 'HomeFeature'); + $this->hydrateOrderedBelongsTomany($object, $fields, 'homeVideos', 'position', 'Video'); $this->hydrateOrderedBelongsTomany($object, $fields, 'mainHomeFeatures', 'position', 'HomeFeature'); $this->hydrateOrderedBelongsTomany($object, $fields, 'secondaryHomeFeatures', 'position', 'HomeFeature'); $this->hydrateOrderedBelongsTomany($object, $fields, 'collectionFeatures', 'position', 'CollectionFeature'); @@ -49,6 +50,7 @@ public function afterSave($object, $fields) // Homepage $this->updateBrowser($object, $fields, 'homeEvents'); + $this->updateBrowser($object, $fields, 'homeVideos'); $this->updateBrowser($object, $fields, 'homeFeatures'); $this->updateBrowser($object, $fields, 'mainHomeFeatures'); $this->updateBrowser($object, $fields, 'secondaryHomeFeatures'); @@ -94,6 +96,7 @@ public function getFormFields($object) $fields['browsers']['homeEvents'] = $this->getFormFieldsForBrowser($object, 'homeEvents', 'exhibitions_events', 'title', 'events'); $fields['browsers']['homeShopItems'] = $this->getFormFieldsForBrowserApi($object, 'homeShopItems', 'App\Models\Api\ShopItem', 'general'); $fields['browsers']['homeFeatures'] = $this->getFormFieldsForBrowser($object, 'homeFeatures', 'homepage', 'title', 'homeFeatures'); + $fields['browsers']['homeVideos'] = $this->getFormFieldsForBrowser($object, 'homeVideos', 'collection.articles_publications', 'title', 'videos'); $fields['browsers']['mainHomeFeatures'] = $this->getFormFieldsForBrowser($object, 'mainHomeFeatures', 'homepage', 'title', 'homeFeatures'); $fields['browsers']['secondaryHomeFeatures'] = $this->getFormFieldsForBrowser($object, 'secondaryHomeFeatures', 'homepage', 'title', 'homeFeatures'); $fields['browsers']['collectionFeatures'] = $this->getFormFieldsForBrowser($object, 'collectionFeatures', 'homepage', 'title', 'collectionFeatures'); diff --git a/database/migrations/2020_05_05_110425_create_home_page_video.php b/database/migrations/2020_05_05_110425_create_home_page_video.php new file mode 100644 index 0000000000..e1955d4cdc --- /dev/null +++ b/database/migrations/2020_05_05_110425_create_home_page_video.php @@ -0,0 +1,35 @@ +increments('id'); + + createDefaultRelationshipTableFields($table, 'page', 'video'); + $table->integer('position')->unsigned()->index(); + + $table->timestamps(); + }); + } + + /** + * Reverse the migrations. + * + * @return void + */ + public function down() + { + Schema::dropIfExists('page_home_video'); + } +} diff --git a/resources/views/admin/pages/form_home.blade.php b/resources/views/admin/pages/form_home.blade.php index 417e3adc1b..c704b9345f 100644 --- a/resources/views/admin/pages/form_home.blade.php +++ b/resources/views/admin/pages/form_home.blade.php @@ -25,6 +25,16 @@ @stop @section('fieldsets') + + @formField('browser', [ + 'routePrefix' => 'collection.articles_publications', + 'max' => 10, + 'moduleName' => 'videos', + 'name' => 'homeVideos', + 'label' => 'Video carousel' + ]) + + @formField('input', [ 'name' => 'home_plan_your_visit_link_1_text', @@ -55,7 +65,7 @@ 'name' => 'home_plan_your_visit_link_3_url', 'label' => 'Third "Plan your visit" link URL', ]) - + @formField('browser', [ From 2db651a66e583b88eb5485d9e8d7306ab7a8dfaa Mon Sep 17 00:00:00 2001 From: nikhiltri Date: Tue, 5 May 2020 15:23:12 -0500 Subject: [PATCH 025/115] Create Highlights block for homepage in CMS [WEB-1620] --- app/Models/Page.php | 5 +++ app/Repositories/PageRepository.php | 3 ++ ...5_05_145538_create_page_home_selection.php | 35 +++++++++++++++++++ .../views/admin/pages/form_home.blade.php | 10 ++++++ 4 files changed, 53 insertions(+) create mode 100644 database/migrations/2020_05_05_145538_create_page_home_selection.php diff --git a/app/Models/Page.php b/app/Models/Page.php index 8890793b67..e3afbf49c0 100644 --- a/app/Models/Page.php +++ b/app/Models/Page.php @@ -232,6 +232,11 @@ public function homeVideos() return $this->belongsToMany('App\Models\Video', 'page_home_video')->withPivot('position')->orderBy('position'); } + public function homeHighlights() + { + return $this->belongsToMany('App\Models\Selection', 'page_home_selection')->withPivot('position')->orderBy('position'); + } + /** * DEPRECATED */ diff --git a/app/Repositories/PageRepository.php b/app/Repositories/PageRepository.php index 80f8ff45f3..d295844fe7 100644 --- a/app/Repositories/PageRepository.php +++ b/app/Repositories/PageRepository.php @@ -26,6 +26,7 @@ public function hydrate($object, $fields) $this->hydrateOrderedBelongsTomany($object, $fields, 'homeEvents', 'position', 'Event'); $this->hydrateOrderedBelongsTomany($object, $fields, 'homeFeatures', 'position', 'HomeFeature'); $this->hydrateOrderedBelongsTomany($object, $fields, 'homeVideos', 'position', 'Video'); + $this->hydrateOrderedBelongsTomany($object, $fields, 'homeHighlights', 'position', 'Selection'); $this->hydrateOrderedBelongsTomany($object, $fields, 'mainHomeFeatures', 'position', 'HomeFeature'); $this->hydrateOrderedBelongsTomany($object, $fields, 'secondaryHomeFeatures', 'position', 'HomeFeature'); $this->hydrateOrderedBelongsTomany($object, $fields, 'collectionFeatures', 'position', 'CollectionFeature'); @@ -51,6 +52,7 @@ public function afterSave($object, $fields) // Homepage $this->updateBrowser($object, $fields, 'homeEvents'); $this->updateBrowser($object, $fields, 'homeVideos'); + $this->updateBrowser($object, $fields, 'homeHighlights'); $this->updateBrowser($object, $fields, 'homeFeatures'); $this->updateBrowser($object, $fields, 'mainHomeFeatures'); $this->updateBrowser($object, $fields, 'secondaryHomeFeatures'); @@ -97,6 +99,7 @@ public function getFormFields($object) $fields['browsers']['homeShopItems'] = $this->getFormFieldsForBrowserApi($object, 'homeShopItems', 'App\Models\Api\ShopItem', 'general'); $fields['browsers']['homeFeatures'] = $this->getFormFieldsForBrowser($object, 'homeFeatures', 'homepage', 'title', 'homeFeatures'); $fields['browsers']['homeVideos'] = $this->getFormFieldsForBrowser($object, 'homeVideos', 'collection.articles_publications', 'title', 'videos'); + $fields['browsers']['homeHighlights'] = $this->getFormFieldsForBrowser($object, 'homeHighlights', 'collection', 'title', 'selections'); $fields['browsers']['mainHomeFeatures'] = $this->getFormFieldsForBrowser($object, 'mainHomeFeatures', 'homepage', 'title', 'homeFeatures'); $fields['browsers']['secondaryHomeFeatures'] = $this->getFormFieldsForBrowser($object, 'secondaryHomeFeatures', 'homepage', 'title', 'homeFeatures'); $fields['browsers']['collectionFeatures'] = $this->getFormFieldsForBrowser($object, 'collectionFeatures', 'homepage', 'title', 'collectionFeatures'); diff --git a/database/migrations/2020_05_05_145538_create_page_home_selection.php b/database/migrations/2020_05_05_145538_create_page_home_selection.php new file mode 100644 index 0000000000..2a046a3245 --- /dev/null +++ b/database/migrations/2020_05_05_145538_create_page_home_selection.php @@ -0,0 +1,35 @@ +increments('id'); + + createDefaultRelationshipTableFields($table, 'page', 'selection'); + $table->integer('position')->unsigned()->index(); + + $table->timestamps(); + }); + } + + /** + * Reverse the migrations. + * + * @return void + */ + public function down() + { + Schema::dropIfExists('page_home_selection'); + } +} diff --git a/resources/views/admin/pages/form_home.blade.php b/resources/views/admin/pages/form_home.blade.php index c704b9345f..dad8a06c74 100644 --- a/resources/views/admin/pages/form_home.blade.php +++ b/resources/views/admin/pages/form_home.blade.php @@ -35,6 +35,16 @@ ]) + + @formField('browser', [ + 'routePrefix' => 'collection', + 'max' => 10, + 'moduleName' => 'selections', + 'name' => 'homeHighlights', + 'label' => 'Highlights' + ]) + + @formField('input', [ 'name' => 'home_plan_your_visit_link_1_text', From b1b5b744350a0ddefda76054017ea516b6834afa Mon Sep 17 00:00:00 2001 From: nikhiltri Date: Tue, 5 May 2020 15:39:17 -0500 Subject: [PATCH 026/115] Create Interactive Features block for homepage in CMS [WEB-1654] --- app/Repositories/PageRepository.php | 2 ++ resources/views/admin/pages/form_home.blade.php | 10 ++++++++++ 2 files changed, 12 insertions(+) diff --git a/app/Repositories/PageRepository.php b/app/Repositories/PageRepository.php index d295844fe7..15361d8c9e 100644 --- a/app/Repositories/PageRepository.php +++ b/app/Repositories/PageRepository.php @@ -57,6 +57,7 @@ public function afterSave($object, $fields) $this->updateBrowser($object, $fields, 'mainHomeFeatures'); $this->updateBrowser($object, $fields, 'secondaryHomeFeatures'); $this->updateBrowser($object, $fields, 'collectionFeatures'); + $this->updateRelatedBrowser($object, $fields, 'homeExperiences'); // Visits $this->updateRepeater($object, $fields, 'admissions', 'Admission'); @@ -103,6 +104,7 @@ public function getFormFields($object) $fields['browsers']['mainHomeFeatures'] = $this->getFormFieldsForBrowser($object, 'mainHomeFeatures', 'homepage', 'title', 'homeFeatures'); $fields['browsers']['secondaryHomeFeatures'] = $this->getFormFieldsForBrowser($object, 'secondaryHomeFeatures', 'homepage', 'title', 'homeFeatures'); $fields['browsers']['collectionFeatures'] = $this->getFormFieldsForBrowser($object, 'collectionFeatures', 'homepage', 'title', 'collectionFeatures'); + $fields['browsers']['homeExperiences'] = $this->getFormFieldsForRelatedBrowser($object, 'homeExperiences', 'collection', 'title', 'interactiveFeatures.experiences'); // Exhibition & Events $fields['browsers']['exhibitionsUpcomingListing'] = $this->getFormFieldsForBrowserApi($object, 'exhibitionsUpcomingListing', 'App\Models\Api\Exhibition', 'exhibitions_events', 'title', 'exhibitions'); diff --git a/resources/views/admin/pages/form_home.blade.php b/resources/views/admin/pages/form_home.blade.php index dad8a06c74..d2fc71eb27 100644 --- a/resources/views/admin/pages/form_home.blade.php +++ b/resources/views/admin/pages/form_home.blade.php @@ -45,6 +45,16 @@ ]) + + @formField('browser', [ + 'routePrefix' => 'collection', + 'max' => 10, + 'moduleName' => 'interactiveFeatures.experiences', + 'name' => 'homeExperiences', + 'label' => 'Interactive Features' + ]) + + @formField('input', [ 'name' => 'home_plan_your_visit_link_1_text', From f96c7d72be04579e8cf4975bb36e906cd9acee36 Mon Sep 17 00:00:00 2001 From: nikhiltri Date: Tue, 5 May 2020 15:46:58 -0500 Subject: [PATCH 027/115] Refactor videos and highlights on homepage CMS to use newer 'relatables' logic from Twill [WEB-1618, WEB-1620] --- app/Models/Page.php | 10 ----- app/Repositories/PageRepository.php | 10 ++--- .../2020_05_05_153958_drop_uneeded_tables.php | 45 +++++++++++++++++++ 3 files changed, 49 insertions(+), 16 deletions(-) create mode 100644 database/migrations/2020_05_05_153958_drop_uneeded_tables.php diff --git a/app/Models/Page.php b/app/Models/Page.php index e3afbf49c0..70377cb468 100644 --- a/app/Models/Page.php +++ b/app/Models/Page.php @@ -227,16 +227,6 @@ public function homeEvents() return $this->belongsToMany('App\Models\Event', 'page_home_event')->withPivot('position')->orderBy('position'); } - public function homeVideos() - { - return $this->belongsToMany('App\Models\Video', 'page_home_video')->withPivot('position')->orderBy('position'); - } - - public function homeHighlights() - { - return $this->belongsToMany('App\Models\Selection', 'page_home_selection')->withPivot('position')->orderBy('position'); - } - /** * DEPRECATED */ diff --git a/app/Repositories/PageRepository.php b/app/Repositories/PageRepository.php index 15361d8c9e..708e79271d 100644 --- a/app/Repositories/PageRepository.php +++ b/app/Repositories/PageRepository.php @@ -25,8 +25,6 @@ public function hydrate($object, $fields) $this->hydrateOrderedBelongsTomany($object, $fields, 'homeExhibitions', 'position', 'Exhibition'); $this->hydrateOrderedBelongsTomany($object, $fields, 'homeEvents', 'position', 'Event'); $this->hydrateOrderedBelongsTomany($object, $fields, 'homeFeatures', 'position', 'HomeFeature'); - $this->hydrateOrderedBelongsTomany($object, $fields, 'homeVideos', 'position', 'Video'); - $this->hydrateOrderedBelongsTomany($object, $fields, 'homeHighlights', 'position', 'Selection'); $this->hydrateOrderedBelongsTomany($object, $fields, 'mainHomeFeatures', 'position', 'HomeFeature'); $this->hydrateOrderedBelongsTomany($object, $fields, 'secondaryHomeFeatures', 'position', 'HomeFeature'); $this->hydrateOrderedBelongsTomany($object, $fields, 'collectionFeatures', 'position', 'CollectionFeature'); @@ -51,12 +49,12 @@ public function afterSave($object, $fields) // Homepage $this->updateBrowser($object, $fields, 'homeEvents'); - $this->updateBrowser($object, $fields, 'homeVideos'); - $this->updateBrowser($object, $fields, 'homeHighlights'); $this->updateBrowser($object, $fields, 'homeFeatures'); $this->updateBrowser($object, $fields, 'mainHomeFeatures'); $this->updateBrowser($object, $fields, 'secondaryHomeFeatures'); $this->updateBrowser($object, $fields, 'collectionFeatures'); + $this->updateRelatedBrowser($object, $fields, 'homeVideos'); + $this->updateRelatedBrowser($object, $fields, 'homeHighlights'); $this->updateRelatedBrowser($object, $fields, 'homeExperiences'); // Visits @@ -99,11 +97,11 @@ public function getFormFields($object) $fields['browsers']['homeEvents'] = $this->getFormFieldsForBrowser($object, 'homeEvents', 'exhibitions_events', 'title', 'events'); $fields['browsers']['homeShopItems'] = $this->getFormFieldsForBrowserApi($object, 'homeShopItems', 'App\Models\Api\ShopItem', 'general'); $fields['browsers']['homeFeatures'] = $this->getFormFieldsForBrowser($object, 'homeFeatures', 'homepage', 'title', 'homeFeatures'); - $fields['browsers']['homeVideos'] = $this->getFormFieldsForBrowser($object, 'homeVideos', 'collection.articles_publications', 'title', 'videos'); - $fields['browsers']['homeHighlights'] = $this->getFormFieldsForBrowser($object, 'homeHighlights', 'collection', 'title', 'selections'); $fields['browsers']['mainHomeFeatures'] = $this->getFormFieldsForBrowser($object, 'mainHomeFeatures', 'homepage', 'title', 'homeFeatures'); $fields['browsers']['secondaryHomeFeatures'] = $this->getFormFieldsForBrowser($object, 'secondaryHomeFeatures', 'homepage', 'title', 'homeFeatures'); $fields['browsers']['collectionFeatures'] = $this->getFormFieldsForBrowser($object, 'collectionFeatures', 'homepage', 'title', 'collectionFeatures'); + $fields['browsers']['homeVideos'] = $this->getFormFieldsForRelatedBrowser($object, 'homeVideos', 'collection.articles_publications', 'title', 'videos'); + $fields['browsers']['homeHighlights'] = $this->getFormFieldsForRelatedBrowser($object, 'homeHighlights', 'collection', 'title', 'selections'); $fields['browsers']['homeExperiences'] = $this->getFormFieldsForRelatedBrowser($object, 'homeExperiences', 'collection', 'title', 'interactiveFeatures.experiences'); // Exhibition & Events diff --git a/database/migrations/2020_05_05_153958_drop_uneeded_tables.php b/database/migrations/2020_05_05_153958_drop_uneeded_tables.php new file mode 100644 index 0000000000..c263c7032e --- /dev/null +++ b/database/migrations/2020_05_05_153958_drop_uneeded_tables.php @@ -0,0 +1,45 @@ +increments('id'); + + createDefaultRelationshipTableFields($table, 'page', 'video'); + $table->integer('position')->unsigned()->index(); + + $table->timestamps(); + }); + + Schema::create('page_home_selection', function (Blueprint $table) { + $table->increments('id'); + + createDefaultRelationshipTableFields($table, 'page', 'selection'); + $table->integer('position')->unsigned()->index(); + + $table->timestamps(); + }); + } +} From 221ed7e0eb1a54b3da6bdec85982234dc8d11784 Mon Sep 17 00:00:00 2001 From: Illya Moskvin Date: Tue, 5 May 2020 16:26:06 -0500 Subject: [PATCH 028/115] Show featured blog articles on homepage [WEB-1651] --- app/Http/Controllers/HomeController.php | 15 +++ .../_articleFeature.blade.php | 90 ++++++++++++++++++ .../articles_publications/index.blade.php | 95 +------------------ resources/views/site/home.blade.php | 6 ++ 4 files changed, 115 insertions(+), 91 deletions(-) create mode 100644 resources/views/site/articles_publications/_articleFeature.blade.php diff --git a/app/Http/Controllers/HomeController.php b/app/Http/Controllers/HomeController.php index 27a838f9d1..36f6c3b65f 100644 --- a/app/Http/Controllers/HomeController.php +++ b/app/Http/Controllers/HomeController.php @@ -54,11 +54,26 @@ public function index() 'membership_module_button_text' => $page->home_membership_module_button_text, 'membership_module_short_copy' => $page->home_membership_module_short_copy, 'roadblocks' => $this->getLightboxes(), + 'articles' => $this->getArticles() ]; return view('site.home', $view_data); } + private function getArticles() + { + $page = Page::forType('Articles and Publications')->first(); + $articles = $page->getRelatedWithApiModels("featured_items", [], [ + 'articles' => false, + 'interactiveFeatures.experiences' => false + ]) ?? null; + + return [ + 'featureHero' => $articles->shift(), + 'features' => $articles, + ]; + } + private function getLightboxes() { $activeLightboxes = Lightbox::orderBy('lightbox_start_date', 'DESC') diff --git a/resources/views/site/articles_publications/_articleFeature.blade.php b/resources/views/site/articles_publications/_articleFeature.blade.php new file mode 100644 index 0000000000..fb705e998c --- /dev/null +++ b/resources/views/site/articles_publications/_articleFeature.blade.php @@ -0,0 +1,90 @@ +
+ @component('components.molecules._m-title-bar') + @slot('links', array(array('label' => 'Browse all articles', 'href' => route('articles')))) + @slot('variation', 'm-title-bar--no-hr') + Art Institute Blog + @endcomponent + + @component('components.atoms._hr') + @endcomponent + +
+ @if ($featureHero) + @component('components.molecules._m-listing----' . strtolower($featureHero->type)) + @slot('tag', 'div') + @slot('titleFont', 'f-headline-editorial') + @slot('captionFont', 'f-body-editorial') + @slot('variation', 'o-feature-plus-4__feature') + @slot('item', $featureHero) + @slot('imageSettings', array( + 'fit' => 'crop', + 'ratio' => '16:9', + 'srcset' => array(200,400,600,1000), + 'sizes' => aic_imageSizes(array( + 'xsmall' => '58', + 'small' => '58', + 'medium' => '38', + 'large' => '28', + 'xlarge' => '28', + )), + )) + @endcomponent + @endif + + +
    + @foreach ($features as $editorial) + @if ($loop->index < 2) + @component('components.molecules._m-listing----' . strtolower($editorial->type) . '-minimal') + @slot('item', $editorial) + @slot('imageSettings', array( + 'fit' => 'crop', + 'ratio' => '16:9', + 'srcset' => array(200,400,600), + 'sizes' => aic_imageSizes(array( + 'xsmall' => '58', + 'small' => '28', + 'medium' => '18', + 'large' => '13', + 'xlarge' => '13', + )), + )) + @endcomponent + @endif + @endforeach +
+ +
    + @foreach ($features as $editorial) + @if ($loop->index > 1) + @component('components.molecules._m-listing----' . strtolower($editorial->type) . '-minimal') + @slot('item', $editorial) + @slot('imageSettings', array( + 'fit' => 'crop', + 'ratio' => '16:9', + 'srcset' => array(200,400,600), + 'sizes' => aic_imageSizes(array( + 'xsmall' => '58', + 'small' => '28', + 'medium' => '18', + 'large' => '13', + 'xlarge' => '13', + )), + )) + @endcomponent + @endif + @endforeach +
+
+ + @component('components.molecules._m-links-bar') + @slot('variation', 'm-links-bar--title-bar-companion') + @slot('linksPrimary', array( + array( + 'label' => 'Browse all articles', + 'href' => route('articles'), + 'variation' => 'btn btn--secondary' + ), + )) + @endcomponent +
diff --git a/resources/views/site/articles_publications/index.blade.php b/resources/views/site/articles_publications/index.blade.php index 36804dd7bc..19038f45b5 100644 --- a/resources/views/site/articles_publications/index.blade.php +++ b/resources/views/site/articles_publications/index.blade.php @@ -21,97 +21,10 @@ @slot('linksPrimary', $linksBar) @endcomponent -
- @component('components.molecules._m-title-bar') - @slot('links', array(array('label' => 'Browse all articles', 'href' => route('articles')))) - @slot('variation', 'm-title-bar--no-hr') - Art Institute Blog - @endcomponent - - @component('components.atoms._hr') - @endcomponent - -
- @if ($featureHero) - @component('components.molecules._m-listing----' . strtolower($featureHero->type)) - @slot('tag', 'div') - @slot('titleFont', 'f-headline-editorial') - @slot('captionFont', 'f-body-editorial') - @slot('variation', 'o-feature-plus-4__feature') - @slot('item', $featureHero) - @slot('imageSettings', array( - 'fit' => 'crop', - 'ratio' => '16:9', - 'srcset' => array(200,400,600,1000), - 'sizes' => aic_imageSizes(array( - 'xsmall' => '58', - 'small' => '58', - 'medium' => '38', - 'large' => '28', - 'xlarge' => '28', - )), - )) - @endcomponent - @endif - - -
    - @foreach ($features as $editorial) - @if ($loop->index < 2) - @component('components.molecules._m-listing----' . strtolower($editorial->type) . '-minimal') - @slot('item', $editorial) - @slot('imageSettings', array( - 'fit' => 'crop', - 'ratio' => '16:9', - 'srcset' => array(200,400,600), - 'sizes' => aic_imageSizes(array( - 'xsmall' => '58', - 'small' => '28', - 'medium' => '18', - 'large' => '13', - 'xlarge' => '13', - )), - )) - @endcomponent - @endif - @endforeach -
- -
    - @foreach ($features as $editorial) - @if ($loop->index > 1) - @component('components.molecules._m-listing----' . strtolower($editorial->type) . '-minimal') - @slot('item', $editorial) - @slot('imageSettings', array( - 'fit' => 'crop', - 'ratio' => '16:9', - 'srcset' => array(200,400,600), - 'sizes' => aic_imageSizes(array( - 'xsmall' => '58', - 'small' => '28', - 'medium' => '18', - 'large' => '13', - 'xlarge' => '13', - )), - )) - @endcomponent - @endif - @endforeach -
-
- - @component('components.molecules._m-links-bar') - @slot('variation', 'm-links-bar--title-bar-companion') - @slot('linksPrimary', array( - array( - 'label' => 'Browse all articles', - 'href' => route('articles'), - 'variation' => 'btn btn--secondary' - ), - )) - @endcomponent -
- + @component('site.articles_publications._articleFeature') + @slot('featureHero', $featureHero ?? null) + @slot('features', $features ?? null) + @endcomponent @if(sizeof($experiences['items']) > 0)
diff --git a/resources/views/site/home.blade.php b/resources/views/site/home.blade.php index 9a521d39fa..ce572da812 100644 --- a/resources/views/site/home.blade.php +++ b/resources/views/site/home.blade.php @@ -143,6 +143,12 @@ @endcomponent +@component('site.articles_publications._articleFeature') + @slot('featureHero', $articles['featureHero'] ?? null) + @slot('features', $articles['features'] ?? null) +@endcomponent + + @component('components.molecules._m-title-bar') @slot('links', array(array('label' => 'Explore the collection', 'href' => $_pages['collection'], 'gtmAttributes' => 'data-gtm-event="home-collection" data-gtm-event-action="' . $seo->title . '" data-gtm-event-category="nav-link"')) From d85547be295e06348f9205a1bdf065fb27e5447d Mon Sep 17 00:00:00 2001 From: nikhiltri Date: Tue, 5 May 2020 16:56:07 -0500 Subject: [PATCH 029/115] Create Artists block for homepage in CMS [WEB-1649] --- app/Models/Page.php | 5 +++++ app/Repositories/PageRepository.php | 3 ++- resources/views/admin/pages/form_home.blade.php | 10 ++++++++++ 3 files changed, 17 insertions(+), 1 deletion(-) diff --git a/app/Models/Page.php b/app/Models/Page.php index 70377cb468..a8e1429d60 100644 --- a/app/Models/Page.php +++ b/app/Models/Page.php @@ -255,6 +255,11 @@ public function homeShopItems() return $this->apiElements()->where('relation', 'homeShopItems'); } + public function homeArtists() + { + return $this->apiElements()->where('relation', 'homeArtists'); + } + public function admissions() { return $this->hasMany(Admission::class)->orderBy('position'); diff --git a/app/Repositories/PageRepository.php b/app/Repositories/PageRepository.php index 708e79271d..113f633073 100644 --- a/app/Repositories/PageRepository.php +++ b/app/Repositories/PageRepository.php @@ -45,7 +45,7 @@ public function hydrate($object, $fields) public function afterSave($object, $fields) { // General - $this->updateBrowserApiRelated($object, $fields, ['homeShopItems', 'homeExhibitions', 'exhibitionsExhibitions', 'exhibitionsUpcoming', 'exhibitionsUpcomingListing', 'exhibitionsCurrent', 'artCategoryTerms']); + $this->updateBrowserApiRelated($object, $fields, ['homeShopItems', 'homeExhibitions', 'homeArtists', 'exhibitionsExhibitions', 'exhibitionsUpcoming', 'exhibitionsUpcomingListing', 'exhibitionsCurrent', 'artCategoryTerms']); // Homepage $this->updateBrowser($object, $fields, 'homeEvents'); @@ -103,6 +103,7 @@ public function getFormFields($object) $fields['browsers']['homeVideos'] = $this->getFormFieldsForRelatedBrowser($object, 'homeVideos', 'collection.articles_publications', 'title', 'videos'); $fields['browsers']['homeHighlights'] = $this->getFormFieldsForRelatedBrowser($object, 'homeHighlights', 'collection', 'title', 'selections'); $fields['browsers']['homeExperiences'] = $this->getFormFieldsForRelatedBrowser($object, 'homeExperiences', 'collection', 'title', 'interactiveFeatures.experiences'); + $fields['browsers']['homeArtists'] = $this->getFormFieldsForBrowserApi($object, 'homeArtists', 'App\Models\Api\Artist', 'collection'); // Exhibition & Events $fields['browsers']['exhibitionsUpcomingListing'] = $this->getFormFieldsForBrowserApi($object, 'exhibitionsUpcomingListing', 'App\Models\Api\Exhibition', 'exhibitions_events', 'title', 'exhibitions'); diff --git a/resources/views/admin/pages/form_home.blade.php b/resources/views/admin/pages/form_home.blade.php index d2fc71eb27..fe4f6171b4 100644 --- a/resources/views/admin/pages/form_home.blade.php +++ b/resources/views/admin/pages/form_home.blade.php @@ -45,6 +45,16 @@ ]) + + @formField('browser', [ + 'routePrefix' => 'collection', + 'max' => 10, + 'moduleName' => 'artists', + 'name' => 'homeArtists', + 'label' => 'Artists' + ]) + + @formField('browser', [ 'routePrefix' => 'collection', From df1abc049d1fb8883f4b2439ee5849c900a82e2f Mon Sep 17 00:00:00 2001 From: Illya Moskvin Date: Tue, 5 May 2020 17:04:26 -0500 Subject: [PATCH 030/115] Show featured highlights on homepage [WEB-1648] --- app/Http/Controllers/HomeController.php | 3 +- resources/views/site/home.blade.php | 47 ++++++++++++++++++++----- 2 files changed, 41 insertions(+), 9 deletions(-) diff --git a/app/Http/Controllers/HomeController.php b/app/Http/Controllers/HomeController.php index 36f6c3b65f..87648215b9 100644 --- a/app/Http/Controllers/HomeController.php +++ b/app/Http/Controllers/HomeController.php @@ -54,7 +54,8 @@ public function index() 'membership_module_button_text' => $page->home_membership_module_button_text, 'membership_module_short_copy' => $page->home_membership_module_short_copy, 'roadblocks' => $this->getLightboxes(), - 'articles' => $this->getArticles() + 'highlights' => $page->getRelated('homeHighlights')->where('published', true), + 'articles' => $this->getArticles(), ]; return view('site.home', $view_data); diff --git a/resources/views/site/home.blade.php b/resources/views/site/home.blade.php index ce572da812..063eeb397e 100644 --- a/resources/views/site/home.blade.php +++ b/resources/views/site/home.blade.php @@ -143,6 +143,39 @@ @endcomponent +@component('components.molecules._m-title-bar') + Highlights +@endcomponent +@component('components.atoms._hr') +@endcomponent +@component('components.organisms._o-grid-listing') + @slot('variation', 'o-grid-listing--gridlines-cols o-grid-listing--gridlines-top') + @slot('cols_small','2') + @slot('cols_medium','3') + @slot('cols_large','3') + @slot('cols_xlarge','3') + @foreach ($highlights as $k => $item) + @component('components.molecules._m-listing----' . strtolower($item->type)) + @slot('variation', 'o-pinboard__item') + @slot('item', $item) + @slot('imageSettings', array( + 'fit' => 'crop', + 'ratio' => '1:1', + 'srcset' => array(200,400,600,1000), + 'sizes' => aic_gridListingImageSizes(array( + 'xsmall' => '1', + 'small' => '2', + 'medium' => '3', + 'large' => '3', + 'xlarge' => '3', + )), + )) + @slot('gtmAttributes', 'data-gtm-event="' . $item->type . '-' . $item->id . '-' . $item->trackingTitle . '" data-gtm-event-action="' . $seo->title . '" data-gtm-event-category="highlight-listing-' . ($loop->index + 1) . '"') + @endcomponent + @endforeach +@endcomponent + + @component('site.articles_publications._articleFeature') @slot('featureHero', $articles['featureHero'] ?? null) @slot('features', $articles['features'] ?? null) @@ -155,7 +188,6 @@ ) From the Collection @endcomponent -@php($countCollection = 0) @component('components.organisms._o-pinboard') @slot('cols_small','2') @slot('cols_medium','3') @@ -163,7 +195,6 @@ @slot('cols_xlarge','3') @slot('maintainOrder','true') @foreach ($theCollection as $k => $item) - @php($countCollection = $countCollection+1) @if ($item->enclosedItem()) @component('components.molecules._m-listing----' . strtolower($item->enclosedItem()->type)) @slot('variation', 'o-pinboard__item') @@ -175,14 +206,14 @@ ), 'srcset' => array(200,400,600,1000), 'sizes' => aic_gridListingImageSizes(array( - 'xsmall' => '1', - 'small' => '2', - 'medium' => '3', - 'large' => '3', - 'xlarge' => '3', + 'xsmall' => '1', + 'small' => '2', + 'medium' => '3', + 'large' => '3', + 'xlarge' => '3', )), )) - @slot('gtmAttributes', 'data-gtm-event="' . $item->enclosedItem()->type . '-' . $item->enclosedItem()->id . '-' . $item->enclosedItem()->trackingTitle . '" data-gtm-event-action="' . $seo->title . '" data-gtm-event-category="collection-listing-' . $countCollection . '"') + @slot('gtmAttributes', 'data-gtm-event="' . $item->enclosedItem()->type . '-' . $item->enclosedItem()->id . '-' . $item->enclosedItem()->trackingTitle . '" data-gtm-event-action="' . $seo->title . '" data-gtm-event-category="collection-listing-' . ($loop->index + 1) . '"') @endcomponent @endif @endforeach From e1099f89b3ee8700f4016079e8f66c157f1ef90b Mon Sep 17 00:00:00 2001 From: nikhiltri Date: Tue, 5 May 2020 17:08:08 -0500 Subject: [PATCH 031/115] Add video title and description to homepage CMS [WEB-1618] --- app/Models/Page.php | 3 ++ ...o_title_and_description_to_pages_table.php | 37 +++++++++++++++++++ .../views/admin/pages/form_home.blade.php | 14 +++++++ 3 files changed, 54 insertions(+) create mode 100644 database/migrations/2020_05_05_170004_add_video_title_and_description_to_pages_table.php diff --git a/app/Models/Page.php b/app/Models/Page.php index a8e1429d60..21e7067130 100644 --- a/app/Models/Page.php +++ b/app/Models/Page.php @@ -55,6 +55,9 @@ class Page extends AbstractModel 'home_membership_module_short_copy', 'home_membership_module_button_text', + 'home_video_title', + 'home_video_description', + // Exhibition 'exhibition_intro', diff --git a/database/migrations/2020_05_05_170004_add_video_title_and_description_to_pages_table.php b/database/migrations/2020_05_05_170004_add_video_title_and_description_to_pages_table.php new file mode 100644 index 0000000000..6f79f81b76 --- /dev/null +++ b/database/migrations/2020_05_05_170004_add_video_title_and_description_to_pages_table.php @@ -0,0 +1,37 @@ +text('home_video_title')->nullable(); + $table->text('home_video_description')->nullable(); + }); + } + + /** + * Reverse the migrations. + * + * @return void + */ + public function down() + { + Schema::table('pages', function (Blueprint $table) { + $table->dropColumn('home_video_title'); + }); + + Schema::table('pages', function (Blueprint $table) { + $table->dropColumn('home_video_description'); + }); + } +} diff --git a/resources/views/admin/pages/form_home.blade.php b/resources/views/admin/pages/form_home.blade.php index fe4f6171b4..e1b20d4a1c 100644 --- a/resources/views/admin/pages/form_home.blade.php +++ b/resources/views/admin/pages/form_home.blade.php @@ -26,6 +26,20 @@ @section('fieldsets') + + @formField('input', [ + 'name' => 'home_video_title', + 'label' => 'Title', + ]) + + @formField('wysiwyg', [ + 'name' => 'home_video_description', + 'label' => 'Description', + 'toolbarOptions' => [ + 'italic' + ], + ]) + @formField('browser', [ 'routePrefix' => 'collection.articles_publications', 'max' => 10, From 0ae4975419ce5b0a98b58429f4793bcf9520ff29 Mon Sep 17 00:00:00 2001 From: Illya Moskvin Date: Tue, 5 May 2020 17:18:34 -0500 Subject: [PATCH 032/115] Hide homepage shop section when it's empty --- resources/views/site/home.blade.php | 33 ++++++++++++++++------------- 1 file changed, 18 insertions(+), 15 deletions(-) diff --git a/resources/views/site/home.blade.php b/resources/views/site/home.blade.php index 063eeb397e..eccd0488f9 100644 --- a/resources/views/site/home.blade.php +++ b/resources/views/site/home.blade.php @@ -224,22 +224,25 @@ @slot('linksPrimary', array(array('label' => 'Explore the collection', 'href' => $_pages['collection'], 'variation' => 'btn btn--secondary', 'gtmAttributes' => 'data-gtm-event="home-collection" data-gtm-event-action="' . $seo->title .'" data-gtm-event-category="nav-link"'))) @endcomponent -@component('site.shared._featuredProducts') - @slot('title', 'From the shop') - @slot('titleLinks', [ - [ - 'label' => 'Explore the shop', - 'href' => $_pages['shop'], - 'gtmAttributes' => 'data-gtm-event="home-shop" data-gtm-event-action="' . $seo->title . '" data-gtm-event-category="nav-link"' - ] - ]) - @slot('products', $products) -@endcomponent -@component('components.molecules._m-links-bar') - @slot('variation', 'm-links-bar--title-bar-companion') - @slot('linksPrimary', array(array('label' => 'Explore the shop', 'href' => $_pages['shop'], 'variation' => 'btn btn--secondary', 'gtmAttributes' => 'data-gtm-event="home-shop" data-gtm-event-action="' . $seo->title . '" data-gtm-event-category="nav-link"'))) -@endcomponent +@if ($products->count() > 0) + @component('site.shared._featuredProducts') + @slot('title', 'From the shop') + @slot('titleLinks', [ + [ + 'label' => 'Explore the shop', + 'href' => $_pages['shop'], + 'gtmAttributes' => 'data-gtm-event="home-shop" data-gtm-event-action="' . $seo->title . '" data-gtm-event-category="nav-link"' + ] + ]) + @slot('products', $products) + @endcomponent + @component('components.molecules._m-links-bar') + @slot('variation', 'm-links-bar--title-bar-companion') + @slot('linksPrimary', array(array('label' => 'Explore the shop', 'href' => $_pages['shop'], 'variation' => 'btn btn--secondary', 'gtmAttributes' => 'data-gtm-event="home-shop" data-gtm-event-action="' . $seo->title . '" data-gtm-event-category="nav-link"'))) + @endcomponent +@endif + diff --git a/resources/views/admin/blocks/artists.blade.php b/resources/views/admin/blocks/artists.blade.php new file mode 100644 index 0000000000..56cb663500 --- /dev/null +++ b/resources/views/admin/blocks/artists.blade.php @@ -0,0 +1,14 @@ +@formField('browser', [ + 'routePrefix' => 'collection', + 'max' => 1, + 'moduleName' => 'artists', + 'name' => 'artists', + 'label' => 'Artists' +]) + +

If no image is selected, we will fall back to the hero image, otherwise we will not show this artist.

+ +@formField('medias', [ + 'name' => 'artist_image', + 'label' => 'Image', +]) diff --git a/resources/views/admin/pages/form_home.blade.php b/resources/views/admin/pages/form_home.blade.php index 2e7c71f672..b935c37fe3 100644 --- a/resources/views/admin/pages/form_home.blade.php +++ b/resources/views/admin/pages/form_home.blade.php @@ -172,15 +172,7 @@ -

Please select a carousel image for each artist via their edit page in the CMS. If an artist has no carousel image, we will fall back to the hero image. If the artist has no hero image, we will not show that artist.

- - @formField('browser', [ - 'routePrefix' => 'collection', - 'max' => 10, - 'moduleName' => 'artists', - 'name' => 'homeArtists', - 'label' => 'Artists' - ]) + @formField('repeater', [ 'type' => 'homeArtists' ]) diff --git a/resources/views/site/home.blade.php b/resources/views/site/home.blade.php index 649d9634e2..d1acab46a3 100644 --- a/resources/views/site/home.blade.php +++ b/resources/views/site/home.blade.php @@ -215,8 +215,7 @@ @endcomponent @endif - -@if ($artists->count() > 0) +@if ($homeArtists->count() > 0) @component('components.organisms._o-gallery----slider') @slot('variation', 'o-gallery----theme-2 o-gallery--artist') @slot('title', 'Explore by Maker') @@ -234,14 +233,17 @@ 'xlarge' => '12', )), )) - @slot('items', $artists->filter(function($item) { - return ($item->imageFront('carousel') ?? $item->imageFront('hero')) !== null; + @slot('items', $homeArtists->filter(function($item) { + $artist = $item->apiModels('artists', 'Artist')->first(); + return ($item->imageFront('artist_image') ?? $artist->imageFront('hero')) !== null; })->map(function($item) { + $artist = $item->apiModels('artists', 'Artist')->first(); return [ 'type' => 'image', 'size' => 'gallery', - 'media' => $item->imageFront('carousel') ?? $item->imageFront('hero'), - 'captionTitle' => $item->short_name_display, + 'media' => $item->imageFront('artist_image') ?? $artist->imageFront('hero'), + 'captionTitle' => $artist->short_name_display, + 'href' => route('artists.show', $artist), ]; })) @endcomponent From b70b52e484fa6a120379ce849458c7b36af2580e Mon Sep 17 00:00:00 2001 From: nikhiltri Date: Mon, 11 May 2020 20:51:49 -0500 Subject: [PATCH 064/115] Minor cleanup on artist carousel on homepage [WEB-1621] --- frontend/scss/organisms/_o-gallery.scss | 2 +- .../organisms/_o-gallery----slider.blade.php | 10 ++++++---- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/frontend/scss/organisms/_o-gallery.scss b/frontend/scss/organisms/_o-gallery.scss index 078d401490..5d02b2cb6d 100644 --- a/frontend/scss/organisms/_o-gallery.scss +++ b/frontend/scss/organisms/_o-gallery.scss @@ -626,7 +626,7 @@ .m-media { position: relative; .m-media__img { - background-color: black; + background-color: #f3f3f3; img { opacity: 0.9; } diff --git a/resources/views/components/organisms/_o-gallery----slider.blade.php b/resources/views/components/organisms/_o-gallery----slider.blade.php index b36af3a0a2..df81df68a5 100644 --- a/resources/views/components/organisms/_o-gallery----slider.blade.php +++ b/resources/views/components/organisms/_o-gallery----slider.blade.php @@ -41,10 +41,12 @@ ); } @endphp - @component('components.molecules._m-media') - @slot('item', $item) - @slot('imageSettings', $currentImageSettings ?? '') - @endcomponent + + @component('components.molecules._m-media') + @slot('item', $item) + @slot('imageSettings', $currentImageSettings ?? '') + @endcomponent + @endforeach @endif
From 494ea00dc0518c9b75f125ab67dd8e052c0a4e83 Mon Sep 17 00:00:00 2001 From: nikhiltri Date: Mon, 11 May 2020 20:53:02 -0500 Subject: [PATCH 065/115] Reorder subnav in homepage landing CMS page --- app/Http/Controllers/Admin/PageController.php | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/Http/Controllers/Admin/PageController.php b/app/Http/Controllers/Admin/PageController.php index 3ca1af4165..c8043b0119 100644 --- a/app/Http/Controllers/Admin/PageController.php +++ b/app/Http/Controllers/Admin/PageController.php @@ -30,15 +30,15 @@ public function home(PageRepository $pages) Session::put("pages_back_link", route('admin.homepage.landing')); $additionalFieldsets = [ + ['fieldset' => 'plan-your-visit', 'label' => 'Plan Your Visit'], ['fieldset' => 'video-carousel', 'label' => 'Video Carousel'], ['fieldset' => 'call-to-action', 'label' => 'Call to Action'], ['fieldset' => 'highlights', 'label' => 'Highlights'], ['fieldset' => 'artists', 'label' => 'Artists'], - ['fieldset' => 'interactive-features', 'label' => 'Interactive Features'], - ['fieldset' => 'plan-your-visit', 'label' => 'Plan Your Visit'], - ['fieldset' => 'exhibitions-and-events', 'label' => 'Exhibitions and Events'], ['fieldset' => 'from-the-collection', 'label' => 'From the Collection'], ['fieldset' => 'from-the-shop', 'label' => 'From the Shop'], + ['fieldset' => 'exhibitions-and-events', 'label' => 'Exhibitions and Events'], + // ['fieldset' => 'interactive-features', 'label' => 'Interactive Features'], ]; $fields = $this->form($page->id); $fields['additionalFieldsets'] = $additionalFieldsets; From 330da3a978f55a386645f5195644c1cc216d477b Mon Sep 17 00:00:00 2001 From: nikhiltri Date: Mon, 11 May 2020 21:03:22 -0500 Subject: [PATCH 066/115] Add url so listings link to the correct item [WEB-1655] --- app/Presenters/Admin/SelectionPresenter.php | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/app/Presenters/Admin/SelectionPresenter.php b/app/Presenters/Admin/SelectionPresenter.php index d6b01fbc0c..4ac2ccb76d 100644 --- a/app/Presenters/Admin/SelectionPresenter.php +++ b/app/Presenters/Admin/SelectionPresenter.php @@ -25,4 +25,8 @@ public function type() } } + public function url() { + return route('selections.show', $this->entity); + } + } From 4f605360266efc1a106a82fd043fa106e5ed094c Mon Sep 17 00:00:00 2001 From: nikhiltri Date: Mon, 11 May 2020 21:10:44 -0500 Subject: [PATCH 067/115] Correct links to highlights in global search [WEB-1640] --- .../views/components/molecules/_m-listing----article.blade.php | 2 +- resources/views/site/search/index.blade.php | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/resources/views/components/molecules/_m-listing----article.blade.php b/resources/views/components/molecules/_m-listing----article.blade.php index 5b0932a9c9..a7128da971 100644 --- a/resources/views/components/molecules/_m-listing----article.blade.php +++ b/resources/views/components/molecules/_m-listing----article.blade.php @@ -1,5 +1,5 @@ <{{ $tag ?? 'li' }} class="m-listing m-listing--article{{ (isset($variation)) ? ' '.$variation : '' }}"{!! (isset($variation) and strrpos($variation, "--hero") > -1 and !$item->videoFront) ? ' data-behavior="blurMyBackground"' : '' !!}> - + -1 and !$item->videoFront) ? ' data-blur-img' : '' }}> @if (isset($image) || $item->imageFront('hero')) @component('components.atoms._img') diff --git a/resources/views/site/search/index.blade.php b/resources/views/site/search/index.blade.php index f346e53a84..efd8f4c3de 100644 --- a/resources/views/site/search/index.blade.php +++ b/resources/views/site/search/index.blade.php @@ -324,6 +324,7 @@ @slot('cols_xlarge','4') @foreach ($highlights as $item) @component('components.molecules._m-listing----article') + @slot('module', 'selections') @slot('imgVariation','') @slot('item', $item) @slot('imageSettings', array( @@ -355,6 +356,7 @@ @foreach ($highlights as $item) @component('components.molecules._m-listing----article') + @slot('module', 'selections') @slot('imgVariation','') @slot('item', $item) @slot('imageSettings', array( From 2e6f945b64befea0d09c0b0eccfa92e2357f0db5 Mon Sep 17 00:00:00 2001 From: surreal8 Date: Fri, 17 Apr 2020 15:58:01 -0500 Subject: [PATCH 068/115] add 360 to artwork admin form --- app/Models/Artwork.php | 22 +++++++++++++++++++ resources/views/admin/artworks/form.blade.php | 8 +++++++ 2 files changed, 30 insertions(+) diff --git a/app/Models/Artwork.php b/app/Models/Artwork.php index 072cf76c84..666c1fba9a 100644 --- a/app/Models/Artwork.php +++ b/app/Models/Artwork.php @@ -7,6 +7,7 @@ use App\Models\Behaviors\HasApiRelations; use App\Models\Behaviors\HasFeaturedRelated; use App\Models\Behaviors\HasMedias; +use App\Models\SeamlessImage; use Illuminate\Support\Str; @@ -52,4 +53,25 @@ public function getSlugAttribute() { return ['en' => getUtf8Slug($this->title)]; } + + public function getAssetLibraryAttribute() + { + // Include image sequence + if ($this->fileObject('image_sequence_file')) { + $images = SeamlessImage::where('zip_file_id', $this->fileObject('image_sequence_file')->id)->get(); + $asset = [ + 'type' => 'sequence', + 'id' => $this->fileObject('image_sequence_file')->id, + 'width' => $images->first() ? $images->first()->width : 0, + 'height' => $images->first() ? $images->first()->height : 0, + 'src' => $images->map(function ($image) { + return [ + 'src' => 'https://' . config('twill.imgix_source_host') . '/seq/' . $image->file_name, + 'frame' => $image->frame, + ]; + })->toArray(), + ]; + } + return $asset; + } } diff --git a/resources/views/admin/artworks/form.blade.php b/resources/views/admin/artworks/form.blade.php index a89caf4aa0..08b043919a 100644 --- a/resources/views/admin/artworks/form.blade.php +++ b/resources/views/admin/artworks/form.blade.php @@ -52,6 +52,14 @@

This checkbox is meant as a fail-safe. If for some reason, you see missing tiles when you zoom and pan around the deep-zoom viewer, check this option and re-publish. There's no need to use it under normal circumstances. Please note that it may take up to 10 minutes to generate tiles.

+ + + @formField('files', [ + 'name' => 'image_sequence_file', + 'label' => 'Image Sequence Zip', + 'note' => 'Upload a .zip file' + ]) + @stop @push('vuexStore') From cf5e30ced553807356eb64d87df47f2c5b0da536 Mon Sep 17 00:00:00 2001 From: nikhiltri Date: Tue, 12 May 2020 11:48:27 -0500 Subject: [PATCH 069/115] Fix syntax for outputting variable in a @slot in GTM attribute --- resources/views/site/collection/index.blade.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/resources/views/site/collection/index.blade.php b/resources/views/site/collection/index.blade.php index 0cc7db61e1..c7ef913e91 100644 --- a/resources/views/site/collection/index.blade.php +++ b/resources/views/site/collection/index.blade.php @@ -230,7 +230,7 @@ 'xlarge' => '13', )), )) - @slot('gtmAttributes', 'data-gtm-event="{{$item->title}}" data-gtm-event-action="' . $seo->title . '" data-gtm-event-category="collection-nav"') + @slot('gtmAttributes', 'data-gtm-event="' . $item->title . '" data-gtm-event-action="' . $seo->title . '" data-gtm-event-category="collection-nav"') @endcomponent @endif @endforeach From 26e5518825c703052d95dc046966904c6111ce36 Mon Sep 17 00:00:00 2001 From: nikhiltri Date: Thu, 23 Apr 2020 14:08:33 -0500 Subject: [PATCH 070/115] Save file uploads in CMS form [WEB-1634] --- app/Models/Artwork.php | 5 ++++- app/Repositories/ArtworkRepository.php | 2 ++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/app/Models/Artwork.php b/app/Models/Artwork.php index 666c1fba9a..5bdf2a6405 100644 --- a/app/Models/Artwork.php +++ b/app/Models/Artwork.php @@ -2,6 +2,7 @@ namespace App\Models; +use A17\Twill\Models\Behaviors\HasFiles; use App\Models\Behaviors\HasApiModel; use App\Models\Behaviors\HasRelated; use App\Models\Behaviors\HasApiRelations; @@ -13,7 +14,7 @@ class Artwork extends AbstractModel { - use HasApiModel, HasRelated, HasApiRelations, HasFeaturedRelated, HasMedias; + use HasApiModel, HasRelated, HasApiRelations, HasFeaturedRelated, HasMedias, HasFiles; protected $apiModel = 'App\Models\Api\Artwork'; @@ -34,6 +35,8 @@ class Artwork extends AbstractModel ], ]; + public $filesParams = ['image_sequence_file']; + public function getFullTitleAttribute() { return $this->title; diff --git a/app/Repositories/ArtworkRepository.php b/app/Repositories/ArtworkRepository.php index 7c68e27cc5..ec31f5c033 100644 --- a/app/Repositories/ArtworkRepository.php +++ b/app/Repositories/ArtworkRepository.php @@ -9,12 +9,14 @@ use App\Repositories\Behaviors\Handle3DModel; use A17\Twill\Repositories\Behaviors\HandleMedias; use App\Repositories\Api\BaseApiRepository; +use A17\Twill\Repositories\Behaviors\HandleFiles; class ArtworkRepository extends BaseApiRepository { use HandleFeaturedRelated; use Handle3DModel; use HandleMedias; + use HandleFiles; public function __construct(Artwork $model) { From 2b4776b2ec3d062bc9307c06d3657b494885ed01 Mon Sep 17 00:00:00 2001 From: nikhiltri Date: Thu, 23 Apr 2020 14:22:01 -0500 Subject: [PATCH 071/115] Dump 360 JSON metadata onto the artwork detail page [WEB-1634] --- app/Models/Artwork.php | 3 ++- resources/views/site/artworkDetail.blade.php | 6 ++++++ 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/app/Models/Artwork.php b/app/Models/Artwork.php index 5bdf2a6405..426fec40bf 100644 --- a/app/Models/Artwork.php +++ b/app/Models/Artwork.php @@ -74,7 +74,8 @@ public function getAssetLibraryAttribute() ]; })->toArray(), ]; + return $asset; } - return $asset; + return null; } } diff --git a/resources/views/site/artworkDetail.blade.php b/resources/views/site/artworkDetail.blade.php index f2cd7245d1..0e6103b0e0 100644 --- a/resources/views/site/artworkDetail.blade.php +++ b/resources/views/site/artworkDetail.blade.php @@ -2,6 +2,12 @@ @section('content') +@if ($item->assetLibrary) + +@endif +
@component('site.shared._schemaItemProps') From 67409214d147efc01499ce6acfb3bb5af4947388 Mon Sep 17 00:00:00 2001 From: surreal8 Date: Tue, 28 Apr 2020 15:51:35 -0500 Subject: [PATCH 072/115] Add 360 icon for button --- frontend/icons/view360.svg | 23 +++++++++++++++++++++++ frontend/scss/setup/_icons.scss | 8 ++++++++ 2 files changed, 31 insertions(+) create mode 100644 frontend/icons/view360.svg diff --git a/frontend/icons/view360.svg b/frontend/icons/view360.svg new file mode 100644 index 0000000000..b2a8a232f8 --- /dev/null +++ b/frontend/icons/view360.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/frontend/scss/setup/_icons.scss b/frontend/scss/setup/_icons.scss index 39a76b80e3..597ccc655e 100755 --- a/frontend/scss/setup/_icons.scss +++ b/frontend/scss/setup/_icons.scss @@ -178,6 +178,9 @@ More variants maybe added later, so anything thats not a 16px square SVG needs a + + + @@ -495,6 +498,11 @@ The cloud front server caches icons, if you add a new icon, or edit an icon, you height: 16px; } +.icon--view360 { + width: 24px; + height: 24px; +} + .icon--zoom--24 { width: 24px; height: 24px; From 2cbfb26d4edff56eeae344398e234b745859839d Mon Sep 17 00:00:00 2001 From: surreal8 Date: Tue, 28 Apr 2020 17:39:39 -0500 Subject: [PATCH 073/115] Establish 360 for artwork page views --- .../_m-article-header----gallery.blade.php | 23 +++++++++++++++++++ .../molecules/_m-article-header.blade.php | 1 + .../molecules/_m-viewer-360.blade.php | 3 +++ resources/views/site/artworkDetail.blade.php | 3 ++- 4 files changed, 29 insertions(+), 1 deletion(-) create mode 100644 resources/views/components/molecules/_m-viewer-360.blade.php diff --git a/resources/views/components/molecules/_m-article-header----gallery.blade.php b/resources/views/components/molecules/_m-article-header----gallery.blade.php index 72b9768e36..08ce29c80d 100644 --- a/resources/views/components/molecules/_m-article-header----gallery.blade.php +++ b/resources/views/components/molecules/_m-article-header----gallery.blade.php @@ -91,6 +91,29 @@ @endcomponent @endif + @if(isset($is360) && $is360) +
  • + @component('components.atoms._btn') + @slot('variation', 'btn--septenary btn--icon-sq') + @slot('font', '') + @slot('icon', 'icon--view360') + @slot('dataAttributes', 'data-gallery-360') + @slot('behavior', 'triggerMediaModal') + @slot('ariaLabel', '360 Viewer') + @slot('gtmAttributes', 'data-gtm-event="360-open-modal" data-gtm-event-action="{{$title}}" data-gtm-event-category="in-page"') + @endcomponent + +
    • + @endif + @if(isset($isPublicDomain) && $isPublicDomain)
  • @component('components.atoms._btn') diff --git a/resources/views/components/molecules/_m-article-header.blade.php b/resources/views/components/molecules/_m-article-header.blade.php index 351130811a..0a33e864bc 100644 --- a/resources/views/components/molecules/_m-article-header.blade.php +++ b/resources/views/components/molecules/_m-article-header.blade.php @@ -75,6 +75,7 @@ @slot('maxZoomWindowSize', $maxZoomWindowSize ?? null) @slot('prevNextObject', $prevNextObject ?? null) @slot('module3d', $module3d ?? null) + @slot('is360', $is360 ?? null) @endcomponent @else {{-- Default header --}} diff --git a/resources/views/components/molecules/_m-viewer-360.blade.php b/resources/views/components/molecules/_m-viewer-360.blade.php new file mode 100644 index 0000000000..25d59c8191 --- /dev/null +++ b/resources/views/components/molecules/_m-viewer-360.blade.php @@ -0,0 +1,3 @@ +
    + +
    \ No newline at end of file diff --git a/resources/views/site/artworkDetail.blade.php b/resources/views/site/artworkDetail.blade.php index 0e6103b0e0..ecedd5804d 100644 --- a/resources/views/site/artworkDetail.blade.php +++ b/resources/views/site/artworkDetail.blade.php @@ -3,6 +3,7 @@ @section('content') @if ($item->assetLibrary) +{{--@dd($item->assetLibrary);--}} @@ -17,7 +18,7 @@ {{-- Gallery-type _m-article-header never renders title --}}

    {{ $item->title }}

    - @component('components.molecules._m-article-header') + @component('components.molecules._m-article-header', ['is360' => $item->assetLibrary]) {{-- @slot('editorial', false) --}} @slot('headerType', $item->present()->headerType) {{-- @slot('variation', ($item->headerVariation ?? null)) --}} From e72b8cf562102da48fc54dc0c699f562fecbc9d5 Mon Sep 17 00:00:00 2001 From: surreal8 Date: Wed, 29 Apr 2020 11:53:21 -0500 Subject: [PATCH 074/115] Update title variable to be concatenated to gtm attribute string --- .../molecules/_m-article-header----gallery.blade.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/resources/views/components/molecules/_m-article-header----gallery.blade.php b/resources/views/components/molecules/_m-article-header----gallery.blade.php index 08ce29c80d..a88f024d29 100644 --- a/resources/views/components/molecules/_m-article-header----gallery.blade.php +++ b/resources/views/components/molecules/_m-article-header----gallery.blade.php @@ -79,7 +79,7 @@ @slot('dataAttributes', 'data-gallery-module3d') @slot('behavior', 'triggerMediaModal') @slot('ariaLabel', 'View 3D Module') - @slot('gtmAttributes', 'data-gtm-event="3D-open-modal" data-gtm-event-action="{{$title}}" data-gtm-event-category="in-page"') + @slot('gtmAttributes', 'data-gtm-event="3D-open-modal" data-gtm-event-action="' . $title . '" data-gtm-event-category="in-page"') @endcomponent
    • @endif - @if(isset($is360) && $is360) -
  • max_zoom_window_size) @slot('prevNextObject', $prevNextObject ?? null) @slot('module3d', $model3d ?? null) - @slot('is360', $item->assetLibrary !== null) + @slot('module360', $item->assetLibrary) @endcomponent
    From 743615e4179f73cc62a94855eaddf400b7450bc2 Mon Sep 17 00:00:00 2001 From: surreal8 Date: Thu, 30 Apr 2020 13:30:59 -0500 Subject: [PATCH 077/115] Setting up 360 modal behaviors and starting viewer js work --- frontend/js/behaviors/index.js | 1 + frontend/js/behaviors/triggerMediaModal.js | 8 ++++++++ frontend/js/behaviors/viewer360.js | 6 ++++++ frontend/js/functions/modals.js | 5 +++++ .../views/components/molecules/_m-viewer-360.blade.php | 4 +++- 5 files changed, 23 insertions(+), 1 deletion(-) create mode 100644 frontend/js/behaviors/viewer360.js diff --git a/frontend/js/behaviors/index.js b/frontend/js/behaviors/index.js index 9e6f720c60..c4f718b3e6 100644 --- a/frontend/js/behaviors/index.js +++ b/frontend/js/behaviors/index.js @@ -59,3 +59,4 @@ export { default as restrictDownload } from './restrictDownload'; export { default as viewer3D } from './viewer3D'; export { default as fixedOnScroll } from './fixedOnScroll'; export { default as stickySidebar } from './stickySidebar'; +export { default as viewer360 } from './viewer360'; diff --git a/frontend/js/behaviors/triggerMediaModal.js b/frontend/js/behaviors/triggerMediaModal.js index 96d49a9ddd..2eb9a7f3a5 100644 --- a/frontend/js/behaviors/triggerMediaModal.js +++ b/frontend/js/behaviors/triggerMediaModal.js @@ -14,6 +14,7 @@ const triggerMediaModal = function(container) { type: 'media', restricted: (container.parentNode.dataset.restricted == 'true') ? true : false, module3d: (container.parentNode.dataset.type == 'module3d') ? true : false, + module360: (container.parentNode.dataset.type == 'module360') ? true : false, embedCode: embedCode, subtype: container.getAttribute('data-subtype') || null, }); @@ -24,6 +25,13 @@ const triggerMediaModal = function(container) { 'eventAction': container.dataset.title+' - Modal 3D' }); } + if(container.parentNode.dataset.type == 'module360' && container.dataset.title) { + triggerCustomEvent(document, 'gtm:push', { + 'event': '360-open-modal', + 'eventCategory': 'in-page', + 'eventAction': container.dataset.title+' - Modal 360' + }); + } } } } diff --git a/frontend/js/behaviors/viewer360.js b/frontend/js/behaviors/viewer360.js new file mode 100644 index 0000000000..b14588b6ab --- /dev/null +++ b/frontend/js/behaviors/viewer360.js @@ -0,0 +1,6 @@ +const viewer360 = function(container) { + + +} + +export default viewer360; \ No newline at end of file diff --git a/frontend/js/functions/modals.js b/frontend/js/functions/modals.js index b5c1ef9f9b..e70bde278d 100644 --- a/frontend/js/functions/modals.js +++ b/frontend/js/functions/modals.js @@ -20,6 +20,11 @@ const modals = function() { } else { $modal.classList.remove('g-modal--module3d'); } + if (e.data.module360) { + $modal.classList.add('g-modal--module360'); + } else { + $modal.classList.remove('g-modal--module360'); + } if (embedCode) { $modal.classList.add('g-modal--media'); if (e.data.subtype) { diff --git a/resources/views/components/molecules/_m-viewer-360.blade.php b/resources/views/components/molecules/_m-viewer-360.blade.php index 25d59c8191..6cfd0332d9 100644 --- a/resources/views/components/molecules/_m-viewer-360.blade.php +++ b/resources/views/components/molecules/_m-viewer-360.blade.php @@ -1,3 +1,5 @@
    + + -
    \ No newline at end of file +
    From efb92e0c3f245e31e17acd58e38a06b9591dcb8d Mon Sep 17 00:00:00 2001 From: surreal8 Date: Mon, 4 May 2020 19:11:26 -0500 Subject: [PATCH 078/115] Setting up image and control for 360 viewer --- frontend/js/behaviors/viewer360.js | 83 +++++++++++++ frontend/scss/globals/_g-modal.scss | 114 ++++++++++++++++++ .../molecules/_m-viewer-360.blade.php | 18 ++- resources/views/site/artworkDetail.blade.php | 3 +- 4 files changed, 214 insertions(+), 4 deletions(-) diff --git a/frontend/js/behaviors/viewer360.js b/frontend/js/behaviors/viewer360.js index b14588b6ab..54e9f5a078 100644 --- a/frontend/js/behaviors/viewer360.js +++ b/frontend/js/behaviors/viewer360.js @@ -1,6 +1,89 @@ +import { includes, memoize } from 'lodash'; +import assetURL from "../functions/assetURL"; + const viewer360 = function(container) { + let wrapper = container; + console.log('wrapper', wrapper); + let frame = 0; + let windowWidth = window.innerWidth; + let windowHeight = window.innerHeight; + let isLarge = windowWidth >= 900; + let image360Src = wrapper.querySelector('.m-viewer-360-image'); + let control360 = wrapper.querySelector('.m-viewer-360-control .input360'); + + + //inputs + wrapper.addEventListener("wheel", handleMouseWheel); + + //get JSON content from web page + let assetLibrary = document.getElementById("assetLibrary").textContent; + let viewer360Files = JSON.parse(assetLibrary); + let frames360 = viewer360Files.src; + //optimize image size + frames360 = frames360.map(frame => ({ + frame: frame.frame, + src: assetURL(frame.src, { + w: isLarge ? windowWidth - 120 : windowWidth, + h: isLarge ? windowHeight - 80 : windowHeight, + q: 75 + }) + })); + + + //store indexes of frames + const loadedFrameIndexes = Object.keys(frames360).map(k => parseInt(k)); + console.log('loadedFrameIndexes', loadedFrameIndexes); + control360.setAttribute('max', frames360.length-1); + + //get index to find image to show + function update360(frame) { + const closestFrame = findClosestFrame(loadedFrameIndexes, frame); + console.log('frames360', frames360); + const image360 = frames360[closestFrame].src; + console.log('image360', image360); + image360Src.src = image360; + //update input control + control360.setAttribute('value', closestFrame); + } + + //find closest frame based on input + var findClosestFrame = memoize((frames, target) => { + if (!frames.length) return null; + if (includes(frames, target)) return target; + return frames.reduce(function(prev, curr) { + return Math.abs(curr - target) < Math.abs(prev - target) + ? curr + : prev; + }); + }, (frames, target) => `${frames.join(',')}@${target}`); + + function constrainFrame(frame) { + return Math.max(0, Math.min(loadedFrameIndexes.length - 1, parseInt(frame, 10))); + }; + + function handleMouseWheel(e) { + console.log('WORD'); + e.preventDefault(); + //if (this.state.touchX !== null) return; + let dir; + if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) { + dir = Math.sign(e.deltaY); + } else { + dir = Math.sign(e.deltaX); + } + let newFrame = frame + dir; + frame = constrainFrame(newFrame); + console.log('frame', frame); + update360(frame); + } + function _init() { + update360(frame); + } + this.init = function() { + _init(); + }; } export default viewer360; \ No newline at end of file diff --git a/frontend/scss/globals/_g-modal.scss b/frontend/scss/globals/_g-modal.scss index 2a722c6aa8..f413283a15 100644 --- a/frontend/scss/globals/_g-modal.scss +++ b/frontend/scss/globals/_g-modal.scss @@ -167,6 +167,103 @@ } } +.g-modal--module360 { + border-radius: $border-radius; + background-color: $color__black--80; + overflow: hidden; + padding-top:0; + left:0; + right:0; + top:0; + bottom:0; + transform:none; + + @media screen and (min-width: 1280px), screen and (min-height: 1024px) { + left: 50%; + top: 50%; + width: calc(100vw - 80px); + max-width: 1280px; + height: calc(100vh - 80px); + max-height: 1024px; + transform: translate(-50%, -50%); + } + + .m-viewer-360 { + text-align: center; + } + + .g-modal__content { + width:auto; + min-width:100%; + min-height:100%; + padding-bottom:0; + max-height:auto; + } + + .g-modal__close { + position: absolute; + top: 0; + right: 0; + margin: 25px; + padding: 15px; + background-color: rgba(0,0,0,0.5); + transition: background-color 0.4s ease; + border-radius: 50%; + + >svg { + display: block; + } + + &:hover, + &:active { + background-color: black !important; + } + } + + .m-viewer-360-control { + background: rgba(#1a1a1a, 0.5); + position: absolute; + bottom: 20px; + left: 50%; + transform: translate(-50%, 0); + margin: auto; + border-radius: 30px; + padding: 20px 30px; + line-height: 0; + + input { + -webkit-appearance: none; + width: 200px; + height: 4px; + border-radius: 5px; + background: #eee; + outline: none; + padding: 0; + margin: 0; + + &::-webkit-slider-thumb { + appearance: none; + width: 15px; + height: 15px; + border-radius: 50%; + background: #eee; + cursor: pointer; + transition: background 0.15s ease-in-out; + } + + &::-moz-range-thumb { + width: 15px; + height: 15px; + border: 0; + border-radius: 50%; + background: #eee; + cursor: pointer; + transition: background 0.15s ease-in-out; + } + } + } +} + .g-modal--restricted { .g-modal__content { max-width:1280px !important; @@ -189,4 +286,21 @@ height:calc(100% - 80px); } } + + &.g-modal--module360 { + max-width:1280px !important; + max-height:1024px !important; + left:50%; + top:50%; + transform: translate(-50%, -50%); + right:auto; + bottom:auto; + width:100%; + height:100%; + + @include breakpoint('medium+') { + width:calc(100% - 120px); + height:calc(100% - 80px); + } + } } diff --git a/resources/views/components/molecules/_m-viewer-360.blade.php b/resources/views/components/molecules/_m-viewer-360.blade.php index 6cfd0332d9..4478763d03 100644 --- a/resources/views/components/molecules/_m-viewer-360.blade.php +++ b/resources/views/components/molecules/_m-viewer-360.blade.php @@ -1,5 +1,19 @@
    - - + + +
    + +
    +
    diff --git a/resources/views/site/artworkDetail.blade.php b/resources/views/site/artworkDetail.blade.php index 72fa9feb89..d6b6bcbfd2 100644 --- a/resources/views/site/artworkDetail.blade.php +++ b/resources/views/site/artworkDetail.blade.php @@ -3,8 +3,7 @@ @section('content') @if ($item->assetLibrary) -{{--@dd($item->assetLibrary);--}} - @endif From 9ecbe596293349bbd78d802db0f3825952e69529 Mon Sep 17 00:00:00 2001 From: surreal8 Date: Mon, 4 May 2020 19:14:01 -0500 Subject: [PATCH 079/115] Add helper file to obtain imgix urls based on modal specs --- frontend/js/functions/assetURL.js | 45 +++++++++++++++++++++++++++++++ 1 file changed, 45 insertions(+) create mode 100644 frontend/js/functions/assetURL.js diff --git a/frontend/js/functions/assetURL.js b/frontend/js/functions/assetURL.js new file mode 100644 index 0000000000..eed68d17d4 --- /dev/null +++ b/frontend/js/functions/assetURL.js @@ -0,0 +1,45 @@ + +const queryParams = params => Object.keys(params).map(function(key) { + if (key === 'width') key = 'w'; + if (key === 'height') key = 'h'; + + return key + '=' + params[key]; + }).join('&'); + + const getParams = src => { + if( !src ) return false; + if( src.indexOf('?') < 0 ) return false; + + let hashes = src.slice(src.indexOf('?') + 1).split('&'); + + if( !hashes ) return false; + + let params = {} + hashes.map(hash => { + let [key, val] = hash.split('=') + params[key] = decodeURIComponent(val) + }) + + return params; + } + + function removeQueryString(src) { + if( !src ) return false; + + return src.split(/[?#]/)[0]; + } + + export default (src, params = {}, keepParams = true) => { + // return `https://staging-digital-labels.imgix.net/${src}?${queryParams(params)}`; + // return `http://closer-looks.imgix.net/${src}?${queryParams(params)}`; + // return src; + const currentParams = getParams(src); + + if( currentParams && keepParams ){ + params = Object.assign(currentParams, params); + } + + return `${removeQueryString(src)}?${queryParams(params)}`; + } + + \ No newline at end of file From d3331a10f93115e85d63f74d132e850361eb3ca6 Mon Sep 17 00:00:00 2001 From: surreal8 Date: Wed, 6 May 2020 14:06:42 -0500 Subject: [PATCH 080/115] Add mouse and touch listeners and function, begin this binding --- frontend/js/behaviors/viewer360.js | 75 ++++++++++++++++--- .../molecules/_m-viewer-360.blade.php | 1 - 2 files changed, 63 insertions(+), 13 deletions(-) diff --git a/frontend/js/behaviors/viewer360.js b/frontend/js/behaviors/viewer360.js index 54e9f5a078..ab2b1ebf19 100644 --- a/frontend/js/behaviors/viewer360.js +++ b/frontend/js/behaviors/viewer360.js @@ -5,21 +5,19 @@ const viewer360 = function(container) { let wrapper = container; console.log('wrapper', wrapper); let frame = 0; + let touchX = null; + let touchFrame = null; let windowWidth = window.innerWidth; let windowHeight = window.innerHeight; let isLarge = windowWidth >= 900; let image360Src = wrapper.querySelector('.m-viewer-360-image'); let control360 = wrapper.querySelector('.m-viewer-360-control .input360'); - - //inputs - wrapper.addEventListener("wheel", handleMouseWheel); - //get JSON content from web page let assetLibrary = document.getElementById("assetLibrary").textContent; let viewer360Files = JSON.parse(assetLibrary); let frames360 = viewer360Files.src; - //optimize image size + //optimize image size with imgix urls frames360 = frames360.map(frame => ({ frame: frame.frame, src: assetURL(frame.src, { @@ -28,19 +26,15 @@ const viewer360 = function(container) { q: 75 }) })); - //store indexes of frames const loadedFrameIndexes = Object.keys(frames360).map(k => parseInt(k)); - console.log('loadedFrameIndexes', loadedFrameIndexes); control360.setAttribute('max', frames360.length-1); //get index to find image to show function update360(frame) { const closestFrame = findClosestFrame(loadedFrameIndexes, frame); - console.log('frames360', frames360); const image360 = frames360[closestFrame].src; - console.log('image360', image360); image360Src.src = image360; //update input control control360.setAttribute('value', closestFrame); @@ -59,10 +53,68 @@ const viewer360 = function(container) { function constrainFrame(frame) { return Math.max(0, Math.min(loadedFrameIndexes.length - 1, parseInt(frame, 10))); - }; + }; + + //inputs + wrapper.addEventListener("wheel", handleMouseWheel.bind(this)); + control360.addEventListener("input", handleInputChange.bind(this)); + + window.addEventListener("mousedown", handleTouchEvents.bind(this)); + window.addEventListener("mousemove", handleTouchEvents.bind(this)); + window.addEventListener("mouseup", handleTouchEvents.bind(this)); + window.addEventListener("touchstart", handleTouchEvents.bind(this)); + window.addEventListener("touchmove", handleTouchEvents.bind(this)); + window.addEventListener("touchend", handleTouchEvents.bind(this)); + window.addEventListener("touchcancel", handleTouchEvents.bind(this)); + + function handleTouchEvents(e) { + /* + console.log('frame1', this.frame); + let { pageX, touches } = e; + if (touches && touches.length) pageX = touches[0].pageX; + switch (e.type) { + case "mousedown": + case "touchstart": + this.touchX = pageX; + this.touchFrame = frame; + console.log('mousedown', this); + break; + case "mousemove": + case "touchmove": + console.log('mousemove', this); + if (this.touchX === null) return; + //console.log('frame2', frame); + const delta = frames360.length / Math.min(1000, (wrapper.offsetWidth * 0.8)); + const diff = (pageX - this.touchX) * delta; + //console.log('this.touchX', this.touchX); + //console.log('pageX', pageX); + let newFrame = this.touchFrame + diff; + //console.log('newFrame', newFrame); + frame = constrainFrame(newFrame); + //console.log('new frame', frame); + //update360(frame); + break; + /* + case "touchend": + case "touchcancel": + case "mouseup": + this.touchX = null; + this.touchFrame = null; + break; + default: + return; + + }*/ + + } + + function handleInputChange(e) { + frame = constrainFrame(e.target.value); + update360(frame); + }; + function handleMouseWheel(e) { - console.log('WORD'); e.preventDefault(); //if (this.state.touchX !== null) return; let dir; @@ -73,7 +125,6 @@ const viewer360 = function(container) { } let newFrame = frame + dir; frame = constrainFrame(newFrame); - console.log('frame', frame); update360(frame); } diff --git a/resources/views/components/molecules/_m-viewer-360.blade.php b/resources/views/components/molecules/_m-viewer-360.blade.php index 4478763d03..30c8131579 100644 --- a/resources/views/components/molecules/_m-viewer-360.blade.php +++ b/resources/views/components/molecules/_m-viewer-360.blade.php @@ -12,7 +12,6 @@ class="input360" max="" value="" name="frame" - {{--onChange={this.handleInputChange}--}} />
    • From 49e283bb0c68faf68bb06ee1d550843e358d7007 Mon Sep 17 00:00:00 2001 From: surreal8 Date: Thu, 7 May 2020 11:08:01 -0500 Subject: [PATCH 081/115] Add function to handle mouse and touch events, update input slider set value method, and make image not draggable --- frontend/js/behaviors/viewer360.js | 51 ++++++++----------- .../molecules/_m-viewer-360.blade.php | 3 +- 2 files changed, 23 insertions(+), 31 deletions(-) diff --git a/frontend/js/behaviors/viewer360.js b/frontend/js/behaviors/viewer360.js index ab2b1ebf19..8c5dbf152b 100644 --- a/frontend/js/behaviors/viewer360.js +++ b/frontend/js/behaviors/viewer360.js @@ -3,7 +3,6 @@ import assetURL from "../functions/assetURL"; const viewer360 = function(container) { let wrapper = container; - console.log('wrapper', wrapper); let frame = 0; let touchX = null; let touchFrame = null; @@ -37,7 +36,7 @@ const viewer360 = function(container) { const image360 = frames360[closestFrame].src; image360Src.src = image360; //update input control - control360.setAttribute('value', closestFrame); + control360.value = closestFrame; } //find closest frame based on input @@ -59,52 +58,46 @@ const viewer360 = function(container) { wrapper.addEventListener("wheel", handleMouseWheel.bind(this)); control360.addEventListener("input", handleInputChange.bind(this)); - window.addEventListener("mousedown", handleTouchEvents.bind(this)); - window.addEventListener("mousemove", handleTouchEvents.bind(this)); - window.addEventListener("mouseup", handleTouchEvents.bind(this)); - window.addEventListener("touchstart", handleTouchEvents.bind(this)); - window.addEventListener("touchmove", handleTouchEvents.bind(this)); - window.addEventListener("touchend", handleTouchEvents.bind(this)); - window.addEventListener("touchcancel", handleTouchEvents.bind(this)); + window.addEventListener("mousedown", handleEvents.bind(this)); + window.addEventListener("mousemove", handleEvents.bind(this)); + window.addEventListener("mouseup", handleEvents.bind(this)); + window.addEventListener("touchstart", handleEvents.bind(this)); + window.addEventListener("touchmove", handleEvents.bind(this)); + window.addEventListener("touchend", handleEvents.bind(this)); + window.addEventListener("touchcancel", handleEvents.bind(this)); - function handleTouchEvents(e) { - /* - console.log('frame1', this.frame); + function handleEvents(e) { let { pageX, touches } = e; if (touches && touches.length) pageX = touches[0].pageX; switch (e.type) { case "mousedown": case "touchstart": - this.touchX = pageX; - this.touchFrame = frame; - console.log('mousedown', this); + touchX = pageX; + touchFrame = frame; break; + case "mousemove": case "touchmove": - console.log('mousemove', this); - if (this.touchX === null) return; - //console.log('frame2', frame); + if (touchX === null) return; const delta = frames360.length / Math.min(1000, (wrapper.offsetWidth * 0.8)); - const diff = (pageX - this.touchX) * delta; - //console.log('this.touchX', this.touchX); - //console.log('pageX', pageX); - let newFrame = this.touchFrame + diff; - //console.log('newFrame', newFrame); + const diff = (pageX - touchX) * delta; + let newFrame = touchFrame + diff; + if (frame == newFrame) return; frame = constrainFrame(newFrame); - //console.log('new frame', frame); - //update360(frame); + update360(frame); break; - /* + case "touchend": case "touchcancel": case "mouseup": - this.touchX = null; - this.touchFrame = null; + touchX = null; + touchFrame = null; break; + default: return; - }*/ + } } diff --git a/resources/views/components/molecules/_m-viewer-360.blade.php b/resources/views/components/molecules/_m-viewer-360.blade.php index 30c8131579..0839e6061c 100644 --- a/resources/views/components/molecules/_m-viewer-360.blade.php +++ b/resources/views/components/molecules/_m-viewer-360.blade.php @@ -1,12 +1,11 @@
    - +
    Date: Fri, 8 May 2020 17:03:05 -0500 Subject: [PATCH 082/115] Add preload function, loader, and alt tag --- frontend/js/behaviors/viewer360.js | 63 +++++++++++++------ frontend/js/functions/fetchImageBlob.js | 11 ++++ frontend/js/functions/protectFromUnmount.js | 33 ++++++++++ frontend/scss/globals/_g-modal.scss | 5 ++ .../molecules/_m-viewer-360.blade.php | 3 +- 5 files changed, 94 insertions(+), 21 deletions(-) create mode 100644 frontend/js/functions/fetchImageBlob.js create mode 100644 frontend/js/functions/protectFromUnmount.js diff --git a/frontend/js/behaviors/viewer360.js b/frontend/js/behaviors/viewer360.js index 8c5dbf152b..68466326ac 100644 --- a/frontend/js/behaviors/viewer360.js +++ b/frontend/js/behaviors/viewer360.js @@ -1,9 +1,11 @@ import { includes, memoize } from 'lodash'; import assetURL from "../functions/assetURL"; +import fetchImageBlob from '../functions/fetchImageBlob'; +import { protectFromUnmount } from '../functions/protectFromUnmount'; const viewer360 = function(container) { let wrapper = container; - let frame = 0; + let curFrame = 0; let touchX = null; let touchFrame = null; let windowWidth = window.innerWidth; @@ -11,6 +13,8 @@ const viewer360 = function(container) { let isLarge = windowWidth >= 900; let image360Src = wrapper.querySelector('.m-viewer-360-image'); let control360 = wrapper.querySelector('.m-viewer-360-control .input360'); + let loadedFrames = {}; + let protect = protectFromUnmount(); //get JSON content from web page let assetLibrary = document.getElementById("assetLibrary").textContent; @@ -31,10 +35,13 @@ const viewer360 = function(container) { control360.setAttribute('max', frames360.length-1); //get index to find image to show - function update360(frame) { - const closestFrame = findClosestFrame(loadedFrameIndexes, frame); - const image360 = frames360[closestFrame].src; - image360Src.src = image360; + function update360(curFrame) { + const closestFrame = findClosestFrame(loadedFrameIndexes, curFrame); + const image360 = loadedFrames[closestFrame]; + if (typeof image360 != 'undefined') { + image360Src.classList.remove('loader'); + image360Src.src = image360; + } //update input control control360.value = closestFrame; } @@ -54,10 +61,31 @@ const viewer360 = function(container) { return Math.max(0, Math.min(loadedFrameIndexes.length - 1, parseInt(frame, 10))); }; + //preload all 360 images for smoother transition + function preloadFrameIndexes(frameIndexesToLoad) { + let fetchedAll = 0; + frameIndexesToLoad.map(frame => { + if( !frames360[frame] ) return []; + return frames360[frame]; + }).forEach(({ src, frame }) => { + fetchImageBlob(src, protect((blob) => { + const url = URL.createObjectURL(blob); + Object.assign( loadedFrames, { + [frame]: url + }); + fetchedAll++ + if (fetchedAll == frames360.length) { + update360(curFrame); + } + })); + + }) + + }; + //inputs wrapper.addEventListener("wheel", handleMouseWheel.bind(this)); control360.addEventListener("input", handleInputChange.bind(this)); - window.addEventListener("mousedown", handleEvents.bind(this)); window.addEventListener("mousemove", handleEvents.bind(this)); window.addEventListener("mouseup", handleEvents.bind(this)); @@ -73,7 +101,7 @@ const viewer360 = function(container) { case "mousedown": case "touchstart": touchX = pageX; - touchFrame = frame; + touchFrame = curFrame; break; case "mousemove": @@ -82,9 +110,9 @@ const viewer360 = function(container) { const delta = frames360.length / Math.min(1000, (wrapper.offsetWidth * 0.8)); const diff = (pageX - touchX) * delta; let newFrame = touchFrame + diff; - if (frame == newFrame) return; - frame = constrainFrame(newFrame); - update360(frame); + if (curFrame == newFrame) return; + curFrame = constrainFrame(newFrame); + update360(curFrame); break; case "touchend": @@ -96,17 +124,14 @@ const viewer360 = function(container) { default: return; - } - } function handleInputChange(e) { - frame = constrainFrame(e.target.value); - update360(frame); + curFrame = constrainFrame(e.target.value); + update360(curFrame); }; - function handleMouseWheel(e) { e.preventDefault(); //if (this.state.touchX !== null) return; @@ -116,13 +141,13 @@ const viewer360 = function(container) { } else { dir = Math.sign(e.deltaX); } - let newFrame = frame + dir; - frame = constrainFrame(newFrame); - update360(frame); + let newFrame = curFrame + dir; + curFrame = constrainFrame(newFrame); + update360(curFrame); } function _init() { - update360(frame); + preloadFrameIndexes(loadedFrameIndexes); } this.init = function() { diff --git a/frontend/js/functions/fetchImageBlob.js b/frontend/js/functions/fetchImageBlob.js new file mode 100644 index 0000000000..1f0a3d91c9 --- /dev/null +++ b/frontend/js/functions/fetchImageBlob.js @@ -0,0 +1,11 @@ +export default (url, callback) => { + const xhr = new XMLHttpRequest(); + xhr.onload = function() { + callback(xhr.response); + }; + xhr.open("GET", url); + xhr.responseType = "blob"; + xhr.send(); + return xhr; + }; + \ No newline at end of file diff --git a/frontend/js/functions/protectFromUnmount.js b/frontend/js/functions/protectFromUnmount.js new file mode 100644 index 0000000000..af64a1fd2f --- /dev/null +++ b/frontend/js/functions/protectFromUnmount.js @@ -0,0 +1,33 @@ +export const protectFromUnmount = () => { + let callbacks = {}; + let count = 0; + const noop = value => value; + + const wrapCallback = id => function (...params) { + const raceSafeCallbacks = callbacks; + + if (!raceSafeCallbacks) { + return noop(...params); + } + + const callback = raceSafeCallbacks[id]; + delete raceSafeCallbacks[id]; + return callback(...params); + }; + + const protect = (callback) => { + const raceSafeCallbacks = callbacks; + + if (!raceSafeCallbacks) { + return noop; + } + + const id = count++; + raceSafeCallbacks[id] = callback; + return wrapCallback(id); + }; + + protect.unmount = () => (callbacks = null); + return protect; + } + \ No newline at end of file diff --git a/frontend/scss/globals/_g-modal.scss b/frontend/scss/globals/_g-modal.scss index f413283a15..b33733190e 100644 --- a/frontend/scss/globals/_g-modal.scss +++ b/frontend/scss/globals/_g-modal.scss @@ -192,6 +192,11 @@ text-align: center; } + .loader { + top: 50%; + position: absolute; + } + .g-modal__content { width:auto; min-width:100%; diff --git a/resources/views/components/molecules/_m-viewer-360.blade.php b/resources/views/components/molecules/_m-viewer-360.blade.php index 0839e6061c..80a22a8533 100644 --- a/resources/views/components/molecules/_m-viewer-360.blade.php +++ b/resources/views/components/molecules/_m-viewer-360.blade.php @@ -1,6 +1,5 @@
    - - +
    Date: Mon, 11 May 2020 10:31:27 -0500 Subject: [PATCH 083/115] Change position of 360 button --- .../_m-article-header----gallery.blade.php | 36 ++++++++++--------- 1 file changed, 19 insertions(+), 17 deletions(-) diff --git a/resources/views/components/molecules/_m-article-header----gallery.blade.php b/resources/views/components/molecules/_m-article-header----gallery.blade.php index 276dc6a40f..5a42d3f012 100644 --- a/resources/views/components/molecules/_m-article-header----gallery.blade.php +++ b/resources/views/components/molecules/_m-article-header----gallery.blade.php @@ -66,8 +66,9 @@ @endcomponent @endif - @if(isset($module3d) && $module3d) -
  • @component('components.molecules._m-viewer-3d') +
    • @endif - @if(isset($module360) && $module360) -
  • @component('components.molecules._m-viewer-360') +
    • From 2408e8b704cb85763335b021fdc70af540646e85 Mon Sep 17 00:00:00 2001 From: surreal8 Date: Mon, 11 May 2020 13:17:26 -0500 Subject: [PATCH 084/115] Add image size restriction --- frontend/scss/globals/_g-modal.scss | 4 ++++ .../molecules/_m-article-header----gallery.blade.php | 1 + resources/views/components/molecules/_m-viewer-360.blade.php | 2 +- 3 files changed, 6 insertions(+), 1 deletion(-) diff --git a/frontend/scss/globals/_g-modal.scss b/frontend/scss/globals/_g-modal.scss index b33733190e..915b7bc659 100644 --- a/frontend/scss/globals/_g-modal.scss +++ b/frontend/scss/globals/_g-modal.scss @@ -189,7 +189,11 @@ } .m-viewer-360 { + top: 50%; + -ms-transform: translateY(-50%); + transform: translateY(-50%); text-align: center; + position: relative; } .loader { diff --git a/resources/views/components/molecules/_m-article-header----gallery.blade.php b/resources/views/components/molecules/_m-article-header----gallery.blade.php index 5a42d3f012..d69a2d0f4e 100644 --- a/resources/views/components/molecules/_m-article-header----gallery.blade.php +++ b/resources/views/components/molecules/_m-article-header----gallery.blade.php @@ -83,6 +83,7 @@ @slot('gtmAttributes', 'data-gtm-event="360-open-modal" data-gtm-event-action="' . $title . '" data-gtm-event-category="in-page"') @endcomponent