Niedzielski has uploaded a new change for review. ( https://gerrit.wikimedia.org/r/399665 )
Change subject: Update: make Paper full-bleed ...................................................................... Update: make Paper full-bleed Extend the Paper component to fill the screen horizontally. The previous hierarchy was Page > Card > Paper. Now it's Paper > Page > Card. This is exactly the layout described in T175806: <Header> <Paper> <Page> <Content> Text <Card> Text </Content> </Page> </Paper> <Footer> Bug: T175806 Change-Id: I170153a2025a4f397777d989ab5e202a89f3be98 --- M package.json M src/common/components/app/app.css M src/common/components/app/app.tsx M src/common/components/card/card.tsx M src/common/components/header/header.tsx M src/common/components/paper/paper.tsx M src/common/components/wordmark/wordmark.tsx M src/common/pages/error.tsx 8 files changed, 37 insertions(+), 28 deletions(-) git pull ssh://gerrit.wikimedia.org:29418/marvin refs/changes/65/399665/1 diff --git a/package.json b/package.json index 6cd774c..e089509 100644 --- a/package.json +++ b/package.json @@ -111,7 +111,7 @@ "bundlesize": [ { "path": "dist/public/index.*.js", - "maxSize": "4KB" + "maxSize": "4.1KB" }, { "path": "dist/public/index.*.css", diff --git a/src/common/components/app/app.css b/src/common/components/app/app.css index 3ed4491..eef6083 100644 --- a/src/common/components/app/app.css +++ b/src/common/components/app/app.css @@ -4,7 +4,10 @@ /* Provide bottom spacing, but not top or horizontal spacing */ padding: 0 0 var(--space) 0; +} +.App-header, +.App-children { /* Cap max-width of app in big screens and center it horizontally */ max-width: var(--min-width-large); margin: auto; diff --git a/src/common/components/app/app.tsx b/src/common/components/app/app.tsx index e8fa318..daed61d 100644 --- a/src/common/components/app/app.tsx +++ b/src/common/components/app/app.tsx @@ -2,12 +2,15 @@ import "./app.css"; import { ChildrenProps } from "../preact-utils"; import Header from "../header/header"; +import Paper from "../paper/paper"; export default function App({ children }: ChildrenProps): JSX.Element { return ( <div class="App"> - <Header /> - <div>{children}</div> + <Header class="App-header" /> + <Paper> + <div class="App-children">{children}</div> + </Paper> </div> ); } diff --git a/src/common/components/card/card.tsx b/src/common/components/card/card.tsx index bd3c1b0..0118637 100644 --- a/src/common/components/card/card.tsx +++ b/src/common/components/card/card.tsx @@ -1,5 +1,4 @@ import { h } from "preact"; -import Paper from "../paper/paper"; import Separator from "../separator/separator"; import { ComponentChild, @@ -22,13 +21,11 @@ }: Props): JSX.Element { return ( <div class={classOf("Card", props.class)}> - <Paper> - <div class="Card-header">{header}</div> - {children && <Separator class="Card-content-separator" />} - <div class="Card-content">{children}</div> - {footer && <Separator class="Card-footer-separator" />} - {footer && <div class="Card-footer">{footer}</div>} - </Paper> + <div class="Card-header">{header}</div> + {children && <Separator class="Card-content-separator" />} + <div class="Card-content">{children}</div> + {footer && <Separator class="Card-footer-separator" />} + {footer && <div class="Card-footer">{footer}</div>} </div> ); } diff --git a/src/common/components/header/header.tsx b/src/common/components/header/header.tsx index 00741ba..e0148f5 100644 --- a/src/common/components/header/header.tsx +++ b/src/common/components/header/header.tsx @@ -1,21 +1,21 @@ import { h } from "preact"; import Wordmark from "../wordmark/wordmark"; import Link from "../link/link"; +import { ClassProps, classOf } from "../preact-utils"; import { home } from "../../router/routes"; - import "./header.css"; -export default function Header(): JSX.Element { +export default function Header(props: ClassProps): JSX.Element { return ( - <div className="Header"> - <div className="Header-left"> + <div class={classOf("Header", props.class)}> + <div class="Header-left"> <Link href={home.toPath()} class="Header-wordmark"> <Wordmark /> </Link> </div> {/* The center placeholder will be used later for desktop sizes */} - <div className="Header-center" /> - <div className="Header-right" /> + <div class="Header-center" /> + <div class="Header-right" /> </div> ); } diff --git a/src/common/components/paper/paper.tsx b/src/common/components/paper/paper.tsx index daf9249..42a38bf 100644 --- a/src/common/components/paper/paper.tsx +++ b/src/common/components/paper/paper.tsx @@ -1,7 +1,10 @@ import { h } from "preact"; -import { ChildrenProps } from "../preact-utils"; +import { ChildrenProps, ClassProps, classOf } from "../preact-utils"; import "./paper.css"; -export default function Paper({ children }: ChildrenProps): JSX.Element { - return <div class="Paper">{children}</div>; +export default function Paper({ + children, + ...props +}: ChildrenProps & ClassProps): JSX.Element { + return <div class={classOf("Paper", props.class)}>{children}</div>; } diff --git a/src/common/components/wordmark/wordmark.tsx b/src/common/components/wordmark/wordmark.tsx index 61e8e18..2631296 100644 --- a/src/common/components/wordmark/wordmark.tsx +++ b/src/common/components/wordmark/wordmark.tsx @@ -4,7 +4,7 @@ export default function Wordmark(): JSX.Element { return ( <img - className="Wordmark" + class="Wordmark" src={asset("wordmark-en", "svg")} height="18" width="116" diff --git a/src/common/pages/error.tsx b/src/common/pages/error.tsx index e72dd99..9698a26 100644 --- a/src/common/pages/error.tsx +++ b/src/common/pages/error.tsx @@ -1,5 +1,6 @@ import { h } from "preact"; import Page from "../components/page/page"; +import Paper from "../components/paper/paper"; export interface Props { error: Error; @@ -13,13 +14,15 @@ Component({ error }: Props): JSX.Element { return ( - <Page title={`Unexpected error: ${error.message}`} subtitle="Error 500"> - <p> - <pre> - <code>{error.stack}</code> - </pre> - </p> - </Page> + <Paper> + <Page title={`Unexpected error: ${error.message}`} subtitle="Error 500"> + <p> + <pre> + <code>{error.stack}</code> + </pre> + </p> + </Page> + </Paper> ); }, -- To view, visit https://gerrit.wikimedia.org/r/399665 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: I170153a2025a4f397777d989ab5e202a89f3be98 Gerrit-PatchSet: 1 Gerrit-Project: marvin Gerrit-Branch: master Gerrit-Owner: Niedzielski <sniedziel...@wikimedia.org> Gerrit-Reviewer: Sniedzielski <sniedziel...@wikimedia.org> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits