From f95f5e91c7ba720d71603177182ddf932eca6027 Mon Sep 17 00:00:00 2001 From: Prateek Saxena Date: Mon, 20 Jun 2016 21:27:35 +0530 Subject: [PATCH] Update the way captions show up in packed-overlay and packed-hover Instead of taking up the entire height of the thumbnail, this now shows only the first line of the caption with ellipsis. The rest of the caption can be seen by hovering over it. This lets you click the image thumbnail, even when the caption is too long, and also looks much neater in a gallery of lots of images and long captions. Bug: T93393 Change-Id: I6688e9574d72b2ea6acee729ecc1cb2f331cd0f8 --- resources/src/mediawiki/page/gallery.css | 25 ++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/resources/src/mediawiki/page/gallery.css b/resources/src/mediawiki/page/gallery.css index 4d43e6af83..3ed4870580 100644 --- a/resources/src/mediawiki/page/gallery.css +++ b/resources/src/mediawiki/page/gallery.css @@ -90,10 +90,35 @@ ul.mw-gallery-packed-hover li.gallerybox.mw-gallery-focused div.gallerytextwrapp bottom: 0; left: 0; /* Needed for IE */ height: auto; + max-height: 40%; + overflow: hidden; font-weight: bold; margin: 2px; /* correspond to style on div.thumb */ } +ul.mw-gallery-packed-hover li.gallerybox:hover div.gallerytextwrapper p, +ul.mw-gallery-packed-overlay li.gallerybox div.gallerytextwrapper p, +ul.mw-gallery-packed-hover li.gallerybox.mw-gallery-focused div.gallerytextwrapper p { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} + +ul.mw-gallery-packed-hover li.gallerybox div.gallerytextwrapper:hover, +ul.mw-gallery-packed-overlay li.gallerybox div.gallerytextwrapper:hover, +ul.mw-gallery-packed-hover li.gallerybox.mw-gallery-focused div.gallerytextwrapper:hover { + overflow: visible; + max-height: none; +} + +ul.mw-gallery-packed-hover li.gallerybox div.gallerytextwrapper:hover p, +ul.mw-gallery-packed-overlay li.gallerybox div.gallerytextwrapper:hover p, +ul.mw-gallery-packed-hover li.gallerybox.mw-gallery-focused div.gallerytextwrapper:hover p { + text-overflow: clip; + white-space: normal; + overflow: visible; +} + ul.mw-gallery-packed-hover, ul.mw-gallery-packed-overlay, ul.mw-gallery-packed { -- 2.20.1