Skip to content

Commit

Permalink
fix styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@199ocero
199ocero committed Jan 3, 2024
1 parent 20d7afb commit 8fcd539
Show file tree
Hide file tree
Showing 2 changed files with 36 additions and 60 deletions.
4 changes: 2 additions & 2 deletions resources/views/infolists/components/activity-date.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<time class="text-sm font-normal leading-none text-gray-400 dark:text-gray-500">
<div class="text-sm font-normal leading-none text-gray-400 dark:text-gray-500">
{{ $getState() != null ? $getDate($getState()) : $getPlaceholder() }}
</time>
</div>
92 changes: 34 additions & 58 deletions resources/views/infolists/components/activity-section.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
@php
use Filament\Infolists\Components\IconEntry\IconEntrySize;
use JaOcero\ActivityTimeline\Enums\Direction;
@endphp
<x-filament::section :aside="$isAside()">
<x-slot name="heading">
Expand All @@ -12,7 +13,7 @@

@if (count($childComponentContainers = $getChildComponentContainers()) &&
count($getChildComponentContainers()[0]->getComponents()) > 0)
@if ($getDirection() == \App\Infolists\Enums\Direction::Vertical)
@if ($getDirection() == Direction::Vertical)
<ol class="relative ml-3 border-gray-300 border-s dark:border-gray-700">
@foreach ($childComponentContainers as $index => $container)
@php
Expand Down Expand Up @@ -73,18 +74,8 @@
}
@endphp
<li @class([
'ms-8',
'mb-0' => $loop->last,
'mb-8' => !$loop->last && !$isComponentEmpty && !$isOnlyDate,
'mb-14' => !$loop->last && $isComponentEmpty,
'mb-10' => !$loop->last && $isOnlyDate,
])>
<div @class([
'flex',
'items-center' => $isComponentEmpty,
'items-start' => !$isComponentEmpty,
])>
<li @class(['ms-8', 'mb-0' => $loop->last, 'mb-8' => !$loop->last])>
<div class="flex items-start">
@php
$color = $activityIcon ? $activityIcon->getColor($activityIcon->getState()) : 'gray';
$size = $activityIcon ? $activityIcon->getSize($activityIcon->getState()) : IconEntrySize::Medium;
Expand All @@ -93,7 +84,7 @@

