jenkins-bot has submitted this change and it was merged. ( https://gerrit.wikimedia.org/r/397893 )
Change subject: Update: move hatnotes to the top of the page ...................................................................... Update: move hatnotes to the top of the page Move wiki page hatnotes from inline content to a top of the page component. Bug: T179432 Change-Id: I225dbc00e566f433a0da123a3a0fe1b5faf070ca --- M src/common/components/content/styles/content.css A src/common/components/hatnotes/hatnotes.css A src/common/components/hatnotes/hatnotes.tsx M src/common/pages/wiki.tsx 4 files changed, 38 insertions(+), 3 deletions(-) Approvals: Jhernandez: Looks good to me, approved jenkins-bot: Verified diff --git a/src/common/components/content/styles/content.css b/src/common/components/content/styles/content.css index dbf50c1..c01d0df 100644 --- a/src/common/components/content/styles/content.css +++ b/src/common/components/content/styles/content.css @@ -83,9 +83,8 @@ /* http://localhost:3000/wiki/Wikipedia:Hatnote */ .Content .hatnote { - font-size: var(--font-size-note); - font-style: italic; - color: var(--wmui-color-base30); + /* Show in the Hatnotes component not as inline content. */ + display: none; } /* Overflows */ diff --git a/src/common/components/hatnotes/hatnotes.css b/src/common/components/hatnotes/hatnotes.css new file mode 100644 index 0000000..9caf25a --- /dev/null +++ b/src/common/components/hatnotes/hatnotes.css @@ -0,0 +1,15 @@ +.Hatnotes { + /* Show the hatnotes section flush with the header bottom and paper sides. + Delineate from the top of the page contents. */ + margin: calc(-1 * var(--space)) calc(-1 * var(--space)) var(--space); + + /* Pad the left, right, and top insides. */ + padding: var(--half-space) var(--space); + + font-size: var(--font-size-note); + font-style: italic; + color: var(--wmui-color-base20); + background: var(--wmui-color-base90); +} + +.Hatnotes-hatnote {} diff --git a/src/common/components/hatnotes/hatnotes.tsx b/src/common/components/hatnotes/hatnotes.tsx new file mode 100644 index 0000000..22b4a81 --- /dev/null +++ b/src/common/components/hatnotes/hatnotes.tsx @@ -0,0 +1,15 @@ +import { h } from "preact"; +import "./hatnotes.css"; + +export function Hatnotes({ htmlHatnotes }: { htmlHatnotes: string[] }) { + return ( + <div class="Hatnotes"> + {htmlHatnotes.map(hatnote => ( + <div + class="Hatnotes-hatnote" + dangerouslySetInnerHTML={{ __html: hatnote }} + /> + ))} + </div> + ); +} diff --git a/src/common/pages/wiki.tsx b/src/common/pages/wiki.tsx index ac457ae..03f34f0 100644 --- a/src/common/pages/wiki.tsx +++ b/src/common/pages/wiki.tsx @@ -9,6 +9,7 @@ import { requestPage } from "../http/page-http-client"; import ContentFooter from "../components/content-footer/content-footer"; import ContentPage from "../components/content-page/content-page"; +import { Hatnotes } from "../components/hatnotes/hatnotes"; import HttpResponse from "../http/http-response"; import { RedirectError } from "../http/fetch"; import { Thumbnail } from "../components/thumbnail/thumbnail"; @@ -84,6 +85,11 @@ subtitle={page.descriptionText} footer={<ContentFooter lastModified={page.lastModified} />} > + {page.htmlHatnotes.length ? ( + <Hatnotes htmlHatnotes={page.htmlHatnotes} /> + ) : ( + undefined + )} {page.fileImage && ( <Thumbnail image={page.fileImage.thumbnail} -- To view, visit https://gerrit.wikimedia.org/r/397893 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: merged Gerrit-Change-Id: I225dbc00e566f433a0da123a3a0fe1b5faf070ca Gerrit-PatchSet: 4 Gerrit-Project: marvin Gerrit-Branch: master Gerrit-Owner: Niedzielski <[email protected]> Gerrit-Reviewer: Jhernandez <[email protected]> Gerrit-Reviewer: Sniedzielski <[email protected]> Gerrit-Reviewer: jenkins-bot <> _______________________________________________ MediaWiki-commits mailing list [email protected] https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
