jenkins-bot has submitted this change and it was merged. ( https://gerrit.wikimedia.org/r/394992 )
Change subject: Fix: force File page images to wrap ...................................................................... Fix: force File page images to wrap • Limit the width of file page images to available space. e.g., http://localhost:3000/wiki/File:Buffer_zone.jpg on smaller screens. • Forbid surrounding content from appearing on the same line as File page images. e.g., http://localhost:3000/wiki/File:Buffer_zone.jpg on a 1024px screen. Note: A "block" prop was added to Thumbnail to show it as a block in desktop widths. In the wiki page is the only place that Thumbnails should be presented this way. e.g., images should still float on the summary page on 1024px screens: http://localhost:3000/page/summary/Bill_%26_Ted's_Excellent_Adventure. Change-Id: I264e7126ad5546233ce3b878f23c12bea822da5d --- M src/common/components/thumbnail/thumbnail.css M src/common/components/thumbnail/thumbnail.tsx M src/common/pages/wiki.tsx 3 files changed, 23 insertions(+), 6 deletions(-) Approvals: Niedzielski: Looks good to me, approved jenkins-bot: Verified diff --git a/src/common/components/thumbnail/thumbnail.css b/src/common/components/thumbnail/thumbnail.css index e872aac..38adedf 100644 --- a/src/common/components/thumbnail/thumbnail.css +++ b/src/common/components/thumbnail/thumbnail.css @@ -1,4 +1,3 @@ - .Thumbnail { background: var(--wmui-color-base0); @@ -27,18 +26,28 @@ margin-right: var(--space); margin-bottom: var(--space); } + .Thumbnail--block { + /* When the thumbnail is Thumbnail--block, don't float left on desktop + widths */ + float: unset; + display: block; + } } .Thumbnail-image { /* Don't pad the linked image with text descender space. */ vertical-align: top; + + /* Limit the image to the window width and always proportionally scale + height. e.g.: http://localhost:3000/wiki/File:Buffer_zone.jpg. */ + max-width: 100%; + height: auto; } .Thumbnail-image-landscape { /* Stretch the image to occupy the available width and proprotionally scale the height. */ width: 100%; - height: auto; } /* TODO: use CSS variable. */ @@ -47,8 +56,8 @@ /* The screen is too large to maximize the image. Use the image's native width and height. */ width: unset; - height: unset; } } -.Thumbnail-image-portrait {} +.Thumbnail-image-portrait { +} diff --git a/src/common/components/thumbnail/thumbnail.tsx b/src/common/components/thumbnail/thumbnail.tsx index 8b29c93..a3768f4 100644 --- a/src/common/components/thumbnail/thumbnail.tsx +++ b/src/common/components/thumbnail/thumbnail.tsx @@ -7,9 +7,10 @@ export interface Props { image: PageImage; url?: string; + block?: boolean; } -export function Thumbnail({ image, url, ...props }: Props & ClassProps) { +export function Thumbnail({ image, url, block, ...props }: Props & ClassProps) { const imageOrientationClass = `Thumbnail-image-${image.landscape ? "landscape" : "portrait"}`; @@ -23,7 +24,13 @@ /> ); return ( - <span class={classOf("Thumbnail", props.class)}> + <span + class={classOf( + "Thumbnail", + props.class, + block ? "Thumbnail--block" : undefined + )} + > {url ? <Link href={url}>{img}</Link> : img} </span> ); diff --git a/src/common/pages/wiki.tsx b/src/common/pages/wiki.tsx index 2ba40b5..df54723 100644 --- a/src/common/pages/wiki.tsx +++ b/src/common/pages/wiki.tsx @@ -81,6 +81,7 @@ <Thumbnail image={page.fileImage.thumbnail} url={page.fileImage.url} + block={true} /> )} <ContentPage sections={page.sections} /> -- To view, visit https://gerrit.wikimedia.org/r/394992 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: merged Gerrit-Change-Id: I264e7126ad5546233ce3b878f23c12bea822da5d Gerrit-PatchSet: 6 Gerrit-Project: marvin Gerrit-Branch: master Gerrit-Owner: Niedzielski <[email protected]> Gerrit-Reviewer: Jhernandez <[email protected]> Gerrit-Reviewer: Niedzielski <[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
