From: Prateek Saxena <prtksxna@gmail.com>
Date: Mon, 20 Jun 2016 15:57:35 +0000 (+0530)
Subject: Update the way captions show up in packed-overlay and packed-hover
X-Git-Tag: 1.31.0-rc.0~6458^2
X-Git-Url: https://git.cyclocoop.org/admin/%7B%7Blocalurl:Special:UserLogin%7D%7D?a=commitdiff_plain;h=f95f5e91c7ba720d71603177182ddf932eca6027;p=lhc%2Fweb%2Fwiklou.git

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

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 {