wikimedia/mediawiki-extensions-Popups
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/Popups synced 2024-11-27 17:00:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge "Handle clipped blockquote by adding blockquote fade out effect"

Browse source
This commit is contained in:
jenkins-bot 2021-08-25 21:48:00 +00:00 committed by Gerrit Code Review
parent 246f2a42a1 a78546a19e
commit 21ba0c74a1
4 changed files with 37 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
.storybook/mocks/models.js
View file

@ -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:
`<p>There are 130 known photographs of Abraham Lincoln.</p><blockquote class="templatequote "><p>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.</p></blockquote>`,
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",

BIN
.storybook/static/img/640px-Abraham_Lincoln_by_Nicholas_Shepherd,_1846-crop.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 108 KiB

9
.storybook/stories/index.stories.js
View file

@ -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)

14
src/ui/templates/popup/popup.less
View file

@ -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.