[MediaWiki-commits] [Gerrit] marvin[master]: Update: page summary layout to be responsive
jenkins-bot has submitted this change and it was merged. (
https://gerrit.wikimedia.org/r/379449 )
Change subject: Update: page summary layout to be responsive
..
Update: page summary layout to be responsive
- For large screens: float the image to the left (no change).
- For small screens:
- When the image is landscape: occupy the full-width.
- When the image is portrait: add a background that occupies the full
width and center the image.
Change-Id: Ic5fbadb6f7870556759c687b0d9852133eb70d9e
---
M src/common/components/page-summary/page-summary.css
M src/common/components/page-summary/page-summary.tsx
M src/common/marshallers/page-restbase-mount-everest-expected.test.json
M src/common/marshallers/page-unmarshaller.ts
M src/common/models/page.ts
M src/common/pages/home.tsx
6 files changed, 93 insertions(+), 32 deletions(-)
Approvals:
Jhernandez: Looks good to me, approved
jenkins-bot: Verified
diff --git a/src/common/components/page-summary/page-summary.css
b/src/common/components/page-summary/page-summary.css
index b3f22bc..5fa67c1 100644
--- a/src/common/components/page-summary/page-summary.css
+++ b/src/common/components/page-summary/page-summary.css
@@ -11,17 +11,54 @@
text-transform: uppercase;
}
-.PageSummary-body {
-}
+.PageSummary-body {}
.PageSummary-thumbnail {
- float: left;
- margin: 0 var(--space) var(--space) 0;
+ background: var(--wmui-color-base0);
+
+ /* Center the image within the container. */
+ text-align: center;
+
+ /* Set the container to occupy the full-width. */
+ display: inline-block;
+ width: 100%;
}
-.PageSummary-extract {
+/* TODO: use CSS variable. */
+@media (min-width: 1024px) {
+ .PageSummary-thumbnail {
+/* Wrap the container to the width of the image and left-align it. Floating
+ takes precedence over display. */
+width: unset;
+float: left;
+
+/* Since the image is side-by-side with the text, add a margin. */
+margin-right: var(--space);
+ }
}
+.PageSummary-thumbnail-image {
+ /* Don't pad the linked image with text descender space. */
+ vertical-align: top;
+}
+.PageSummary-thumbnail-image-landscape {
+ /* Stretch the image to occupy the available width and proprotionally scale
+ the height. */
+ width: 100%;
+ height: auto;
+}
+/* TODO: use CSS variable. */
+@media (min-width: 1024px) {
+ .PageSummary-thumbnail-image-landscape {
+/* The screen is too large to maximize the image. Use the image's native
+ width and height. */
+width: unset;
+height: unset;
+ }
+}
+.PageSummary-thumbnail-image-portrait {}
+
+.PageSummary-extract {}
.PageSummary-footer {
+ /* The footer must appear on its own line when the image is floated. */
clear: both;
}
-.PageSummary-lastModified {
-}
+.PageSummary-lastModified {}
diff --git a/src/common/components/page-summary/page-summary.tsx
b/src/common/components/page-summary/page-summary.tsx
index 88211d4..b372fba 100644
--- a/src/common/components/page-summary/page-summary.tsx
+++ b/src/common/components/page-summary/page-summary.tsx
@@ -6,6 +6,31 @@
summary: PageSummaryModel;
}
+const Thumbnail = ({ summary }: Props) => {
+ if (!summary.thumbnail || !summary.image) {
+return null;
+ }
+
+ const landscape = summary.image.landscape;
+ const imageOrientationClass = `PageSummary-thumbnail-image-${landscape
+? "landscape"
+: "portrait"}`;
+ return (
+// todo: replace anchor with Link.
+
+
+
+
+
+ );
+};
+
export const PageSummary = ({ summary }: Props): JSX.Element => (
@@ -18,19 +43,7 @@
)}
- {summary.thumbnail &&
-summary.image && (
- /* todo: replace with Link. */
-
-
-
-)}
+
{summary.extractHTML && (
Mount Everest, known in Nepali as
Sagarmāthā and in Tibetan as Chomolungma, is Earth's highest
mountain, located in the Mahalangur Himal sub-range of the Himalayas. The
international border between China (Tibet Autonomous Region) and Nepal runs
across its summit point.\nThe current official height of 8,848 m (29,029
ft), recognised by China and Nepal, was established by a 1955 Indian survey and
subsequently confirmed by a Chinese survey in 1975. In 2005, China remeasured
the rock height of the mountain, with a result of 8844.43 m. There followed an
argument between China and Nepal as to whether the official height should be
the rock height (8,844 m., China) or the snow height (8,848 m., Nepal). In
2010, an agreement was reached by both sides that the height of Everest is
8,848 m, and Nepal recognises China's claim that the rock height of Everest is
8,844 m.\nIn 1865, Everest was given its official English name by the
Royal Geographical Society, upon a recommendation by Andrew Waugh, the British
Surveyor General of India.",
"thumbnail": {
"url":
"https://upload.wikimedia.org/wikipedia/commo
[MediaWiki-commits] [Gerrit] marvin[master]: Update: page summary layout to be responsive
Niedzielski has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/379449 )
Change subject: Update: page summary layout to be responsive
..
Update: page summary layout to be responsive
- For large screens: float the image to the left (no change).
- For small screens:
- When the image is landscape: occupy the full-width.
- When the image is portrait: add a background that occupies the full
width and center the image.
It can be difficult to track differences in between CSS rules, so an
explicit unset style was used as a cue. For example, `float` takes
precedence over `display` so what's unused in a given rule is unset to
make that explicit.
Change-Id: Ic5fbadb6f7870556759c687b0d9852133eb70d9e
---
M src/common/components/page-summary/page-summary.css
M src/common/components/page-summary/page-summary.tsx
M src/common/marshallers/page-restbase-mount-everest-expected.test.json
M src/common/marshallers/page-unmarshaller.ts
M src/common/models/page.ts
M src/common/pages/home.tsx
6 files changed, 99 insertions(+), 34 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/marvin refs/changes/49/379449/1
diff --git a/src/common/components/page-summary/page-summary.css
b/src/common/components/page-summary/page-summary.css
index fb07c7c..e96713d 100644
--- a/src/common/components/page-summary/page-summary.css
+++ b/src/common/components/page-summary/page-summary.css
@@ -1,5 +1,4 @@
-.PageSummary {
-}
+.PageSummary {}
.PageSummary-header {}
.PageSummary-title {}
@@ -8,17 +7,59 @@
text-transform: uppercase;
}
-.PageSummary-body {
-}
+.PageSummary-body {}
.PageSummary-thumbnail {
- float: left;
- margin: 0 var(--space) var(--space) 0;
+ background: var(--wmui-color-base0);
+
+ /* Center the image within the container. */
+ text-align: center;
+
+ /* Set the container to occupy the full-width. */
+ display: inline-block;
+ width: 100%;
+ float: unset;
+
+ /* No margin is wanted when the container is full-width. */
+ margin-right: unset;
}
-.PageSummary-extract {
+/* TODO: use CSS variable. */
+@media (min-width: 1024px) {
+ .PageSummary-thumbnail {
+/* Wrap the container to the width of the image and left-align it. */
+display: unset;
+width: unset;
+float: left;
+
+/* Since the image is side-by-side with the text, add a margin. */
+margin-right: var(--space);
+ }
+}
+.PageSummary-thumbnail-image {
+ /* Don't pad the linked image with text descender space. */
+ vertical-align: top;
+}
+.PageSummary-thumbnail-image-landscape {
+ /* Stretch the image to occupy the available width and proprotionally scale
+ the height. */
+ width: 100%;
+ height: auto;
+}
+/* TODO: use CSS variable. */
+@media (min-width: 1024px) {
+ .PageSummary-thumbnail-image-landscape {
+/* Use the image's native width and height. */
+width: unset;
+height: unset;
+ }
+}
+.PageSummary-thumbnail-image-portrait {
+ /* Use the image's native width and height. */
}
+.PageSummary-extract {}
+
.PageSummary-footer {
+ /* The footer must appear on its own line when the image is floated. */
clear: both;
}
-.PageSummary-lastModified {
-}
+.PageSummary-lastModified {}
diff --git a/src/common/components/page-summary/page-summary.tsx
b/src/common/components/page-summary/page-summary.tsx
index 88211d4..b372fba 100644
--- a/src/common/components/page-summary/page-summary.tsx
+++ b/src/common/components/page-summary/page-summary.tsx
@@ -6,6 +6,31 @@
summary: PageSummaryModel;
}
+const Thumbnail = ({ summary }: Props) => {
+ if (!summary.thumbnail || !summary.image) {
+return null;
+ }
+
+ const landscape = summary.image.landscape;
+ const imageOrientationClass = `PageSummary-thumbnail-image-${landscape
+? "landscape"
+: "portrait"}`;
+ return (
+// todo: replace anchor with Link.
+
+
+
+
+
+ );
+};
+
export const PageSummary = ({ summary }: Props): JSX.Element => (
@@ -18,19 +43,7 @@
)}
- {summary.thumbnail &&
-summary.image && (
- /* todo: replace with Link. */
-
-
-
-)}
+
{summary.extractHTML && (
Mount Everest, known in Nepali as
Sagarmāthā and in Tibetan as Chomolungma, is Earth's highest
mountain, located in the Mahalangur Himal sub-range of the Himalayas. The
international border between China (Tibet Autonomous Region) and Nepal runs
across its summit point.\nThe current official height of 8,848 m (29,029
ft), recognised by China and Nepal, was established by a 1955 Indian survey and
subsequently confirmed by a Chinese survey in 1975. In 2005, China remeasured
the rock height of the mountain, with a result of 8844.43 m. There followed an
argument between China and Nepal as to whether the official height should be
the rock height (8,844 m., China) or the snow height (8,848 m., Nepal). In
2010, an agreement wa
