CodeCow/stack
1
0
Fork 0
mirror of https://github.com/stack-auth/stack.git synced 2026-06-04 21:04:37 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

fixed demo header scroll and card frame padding

Browse Source
This commit is contained in:
Zai Shi 2024-04-15 14:02:09 +02:00
parent ead2ce23c3
commit 075ca1d303
3 changed files with 33 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
apps/demo/src/app/layout.tsx
View File

@ -24,9 +24,11 @@ export default function RootLayout({
app={stackServerApp}
>
<Provider>
<Header />
<div className="fixed top-12 left-0 right-0 bottom-0 overflow-auto">
{children}
<div className="flex flex-col h-screen">
<Header />
<div className="flex-grow">
{children}
</div>
</div>
</Provider>
</StackProvider>

46
apps/demo/src/components/header.tsx
View File

@ -10,28 +10,32 @@ export default function Header() {
const { colors, colorMode } = useDesign();
const [currentUI, setCurrentUI] = useCurrentUI();
return (
<div
className={"fixed w-full top-0 z-50 p-4 h-12 flex items-center py-4 border-b justify-between"}
style={{
borderColor: colors.neutralColor
}}
>
<Link href="/" className="font-semibold">
Stack Demo
</Link>
<>
<div
className={"fixed w-full z-50 p-4 h-12 flex items-center py-4 border-b justify-between"}
style={{
borderColor: colors.neutralColor,
backgroundColor: colors.backgroundColor,
}}
>
<Link href="/" className="font-semibold">
Stack Demo
</Link>
<div className="flex items-center justify-end gap-5">
<Select
options={[
{ value: 'default', label: 'Default UI' },
{ value: 'joy', label: 'Joy UI' }
]}
value={currentUI}
onChange={(e) => setCurrentUI(e.target.value as any)}
/>
<ColorMode />
<UserButton />
<div className="flex items-center justify-end gap-5">
<Select
options={[
{ value: 'default', label: 'Default UI' },
{ value: 'joy', label: 'Joy UI' }
]}
value={currentUI}
onChange={(e) => setCurrentUI(e.target.value as any)}
/>
<ColorMode />
<UserButton />
</div>
</div>
</div>
<div className="min-h-12"/> {/* Placeholder for fixed header */}
</>
);
}

6
packages/stack/src/components/card-frame.tsx
View File

@ -1,6 +1,6 @@
'use client';
import { Card, Container } from "../components-core";
import { Container } from "../components-core";
import React, { useEffect, useState } from "react";
export default function CardFrame({
@ -28,10 +28,10 @@ export default function CardFrame({
height: hasNoParent ? '100vh' : '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
justifyContent: 'center',
}}
>
<Container size={350}>
<Container size={380} style={{ padding: '1rem 1rem' }}>
{children}
</Container>
</div>