From 1298de3b523fdde14ef17348101128d723b3864a Mon Sep 17 00:00:00 2001 From: Louise Devolder Date: Wed, 4 Oct 2023 11:26:28 +0000 Subject: [PATCH] change styling buttons on attachment & small changes media library --- dist/css/laravel-media.css | 2 +- resources/css/plugin.css | 13 +++++++++++++ resources/views/components/attachment.blade.php | 2 +- 3 files changed, 15 insertions(+), 2 deletions(-) diff --git a/dist/css/laravel-media.css b/dist/css/laravel-media.css index 0f75bd8..c991642 100644 --- a/dist/css/laravel-media.css +++ b/dist/css/laravel-media.css @@ -1 +1 @@ -*,::backdrop,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.gallery-container{container-type:inline-size;container-name:gallery}.gallery{display:grid;gap:1rem}@container gallery (min-width: 0px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}@container gallery (min-width: 28rem){.gallery{grid-template-columns:repeat(3,minmax(0,1fr))}}@container gallery (min-width: 36rem){.gallery{grid-template-columns:repeat(4,minmax(0,1fr))}}@container gallery (min-width: 48rem){.gallery{grid-template-columns:repeat(5,minmax(0,1fr))}}@container gallery (min-width: 64rem){.gallery{grid-template-columns:repeat(6,minmax(0,1fr))}}.gallery .sortable-ghost{border-radius:.5rem;border-width:2px;border-style:dashed;--tw-border-opacity:1;border-color:rgb(75 85 99/var(--tw-border-opacity))}.gallery .sortable-ghost *{opacity:0}.gallery--dragging .attachment-visual:after,.gallery--dragging .sortable-icon{opacity:0!important}.format-preview--variable-height:after{content:"";position:absolute;bottom:0;width:100%;height:4px;background:linear-gradient(90deg,#0000 50%,#e5e7eb 0);background-size:20px 4px}.format-preview--variable-width:after{content:"";position:absolute;right:0;width:4px;height:100%;background:linear-gradient(180deg,#0000 50%,#e5e7eb 0);background-size:4px 20px}.bottom-3{bottom:.75rem}.left-1{left:.25rem}.left-3{left:.75rem}.order-last{order:9999}.\!mt-5{margin-top:1.25rem!important}.\!mt-8{margin-top:2rem!important}.mb-1{margin-bottom:.25rem}.line-clamp-1{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.aspect-square{aspect-ratio:1/1}.h-32{height:8rem}.h-\[1em\]{height:1em}.h-\[70vh\]{height:70vh}.w-2\/4{width:50%}.flex-shrink-0{flex-shrink:0}.flex-grow{flex-grow:1}.-rotate-45{--tw-rotate:-45deg}.-rotate-45,.scale-x-150{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-x-150{--tw-scale-x:1.5}.hyphens-auto{-webkit-hyphens:auto;hyphens:auto}.border-dashed{border-style:dashed}.bg-gray-400{--tw-bg-opacity:1;background-color:rgb(156 163 175/var(--tw-bg-opacity))}.bg-contain{background-size:contain}.bg-no-repeat{background-repeat:no-repeat}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.after\:absolute:after{content:var(--tw-content);position:absolute}.after\:inset-0:after{content:var(--tw-content);inset:0}.after\:bg-gray-100:after{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.after\:opacity-0:after{content:var(--tw-content);opacity:0}.after\:transition-opacity:after{content:var(--tw-content);transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.after\:content-\[\'\'\]:after{--tw-content:"";content:var(--tw-content)}.group:hover .group-hover\:after\:opacity-80:after{content:var(--tw-content);opacity:.8}.peer:checked~.peer-checked\:bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity))}.peer:checked~.peer-checked\:p-2{padding:.5rem}@media not all and (min-width:1024px){.max-lg\:flex{display:flex}.max-lg\:aspect-\[3\/4\]{aspect-ratio:3/4}.max-lg\:h-52{height:13rem}}@media not all and (min-width:768px){.max-md\:h-40{height:10rem}}@media (min-width:1024px){.lg\:order-first{order:-9999}.lg\:h-\[70vh\]{height:70vh}.lg\:w-2\/6{width:33.333333%}.lg\:w-4\/6{width:66.666667%}.lg\:overflow-y-auto{overflow-y:auto}}.peer:checked~.peer-checked\:\[\&_\.attachment-tooltip\]\:text-gray-400 .attachment-tooltip{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}.peer:checked~.peer-checked\:\[\&_\.media\]\:scale-90 .media{--tw-scale-x:.9;--tw-scale-y:.9;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))} \ No newline at end of file +*,::backdrop,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.gallery-container{container-type:inline-size;container-name:gallery}.gallery{display:grid;gap:1rem}@container gallery (min-width: 0px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}@container gallery (min-width: 28rem){.gallery{grid-template-columns:repeat(3,minmax(0,1fr))}}@container gallery (min-width: 36rem){.gallery{grid-template-columns:repeat(4,minmax(0,1fr))}}@container gallery (min-width: 48rem){.gallery{grid-template-columns:repeat(5,minmax(0,1fr))}}@container gallery (min-width: 64rem){.gallery{grid-template-columns:repeat(6,minmax(0,1fr))}}.gallery .sortable-ghost{border-radius:.5rem;border-width:2px;border-style:dashed;--tw-border-opacity:1;border-color:rgb(75 85 99/var(--tw-border-opacity))}.gallery .sortable-ghost *{opacity:0}.attachment__btn-block .fi-icon-btn{cursor:pointer;border-radius:.5rem;background-color:#f3f4f6e6}.attachment__btn-block .fi-icon-btn:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.gallery--dragging .attachment-visual:after,.gallery--dragging .sortable-icon{opacity:0!important}.format-preview--variable-height:after{content:"";position:absolute;bottom:0;width:100%;height:4px;background:linear-gradient(90deg,#0000 50%,#e5e7eb 0);background-size:20px 4px}.format-preview--variable-width:after{content:"";position:absolute;right:0;width:4px;height:100%;background:linear-gradient(180deg,#0000 50%,#e5e7eb 0);background-size:4px 20px}.left-1{left:.25rem}.order-last{order:9999}.my-2{margin-top:.5rem;margin-bottom:.5rem}.mb-1{margin-bottom:.25rem}.line-clamp-1{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.aspect-square{aspect-ratio:1/1}.h-32{height:8rem}.h-\[1em\]{height:1em}.h-\[68vh\]{height:68vh}.w-0{width:0}.flex-shrink-0{flex-shrink:0}.flex-grow{flex-grow:1}.-rotate-45{--tw-rotate:-45deg}.-rotate-45,.scale-x-150{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-x-150{--tw-scale-x:1.5}.hyphens-auto{-webkit-hyphens:auto;hyphens:auto}.border-dashed{border-style:dashed}.bg-gray-400{--tw-bg-opacity:1;background-color:rgb(156 163 175/var(--tw-bg-opacity))}.bg-contain{background-size:contain}.bg-no-repeat{background-repeat:no-repeat}.after\:absolute:after{content:var(--tw-content);position:absolute}.after\:inset-0:after{content:var(--tw-content);inset:0}.after\:bg-gray-100:after{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.after\:opacity-0:after{content:var(--tw-content);opacity:0}.after\:transition-opacity:after{content:var(--tw-content);transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.after\:content-\[\'\'\]:after{--tw-content:"";content:var(--tw-content)}.group:hover .group-hover\:after\:opacity-80:after{content:var(--tw-content);opacity:.8}@media not all and (min-width:1024px){.max-lg\:flex{display:flex}.max-lg\:aspect-\[3\/4\]{aspect-ratio:3/4}.max-lg\:h-52{height:13rem}}@media not all and (min-width:768px){.max-md\:h-40{height:10rem}}@media (min-width:1024px){.lg\:order-first{order:-9999}.lg\:h-\[70vh\]{height:70vh}.lg\:w-2\/6{width:33.333333%}.lg\:w-4\/6{width:66.666667%}.lg\:overflow-y-auto{overflow-y:auto}} \ No newline at end of file diff --git a/resources/css/plugin.css b/resources/css/plugin.css index 15b288e..08c2362 100644 --- a/resources/css/plugin.css +++ b/resources/css/plugin.css @@ -19,6 +19,10 @@ @apply opacity-0; } + .attachment__btn-block .fi-icon-btn { + @apply bg-gray-100/90 hover:bg-gray-100 rounded-lg cursor-pointer; + } + .gallery--dragging .sortable-icon { opacity: 0 !important; } @@ -46,4 +50,13 @@ background: linear-gradient(to bottom, transparent 50%, #e5e7eb 50%); background-size: 4px 20px; } + + .fi-ta-record .fi-ta-actions { + flex-wrap: wrap !important; + } + + .fi-ta-record .fi-ta-text { + word-break: break-word; + } + } diff --git a/resources/views/components/attachment.blade.php b/resources/views/components/attachment.blade.php index 1a72820..ca6b792 100644 --- a/resources/views/components/attachment.blade.php +++ b/resources/views/components/attachment.blade.php @@ -102,7 +102,7 @@ class="inline-block" {{-- Buttons --}} @unless($isDisabled) -
+
@if ($deleteAction && $deleteAction->isVisible()) {{ ($deleteAction)(['attachmentId' => $attachment->id]) }} @endif