From d5d2a6c9c74c3594f6eb293e190eac42ca855088 Mon Sep 17 00:00:00 2001 From: Jenny Porada Date: Tue, 19 Dec 2023 14:41:16 -0500 Subject: [PATCH] Consitent components --- .../scss/components/_play-video-button.scss | 3 +- resources/views/childpage.blade.php | 2 +- resources/views/components/catalog.blade.php | 20 +++------- .../views/components/promo-column.blade.php | 6 +-- .../views/components/promo-row.blade.php | 2 +- .../grid-item-gradient-overlay.blade.php | 33 ----------------- .../components/promo/grid-item.blade.php | 30 ++++++++------- .../promo/list-item-large.blade.php | 28 ++++++++------ .../promo/list-item-small.blade.php | 2 +- .../Http/Controllers/CatalogController.php | 37 ++++++++++++++++--- .../ChildpageWithComponentsController.php | 31 +++++++++------- .../Controllers/SinglePromoController.php | 1 + styleguide/Pages/UsingComponents.php | 6 --- .../styleguide-using-components.blade.php | 17 +++++++++ 14 files changed, 111 insertions(+), 107 deletions(-) delete mode 100644 resources/views/components/promo/grid-item-gradient-overlay.blade.php diff --git a/resources/scss/components/_play-video-button.scss b/resources/scss/components/_play-video-button.scss index 99627853..cdc4144a 100644 --- a/resources/scss/components/_play-video-button.scss +++ b/resources/scss/components/_play-video-button.scss @@ -2,11 +2,10 @@ @apply relative block; &::after { - @apply absolute inset-0 opacity-70 transition-all bg-no-repeat bg-center group-hover:opacity-100 hover:opacity-100; + @apply absolute inset-0 opacity-70 transition-all bg-no-repeat bg-center group-hover:opacity-100 hover:opacity-100 bg-[length:50%] md:bg-[length:100px]; content: ''; background-image: url('/_resources/images/youtube-play.svg'); - background-size: 100px; } img { diff --git a/resources/views/childpage.blade.php b/resources/views/childpage.blade.php index 8dfe92bf..7a51cb81 100644 --- a/resources/views/childpage.blade.php +++ b/resources/views/childpage.blade.php @@ -12,7 +12,7 @@ @foreach($components as $componentName => $component) @if(!empty($component['data']) && !empty($component['component']['filename']))
- @if(!empty($component['component']['heading']))

{{ $component['component']['heading'] }}

@endif + @if(!empty($component['component']['heading']))

{{ $component['component']['heading'] }}

@endif @include('components/'.$component['component']['filename'], ['data' => $component['data'], 'component' => $component['component']])
diff --git a/resources/views/components/catalog.blade.php b/resources/views/components/catalog.blade.php index 33207ec2..e0ad50ce 100644 --- a/resources/views/components/catalog.blade.php +++ b/resources/views/components/catalog.blade.php @@ -18,17 +18,13 @@ @if(!empty($component['columns']) && $component['columns'] == 1)
@foreach($group_items as $item) - @include('components/promo/list-item-small') + @include('components/promo/list-item-large') @endforeach
@else -
+
@foreach($group_items as $item) - @if(!empty($component['gradientOverlay']) && $component['gradientOverlay'] === true) - @include('components/promo/grid-item-gradient-overlay') - @else - @include('components/promo/grid-item') - @endif + @include('components/promo/grid-item') @endforeach
@endif @@ -37,17 +33,13 @@ @if(!empty($component['columns']) && $component['columns'] == 1)
@foreach($data as $item) - @include('components/promo/list-item-small') + @include('components/promo/list-item-large') @endforeach
@else -
+
@foreach($data as $item) - @if(!empty($component['gradientOverlay']) && $component['gradientOverlay'] === true) - @include('components/promo/grid-item-gradient-overlay') - @else - @include('components/promo/grid-item') - @endif + @include('components/promo/grid-item') @endforeach
@endif diff --git a/resources/views/components/promo-column.blade.php b/resources/views/components/promo-column.blade.php index d0ea998e..01df2a22 100644 --- a/resources/views/components/promo-column.blade.php +++ b/resources/views/components/promo-column.blade.php @@ -3,9 +3,5 @@ $image_promo => single // ['title', 'link', 'filename_url', 'filename_alt_text'] --}} @foreach($data as $item) - @if(!empty($component['gradientOverlay']) && $component['gradientOverlay'] === true) - @include('components/promo/grid-item-gradient-overlay') - @else - @include('components/promo/grid-item') - @endif + @include('components/promo/grid-item') @endforeach diff --git a/resources/views/components/promo-row.blade.php b/resources/views/components/promo-row.blade.php index 0bb7b2df..491984f4 100644 --- a/resources/views/components/promo-row.blade.php +++ b/resources/views/components/promo-row.blade.php @@ -2,5 +2,5 @@ $item => single // ['title', 'excerpt', 'description', 'link', 'relative_url', 'filename_alt_text'] --}} @foreach($data as $item) - @include('components/promo/list-item-small') + @include('components/promo/list-item-large') @endforeach diff --git a/resources/views/components/promo/grid-item-gradient-overlay.blade.php b/resources/views/components/promo/grid-item-gradient-overlay.blade.php deleted file mode 100644 index fc8f5eee..00000000 --- a/resources/views/components/promo/grid-item-gradient-overlay.blade.php +++ /dev/null @@ -1,33 +0,0 @@ -{{-- - This component's image is 1/4 width on small views - $item => array // ['title', 'link', 'description', 'excerpt', 'relative_url', 'option'] ---}} - -<{{ !empty($item['link']) ? 'a href='.$item['link'] : 'div' }} class="bg-green-800 relative block overflow-hidden {{ !empty($item['link']) ? 'group' : '' }}"> - @if(!empty($item['youtube_id'])) -
- @if(!empty($item['relative_url'])) - @image($item['relative_url'], $item['filename_alt_text'], "lazy w-full") - @else - @image('//i.wayne.edu/youtube/'.$item['youtube_id'].'/max', $item['filename_alt_text'], "lazy w-full") - @endif -
- @elseif(!empty($item['relative_url'])) - @image($item['relative_url'], $item['filename_alt_text'], "lazy w-full") - @endif -
-
-
{{ $item['title'] }}
- @if(!empty($item['excerpt']))

{!! strip_tags($item['excerpt'], ['em', 'strong']) !!}

@endif - @if(!empty($item['description'])) - @if (!empty($item['link'])) -
{!! preg_replace(array('""', '""'), array('',''), $item['description']) !!}
- @else -
{!! $item['description'] !!}
- @endif - @endif -
-
-<{{ !empty($item['link']) ? '/a' : '/div' }}> - - diff --git a/resources/views/components/promo/grid-item.blade.php b/resources/views/components/promo/grid-item.blade.php index 7689f9d1..d9d269d6 100644 --- a/resources/views/components/promo/grid-item.blade.php +++ b/resources/views/components/promo/grid-item.blade.php @@ -3,9 +3,9 @@ $item => array // ['title', 'link', 'description', 'excerpt', 'relative_url', 'option'] --}} -<{{ !empty($item['link']) ? 'a href='.$item['link'] : 'div' }} class="block {{ !empty($item['link']) ? 'group' : '' }}"> +<{{ !empty($item['link']) ? 'a href='.$item['link'] : 'div' }} class="block {{ !empty($component['gradientOverlay']) && $component['gradientOverlay'] === true ? 'bg-green-800 relative overflow-hidden' : '' }} {{ !empty($item['link']) ? 'group' : '' }}"> @if(!empty($item['youtube_id'])) -
+
@if(!empty($item['relative_url'])) @image($item['relative_url'], $item['filename_alt_text'], "lazy w-full") @else @@ -15,17 +15,19 @@ @elseif(!empty($item['relative_url'])) @image($item['relative_url'], $item['filename_alt_text'], "lazy w-full") @endif -
-
{{ $item['title'] }}
- @if(!empty($item['excerpt']))

{!! strip_tags($item['excerpt'], ['em', 'strong']) !!}

@endif - @if(!empty($item['description'])) - @if (!empty($item['link'])) -
{!! preg_replace(array('""', '""'), array('',''), $item['description']) !!}
- @else -
{!! $item['description'] !!}
- @endif - @endif +
+
+
{{ $item['title'] }}
+
+ @if(!empty($item['excerpt']))

{!! strip_tags($item['excerpt'], ['em', 'strong']) !!}

@endif + @if(!empty($item['description'])) + @if (!empty($item['link'])) +
{!! preg_replace(array('""', '""'), array('',''), $item['description']) !!}
+ @else +
{!! $item['description'] !!}
+ @endif + @endif +
+
<{{ !empty($item['link']) ? '/a' : '/div' }}> - - diff --git a/resources/views/components/promo/list-item-large.blade.php b/resources/views/components/promo/list-item-large.blade.php index d790b220..a93dc955 100644 --- a/resources/views/components/promo/list-item-large.blade.php +++ b/resources/views/components/promo/list-item-large.blade.php @@ -3,8 +3,10 @@ $item => array // ['title', 'link', 'description', 'excerpt', 'relative_url', 'option'] --}} -<{{ !empty($item['link']) ? 'a href='.$item['link'] : 'div' }} class="md:flex items-center gap-x-3 lg:gap-x-6 mb-8 {{ !empty($item['link']) ? 'group' : '' }}"> -
+<{{ !empty($item['link']) ? 'a href='.$item['link'] : 'div' }} +class="{{ !empty($component['imageSize']) && $component['imageSize'] === 'small' ? 'flex items-start' : 'md:flex items-center' }} gap-x-3 lg:gap-x-6 {{ !empty($item['link']) ? 'group' : '' }}"> +
@if(!empty($item['youtube_id']))
@if(!empty($item['relative_url'])) @@ -19,16 +21,18 @@
-
{{ $item['title'] }}
- @if(!empty($item['excerpt'])) -
{!! strip_tags($item['excerpt'], ['em', 'strong']) !!}
- @endif - @if(!empty($item['description'])) - @if (!empty($item['link'])) -
{!! preg_replace(array('""', '""'), array('',''), $item['description']) !!}
- @else -
{!! $item['description'] !!}
+
{{ $item['title'] }}
+
+ @if(!empty($item['excerpt'])) +

{!! strip_tags($item['excerpt'], ['em', 'strong']) !!}

@endif - @endif + @if(!empty($item['description'])) + @if (!empty($item['link'])) +
{!! preg_replace(array('""', '""'), array('',''), $item['description']) !!}
+ @else +
{!! $item['description'] !!}
+ @endif + @endif +
<{{ !empty($item['link']) ? '/a' : '/div' }}> diff --git a/resources/views/components/promo/list-item-small.blade.php b/resources/views/components/promo/list-item-small.blade.php index 50d44251..8b82de5f 100644 --- a/resources/views/components/promo/list-item-small.blade.php +++ b/resources/views/components/promo/list-item-small.blade.php @@ -3,7 +3,7 @@ $item => array // ['title', 'link', 'description', 'excerpt', 'relative_url', 'option'] --}} -<{{ !empty($item['link']) ? 'a href='.$item['link'] : 'div' }} class="flex items-start space-x-3 md:space-x-6 mb-8 {{ !empty($item['link']) ? 'group' : '' }}"> +<{{ !empty($item['link']) ? 'a href='.$item['link'] : 'div' }} class=" flex items-start space-x-3 md:space-x-6 mb-8 {{ !empty($item['link']) ? 'group' : '' }}"> @if(!empty($item['youtube_id']))
@if(!empty($item['filename_url'])) diff --git a/styleguide/Http/Controllers/CatalogController.php b/styleguide/Http/Controllers/CatalogController.php index fbda03aa..0b4a8fa8 100644 --- a/styleguide/Http/Controllers/CatalogController.php +++ b/styleguide/Http/Controllers/CatalogController.php @@ -59,7 +59,8 @@ public function index(Request $request): View "showExcerpt":true, "showDescription":false, "groupByOptions":false, -"gradientOverlay":false +"gradientOverlay":false, +"imageSize":small } @@ -118,7 +119,7 @@ public function index(Request $request): View ], ], 'catalog-1' => [ - 'data' => app(GenericPromo::class)->create(5, false, [ + 'data' => app(GenericPromo::class)->create(3, false, [ 'description' => '', ]), 'component' => [ @@ -126,6 +127,17 @@ public function index(Request $request): View 'filename' => 'catalog', 'columns' => '3', 'showDescription' => false, + ], + ], + 'catalog-9' => [ + 'data' => app(GenericPromo::class)->create(2, false, [ + 'description' => '', + ]), + 'component' => [ + 'heading' => 'Two-column catalog', + 'filename' => 'catalog', + 'columns' => '2', + 'showDescription' => false, 'gradientOverlay' => false, ], ], @@ -138,6 +150,7 @@ public function index(Request $request): View 'filename' => 'catalog', 'columns' => '1', 'showDescription' => false, + 'imageSize' => 'small', ], ], 'catalog-3' => [ @@ -145,15 +158,15 @@ public function index(Request $request): View 'excerpt' => '', ]), 'component' => [ - 'heading' => 'Catalog sorted by option', + 'heading' => 'Four-column catalog sorted by option', 'filename' => 'catalog', 'columns' => '4', 'showDescription' => false, 'groupByOptions' => true, ], ], - 'catalog-10' => [ - 'data' => app(GenericPromo::class)->create(5, false, [ + 'catalog-5' => [ + 'data' => app(GenericPromo::class)->create(3, false, [ 'relative_url' => '/styleguide/image/450x600', 'description' => '', ]), @@ -165,6 +178,20 @@ public function index(Request $request): View 'gradientOverlay' => true, ], ], + 'catalog-6' => [ + 'data' => app(GenericPromo::class)->create(3, false, [ + 'relative_url' => '', + 'excerpt' => '', + 'youtube_id' => '', + 'link' => '', + ]), + 'component' => [ + 'heading' => 'Catalog without images', + 'filename' => 'catalog', + 'columns' => '3', + 'showDescription' => true, + ], + ], ]; $components['components']['catalog-3']['data'] = $this->components->organizePromoItemsByOption($components['components']['catalog-3']['data']); diff --git a/styleguide/Http/Controllers/ChildpageWithComponentsController.php b/styleguide/Http/Controllers/ChildpageWithComponentsController.php index fecac8a2..dc612c6d 100644 --- a/styleguide/Http/Controllers/ChildpageWithComponentsController.php +++ b/styleguide/Http/Controllers/ChildpageWithComponentsController.php @@ -137,6 +137,18 @@ public function index(Request $request): View ], ], + 'catalog-10' => [ + 'data' => app(GenericPromo::class)->create(4, false, [ + 'description' => '', + ]), + 'component' => [ + 'heading' => 'Three column catalog', + 'filename' => 'catalog', + 'columns' => '3', + 'showDescription' => false, + ], + ], + 'content-row-1' => [ 'data' => app(GenericPromo::class)->create(1, false, [ 'title' => 'Content row', @@ -205,6 +217,7 @@ public function index(Request $request): View 'filename' => 'catalog', 'columns' => '1', 'showDescription' => false, + 'imageSize' => 'small', ], ], @@ -218,25 +231,18 @@ public function index(Request $request): View ], 'promo-row-1' => [ - 'data' => app(GenericPromo::class)->create(1, false), - 'component' => [ - 'heading' => 'Video row', - 'filename' => 'promo-row', - ], - ], - - 'promo-row-2' => [ - 'data' => app(Video::class)->create(1, false), + 'data' => app(GenericPromo::class)->create(2, false), 'component' => [ + 'heading' => 'Promo row', 'filename' => 'promo-row', - 'imagePosition' => 'right', + 'imagePosition' => 'alternate', ], ], - 'promo-column-1' => [ + 'promo-column-3' => [ 'data' => app(Video::class)->create(1, false), 'component' => [ - 'heading' => 'Video column', + 'heading' => 'Promo column', 'filename' => 'promo-column', ], ], @@ -245,7 +251,6 @@ public function index(Request $request): View 'data' => app(GenericPromo::class)->create(4, false, [ 'option' => 'Default', 'excerpt' => '', - 'relative_url' => '', ]), 'component' => [ 'heading' => 'Button column', diff --git a/styleguide/Http/Controllers/SinglePromoController.php b/styleguide/Http/Controllers/SinglePromoController.php index d2f679c2..36d20657 100644 --- a/styleguide/Http/Controllers/SinglePromoController.php +++ b/styleguide/Http/Controllers/SinglePromoController.php @@ -103,6 +103,7 @@ public function index(Request $request): View "singlePromoView":true, "showExcerpt":true, "showDescription":false, +"imagePosition":alternate, } diff --git a/styleguide/Pages/UsingComponents.php b/styleguide/Pages/UsingComponents.php index 1ff2f482..cbfe60af 100644 --- a/styleguide/Pages/UsingComponents.php +++ b/styleguide/Pages/UsingComponents.php @@ -26,12 +26,6 @@ public function getPageData() 'application_id' => 1, ], ], - 'data' => [ - 'modular-hero-1' => '{"id":"1"}', - 'modular-buttons' => '{}', - 'modular-events-column-1' => 1, - 'modular-news-column-1' => 2, - ], ]); } } diff --git a/styleguide/Views/styleguide-using-components.blade.php b/styleguide/Views/styleguide-using-components.blade.php index f444215a..764854b0 100644 --- a/styleguide/Views/styleguide-using-components.blade.php +++ b/styleguide/Views/styleguide-using-components.blade.php @@ -116,6 +116,23 @@ Catalog component only. + + imagePosition + +Moves the image from the left to the right, or alternates their position if the item limit is greater than one.
+Left, right, alternate; left is default.
+Promo row component only. + + + + imageSize + + w-1/4' : 'md:w-2/5 +Uses a small 1/4 width or large 2/5 width.
+Small or large; large is default.
+Promo row component only. + + limit