From 248875e7038e3ea88f0d61f9b584ff737830082c Mon Sep 17 00:00:00 2001 From: Pau Giner Date: Wed, 24 Sep 2014 11:40:58 +0200 Subject: [PATCH] Show initially part of the below the fold area In order to communicate that there is more content below. This is related to acceptance criteria #8 of story #830. For more details check: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/830 Some further improvement to consider: - We'll need to adjust the "more details" button margin to make it fit better in the current above the fold area (0.55 em instead of the current 0.7em). - If the panel is open, and the user clicks outside of it (e.g., over the image), the panel should close. - We may want to eliminate the pointing-down chevron if we don't want it to conflict with the big "more details" button. Change-Id: If14886647aa0660a524a720e8d223eca655d5f3f --- resources/mmv/mmv.lightboxinterface.less | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/resources/mmv/mmv.lightboxinterface.less b/resources/mmv/mmv.lightboxinterface.less index bd98235c5..46279bf77 100644 --- a/resources/mmv/mmv.lightboxinterface.less +++ b/resources/mmv/mmv.lightboxinterface.less @@ -2,6 +2,7 @@ @import "mmv.mixins"; @metadata-background: rgb(248, 248, 248); +@metadata-above-fold-reveal-height: 12; .mw-mmv-wrapper { top: 0px; @@ -58,11 +59,11 @@ // above-the-fold part of the metadata panel .mw-mmv-above-fold { width: 100%; - height: @metadatabar-above-fold-height; + height: @metadatabar-above-fold-height - @metadata-above-fold-reveal-height; // min-height is used when the height is changed to auto to display long texts, to make sure the layout // is not messed up wheen the text is short and does not fill the available place. It is also used by // Javascript to get the "default" height. - min-height: @metadatabar-above-fold-height; + min-height: @metadatabar-above-fold-height - @metadata-above-fold-reveal-height; position: relative; border-bottom: 1px solid #dddddd;