Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Moving modular template configuration to childpage and making components consistent #684

Closed
wants to merge 8 commits into from
Closed

Moving modular template configuration to childpage and making components consistent #684

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
7d9111a
childpage test
breakdancingcat Dec 14, 2023
5f639bc
fix meta check
chrispelzer Dec 14, 2023
ee8221c
test
breakdancingcat Dec 14, 2023
8fd5538
move back to after converting to array due to indirect modification e…
chrispelzer Dec 14, 2023
80b80b0
make sure base meta exists before we check that it has title
chrispelzer Dec 15, 2023
769ff2a
multiple line for easy reading
chrispelzer Dec 15, 2023
d5d2a6c
Consitent components
breakdancingcat Dec 19, 2023
a616071
Removing unsused file
breakdancingcat Dec 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 0 additions & 3 deletions app/Http/Controllers/ChildpageController.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@

use Illuminate\View\View;
use Illuminate\Http\Request;
use Contracts\Repositories\PromoRepositoryContract;
use Contracts\Repositories\ModularPageRepositoryContract;

class ChildpageController extends Controller
Expand All @@ -19,10 +18,8 @@ class ChildpageController extends Controller
*
*/
public function __construct(
PromoRepositoryContract $promo,
ModularPageRepositoryContract $components
) {
$this->promo = $promo;
$this->components = $components;
}

Expand Down
5 changes: 4 additions & 1 deletion app/Support/helpers.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,10 @@ function merge()
$merged = $merged->toArray();

