Skip to content

Commit 06cd7fa

Browse files
ThomvaThomva
committed
Style updates
1 parent 2268441 commit 06cd7fa

File tree

4 files changed

+36
-224
lines changed

4 files changed

+36
-224
lines changed

‎resources/css/filament-live-preview.css‎

Lines changed: 29 additions & 200 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,19 @@
11
.filament-peek-modal {
2-
background-color: var(--gray-50);
3-
color: var(--gray-950);
4-
display: flex;
5-
height: 100%;
2+
position: sticky;
3+
top: 4rem;
64

75
--filament-peek-panel-header-height: 4.8rem;
86
--filament-peek-builder-actions-height: 4.25rem;
97
}
108

11-
.filament-peek-modal:where(.dark, .dark *) {
12-
background-color: var(--gray-950);
13-
color: var(white);
14-
}
15-
169
.filament-peek-panel {
1710
display: flex;
1811
flex-direction: column;
1912
}
2013

2114
.filament-peek-panel-header {
2215
align-items: center;
23-
background-color: var(--color-white);
2416
border-bottom: 1px solid var(--gray-200);
25-
color: var(--gray-950);
2617
display: flex;
2718
font-size: var(--text-sm);
2819
font-weight: var(--font-weight-medium);
@@ -32,49 +23,38 @@
3223
user-select: none;
3324
}
3425

35-
.filament-peek-panel-header:where(.dark, .dark *) {
36-
background-color: var(--gray-900);
37-
border-bottom: 1px solid var(--gray-800);
38-
color: var(--color-white);
39-
}
40-
4126
.filament-peek-panel-body {
4227
flex-grow: 1;
43-
background-color: var(--gray-100);
4428
padding: calc(var(--spacing) * 4);
45-
}
4629

47-
.filament-peek-panel-body:where(.dark, .dark *) {
48-
background-color: var(--gray-950);
49-
}
50-
51-
.filament-peek-panel-body iframe {
52-
box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
53-
margin-left: auto;
54-
margin-right: auto;
55-
transition: all 200ms;
56-
}
30+
&.allow-iframe-overflow {
31+
overflow-y: auto;
32+
}
5733

58-
.filament-peek-panel-body.allow-iframe-overflow {
59-
overflow-y: auto;
34+
iframe {
35+
/* box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); */
36+
margin-left: auto;
37+
margin-right: auto;
38+
transition: all 200ms;
39+
}
6040
}
6141

6242
/*** Preview ***/
6343

6444
.filament-peek-preview {
6545
flex-grow: 1;
6646
max-width: 100%;
67-
}
6847

69-
.filament-peek-preview .filament-peek-panel-header>* {
70-
min-width: 10rem;
48+
.filament-peek-panel-header > * {
49+
min-width: 10rem;
50+
}
7151
}
7252

