Merge pull request #2682 from brkcvn/truncate-animation
Truncate animation added when item hover on item pages
This commit is contained in:
@@ -64,9 +64,7 @@
|
||||
|
||||
<x-table.td class="w-6/12 sm:w-5/12">
|
||||
<x-slot name="first" class="flex font-bold">
|
||||
<div class="truncate">
|
||||
{{ $item->name }}
|
||||
</div>
|
||||
{{ $item->name }}
|
||||
|
||||
@if (! $item->enabled)
|
||||
<x-index.disable text="{{ trans_choice('general.accounts', 1) }}" />
|
||||
|
||||
@@ -84,16 +84,14 @@
|
||||
</x-table.td>
|
||||
|
||||
<x-table.td class="w-6/12 sm:w-4/12">
|
||||
<x-slot name="first" class="flex items-center font-bold" override="class">
|
||||
<div class="truncate">
|
||||
{{ $item->name }}
|
||||
</div>
|
||||
|
||||
<x-slot name="first" class="font-bold" override="class">
|
||||
{{ $item->name }}
|
||||
|
||||
@if (! $item->enabled)
|
||||
<x-index.disable text="{{ trans_choice('general.items', 1) }}" />
|
||||
@endif
|
||||
</x-slot>
|
||||
<x-slot name="second" class="font-normal truncate" override="class">
|
||||
<x-slot name="second" class="font-normal" override="class">
|
||||
{{ $item->description }}
|
||||
</x-slot>
|
||||
</x-table.td>
|
||||
|
||||
@@ -1,9 +1,11 @@
|
||||
<span @class([
|
||||
'w-3 h-3 rounded-full ltr:mr-1 rtl:ml-1', $backgroundColor, $textColor
|
||||
])
|
||||
@if (! empty($backgroundStyle))
|
||||
style="background-color: {{ $backgroundStyle }}"
|
||||
@endif
|
||||
>
|
||||
</span>
|
||||
<span class="w-24 truncate">{{ $name }}</span>
|
||||
<div class="flex items-center">
|
||||
<span @class([
|
||||
'w-3 h-3 rounded-full ltr:mr-1 rtl:ml-1', $backgroundColor, $textColor
|
||||
])
|
||||
@if (! empty($backgroundStyle))
|
||||
style="background-color: {{ $backgroundStyle }}"
|
||||
@endif
|
||||
>
|
||||
</span>
|
||||
<span class="w-24 truncate">{{ $name }}</span>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
<x-tooltip id="{{ $id }}" placement="{{ $position }}" message="{{ $text }}">
|
||||
<span class="material-icons{{ $iconType }} text-purple text-sm ml-2">
|
||||
{{ $icon }}
|
||||
</span>
|
||||
</x-tooltip>
|
||||
<div data-index-icon>
|
||||
<x-tooltip id="{{ $id }}" placement="{{ $position }}" message="{{ $text }}">
|
||||
<span class="material-icons{{ $iconType }} text-purple text-sm ml-2">
|
||||
{{ $icon }}
|
||||
</span>
|
||||
</x-tooltip>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
<x-tooltip id="{{ $id }}" placement="{{ $position }}" message="{{ $disableText }}">
|
||||
<span class="material-icons{{ $iconType }} text-red text-sm ml-2">
|
||||
{{ $icon }}
|
||||
</span>
|
||||
</x-tooltip>
|
||||
<div data-index-icon>
|
||||
<x-tooltip id="{{ $id }}" placement="{{ $position }}" message="{{ $disableText }}">
|
||||
<span class="material-icons{{ $iconType }} text-red text-sm ml-2">
|
||||
{{ $icon }}
|
||||
</span>
|
||||
</x-tooltip>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<div class="overflow-x-visible">
|
||||
<div class="py-2 align-middle">
|
||||
<table class="flex flex-col divide-y divide-gray-200">
|
||||
<table class="flex flex-col divide-y divide-gray-200" {{ $attributes }}>
|
||||
{{ $slot }}
|
||||
</table>
|
||||
</div>
|
||||
|
||||
@@ -8,7 +8,13 @@
|
||||
}
|
||||
@endphp
|
||||
<div {{ $first_attributes }}>
|
||||
{!! $first !!}
|
||||
<!--so that the animation does not overflow the width. With javascript will add (overflow-x-hidden) class name-->
|
||||
<div>
|
||||
<!-- this tag use for calculate width of text and parent element -->
|
||||
<span data-truncate-marquee>
|
||||
{!! $first !!}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@@ -21,9 +27,18 @@
|
||||
}
|
||||
@endphp
|
||||
<div {{ $second_attributes }}>
|
||||
{!! $second !!}
|
||||
<div>
|
||||
<span data-truncate-marquee>
|
||||
{!! $second !!}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@endif
|
||||
|
||||
{{ $slot }}
|
||||
<div>
|
||||
<span data-truncate-marquee>
|
||||
{{ $slot }}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
@@ -8,7 +8,13 @@
|
||||
}
|
||||
@endphp
|
||||
<div {{ $first_attributes }}>
|
||||
{!! $first !!}
|
||||
<!--so that the animation does not overflow the width. With javascript will add (overflow-x-hidden) class name-->
|
||||
<div>
|
||||
<!-- this tag use for calculate width of text and parent element -->
|
||||
<span data-truncate-marquee>
|
||||
{!! $first !!}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@@ -21,9 +27,17 @@
|
||||
}
|
||||
@endphp
|
||||
<div {{ $second_attributes }}>
|
||||
{!! $second !!}
|
||||
<div>
|
||||
<span data-truncate-marquee>
|
||||
{!! $second !!}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
{{ $slot }}
|
||||
<div>
|
||||
<span data-truncate-marquee>
|
||||
{{ $slot }}
|
||||
</span>
|
||||
</div>
|
||||
</th>
|
||||
|
||||
@@ -57,7 +57,7 @@
|
||||
</x-table.td>
|
||||
|
||||
<x-table.td class="w-6/12 sm:w-4/12">
|
||||
<x-slot name="first" class="flex" override="class">
|
||||
<x-slot name="first" class="flex font-bold" override="class">
|
||||
<div class="font-bold truncate">
|
||||
{{ $item->name }}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user