diff --git a/views/emulator.html b/views/emulator.html index 68e33f5..d7b68ec 100644 --- a/views/emulator.html +++ b/views/emulator.html @@ -11,46 +11,38 @@ - +
+
+ +

Extension Emulator

+
-
-
- -

Extension Emulator

-
- -
-
-
-

Extension Code

- Paste your .js file - here -
- +
+
+
+

Extension Code

+ + Paste your .js file here +
+ +
-
-
+
+ +
+ + +
+ placeholder="Search query or ID">
@@ -74,31 +66,121 @@
+
-
-
- - - -
+
+
+ + + +
-
- -
-
- - +
+ +
+
+ +
+
- - +
+
+
+

Run Options

+ +
+ +
+
+ + +
+ +
+ + +
+ +
+ + +
+ + +
+
+ + + + + - \ No newline at end of file diff --git a/views/styles/emulator.css b/views/styles/emulator.css index 52c1b89..465fc65 100644 --- a/views/styles/emulator.css +++ b/views/styles/emulator.css @@ -3,8 +3,8 @@ grid-template-columns: 1fr 1fr; gap: 1.5rem; height: calc(100vh - var(--header-height)); - padding: 1rem 2rem 2rem 2rem; - overflow: auto; + padding: 1rem 2rem 2rem; + overflow: hidden; } .editor-pane, @@ -207,11 +207,68 @@ pre { @media (max-width: 767px) { .emulator-container { grid-template-columns: 1fr; - grid-template-rows: minmax(250px, 40vh) minmax(400px, 1fr); + grid-template-rows: minmax(220px, 35vh) 1fr; gap: 1rem; - padding: 1rem; + padding: 0.75rem; height: auto; - overflow-y: auto; + min-height: calc(100vh - var(--header-height)); + overflow: visible; + } + + #mobile-controls-toggle { + display: block !important; + width: 100%; + } + + #desktop-controls { + display: none; + } + + .control-bar { + padding: 0.75rem; + justify-content: center; + } + + .tabs { + flex-shrink: 0; + } + + #visual-container { + display: flex; + flex-wrap: wrap; + justify-content: flex-start; + gap: 0.75rem; + padding: 0.5rem 0; + } + + .visual-card { + width: calc(50% - 0.375rem); + max-width: 180px; + margin: 0; + } + + .visual-card img { + height: 220px; + } + + .visual-card .title { + font-size: 0.8rem; + padding: 0.45rem; + } + + .visual-chapter { + padding: 0.85rem 0.75rem; + font-size: 0.95rem; + } + + #console-content, + #json-content pre { + font-size: 0.82rem; + line-height: 1.4; + } + + .loading-state { + font-size: 1rem; } .editor-pane, @@ -230,14 +287,22 @@ pre { .preview-pane { display: flex; flex-direction: column; - overflow: visible; + height: auto; + min-height: 0; + } + + .preview-pane > div:nth-child(2) { + flex: 1; + display: flex; + flex-direction: column; + overflow: hidden; } .code-editor { + min-height: 200px; + max-height: 40vh; font-size: 13px; padding: 0.75rem; - min-height: 200px; - max-height: 35vh; } .control-bar { @@ -288,9 +353,10 @@ pre { } .output-area { - padding: 0.75rem; + flex: 1; + overflow-y: auto !important; min-height: 300px; - overflow: auto; + padding: 0.75rem; } .visual-card { @@ -367,4 +433,60 @@ pre { .visual-card img { height: 180px; } +} + +.control-group-wrapper { + display: flex; + gap: 0.5rem; + align-items: end; + flex-wrap: wrap; + width: 100%; +} + +#mobile-controls-drawer { + position: fixed; + bottom: 0; + left: 0; + right: 0; + background: var(--bg-surface); + border-top: 1px solid var(--border); + border-radius: var(--radius-md) var(--radius-md) 0 0; + padding: 1rem; + transform: translateY(100%); + transition: transform 0.25s ease; + z-index: 1000; + box-shadow: 0 -4px 20px rgba(0,0,0,0.3); +} + +#mobile-controls-drawer.open { + transform: translateY(0); +} + +#mobile-controls-drawer .control-group-wrapper { + flex-direction: column; + gap: 1rem; +} + +#mobile-controls-drawer .control-group { + min-width: 0; +} + +#mobile-controls-drawer .btn-run { + width: 100%; + margin-top: 0.5rem; +} + +#mobile-controls-overlay { + position: fixed; + inset: 0; + background: rgba(0,0,0,0.5); + opacity: 0; + pointer-events: none; + transition: opacity 0.25s; + z-index: 999; +} + +#mobile-controls-overlay.open { + opacity: 1; + pointer-events: auto; } \ No newline at end of file