Also fixes popup texts which should have been updated in the parent commit
and the panel opening mechanism which did not work when the below-the-fold
description box was display:none-d.
Change-Id: I5fc37429a7dc7a8f1517fa42375cd140d7d11674
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/589
* when the caption is available, use it as the image title
* otherwise, fall back to description if available
* otherwise, fall back to filename
* if both caption and description are available, show caption as
title and show description below the fold; otherwise don't show anything
below the fold.
Change-Id: I9738ca46620d7cf3b30f6e46790a37966d4b9eaf
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/589
* move license and terms link from title area to attribution area
* remove some ineffective styling for elements which have already been removed
in earlier changes
Change-Id: I5bd41e337a4c8133bfa27e4c4d03162b2d6e35bb
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/833
Automatically reveal/hide full text as metadata panel is opened/closed.
Also makes metadata open/close a proper event.
Changes scrollTop calculation for the fully open metadatapanel so it is not
confused by the size of the panel changing.
Also rename MetadataPanel.$controlBar to $aboveFold (that field was missed
when the corresponding CSS class got renamed).
Change-Id: I7e66ca0f45c2188dab4b78508ad7f91154187de4
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/396
Reveal the full title + author + source when the user clicks one
of these, and make some related changes:
* expand the above-the-fold part of the metadata panel so they fit
* make the stripe buttons smaller and hide their text
* scroll the panel up if necessary
* modify tooltip texts when there is more text to show
Change-Id: I304297bc5e7be7b16e2fc4bde66ac19641b00029
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/396
- rearrange DOM structure of above-fold part of the metadata panel:
- rename .mw-mmv-controls to .mw-mmv-above-fold
- the above-fold part is a single positioned div now, with height
explitcitly set
- less LESS gymnastics, above-fold height is a single variable
- add paddings to the p elements instead of the containers
- make all title elements align to baseline (except the logo which
would look horrible)
- discard some CSS which was superfluous
- overspecified sizes/positions
- some top/bottoms for staticly positioned elements
- get rid of the .mw-mmv-drag-affordance div, since a full-width bar
wouldn't really make sense on the bottom of the above-fold section
- flip the chevron and place it to the bottom of the above-fold part;
add colors etc. per spec
- fix stripe button horizontal spacing
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/706
Change-Id: Ic37b4150288055c3fae8d22919ed7b1249db1f09
Several people complained that "Learn more on Wikimedia Commons"
is not clear: it can be interpreted as a link to the Commons
main page, the text does not suggest that the link will be related
to this specific file. The new wording tries to address this.
Change-Id: Ia605cc30c4ca57598f7cebdde60061800a10b6e7
Instead of setting the parent's height as max height of the
<img> element, find the first parent which has a non-automatic
height (that would be .mw-mmv-image-wrapper).
With the old structure, the height of the parent element could
be determined by the height of the image, which would then be
written back into the max-height of the image, messing up the
aspect ratio. I did not see this in the wild, but it was easy
to reproduce by changing the timing of the resize handler (in
particular, I tried to call the resize handler before loading
the new resolution, to make the UI more responsive, and ran
into this problem). This cannot happen anymore now.
This also fix a bug on some browsers (IE 10, maybe iOS Safari)
where the size of the image could be slightly larger than the
available space, and the bottom of the image was obscured by
the metadata panel. I am still not sure how exactly that
happened, but it was related to the <img> parents with automatic
heights having incorrect height. After making sure the <img>
has a max-height derived from an element with non-automatic
height, I cannot reproduce the bug on IE 10 anymore.
Change-Id: I193aefc42e6d6072717643659a9e4c0c8b7c7e93
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/698
Bug: 66244
Previously 'up' brought the panel up, and 'down' brought it down,
which might conflict with expectations on scrolling. Up/down keys
now move the metadata panel to the opposite state, no matter what
the current state was.
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/697
Change-Id: I53079d81042afb86354bf44e9dfd662adf1576cb
