feat(builder): mobile-responsive editor chrome (Phase A)
Makes the Craft.js editor usable on phones (≤768px) without touching desktop layout/behavior: a useIsMobile() hook gates a bottom tab bar + sheets (hosting the existing Blocks/Pages/Layers/Assets/Styles panels unchanged) in place of the side panels, a collapsed TopBar with a "..." overflow menu, 44px touch targets, 16px inputs, dvh/safe-area-aware sizing, and small copy/overflow fixes (empty-canvas hint, Templates modal tabs + close button). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Claude Opus 4.8
+344
-3
@@ -31,6 +31,9 @@
|
||||
--radius-lg: 8px;
|
||||
--transition-fast: 0.15s ease;
|
||||
--transition-normal: 0.25s ease;
|
||||
/* Phase A (mobile): fixed bottom tab bar height, used to size
|
||||
.editor-container and the safe-area padding math below. */
|
||||
--mobile-tabbar-height: 58px;
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------------------------
|
||||
@@ -1377,13 +1380,351 @@ body {
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
/* ------------------------------------------------------------------------
|
||||
Phase A -- Mobile Editor Chrome
|
||||
Gated entirely behind this breakpoint; desktop styles above are
|
||||
untouched. See useIsMobile() (same 768px breakpoint) for the React-side
|
||||
equivalent that swaps LeftPanel/RightPanel for MobilePanelBar, and
|
||||
collapses TopBar.
|
||||
------------------------------------------------------------------------ */
|
||||
|
||||
/* Side panels are not rendered on mobile (EditorShell swaps them for the
|
||||
bottom tab bar) -- kept as a defensive fallback in case either is ever
|
||||
mounted at this width. */
|
||||
.panel-left,
|
||||
.panel-right {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.topbar-btn span,
|
||||
.topbar-domain {
|
||||
display: none;
|
||||
/* --------------------------------------------------------------------
|
||||
Viewport sizing -- dynamic viewport height accounts for mobile
|
||||
browsers' collapsing URL bar; the unconditional 100vh set earlier in
|
||||
this file is the fallback for browsers without dvh support.
|
||||
-------------------------------------------------------------------- */
|
||||
.editor-app {
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
padding-top: env(safe-area-inset-top, 0px);
|
||||
padding-left: env(safe-area-inset-left, 0px);
|
||||
padding-right: env(safe-area-inset-right, 0px);
|
||||
}
|
||||
|
||||
.editor-container {
|
||||
height: calc(100vh - var(--topbar-height) - var(--mobile-tabbar-height) - env(safe-area-inset-bottom, 0px));
|
||||
height: calc(100dvh - var(--topbar-height) - var(--mobile-tabbar-height) - env(safe-area-inset-bottom, 0px));
|
||||
}
|
||||
|
||||
/* Full-width canvas, safe-area-aware bottom padding so content never
|
||||
sits flush against the fixed bottom tab bar. */
|
||||
.editor-canvas {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------------------
|
||||
Topbar collapse (TopBar.tsx renders a distinct `.topbar-mobile` markup
|
||||
branch -- this is purely the styling for it)
|
||||
-------------------------------------------------------------------- */
|
||||
.topbar-mobile {
|
||||
padding: 0 8px;
|
||||
padding-left: calc(8px + env(safe-area-inset-left, 0px));
|
||||
padding-right: calc(8px + env(safe-area-inset-right, 0px));
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.topbar-mobile .topbar-left {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.topbar-mobile .topbar-right {
|
||||
flex: 1;
|
||||
justify-content: flex-end;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.topbar-mobile .topbar-btn.icon-only {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
padding: 0;
|
||||
justify-content: center;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
.topbar-mobile .topbar-divider {
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
.topbar-btn.overflow-toggle.active {
|
||||
color: var(--color-accent);
|
||||
background: var(--color-accent-subtle);
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------------------
|
||||
"⋯" overflow menu (TopBarOverflowMenu.tsx)
|
||||
-------------------------------------------------------------------- */
|
||||
.topbar-overflow-menu {
|
||||
position: fixed;
|
||||
top: calc(var(--topbar-height) + env(safe-area-inset-top, 0px) + 6px);
|
||||
right: calc(8px + env(safe-area-inset-right, 0px));
|
||||
z-index: 10000;
|
||||
min-width: 220px;
|
||||
max-width: calc(100vw - 16px);
|
||||
max-height: calc(100dvh - var(--topbar-height) - 24px);
|
||||
overflow-y: auto;
|
||||
background: var(--color-bg-elevated);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
|
||||
padding: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.topbar-overflow-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
padding: 6px 8px 10px;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.topbar-overflow-label {
|
||||
font-size: 12px;
|
||||
color: var(--color-text-muted);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.topbar-overflow-section .device-switcher {
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.topbar-overflow-section .device-btn {
|
||||
width: 44px;
|
||||
height: 42px;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
.topbar-overflow-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
min-height: 44px;
|
||||
padding: 8px 10px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--color-text);
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: var(--radius-md);
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
.topbar-overflow-item:hover,
|
||||
.topbar-overflow-item:active {
|
||||
background: var(--color-bg-hover);
|
||||
}
|
||||
|
||||
.topbar-overflow-item.active {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.topbar-overflow-sitesmith {
|
||||
padding: 6px 4px 0;
|
||||
}
|
||||
|
||||
.topbar-overflow-sitesmith .sitesmith-btn {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------------------
|
||||
Bottom tab bar (MobilePanelBar.tsx)
|
||||
-------------------------------------------------------------------- */
|
||||
.mobile-tab-bar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
/* Above .mobile-sheet-backdrop (400) -- the tab bar must stay clickable
|
||||
even while a sheet is open so tapping a different tab swaps sheets
|
||||
directly, instead of requiring a close-then-reopen round trip. The
|
||||
backdrop itself stops short of the tab bar (see its `bottom` offset
|
||||
below) so this is mostly belt-and-suspenders for the boundary. */
|
||||
z-index: 500;
|
||||
display: flex;
|
||||
height: calc(var(--mobile-tabbar-height) + env(safe-area-inset-bottom, 0px));
|
||||
background: var(--color-bg-surface);
|
||||
border-top: 1px solid var(--color-border);
|
||||
padding-bottom: env(safe-area-inset-bottom, 0px);
|
||||
padding-left: env(safe-area-inset-left, 0px);
|
||||
padding-right: env(safe-area-inset-right, 0px);
|
||||
}
|
||||
|
||||
.mobile-tab-btn {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 3px;
|
||||
min-height: 44px;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-muted);
|
||||
background: transparent;
|
||||
border: none;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
.mobile-tab-btn i {
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.mobile-tab-btn.active {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------------------
|
||||
Bottom sheet (BottomSheet.tsx)
|
||||
-------------------------------------------------------------------- */
|
||||
.mobile-sheet-backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
/* Stop above the bottom tab bar (rather than a full-viewport `inset: 0`)
|
||||
so the tab bar is never covered/blocked by the backdrop -- tapping a
|
||||
different tab while a sheet is open swaps sheets directly instead of
|
||||
being swallowed by the overlay sitting on top of it. */
|
||||
bottom: calc(var(--mobile-tabbar-height) + env(safe-area-inset-bottom, 0px));
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 400;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.mobile-sheet {
|
||||
width: 100%;
|
||||
max-height: 65vh;
|
||||
max-height: 65dvh;
|
||||
background: var(--color-bg-surface);
|
||||
border-top-left-radius: 16px;
|
||||
border-top-right-radius: 16px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-bottom: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mobile-sheet-handle-row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 8px 0 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.mobile-sheet-handle {
|
||||
width: 36px;
|
||||
height: 4px;
|
||||
border-radius: 2px;
|
||||
background: var(--color-border-light);
|
||||
}
|
||||
|
||||
.mobile-sheet-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 4px 12px 10px 16px;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.mobile-sheet-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.mobile-sheet-close {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
color: var(--color-text-muted);
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: var(--radius-md);
|
||||
cursor: pointer;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
.mobile-sheet-body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------------------
|
||||
Touch ergonomics inside sheets -- 16px inputs kill iOS's auto-zoom on
|
||||
focus; touch-action speeds up tap response on chrome that doesn't need
|
||||
native scroll-gesture handling.
|
||||
-------------------------------------------------------------------- */
|
||||
.mobile-sheet-body button,
|
||||
.mobile-sheet-body .block-item {
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
.mobile-sheet-body input,
|
||||
.mobile-sheet-body select,
|
||||
.mobile-sheet-body textarea,
|
||||
.guided-input,
|
||||
.control-input,
|
||||
.control-select,
|
||||
.topbar input,
|
||||
.topbar textarea,
|
||||
.topbar select {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.mobile-sheet-body .settings-tabs button {
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
.mobile-sheet-body .color-preset {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------------------
|
||||
Templates modal: category tabs stay horizontally scrollable and never
|
||||
shrink below a comfortable touch target; close button enlarged to the
|
||||
44px minimum (overriding its 32px inline style).
|
||||
-------------------------------------------------------------------- */
|
||||
.template-modal-tabbar {
|
||||
gap: 8px;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.template-modal-tab-btn {
|
||||
flex-shrink: 0;
|
||||
min-height: 44px;
|
||||
padding: 8px 16px !important;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
.template-modal-close-btn {
|
||||
width: 44px !important;
|
||||
height: 44px !important;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user