// Add computed title tag
if (!empty($merged['base']) && !array_key_exists('title', $merged['base']['meta'])) {
if (
!empty($merged['base']) &&
!array_key_exists('title', !empty($merged['base']['meta']) ? $merged['base']['meta'] : [])
) {
$merged['base']['meta']['title'] = stringify_page_title($merged['base']);
}

Expand Down
3 changes: 1 addition & 2 deletions resources/scss/components/_play-video-button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion resources/views/childpage.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
@foreach($components as $componentName => $component)
@if(!empty($component['data']) && !empty($component['component']['filename']))
<div class="col-span-2 {{ str_contains($component['component']['filename'], 'column') ? 'md:col-span-1' : 'md:col-span-2' }}">
@if(!empty($component['component']['heading']))<h2 class="mt-0">{{ $component['component']['heading'] }}</h2>@endif
@if(!empty($component['component']['heading']))<h2 class="mt-0" id="{{ Str::slug($component['component']['heading']) }}">{{ $component['component']['heading'] }}</h2>@endif

@include('components/'.$component['component']['filename'], ['data' => $component['data'], 'component' => $component['component']])
</div>
Expand Down
20 changes: 6 additions & 14 deletions resources/views/components/catalog.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,17 +18,13 @@
@if(!empty($component['columns']) && $component['columns'] == 1)
<div class="grid gap-6">
@foreach($group_items as $item)
@include('components/promo/list-item-small')
@include('components/promo/list-item')
@endforeach
</div>
@else
<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-{{ !empty($component['columns']) && count($data) % 2 == 0 ? '2' : '3' }} xl:grid-cols-{{ !empty($component['columns']) ? $component['columns'] : '3' }}">
<div class="grid gap-6 {{ !empty($component['columns']) && $component['columns'] % 2 == 0 ? ' sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-'.($component['columns']) : ' sm:grid-cols-2 md:grid-cols-3' }}">
@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
</div>
@endif
Expand All @@ -37,17 +33,13 @@
@if(!empty($component['columns']) && $component['columns'] == 1)
<div class="grid gap-6">
@foreach($data as $item)
@include('components/promo/list-item-small')
@include('components/promo/list-item')
@endforeach
</div>
@else
<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-{{ !empty($component['columns']) && count($data) % 2 == 0 ? '2' : '3' }} xl:grid-cols-{{ !empty($component['columns']) ? $component['columns'] : '3' }}">
<div class="grid gap-6 {{ !empty($component['columns']) && $component['columns'] % 2 == 0 ? (count($data) >= 4 ? ' sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-'.($component['columns']) : ' md:grid-cols-'.$component['columns']) : (count($data) >= 3 ? ' sm:grid-cols-1 md:grid-cols-3' : ' md:grid-cols-'.$component['columns']) }}">
@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
</div>
@endif
Expand Down
6 changes: 1 addition & 5 deletions resources/views/components/promo-column.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
2 changes: 1 addition & 1 deletion resources/views/components/promo-row.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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')
@endforeach
33 changes: 0 additions & 33 deletions resources/views/components/promo/grid-item-gradient-overlay.blade.php
View file
Open in desktop

This file was deleted.

30 changes: 16 additions & 14 deletions resources/views/components/promo/grid-item.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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']))
<div class="play-video-button w-1/4 md:w-full">
<div class="play-video-button">
@if(!empty($item['relative_url']))
@image($item['relative_url'], $item['filename_alt_text'], "lazy w-full")
@else
Expand All @@ -15,17 +15,19 @@
@elseif(!empty($item['relative_url']))
@image($item['relative_url'], $item['filename_alt_text'], "lazy w-full")
@endif
<div class="w-full mt-1 md:mt-2">
<div class="font-bold text-xl {{ !empty($item['link']) ? 'group-hover:underline group-focus:underline' : '' }}">{{ $item['title'] }}</div>
@if(!empty($item['excerpt']))<p class="text-black mb-0 mt-1">{!! strip_tags($item['excerpt'], ['em', 'strong']) !!}</p>@endif
@if(!empty($item['description']))
@if (!empty($item['link']))
<div class="w-full mt-1 -mb-4 text-black">{!! preg_replace(array('"<a href(.*?)>"', '"</a>"'), array('',''), $item['description']) !!}</div>
@else
<div class="w-full mt-1 -mb-4 text-black">{!! $item['description'] !!}</div>
@endif
@endif
<div class="w-full {{ !empty($component['gradientOverlay']) && $component['gradientOverlay'] === true ? 'bg-gradient-darkest absolute inset-x-0 bottom-0' : 'mt-1 md:mt-2'}}">
<div class="content {{ !empty($component['gradientOverlay']) && $component['gradientOverlay'] === true ? 'white-links text-white relative p-4 pb-3 pt-14 drop-shadow-px' : '' }}">
<div class="mb-1 font-bold {{ !empty($component['columns']) ? ($component['columns'] < 4 ? ($component['columns'] < 3 ? 'text-lg lg:text-xl' : 'text-lg') : 'text-lg lg:text-base') : 'text-xl' }} {{ !empty($item['link']) ? 'group-hover:underline group-focus:underline' : '' }} leading-snug xl:leading-tight">{{ $item['title'] }}</div>
<div class="{{ !empty($component['columns']) ? ($component['columns'] < 4 ? ($component['columns'] < 3 ? 'text-base sm:text-sm md:text-base leading-tight sm:leading-tight md:leading-tight' : 'text-base md:text-sm xl:text-base leading-normal') : 'text-base sm:text-sm') : 'text-base leading-normal' }} {{ !empty($component['gradientOverlay']) && $component['gradientOverlay'] === true ? 'xl:leading-tight' : 'text-black'}}">
@if(!empty($item['excerpt']))<p class="my-1">{!! strip_tags($item['excerpt'], ['em', 'strong']) !!}</p>@endif
@if(!empty($item['description']))
@if (!empty($item['link']))
<div class="-mb-3">{!! preg_replace(array('"<a href(.*?)>"', '"</a>"'), array('',''), $item['description']) !!}</div>
@else
<div class="-mb-3">{!! $item['description'] !!}</div>
@endif
@endif
</div>
</div>
</div>
<{{ !empty($item['link']) ? '/a' : '/div' }}>


34 changes: 0 additions & 34 deletions resources/views/components/promo/list-item-large.blade.php
View file
Open in desktop

This file was deleted.

34 changes: 0 additions & 34 deletions resources/views/components/promo/list-item-small.blade.php
View file
Open in desktop

This file was deleted.

38 changes: 38 additions & 0 deletions resources/views/components/promo/list-item.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
{{--
This component's image is full width on small views
$item => array // ['title', 'link', 'description', 'excerpt', 'relative_url', 'option']
--}}

<{{ !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' : '' }}">
<div class="shrink-0 grow-0 {{ !empty($component['imageSize']) && $component['imageSize'] === 'small' ? 'w-1/4' : 'md:w-2/5' }}
@if(!empty($component['imagePosition']) && ($component['imagePosition'] === 'right' || ($component['imagePosition'] === 'alternate' && $loop->even))) md:order-2 @endif">
@if(!empty($item['youtube_id']))
<div class="play-video-button">
@if(!empty($item['relative_url']))
@image($item['relative_url'], $item['filename_alt_text'], "w-full lazy")
@else
@image('//i.wayne.edu/youtube/'.$item['youtube_id'].'/max', $item['filename_alt_text'], "w-full lazy")
@endif
</div>
@elseif(!empty($item['relative_url']))
@image($item['relative_url'], $item['filename_alt_text'], "lazy w-full")
@endif
</div>

<div class="content">
<div class="font-bold group-hover:underline group-focus:underline {{ !empty($component['imageSize']) && $component['imageSize'] === 'small' ? 'text-lg lg:text-xl' : 'text-xl lg:text-2xl ' }}">{{ $item['title'] }}</div>
<div class="text-black mt-1 {{ !empty($component['imageSize']) && $component['imageSize'] === 'small' ? 'text-sm lg:text-base' : 'text-base' }}">
@if(!empty($item['excerpt']))
<p>{!! strip_tags($item['excerpt'], ['em', 'strong']) !!}</p>
@endif
@if(!empty($item['description']))
@if (!empty($item['link']))
<div>{!! preg_replace(array('"<a href(.*?)>"', '"</a>"'), array('',''), $item['description']) !!}</div>
@else
<div>{!! $item['description'] !!}</div>
@endif
@endif
</div>
</div>
<{{ !empty($item['link']) ? '/a' : '/div' }}>
37 changes: 32 additions & 5 deletions styleguide/Http/Controllers/CatalogController.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,8 @@ public function index(Request $request): View
"showExcerpt":true,
"showDescription":false,
"groupByOptions":false,
"gradientOverlay":false
"gradientOverlay":false,
"imageSize":small
}
</pre>
</td>
Expand Down Expand Up @@ -118,14 +119,25 @@ public function index(Request $request): View
],
],
'catalog-1' => [
'data' => app(GenericPromo::class)->create(5, false, [
'data' => app(GenericPromo::class)->create(3, false, [
'description' => '',
]),
'component' => [
'heading' => 'Three-column catalog',
'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,
],
],
Expand All @@ -138,22 +150,23 @@ public function index(Request $request): View
'filename' => 'catalog',
'columns' => '1',
'showDescription' => false,
'imageSize' => 'small',
],
],
'catalog-3' => [
'data' => app(PromoWithOptions::class)->create(8, false, [
'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' => '',
]),
Expand All @@ -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']);
Expand Down
Loading