Skip to content

Commit

Permalink
fix: prevent grid layout issues in generated apps
Browse files Browse the repository at this point in the history
  • Loading branch information
@chrisvxd
chrisvxd authored Apr 1, 2024
1 parent 041ca64 commit 5c05f94
Show file tree
Hide file tree
Showing 2 changed files with 125 additions and 117 deletions.
201 changes: 102 additions & 99 deletions packages/core/components/Puck/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -456,111 +456,114 @@ export function Puck<UserConfig extends Config = Config>({
rightSideBarVisible,
})}
>
<CustomHeader
actions={
<>
<CustomHeaderActions />
<Button
onClick={() => {
onPublish && onPublish(data);
}}
icon={<Globe size="14px" />}
>
Publish
</Button>
</>
}
>
<header className={getClassName("header")}>
<div className={getClassName("headerInner")}>
<div className={getClassName("headerToggle")}>
<div className={getClassName("leftSideBarToggle")}>
<IconButton
onClick={() => {
toggleSidebars("left");
}}
title="Toggle left sidebar"
>
<PanelLeft focusable="false" />
</IconButton>
<div className={getClassName("layout")}>
<CustomHeader
actions={
<>
<CustomHeaderActions />
<Button
onClick={() => {
onPublish && onPublish(data);
}}
icon={<Globe size="14px" />}
>
Publish
</Button>
</>
}
>
<header className={getClassName("header")}>
<div className={getClassName("headerInner")}>
<div className={getClassName("headerToggle")}>
<div className={getClassName("leftSideBarToggle")}>
<IconButton
onClick={() => {
toggleSidebars("left");
}}
title="Toggle left sidebar"
>
<PanelLeft focusable="false" />
</IconButton>
</div>
<div className={getClassName("rightSideBarToggle")}>
<IconButton
onClick={() => {
toggleSidebars("right");
}}
title="Toggle right sidebar"
>
<PanelRight focusable="false" />
</IconButton>
</div>
</div>
<div className={getClassName("rightSideBarToggle")}>
<IconButton
onClick={() => {
toggleSidebars("right");
}}
title="Toggle right sidebar"
>
<PanelRight focusable="false" />
</IconButton>
<div className={getClassName("headerTitle")}>
<Heading rank={2} size="xs">
{headerTitle || rootProps.title || "Page"}
{headerPath && (
<>
{" "}
<code className={getClassName("headerPath")}>
{headerPath}
</code>
</>
)}
</Heading>
</div>
</div>
<div className={getClassName("headerTitle")}>
<Heading rank={2} size="xs">
{headerTitle || rootProps.title || "Page"}
{headerPath && (
<>
{" "}
<code className={getClassName("headerPath")}>
{headerPath}
</code>
</>
)}
</Heading>
</div>
<div className={getClassName("headerTools")}>
<div className={getClassName("menuButton")}>
<IconButton
onClick={() => {
return setMenuOpen(!menuOpen);
}}
title="Toggle menu bar"
>
{menuOpen ? (
<ChevronUp focusable="false" />
) : (
<ChevronDown focusable="false" />
<div className={getClassName("headerTools")}>
<div className={getClassName("menuButton")}>
<IconButton
onClick={() => {
return setMenuOpen(!menuOpen);
}}
title="Toggle menu bar"
>
{menuOpen ? (
<ChevronUp focusable="false" />
) : (
<ChevronDown focusable="false" />
)}
</IconButton>
</div>
<MenuBar
appState={appState}
data={data}
dispatch={dispatch}
onPublish={onPublish}
menuOpen={menuOpen}
renderHeaderActions={() => (
<CustomHeaderActions />
)}
</IconButton>
setMenuOpen={setMenuOpen}
/>
</div>
<MenuBar
appState={appState}
data={data}
dispatch={dispatch}
onPublish={onPublish}
menuOpen={menuOpen}
renderHeaderActions={() => <CustomHeaderActions />}
setMenuOpen={setMenuOpen}
/>
</div>
</div>
</header>
</CustomHeader>
<div className={getClassName("leftSideBar")}>
<SidebarSection title="Components" noBorderTop>
<Components />
</SidebarSection>
<SidebarSection title="Outline">
<Outline />
</SidebarSection>
</header>
</CustomHeader>
<div className={getClassName("leftSideBar")}>
<SidebarSection title="Components" noBorderTop>
<Components />
</SidebarSection>
<SidebarSection title="Outline">
<Outline />
</SidebarSection>
</div>
<Canvas />
<div className={getClassName("rightSideBar")}>
<SidebarSection
noPadding
noBorderTop
showBreadcrumbs
title={
selectedItem
? config.components[selectedItem.type]["label"] ??
selectedItem.type
: "Page"
}
>
<Fields />
</SidebarSection>
</div>
</div>
<Canvas />
<div className={getClassName("rightSideBar")}>
<SidebarSection
noPadding
noBorderTop
showBreadcrumbs
title={
selectedItem
? config.components[selectedItem.type]["label"] ??
selectedItem.type
: "Page"
}
>
<Fields />
</SidebarSection>
</div>

<div
id="puck-portal-root"
className={getClassName("portal")}
Expand Down
41 changes: 23 additions & 18 deletions packages/core/components/Puck/styles.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,82 +17,87 @@
*/

.Puck {
--puck-frame-width: auto;
--puck-side-bar-width: 0px;
--puck-space-px: 16px;
bottom: 0;
display: grid;
font-family: var(--puck-font-family);
grid-template-areas: "header header header" "left editor right";
grid-template-columns: 0 var(--puck-frame-width) 0;
grid-template-rows: min-content auto;
height: 100dvh;
left: 0;
position: fixed;
right: 0;
top: 0;
}

.Puck--mounted {
.Puck-layout {
--puck-frame-width: auto;
--puck-side-bar-width: 0px;
display: grid;
grid-template-areas: "header header header" "left editor right";
grid-template-columns: 0 var(--puck-frame-width) 0;
grid-template-rows: min-content auto;
height: 100dvh;
position: relative;
z-index: 0;
}

.Puck--mounted .Puck-layout {
--puck-side-bar-width: 186px;
}

.Puck--leftSideBarVisible {
.Puck--leftSideBarVisible .Puck-layout {
grid-template-columns:
var(--puck-side-bar-width) var(--puck-frame-width)
0;
}

.Puck--rightSideBarVisible {
.Puck--rightSideBarVisible .Puck-layout {
grid-template-columns:
0 var(--puck-frame-width)
var(--puck-side-bar-width);
}

.Puck--leftSideBarVisible.Puck--rightSideBarVisible {
.Puck--leftSideBarVisible.Puck--rightSideBarVisible .Puck-layout {
grid-template-columns:
var(--puck-side-bar-width) var(--puck-frame-width)
var(--puck-side-bar-width);
}

@media (min-width: 458px) {
.Puck-mounted {
.Puck-mounted .Puck-layout {
--puck-frame-width: minmax(266px, auto);
}
}

@media (min-width: 638px) {
.Puck {
.Puck .Puck-layout {
--puck-side-bar-width: minmax(186px, 250px);
}
}

@media (min-width: 766px) {
.Puck {
.Puck .Puck-layout {
--puck-frame-width: auto;
}
}

@media (min-width: 990px) {
.Puck {
.Puck .Puck-layout {
--puck-side-bar-width: 256px;
}
}

@media (min-width: 1198px) {
.Puck {
.Puck .Puck-layout {
--puck-side-bar-width: 274px;
}
}

@media (min-width: 1398px) {
.Puck {
.Puck .Puck-layout {
--puck-side-bar-width: 290px;
}
}

@media (min-width: 1598px) {
.Puck {
.Puck .Puck-layout {
--puck-side-bar-width: 320px;
}
}
Expand Down

0 comments on commit 5c05f94

Please sign in to comment.