Skip to content

Commit

Permalink
Fix: Breakpoint styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@awcodes
awcodes committed Feb 6, 2024
1 parent 6ca8e75 commit e93b6bd
Show file tree
Hide file tree
Showing 2 changed files with 125 additions and 55 deletions.
172 changes: 121 additions & 51 deletions resources/css/plugin.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,95 +3,145 @@
}

.table-repeater-column.has-hidden-label .fi-fo-field-wrp > label {
@apply not-sr-only text-sm !mb-2 block md:sr-only;
@apply sr-only text-sm !mb-2 block;
}

@media (min-width: theme('screens.sm')) {
.table-repeater-component.break-point-sm.streamlined {
.fi-input-wrp,
.fi-fo-file-upload .filepond--root {
@apply ring-0 bg-transparent shadow-none;
@media (min-width: calc(theme('screens.sm') + 1px)) {
.table-repeater-component.break-point-sm {
&.streamlined {
.fi-input-wrp,
.fi-fo-file-upload .filepond--root {
@apply ring-0 bg-transparent shadow-none;
}

.fi-fo-field-wrp:has(.fi-fo-checkbox-list),
.fi-fo-field-wrp:has(.fi-fo-radio) {
@apply py-2 px-3;
}

.fi-fo-field-wrp:has(.fi-fo-toggle) {
@apply inline-block mt-1;
}
}

.fi-fo-field-wrp:has(.fi-fo-checkbox-list),
.fi-fo-field-wrp:has(.fi-fo-radio) {
@apply py-2 px-3;
.table-repeater-row {
@apply divide-x divide-gray-950/5 dark:divide-white/20;
}

.fi-fo-field-wrp:has(.fi-fo-toggle) {
@apply inline-block mt-1;
.table-repeater-row-actions {
@apply justify-center;
}
}
}

@media (min-width: theme('screens.md')) {
.table-repeater-component.break-point-md.streamlined {
.fi-input-wrp,
.fi-fo-file-upload .filepond--root {
@apply ring-0 bg-transparent shadow-none;
@media (min-width: calc(theme('screens.md') + 1px)) {
.table-repeater-component.break-point-md {
&.streamlined {
.fi-input-wrp,
.fi-fo-file-upload .filepond--root {
@apply ring-0 bg-transparent shadow-none;
}

.fi-fo-field-wrp:has(.fi-fo-checkbox-list),
.fi-fo-field-wrp:has(.fi-fo-radio) {
@apply py-2 px-3;
}

.fi-fo-field-wrp:has(.fi-fo-toggle) {
@apply inline-block mt-1;
}
}

.fi-fo-field-wrp:has(.fi-fo-checkbox-list),
.fi-fo-field-wrp:has(.fi-fo-radio) {
@apply py-2 px-3;
.table-repeater-row {
@apply divide-x divide-gray-950/5 dark:divide-white/20;
}

.fi-fo-field-wrp:has(.fi-fo-toggle) {
@apply inline-block mt-1;
.table-repeater-row-actions {
@apply justify-center;
}
}
}

@media (min-width: theme('screens.lg')) {
.table-repeater-component.break-point-lg.streamlined {
.fi-input-wrp,
.fi-fo-file-upload .filepond--root {
@apply ring-0 bg-transparent shadow-none;
@media (min-width: calc(theme('screens.lg') + 1px)) {
.table-repeater-component.break-point-lg {
&.streamlined {
.fi-input-wrp,
.fi-fo-file-upload .filepond--root {
@apply ring-0 bg-transparent shadow-none;
}

.fi-fo-field-wrp:has(.fi-fo-checkbox-list),
.fi-fo-field-wrp:has(.fi-fo-radio) {
@apply py-2 px-3;
}

.fi-fo-field-wrp:has(.fi-fo-toggle) {
@apply inline-block mt-1;
}
}

.fi-fo-field-wrp:has(.fi-fo-checkbox-list),
.fi-fo-field-wrp:has(.fi-fo-radio) {
@apply py-2 px-3;
.table-repeater-row {
@apply divide-x divide-gray-950/5 dark:divide-white/20;
}

.fi-fo-field-wrp:has(.fi-fo-toggle) {
@apply inline-block mt-1;
.table-repeater-row-actions {
@apply justify-center;
}
}
}

@media (min-width: theme('screens.xl')) {
.table-repeater-component.break-point-xl.streamlined {
.fi-input-wrp,
.fi-fo-file-upload .filepond--root {
@apply ring-0 bg-transparent shadow-none;
@media (min-width: calc(theme('screens.xl') + 1px)) {
.table-repeater-component.break-point-xl {
&.streamlined {
.fi-input-wrp,
.fi-fo-file-upload .filepond--root {
@apply ring-0 bg-transparent shadow-none;
}

.fi-fo-field-wrp:has(.fi-fo-checkbox-list),
.fi-fo-field-wrp:has(.fi-fo-radio) {
@apply py-2 px-3;
}

.fi-fo-field-wrp:has(.fi-fo-toggle) {
@apply inline-block mt-1;
}
}

.fi-fo-field-wrp:has(.fi-fo-checkbox-list),
.fi-fo-field-wrp:has(.fi-fo-radio) {
@apply py-2 px-3;
.table-repeater-row {
@apply divide-x divide-gray-950/5 dark:divide-white/20;
}

.fi-fo-field-wrp:has(.fi-fo-toggle) {
@apply inline-block mt-1;
.table-repeater-row-actions {
@apply justify-center;
}
}
}

@media (min-width: theme('screens.2xl')) {
.table-repeater-component.break-point-2xl.streamlined {
.fi-input-wrp,
.fi-fo-file-upload .filepond--root {
@apply ring-0 bg-transparent shadow-none;
@media (min-width: calc(theme('screens.2xl') + 1px)) {
.table-repeater-component.break-point-2xl {
&.streamlined {
.fi-input-wrp,
.fi-fo-file-upload .filepond--root {
@apply ring-0 bg-transparent shadow-none;
}

.fi-fo-field-wrp:has(.fi-fo-checkbox-list),
.fi-fo-field-wrp:has(.fi-fo-radio) {
@apply py-2 px-3;
}

.fi-fo-field-wrp:has(.fi-fo-toggle) {
@apply inline-block mt-1;
}
}

.fi-fo-field-wrp:has(.fi-fo-checkbox-list),
.fi-fo-field-wrp:has(.fi-fo-radio) {
@apply py-2 px-3;
.table-repeater-row {
@apply divide-x divide-gray-950/5 dark:divide-white/20;
}

.fi-fo-field-wrp:has(.fi-fo-toggle) {
@apply inline-block mt-1;
.table-repeater-row-actions {
@apply justify-center;
}
}
}
Expand All @@ -109,6 +159,10 @@
tr { @apply p-4 !w-full flex flex-col gap-6; }

tr td:last-of-type ul { @apply px-0; }

.table-repeater-column.has-hidden-label .fi-fo-field-wrp > label {
@apply not-sr-only;
}
}
}

Expand All @@ -125,6 +179,10 @@
tr { @apply p-4 !w-full flex flex-col gap-6; }

tr td:last-of-type ul { @apply px-0; }

.table-repeater-column.has-hidden-label .fi-fo-field-wrp > label {
@apply not-sr-only;
}
}
}

Expand All @@ -141,6 +199,10 @@
tr { @apply p-4 !w-full flex flex-col gap-6; }

tr td:last-of-type ul { @apply px-0; }

.table-repeater-column.has-hidden-label .fi-fo-field-wrp > label {
@apply not-sr-only;
}
}
}

Expand All @@ -157,6 +219,10 @@
tr { @apply p-4 !w-full flex flex-col gap-6; }

tr td:last-of-type ul { @apply px-0; }

.table-repeater-column.has-hidden-label .fi-fo-field-wrp > label {
@apply not-sr-only;
}
}
}

Expand All @@ -173,6 +239,10 @@
tr { @apply p-4 !w-full flex flex-col gap-6; }

tr td:last-of-type ul { @apply px-0; }

.table-repeater-column.has-hidden-label .fi-fo-field-wrp > label {
@apply not-sr-only;
}
}
}

8 changes: 4 additions & 4 deletions resources/views/components/table-repeater.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ class="table-repeater-rows-wrapper divide-y divide-gray-950/5 dark:divide-white/
<tr
wire:key="{{ $this->getId() }}.{{ $row->getStatePath() }}.{{ $field::class }}.item"
x-sortable-item="{{ $uuid }}"
class="table-repeater-row md:divide-x md:divide-gray-950/5 dark:md:divide-white/20"
class="table-repeater-row"
>
@php($counter = 0)
@foreach($row->getComponents() as $cell)
Expand All @@ -137,7 +137,7 @@ class="table-repeater-row md:divide-x md:divide-gray-950/5 dark:md:divide-white/

@if ($hasActions)
<td class="table-repeater-column p-2 w-px">
<ul class="flex items-center gap-x-3 lg:justify-center px-2">
<ul class="flex items-center table-repeater-row-actions gap-x-3 px-2">
@foreach ($visibleExtraItemActions as $extraItemAction)
<li>
{{ $extraItemAction(['item' => $uuid]) }}
Expand Down Expand Up @@ -181,7 +181,7 @@ class="table-repeater-row md:divide-x md:divide-gray-950/5 dark:md:divide-white/
</tr>
@endforeach
@else
<tr class="table-repeater-row table-repeater-empty-row md:divide-x md:divide-gray-950/5 dark:md:divide-divide-white/20">
<tr class="table-repeater-row table-repeater-empty-row">
<td colspan="{{ count($headers) + intval($hasActions) }}"
class="table-repeater-column table-repeater-empty-column p-4 w-px text-center italic">
{{ $emptyLabel ?: trans('table-repeater::components.repeater.empty.label') }}
Expand All @@ -208,6 +208,6 @@ class="table-repeater-column table-repeater-empty-column p-4 w-px text-center it
@endforeach
@endif
</ul>
@endif
@endif
</div>
</x-dynamic-component>

0 comments on commit e93b6bd

Please sign in to comment.