Skip to content

Commit c72512a

Browse files
srtfishersrtfisher
committed
Revert "Add resizable panels and fix mobile layout (#22)"
This reverts commit e076244.
1 parent 85d5455 commit c72512a

File tree

8 files changed

+43
-256
lines changed

8 files changed

+43
-256
lines changed

‎.env.example‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ APP_NAME="WordPress REPL"
22
APP_ENV=local
33
APP_KEY=
44
APP_DEBUG=true
5-
APP_URL=http://localhost:8000
5+
APP_URL=http://localhost
66

77
APP_LOCALE=en
88
APP_FALLBACK_LOCALE=en
@@ -27,7 +27,7 @@ DB_CONNECTION=sqlite
2727
# DB_USERNAME=root
2828
# DB_PASSWORD=
2929

30-
SESSION_DRIVER=cookie
30+
SESSION_DRIVER=database
3131
SESSION_LIFETIME=120
3232
SESSION_ENCRYPT=false
3333
SESSION_PATH=/
@@ -37,7 +37,7 @@ BROADCAST_CONNECTION=log
3737
FILESYSTEM_DISK=local
3838
QUEUE_CONNECTION=database
3939

40-
CACHE_STORE=array
40+
CACHE_STORE=database
4141
# CACHE_PREFIX=
4242

4343
MEMCACHED_HOST=127.0.0.1

‎package-lock.json‎

Lines changed: 0 additions & 11 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,6 @@
6262
"lucide-react": "^0.475.0",
6363
"react": "^19.0.0",
6464
"react-dom": "^19.0.0",
65-
"react-resizable-panels": "^4.6.2",
6665
"react-use": "^17.6.0",
6766
"tailwind-merge": "^3.0.1",
6867
"tailwindcss": "^4.0.0",

‎resources/js/components/playground.tsx‎

Lines changed: 33 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,6 @@ import { StepDefinition } from '@wp-playground/blueprints';
33
import { startPlaygroundWeb } from '@wp-playground/client';
44
import { cx } from 'class-variance-authority';
55
import { useEffect, useRef, useTransition } from 'react';
6-
import { Group, Panel, Separator } from 'react-resizable-panels';
7-
import { useMedia } from 'react-use';
86

