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 <[email protected]>
Gerrit-Reviewer: Sniedzielski <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
