Niedzielski has uploaded a new change for review. ( 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: this CSS appears in wiki.css since this 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. The CSS can be moved into thumbnail.css if desirable. Change-Id: I264e7126ad5546233ce3b878f23c12bea822da5d --- M src/common/components/thumbnail/thumbnail.css A src/common/pages/wiki.css M src/common/pages/wiki.tsx 3 files changed, 28 insertions(+), 7 deletions(-) git pull ssh://gerrit.wikimedia.org:29418/marvin refs/changes/92/394992/1 diff --git a/src/common/components/thumbnail/thumbnail.css b/src/common/components/thumbnail/thumbnail.css index e872aac..b51008f 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); @@ -32,13 +31,17 @@ .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,7 +50,6 @@ /* The screen is too large to maximize the image. Use the image's native width and height. */ width: unset; - height: unset; } } diff --git a/src/common/pages/wiki.css b/src/common/pages/wiki.css new file mode 100644 index 0000000..e2cdcae --- /dev/null +++ b/src/common/pages/wiki.css @@ -0,0 +1,16 @@ +.Wiki-file-image:after { + /* Add an empty node that clears the left and right so the file page summary + appears on the next line. e.g.: + http://localhost:3000/wiki/File:Buffer_zone.jpg. */ + content: ""; + clear: both; + + /* Make the node dimensionless. */ + display: block; + width: 0; + height: 0; + + /* Forbid scrollbars and hide. */ + overflow: hidden; + visibility: hidden; +} diff --git a/src/common/pages/wiki.tsx b/src/common/pages/wiki.tsx index 2ba40b5..3978381 100644 --- a/src/common/pages/wiki.tsx +++ b/src/common/pages/wiki.tsx @@ -13,6 +13,7 @@ import { RedirectError } from "../http/fetch"; import { Thumbnail } from "../components/thumbnail/thumbnail"; import { unmarshalPageTitleID } from "../marshallers/page-base/page-base-unmarshaller"; // eslint-disable-line max-len +import "./wiki.css"; interface PageParams extends RouteParams { /** @@ -78,10 +79,12 @@ footer={<ContentFooter lastModified={page.lastModified} />} > {page.fileImage && ( - <Thumbnail - image={page.fileImage.thumbnail} - url={page.fileImage.url} - /> + <div class="Wiki-file-image"> + <Thumbnail + image={page.fileImage.thumbnail} + url={page.fileImage.url} + /> + </div> )} <ContentPage sections={page.sections} /> </Page> -- To view, visit https://gerrit.wikimedia.org/r/394992 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: I264e7126ad5546233ce3b878f23c12bea822da5d 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