@if ($icon)
<span @class([
'absolute flex items-center justify-center rounded-full ring-4 ring-white dark:ring-gray-900 dark:bg-gray-800',
'absolute flex items-center justify-center rounded-full dark:bg-gray-800',
match ($size) {
IconEntrySize::ExtraSmall, 'xs' => 'w-5 h-5 -start-[10px] p-[2px]',
IconEntrySize::Small, 'sm' => 'h-6 w-6 -start-[12px] p-[5px]',
Expand All @@ -114,24 +105,12 @@
@else
<div @class([
'absolute w-4 h-4 bg-gray-200 border border-white rounded-full -start-2 dark:border-gray-900 dark:bg-gray-700',
match ($size) {
IconEntrySize::ExtraSmall, 'xs' => 'mt-[1.5px]',
IconEntrySize::Small, 'sm' => 'mt-[2px]',
IconEntrySize::Medium, 'md' => 'mt-[2.5px]',
IconEntrySize::Large, 'lg' => 'mt-[3px]',
IconEntrySize::ExtraLarge, 'xl' => 'mt-[3.5px]',
default => 'mt-[2.5px]',
},
])>
</div>
@endif
<div @class([
'flex flex-col',
'space-y-2' => !$isOnlyDate,
'space-y-0' => $isOnlyDate,
])>
<div class="mr-8 space-y-2">
@if (!$isActivityBadgeEmpty)
<div class="flex mt-1">
<div class="flex">
{{ $activityBadge }}
</div>
@endif
Expand All @@ -143,7 +122,7 @@
</li>
@endforeach
</ol>
@elseif ($getDirection() == \App\Infolists\Enums\Direction::Horizontal)
@elseif ($getDirection() == Direction::Horizontal)
<ol @class([
'md:grid md:gap-y-10',
match ($getHorizontalItems('md')) {
Expand Down Expand Up @@ -240,20 +219,28 @@
'mb-14 md:mb-0' => !$loop->last && $isComponentEmpty,
'mb-10 md:mb-0' => !$loop->last && $isOnlyDate,
])>
@php
$color = $activityIcon ? $activityIcon->getColor($activityIcon->getState()) : 'gray';
$size = $activityIcon ? $activityIcon->getSize($activityIcon->getState()) : IconEntrySize::Medium;
$icon = $activityIcon ? $activityIcon->getIcon($activityIcon->getState()) : null;
@endphp

<div @class([
'flex md:items-center md:mb-3',
'items-center' => $isComponentEmpty,
'items-start' => !$isComponentEmpty,
'flex md:items-center items-start',
$icon
? 'md:mb-[16px]'
: match ($size) {
IconEntrySize::ExtraSmall, 'xs' => 'md:mb-[24px]',
IconEntrySize::Small, 'sm' => 'md:mb-[28px]',
IconEntrySize::Medium, 'md' => 'md:mb-[32px]',
IconEntrySize::Large, 'lg' => 'md:mb-[36px]',
IconEntrySize::ExtraLarge, 'xl' => 'md:mb-[40px]',
default => 'md:mb-[32px]',
},
])>
@php
$color = $activityIcon ? $activityIcon->getColor($activityIcon->getState()) : 'gray';
$size = $activityIcon ? $activityIcon->getSize($activityIcon->getState()) : IconEntrySize::Medium;
$icon = $activityIcon ? $activityIcon->getIcon($activityIcon->getState()) : null;
@endphp

@if ($icon)
<span @class([
'md:z-10 md:p-[8px] flex items-center justify-center rounded-full ring-4 ring-white dark:ring-gray-900 dark:bg-gray-800',
'md:z-10 flex items-center justify-center rounded-full dark:bg-gray-800',
'absolute md:static',
match ($size) {
IconEntrySize::ExtraSmall, 'xs' => 'w-5 h-5 -start-[10px] p-[2px]',
Expand Down Expand Up @@ -281,20 +268,14 @@
match ($size) {
IconEntrySize::ExtraSmall,
'xs'
=> 'mt-[1.5px] md:mt-[10px] -start-[8px] md:-start-0',
IconEntrySize::Small,
'sm'
=> 'mt-[2px] md:mt-[12px] -start-[8px] md:-start-0',
IconEntrySize::Medium,
'md'
=> 'mt-[2.5px] md:mt-[16px] -start-[8px] md:-start-0',
IconEntrySize::Large,
'lg'
=> 'mt-[3px] md:mt-[18px] -start-[8px] md:-start-0',
=> 'md:mt-[10px] -start-[8px] md:-start-0',
IconEntrySize::Small, 'sm' => 'md:mt-[12px] -start-[8px] md:-start-0',
IconEntrySize::Medium, 'md' => 'md:mt-[16px] -start-[8px] md:-start-0',
IconEntrySize::Large, 'lg' => 'md:mt-[18px] -start-[8px] md:-start-0',
IconEntrySize::ExtraLarge,
'xl'
=> 'mt-[2.5px] md:mt-[20px] -start-[8px] md:-start-0',
default => 'mt-[2.5px] md:mt-[16px] -start-[8px] md:-start-0',
=> 'md:mt-[20px] -start-[8px] md:-start-0',
default => 'md:mt-[16px] -start-[8px] md:-start-0',
},
])>
</div>
Expand All @@ -311,14 +292,9 @@
])></div>
@endif
</div>
<div @class([
'flex flex-col',
'space-y-2' => !$isOnlyDate,
'space-y-0' => $isOnlyDate,
'mr-5',
])>
<div class="mr-8 space-y-2">
@if (!$isActivityBadgeEmpty)
<div class="flex mt-1">
<div class="flex">
{{ $activityBadge }}
</div>
@endif
Expand Down

0 comments on commit 8fcd539

Please sign in to comment.