long text control

This commit is contained in:
Burak Civan 2022-10-17 10:32:07 +03:00
parent 6e1ee934e9
commit 18b269a102
4 changed files with 16 additions and 5 deletions

2
presets.js vendored
View File

@ -244,7 +244,7 @@ module.exports = {
spin: 'spin 1000ms infinite', spin: 'spin 1000ms infinite',
submit: 'submit 0.7s ease alternate infinite', submit: 'submit 0.7s ease alternate infinite',
submit_second: 'submit_second 0.7s ease alternate infinite', submit_second: 'submit_second 0.7s ease alternate infinite',
marquee: 'marquee 15s linear infinite' marquee: 'marquee 5s linear infinite'
}, },
transitionProperty: { transitionProperty: {

View File

@ -358,6 +358,7 @@ if (navigator.userAgent.search("Firefox") >= 0) {
} }
//Firefox show modal for icon set //Firefox show modal for icon set
//margue animation for truncated text
document.querySelectorAll('[data-truncate]').forEach((truncate) => { document.querySelectorAll('[data-truncate]').forEach((truncate) => {
let truncateText = truncate.textContent.split(" ").join(""); let truncateText = truncate.textContent.split(" ").join("");
@ -376,6 +377,14 @@ document.querySelectorAll('[data-truncate]').forEach((truncate) => {
if (truncateText.length > 20) { if (truncateText.length > 20) {
truncate.style.animationPlayState = 'paused'; truncate.style.animationPlayState = 'paused';
truncate.classList.add('truncate'); truncate.classList.add('truncate');
truncate.classList.remove('animate-marquee');
} }
}); });
if (document.body.clientWidth <= 991) {
if (truncate.parentElement.getAttribute('data-truncate-parent')) {
truncate.parentElement.remove();
}
}
}); });
//margue animation for truncated text

4
public/css/app.css vendored
View File

@ -10036,8 +10036,8 @@ input[type="date"]::-webkit-inner-spin-button,
} }
} }
.animate-marquee{ .animate-marquee{
-webkit-animation: marquee 15s linear infinite; -webkit-animation: marquee 5s linear infinite;
animation: marquee 15s linear infinite; animation: marquee 5s linear infinite;
} }
.cursor-auto{ .cursor-auto{
cursor: auto; cursor: auto;

View File

@ -85,9 +85,11 @@
<x-table.td class="w-6/12 sm:w-4/12"> <x-table.td class="w-6/12 sm:w-4/12">
<x-slot name="first" class="flex items-center font-bold" override="class"> <x-slot name="first" class="flex items-center font-bold" override="class">
<div class="w-48 overflow-x-hidden truncate" data-truncate> <div class="w-48 flex truncate" data-truncate-parent>
<div class="w-48 truncate" data-truncate>
{{ $item->name }} {{ $item->name }}
</div> </div>
</div>
@if (! $item->enabled) @if (! $item->enabled)
<x-index.disable text="{{ trans_choice('general.items', 1) }}" /> <x-index.disable text="{{ trans_choice('general.items', 1) }}" />