97
import { AlleyLogo } from '@/components/alley';
108
import { ConsolePanel, EditorPanel, OutputPanel, SettingsPanel } from '@/components/playground/index';
@@ -26,7 +24,6 @@ export default function Playground() {
2624
const { state, dispatch } = usePlaygroundState();
2725
const { code, browserShowing, consoleShowing, multisite, phpVersion, plugins, playgroundClient, ready, themes, wordPressVersion } = state;
2826
const iframe = useRef<HTMLIFrameElement>(null);
29-
const isDesktop = useMedia('(min-width: 1024px)', true);
3027

3128
useEffect(() => {
3229
if (!ready) {
@@ -209,69 +206,40 @@ export default function Playground() {
209206
</div>
210207
</header>
211208
<div className="flex h-full w-full flex-1 flex-col overflow-auto">
212-
{isDesktop && (browserShowing || consoleShowing) ? (
213-
// Desktop with browser/console: vertical resizable layout
214-
<Group orientation="vertical" className="h-full w-full">
215-
<Panel defaultSize="50%" minSize="20%">
216-
<div className="flex h-full overflow-hidden">
217-
<Group orientation="horizontal" className="h-full w-full">
218-
<Panel defaultSize="50%" minSize="20%">
219-
<EditorPanel />
220-
</Panel>
221-
<Separator className="bg-border w-1 cursor-col-resize transition-colors hover:bg-blue-500 active:bg-blue-600" />
222-
<Panel defaultSize="50%" minSize="20%">
223-
<OutputPanel />
224-
</Panel>
225-
</Group>
226-
</div>
227-
</Panel>
228-
<Separator className="bg-border h-1 cursor-row-resize transition-colors hover:bg-blue-500 active:bg-blue-600" />
229-
<Panel defaultSize="50%" minSize="20%">
230-
<div className="flex h-full w-full flex-row">
231-
<iframe
232-
ref={iframe}
233-
className={cn('h-full', {
234-
hidden: !browserShowing,
235-
'w-1/2': browserShowing && consoleShowing,
236-
'w-full': browserShowing && !consoleShowing,
237-
})}
238-
id="wp"
239-
title="WordPress Playground"
240-
/>
241-
<ConsolePanel
242-
className={cn('h-full', {
243-
hidden: !consoleShowing,
244-
'w-1/2': browserShowing && consoleShowing,
245-
'w-full': !browserShowing && consoleShowing,
246-
})}
247-
/>
248-
</div>
249-
</Panel>
250-
</Group>
251-
) : isDesktop ? (
252-
// Desktop without browser/console: horizontal resizable layout only
253-
<div className="flex h-full overflow-hidden">
254-
<Group orientation="horizontal" className="h-full w-full">
255-
<Panel defaultSize={50} minSize={20}>
256-
<EditorPanel />
257-
</Panel>
258-
<Separator className="bg-border w-1 cursor-col-resize transition-colors hover:bg-blue-500 active:bg-blue-600" />
259-
<Panel defaultSize={50} minSize={20}>
260-
<OutputPanel />
261-
</Panel>
262-
</Group>
209+
{/* Upper container for the textarea and output */}
210+
<div
211+
className={cn('relative flex h-full flex-row overflow-hidden', {
212+
'lg:h-2/3 lg:border-b': browserShowing || consoleShowing,
213+
'lg:h-full': !browserShowing && !consoleShowing,
214+
})}
215+
>
216+
<EditorPanel />
217+
<OutputPanel />
218+
</div>
219+
220+
{/* Lower container for the iframe that will allow for a user to resize it to be taller */}
221+
<div className={cn('flex flex-1 overflow-hidden', { hidden: !browserShowing && !consoleShowing })}>
222+
<div className="flex h-full w-full flex-row">
223+
<iframe
224+
ref={iframe}
225+
className={cn('hidden h-full lg:block', {
226+
'lg:hidden': !browserShowing,
227+
'lg:w-1/2': browserShowing && consoleShowing,
228+
'lg:w-full': browserShowing && !consoleShowing,
229+
})}
230+
id="wp"
231+
title="WordPress Playground"
232+
/>
233+
<ConsolePanel
234+
className={cn('hidden', {
235+
'h-full lg:block': consoleShowing,
236+
'lg:hidden': !console,
237+
'lg:w-1/2': browserShowing && consoleShowing,
238+
'lg:w-full': !browserShowing && consoleShowing,
239+
})}
240+
/>
263241
</div>
264-
) : (
265-
// Mobile: stacked vertical layout (no resizing)
266-
<>
267-
<div className="flex h-1/2 w-full flex-col border-b">
268-
<EditorPanel />
269-
</div>
270-
<div className="flex h-1/2 w-full flex-col">
271-
<OutputPanel />
272-
</div>
273-
</>
274-
)}
242+
</div>
275243
</div>
276244
<SettingsPanel />
277245
<SharePopover />

‎resources/js/components/playground/editor-panel.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ export function EditorPanel() {
4040
useEffect(() => setLocalCode(code), [code]);
4141

4242
return (
43-
<form onSubmit={onSubmit} className="flex h-full w-full flex-col border-r lg:border-r-0">
43+
<form onSubmit={onSubmit} className="mr-2 flex w-1/2 max-w-1/2 flex-col border-r">
4444
<Editor onChange={(value) => setLocalCode(value || '')} value={localCode} />
4545
{/* Bottom bar */}
4646
<div className="flex w-full flex-row justify-between border-t text-gray-500">

‎resources/js/components/playground/output-panel.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,12 @@ export function OutputPanel() {
2525
const showWelcome = code === DEFAULT_CODE;
2626

2727
return (
28-
<div className="flex h-full w-full flex-col overflow-hidden">
28+
<div
29+
// This panel keeps overflowing. The absolute positioning is needed
30+
// to keep it on the right side of the screen. Maybe there is a
31+
// better solution.
32+
className="absolute top-0 right-0 bottom-0 flex w-1/2 flex-col overflow-hidden"
33+
>
2934
<Tabs className="border-gray-100 pl-3 dark:border-gray-900 dark:bg-gray-950">
3035
<Tab label="Output" onSelect={() => setTab('pre')} current={'pre' === tab} aria-controls="output-pre" />
3136
<Tab label="HTML" onSelect={() => setTab('html')} current={'html' === tab} aria-controls="output-html" />

‎tests/e2e/autocomplete.spec.ts‎

Lines changed: 0 additions & 109 deletions
This file was deleted.

‎tests/e2e/resizable-panels.spec.ts‎

Lines changed: 0 additions & 65 deletions
This file was deleted.

0 commit comments

Comments
 (0)