7353
.filament-peek-device-presets {
74-
@apply hidden justify-center xl:flex;
54+
@apply hidden gap-2 lg:flex;
7555

7656
button {
77-
@apply mx-2 inline-flex flex-col items-center disabled:opacity-25;
57+
@apply inline-flex flex-col items-center disabled:opacity-25;
7858

7959
svg {
8060
@apply h-6 w-6;
@@ -101,179 +81,28 @@
10181
@apply flex justify-end;
10282
}
10383

104-
.filament-peek-modal-actions {
105-
display: flex;
106-
justify-content: end;
107-
}
108-
109-
/*** Editor ***/
110-
111-
.filament-peek-editor {
112-
display: none;
113-
border-right: 1px solid var(--gray-200);
114-
}
115-
116-
:dir(rtl) .filament-peek-editor {
117-
border-left: 1px solid var(--gray-200);
118-
}
119-
120-
.filament-peek-editor:where(.dark, .dark *) {
121-
border-color: var(--gray-800) !important;
122-
}
123-
124-
.filament-peek-editor .filament-peek-panel-body {
125-
display: flex;
126-
height: 100%;
127-
padding: 0;
128-
width: 100%;
129-
}
130-
131-
.filament-peek-editor-buttons {
132-
display: inline-flex;
133-
align-items: center;
134-
}
135-
136-
.filament-peek-editor-actions {
137-
display: flex;
138-
gap: calc(var(--spacing) * 4);
139-
}
140-
141-
.filament-peek-editor-icon {
142-
background-color: transparent !important;
143-
border: none !important;
144-
gap: 0 !important;
145-
padding: calc(var(--spacing) * 2) !important;
146-
}
147-
148-
.filament-peek-editor-icon:not(:focus) {
149-
box-shadow: none !important;
150-
}
151-
152-
.filament-peek-editor-icon svg {
153-
color: var(--gray-900);
154-
}
155-
156-
.filament-peek-editor-icon svg:where(.dark, .dark *) {
157-
color: var(--color-white);
158-
}
159-
160-
.filament-peek-editor-icon.is-icon-active svg {
161-
color: var(--primary-600);
162-
}
163-
164-
.filament-peek-editor-auto-refresh-label {
165-
align-items: center;
166-
display: inline-flex;
167-
gap: calc(var(--spacing) * 2);
168-
padding: calc(var(--spacing) * 2);
169-
}
170-
171-
.filament-peek-builder-editor {
172-
display: flex;
173-
flex-direction: column;
174-
height: 100%;
175-
position: relative;
176-
width: 100%;
177-
}
178-
179-
.filament-peek-builder-content {
180-
height: calc(100vh - var(--filament-peek-panel-header-height));
181-
max-height: calc(100vh - var(--filament-peek-panel-header-height));
182-
overflow-y: auto;
183-
padding: calc(var(--spacing) * 4);
184-
width: 100%;
185-
}
186-
187-
.filament-peek-builder-content .tippy-content [x-ref="panel"] {
188-
color: var(--gray-900);
189-
}
190-
191-
.filament-peek-builder-content .tippy-content [x-ref="panel"]:where(.dark, .dark *) {
192-
color: var(--gray-300);
193-
}
194-
195-
.filament-peek-builder-actions {
196-
display: none;
197-
}
198-
199-
.filament-peek-builder-editor.has-sidebar-actions .filament-peek-builder-content {
200-
height: calc(100vh - var(--filament-peek-panel-header-height) - var(--filament-peek-builder-actions-height));
201-
max-height: calc(100vh - var(--filament-peek-panel-header-height) - var(--filament-peek-builder-actions-height));
202-
overflow-y: auto;
203-
padding: calc(var(--spacing) * 4);
204-
width: 100%;
205-
}
206-
207-
.filament-peek-builder-editor.has-sidebar-actions .filament-peek-builder-actions {
208-
border-top: 1px solid var(--gray-200);
209-
display: block;
210-
height: var(--filament-peek-builder-actions-height);
211-
width: 100%;
212-
}
213-
214-
.filament-peek-builder-editor.has-sidebar-actions .filament-peek-builder-actions:where(.dark, .dark *) {
215-
border-color: var(--gray-800);
216-
}
217-
218-
/* Main builder */
219-
.filament-peek-builder-editor.has-sidebar-actions .fi-fo-builder>.fi-fo-builder-block-picker {
220-
bottom: 0;
221-
left: 0;
222-
padding: calc(var(--spacing) * 4);
223-
position: absolute;
224-
width: 100%;
225-
}
226-
227-
/* Nested buidlers */
228-
.filament-peek-builder-editor.has-sidebar-actions .fi-fo-builder .fi-fo-builder>.fi-fo-builder-block-picker {
229-
padding: initial;
230-
position: initial;
231-
}
232-
23384
/*** Resizer ***/
23485

235-
.filament-peek-editor-resizer {
236-
background-color: transparent;
237-
border-left: 3px solid transparent;
238-
height: 100%;
239-
left: 100%;
240-
position: absolute;
241-
top: 0;
242-
width: 9px;
243-
}
244-
245-
:dir(rtl) .filament-peek-editor-resizer {
246-
border-left: none;
247-
border-right: 3px solid transparent;
248-
left: initial;
249-
right: 100%;
250-
}
251-
252-
.filament-peek-editor-resizer:hover {
253-
border-color: var(--gray-500);
254-
cursor: ew-resize;
255-
}
256-
25786
.filament-peek-iframe-cover {
25887
display: none;
25988
}
26089

26190
.is-filament-peek-editor-resizing {
26291
cursor: ew-resize;
26392
user-select: none;
264-
}
26593

266-
.is-filament-peek-editor-resizing .filament-peek-editor-resizer {
267-
border-color: var(--gray-500);
268-
}
94+
.filament-peek-editor-resizer {
95+
border-color: var(--gray-500);
96+
}
26997

270-
/* This must be above everything to prevent resizing glitches */
271-
.is-filament-peek-editor-resizing .filament-peek-iframe-cover {
272-
bottom: 0;
273-
display: block;
274-
left: 0;
275-
position: fixed;
276-
right: 0;
277-
top: 0;
278-
z-index: 9999;
98+
/* This must be above everything to prevent resizing glitches */
99+
.filament-peek-iframe-cover {
100+
bottom: 0;
101+
display: block;
102+
left: 0;
103+
position: fixed;
104+
right: 0;
105+
top: 0;
106+
z-index: 9999;
107+
}
279108
}

‎resources/dist/filament-live-preview.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎resources/js/live-preview/index.js‎

Lines changed: 6 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,6 @@ document.addEventListener('alpine:init', () => {
1515
iframeStyle: {
1616
width: '100%',
1717
height: '100%',
18-
maxWidth: '100%',
19-
maxHeight: '100%'
2018
},
2119

2220
init() {
@@ -34,20 +32,14 @@ document.addEventListener('alpine:init', () => {
3432
},
3533

3634
setIframeDimensions(width, height) {
37-
this.iframeStyle.maxWidth = width
38-
this.iframeStyle.maxHeight = height
39-
40-
if (this.config.allowIframeOverflow) {
41-
this.iframeStyle.width = width
42-
this.iframeStyle.height = height
43-
}
35+
this.iframeStyle.width = width
36+
this.iframeStyle.height = height
4437
},
4538

4639
setDevicePreset(name) {
4740
name = name || this.config.initialDevicePreset
4841

49-
if (!this.config.devicePresets) return
50-
if (!this.config.devicePresets[name]) return
42+
if (!this.config.devicePresets?.[name]) return
5143
if (!this.config.devicePresets[name].width) return
5244
if (!this.config.devicePresets[name].height) return
5345

@@ -66,10 +58,10 @@ document.addEventListener('alpine:init', () => {
6658
},
6759

6860
rotateDevicePreset() {
69-
const newMaxWidth = this.iframeStyle.maxHeight
70-
const newMaxHeight = this.iframeStyle.maxWidth
61+
const newWidth = this.iframeStyle.height
62+
const newHeight = this.iframeStyle.width
7163

72-
this.setIframeDimensions(newMaxWidth, newMaxHeight)
64+
this.setIframeDimensions(newWidth, newHeight)
7365
},
7466

7567
onOpenPreview($event) {

‎resources/views/components/live-preview-frame.blade.php‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -38,15 +38,6 @@
3838
/>
3939
</button>
4040
@endforeach
41-
42-
<button
43-
type="button"
44-
class="filament-peek-rotate-preset"
45-
x-on:click="rotateDevicePreset()"
46-
x-bind:disabled="!canRotatePreset"
47-
>
48-
@include('filament-peek::partials.icon-rotate')
49-
</button>
5041
</div>
5142
@endif
5243
</div>

0 commit comments

Comments
 (0)