diff --git a/.storybook/mocks/models.js b/.storybook/mocks/models.js index 13e754c8f..f6b1090ee 100644 --- a/.storybook/mocks/models.js +++ b/.storybook/mocks/models.js @@ -193,6 +193,21 @@ MODELS.THUMBNAIL_SMALL_SHORT = { }, pageId: 11432 }; +MODELS.THUMBNAIL_BLOCKQUOTE = { + title: "List of photographs of Abraham Lincoln", + url: "List of photographs of Abraham Lincoln", + languageCode: "en", + languageDirection: "ltr", + extract: + `

There are 130 known photographs of Abraham Lincoln.

Lincoln's features were the despair of every artist who undertook his portrait. The writer saw nearly a dozen, one after another, soon after the first nomination to the presidency, attempt the task. They put into their pictures the large, rugged features, and strong, prominent lines; they made measurements to obtain exact proportions; they "petrified" some single look, but the picture remained hard and cold. Even before these paintings were finished it was plain to see that they were unsatisfactory to the artists themselves, and much more so to the intimate friends of the man this was not he who smiled, spoke, laughed, charmed. The picture was to the man as the grain of sand to the mountain, as the dead to the living. Graphic art was powerless before a face that moved through a thousand delicate gradations of line and contour, light and shade, sparkle of the eye and curve of the lip, in the long gamut of expression from grave to gay, and back again from the rollicking jollity of laughter to that serious, far away look that with prophetic intuitions beheld the awful panorama of war, and heard the cry of oppression and suffering. There are many pictures of Lincoln; there is no portrait of him.

`, + type: "page", + thumbnail: { + source: 'img/640px-Abraham_Lincoln_by_Nicholas_Shepherd,_1846-crop.jpg', + width: 506, + height: 640 + }, + pageId: 38746858 +}; MODELS.LONG_WORD_1 = { title: "Pneumonoultramicroscopicsilicovolcanoconiosis", url: "Pneumonoultramicroscopicsilicovolcanoconiosis", diff --git a/.storybook/static/img/640px-Abraham_Lincoln_by_Nicholas_Shepherd,_1846-crop.jpg b/.storybook/static/img/640px-Abraham_Lincoln_by_Nicholas_Shepherd,_1846-crop.jpg new file mode 100644 index 000000000..9dfa58c43 Binary files /dev/null and b/.storybook/static/img/640px-Abraham_Lincoln_by_Nicholas_Shepherd,_1846-crop.jpg differ diff --git a/.storybook/stories/index.stories.js b/.storybook/stories/index.stories.js index c1f031eec..ce36e6d36 100644 --- a/.storybook/stories/index.stories.js +++ b/.storybook/stories/index.stories.js @@ -207,6 +207,15 @@ storiesOf( 'Thumbnails', module ) ${createPopup( MODELS.THUMBNAIL_SMALL_SHORT, { flippedX: true, flippedY: true } )} `; } ) +.add( 'landscape - Blockquote', () => { + modifyStorybookHead( MODELS.THUMBNAIL_BLOCKQUOTE.languageCode, MODELS.THUMBNAIL_BLOCKQUOTE.languageDirection ) + return ` + ${createPopup( MODELS.THUMBNAIL_BLOCKQUOTE, { flippedX: false, flippedY: false } )} + ${createPopup( MODELS.THUMBNAIL_BLOCKQUOTE, { flippedX: true, flippedY: false } )} + ${createPopup( MODELS.THUMBNAIL_BLOCKQUOTE, { flippedX: false, flippedY: true } )} + ${createPopup( MODELS.THUMBNAIL_BLOCKQUOTE, { flippedX: true, flippedY: true } )} +`; +} ) storiesOf( 'Text', module ) .addDecorator(testSizesScriptDecorator) diff --git a/src/ui/templates/popup/popup.less b/src/ui/templates/popup/popup.less index 46b4b0d09..940d441e0 100644 --- a/src/ui/templates/popup/popup.less +++ b/src/ui/templates/popup/popup.less @@ -83,7 +83,8 @@ text-decoration: none; } - &:after { + &:after, + blockquote:after { content: ' '; position: absolute; bottom: 0; @@ -112,6 +113,17 @@ /* @noflip */ background-image: linear-gradient( to left, rgba( 255, 255, 255, 0 ), rgba( 255, 255, 255, 1 ) 50% ); } + + blockquote:after { + width: 100%; + height: @lineHeight + 5px; + /* @noflip */ + bottom: 0; + /* @noflip */ + background-image: -webkit-linear-gradient( to bottom, rgba( 255, 255, 255, 0 ), rgba( 255, 255, 255, 1 ) 75% ); + /* @noflip */ + background-image: linear-gradient( to bottom, rgba( 255, 255, 255, 0 ), rgba( 255, 255, 255, 1 ) 75% ); + } /* stylelint-enable function-linear-gradient-no-nonstandard-direction */ // Make the text fit in exactly as many lines as we want.