Skip to content

Commit b1ce5f8

Browse files
danharrindanharrin
committed
Demonstrate responsive LoadingSection grid positioning
1 parent 8962129 commit b1ce5f8

4 files changed

Lines changed: 185 additions & 65 deletions

File tree

‎resources/js/filament/widgets/LoadingSectionSvelte.svelte‎

Lines changed: 37 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
let loadingState = $state('loading')
44
let tall = $state(false)
55
let visible = $state(true)
6+
let gridOffset = $state(false)
67
</script>
78

89
<section class="fi-section">
@@ -13,20 +14,34 @@
1314
Load the latest community garden milestones. Finish manually to
1415
explore success and failure.
1516
</p>
16-
{#if visible}
17-
{#if loadingState === 'loading'}<LoadingSection
18-
data-testid="loading-section"
19-
height={tall ? '12rem' : undefined}
20-
loadingLabel="Loading project overview"
21-
/>
22-
{:else}<div class="fi-section" data-testid="content">
23-
<div class="fi-section-content">
24-
{loadingState === 'ready'
25-
? 'Community garden · 8 of 12 milestones complete.'
26-
: 'Project overview could not be loaded. Try again.'}
27-
</div>
28-
</div>{/if}
29-
{/if}
17+
<div
18+
class="fi-grid"
19+
data-testid="preview-grid"
20+
style="--cols-default: repeat(4, minmax(0, 1fr))"
21+
>
22+
{#if visible}
23+
{#if loadingState === 'loading'}<LoadingSection
24+
data-testid="loading-section"
25+
height={tall ? '12rem' : undefined}
26+
loadingLabel="Loading project overview"
27+
columnSpan={gridOffset
28+
? { default: 'full', lg: 2 }
29+
: { default: 'full' }}
30+
columnStart={gridOffset ? { lg: 3 } : undefined}
31+
/>
32+
{:else}<div
33+
class="fi-section fi-grid-col"
34+
style="--col-span-default: 1 / -1"
35+
data-testid="content"
36+
>
37+
<div class="fi-section-content">
38+
{loadingState === 'ready'
39+
? 'Community garden · 8 of 12 milestones complete.'
40+
: 'Project overview could not be loaded. Try again.'}
41+
</div>
42+
</div>{/if}
43+
{/if}
44+
</div>
3045
<div class="icon-demo-controls">
3146
<button
3247
type="button"
@@ -56,6 +71,7 @@
5671
loadingState = 'loading'
5772
tall = false
5873
visible = true
74+
gridOffset = false
5975
}}>Reset</button
6076
>
6177
</div>
@@ -80,6 +96,13 @@
8096
? 'Loading failed. You can retry.'
8197
: ''}
8298
</p>
99+
<label
100+
><input
101+
bind:checked={gridOffset}
102+
type="checkbox"
103+
data-testid="grid-offset"
104+
/> Use columns 3–4 on wide screens (1024px+)</label
105+
>
83106
</div>
84107
</div>
85108
</section>

‎resources/js/filament/widgets/LoadingSectionVue.vue‎

Lines changed: 43 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,13 @@ import LoadingSection from '../../../../vendor/filament/support/resources/js/vue
44
const state = ref('loading')
55
const tall = ref(false)
66
const visible = ref(true)
7+
const gridOffset = ref(false)
78
89
function reset() {
910
state.value = 'loading'
1011
tall.value = false
1112
visible.value = true
13+
gridOffset.value = false
1214
}
1315
</script>
1416

@@ -23,23 +25,40 @@ function reset() {
2325
Load the latest community garden milestones. Finish manually
2426
to explore success and failure.
2527
</p>
26-
<template v-if="visible">
27-
<LoadingSection
28-
v-if="state === 'loading'"
29-
data-testid="loading-section"
30-
:height="tall ? '12rem' : undefined"
31-
loading-label="Loading project overview"
32-
/>
33-
<div v-else class="fi-section" data-testid="content">
34-
<div class="fi-section-content">
35-
{{
36-
state === 'ready'
37-
? 'Community garden · 8 of 12 milestones complete.'
38-
: 'Project overview could not be loaded. Try again.'
39-
}}
28+
<div
29+
class="fi-grid"
30+
data-testid="preview-grid"
31+
style="--cols-default: repeat(4, minmax(0, 1fr))"
32+
>
33+
<template v-if="visible">
34+
<LoadingSection
35+
v-if="state === 'loading'"
36+
data-testid="loading-section"
37+
:height="tall ? '12rem' : undefined"
38+
loading-label="Loading project overview"
39+
:column-span="
40+
gridOffset
41+
? { default: 'full', lg: 2 }
42+
: { default: 'full' }
43+
"
44+
:column-start="gridOffset ? { lg: 3 } : undefined"
45+
/>
46+
<div
47+
v-else
48+
class="fi-section fi-grid-col"
49+
style="--col-span-default: 1 / -1"
50+
data-testid="content"
51+
>
52+
<div class="fi-section-content">
53+
{{
54+
state === 'ready'
55+
? 'Community garden · 8 of 12 milestones complete.'
56+
: 'Project overview could not be loaded. Try again.'
57+
}}
58+
</div>
4059
</div>
41-
</div>
42-
</template>
60+
</template>
61+
</div>
4362
<div class="icon-demo-controls">
4463
<button
4564
type="button"
@@ -90,6 +109,14 @@ function reset() {
90109
: ''
91110
}}
92111
</p>
112+
<label
113+
><input
114+
v-model="gridOffset"
115+
type="checkbox"
116+
data-testid="grid-offset"
117+
/>
118+
Use columns 3–4 on wide screens (1024px+)</label
119+
>
93120
</div>
94121
</div>
95122
</section>

‎resources/js/filament/widgets/loading-section-react.jsx‎

Lines changed: 48 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ function LoadingSectionReact() {
66
const [state, setState] = useState('loading')
77
const [tall, setTall] = useState(false)
88
const [visible, setVisible] = useState(true)
9+
const [gridOffset, setGridOffset] = useState(false)
910
return (
1011
<section className="fi-section">
1112
<div className="fi-section-content">
@@ -17,22 +18,42 @@ function LoadingSectionReact() {
1718
Load the latest community garden milestones. Finish
1819
manually to explore success and failure.
1920
</p>
20-
{visible &&
21-
(state === 'loading' ? (
22-
<LoadingSection
23-
data-testid="loading-section"
24-
height={tall ? '12rem' : undefined}
25-
loadingLabel="Loading project overview"
26-
/>
27-
) : (
28-
<div className="fi-section" data-testid="content">
29-
<div className="fi-section-content">
30-
{state === 'ready'
31-
? 'Community garden · 8 of 12 milestones complete.'
32-
: 'Project overview could not be loaded. Try again.'}
21+
<div
22+
className="fi-grid"
23+
data-testid="preview-grid"
24+
style={{
25+
'--cols-default': 'repeat(4, minmax(0, 1fr))',
26+
}}
27+
>
28+
{visible &&
29+
(state === 'loading' ? (
30+
<LoadingSection
31+
data-testid="loading-section"
32+
height={tall ? '12rem' : undefined}
33+
loadingLabel="Loading project overview"
34+
columnSpan={
35+
gridOffset
36+
? { default: 'full', lg: 2 }
37+
: { default: 'full' }
38+
}
39+
columnStart={
40+
gridOffset ? { lg: 3 } : undefined
41+
}
42+
/>
43+
) : (
44+
<div
45+
className="fi-section fi-grid-col"
46+
style={{ '--col-span-default': '1 / -1' }}
47+
data-testid="content"
48+
>
49+
<div className="fi-section-content">
50+
{state === 'ready'
51+
? 'Community garden · 8 of 12 milestones complete.'
52+
: 'Project overview could not be loaded. Try again.'}
53+
</div>
3354
</div>
34-
</div>
35-
))}
55+
))}
56+
</div>
3657
<div className="icon-demo-controls">
3758
<button
3859
type="button"
@@ -65,6 +86,7 @@ function LoadingSectionReact() {
6586
setState('loading')
6687
setTall(false)
6788
setVisible(true)
89+
setGridOffset(false)
6890
}}
6991
>
7092
Reset
@@ -97,6 +119,17 @@ function LoadingSectionReact() {
97119
? 'Loading failed. You can retry.'
98120
: ''}
99121
</p>
122+
<label>
123+
<input
124+
type="checkbox"
125+
data-testid="grid-offset"
126+
checked={gridOffset}
127+
onChange={(event) =>
128+
setGridOffset(event.target.checked)
129+
}
130+
/>{' '}
131+
Use columns 3–4 on wide screens (1024px+)
132+
</label>
100133
</div>
101134
</div>
102135
</section>

‎resources/views/filament/widgets/loading-section-blade.blade.php‎

Lines changed: 57 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -3,32 +3,61 @@
33
<div
44
class="actions-demo"
55
data-framework="blade"
6-
x-data="{ state: 'loading', tall: false, visible: true }"
6+
x-data="{
7+
state: 'loading',
8+
tall: false,
9+
visible: true,
10+
gridOffset: false,
11+
}"
712
>
813
<h2 class="fi-section-header-heading">Blade · Project overview</h2>
914
<p>
1015
Load the latest community garden milestones. Finish manually to
1116
explore success and failure.
1217
</p>
13-
<template x-if="visible && state === 'loading'">
14-
<x-filament::loading-section
15-
data-testid="loading-section"
16-
loading-label="Loading project overview"
17-
x-bind:style="{ height: tall ? '12rem' : '8rem' }"
18-
/>
19-
</template>
20-
<template x-if="visible && state !== 'loading'">
21-
<div class="fi-section" data-testid="content">
18+
<div
19+
class="fi-grid"
20+
data-testid="preview-grid"
21+
style="--cols-default: repeat(4, minmax(0, 1fr))"
22+
>
23+
<template
24+
x-if="visible && state === 'loading' && !gridOffset"
25+
>
26+
<x-filament::loading-section
27+
data-testid="loading-section"
28+
loading-label="Loading project overview"
29+
:column-span="['default' => 'full']"
30+
x-bind:style="{ height: tall ? '12rem' : '8rem' }"
31+
/>
32+
</template>
33+
<template
34+
x-if="visible && state === 'loading' && gridOffset"
35+
>
36+
<x-filament::loading-section
37+
data-testid="loading-section"
38+
loading-label="Loading project overview"
39+
:column-span="['default' => 'full', 'lg' => 2]"
40+
:column-start="['lg' => 3]"
41+
x-bind:style="{ height: tall ? '12rem' : '8rem' }"
42+
/>
43+
</template>
44+
<template x-if="visible && state !== 'loading'">
2245
<div
23-
class="fi-section-content"
24-
x-text="
25-
state === 'ready'
26-
? 'Community garden · 8 of 12 milestones complete.'
27-
: 'Project overview could not be loaded. Try again.'
28-
"
29-
></div>
30-
</div>
31-
</template>
46+
class="fi-section fi-grid-col"
47+
style="--col-span-default: 1 / -1"
48+
data-testid="content"
49+
>
50+
<div
51+
class="fi-section-content"
52+
x-text="
53+
state === 'ready'
54+
? 'Community garden · 8 of 12 milestones complete.'
55+
: 'Project overview could not be loaded. Try again.'
56+
"
57+
></div>
58+
</div>
59+
</template>
60+
</div>
3261
<div class="icon-demo-controls">
3362
<button
3463
type="button"
@@ -57,7 +86,7 @@ class="fi-section-content"
5786
<button
5887
type="button"
5988
data-testid="reset"
60-
x-on:click="state = 'loading'; tall = false; visible = true"
89+
x-on:click="state = 'loading'; tall = false; visible = true; gridOffset = false"
6190
>
6291
Reset
6392
</button>
@@ -85,6 +114,14 @@ class="fi-section-content"
85114
: ''
86115
"
87116
></p>
117+
<label>
118+
<input
119+
type="checkbox"
120+
data-testid="grid-offset"
121+
x-model="gridOffset"
122+
/>
123+
Use columns 3–4 on wide screens (1024px+)
124+
</label>
88125
</div>
89126
</x-filament::section>
90127
</x-filament-widgets::widget>

0 commit comments

Comments
 (0)