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
* make Commons icon slightly larger than "use this file" icon so
it seems to be the same size (since the Commons icon has more
whitespace)
* re-add size adjustments for dynamic icon; IIRC this was needed
to make Wikipedia icons look good
Change-Id: I6cc2c66beb1d270c9367446661ef14139afa814e
The following visual adjustments have been made:
- Make color similar to other icons in the metadata panel.
- Highlight on hover to convey interactivity.
- Adjust to the "visual center". The icon was matematically centered, but since the angular separator adds empty space to the right, a 2px correction has been added so that it looks centered taking into account that extra space.
Change-Id: Ib4db723b38a8d6fc9528fe86756220b6525da95b
Rearrange the above-the-fold part of the metadata panel so that
the link to the file descriprion page and the button for the
download/share/embed widgets are easier to find.
One gotcha is that favicons are blown up to 32x32px (a small icon
in the middle of a big empty space would really look ridiculous)
so if a site uses 16x16px favicons it will look pixelated.
None of the WMF sites do that though, and if anyone else does, they
should just fix it, 16px favicons suck anyway (e.g. not retina friendly).
Change-Id: Icce12174b6ed89731fe75f8069c0b4a2b7161a34
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/732
- 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
To achieve consistency with the icons in the Media Viewer panel,
the following has been adjusted:
- Colors onf the "share" icon to match the rest of the icons (updated to the new gray values of Agora).
- Size of the Commons icon has been adjusted both in the SVG file and when it is added in the LESS/CSS. Due to the different aspect ratio of this icon, extra spacing has been added to make it visually fit.
Change-Id: Ic14a869ea96ea1a8202c9988f0c5d330ba3e9a70
Also do a bunch of refactoring to:
* keep LESS rules in more sane locations so it is not as hard to get an overview
(most of the metadata panel rules were in mmv.less)
* move mmv.mixins.less up one directory as it is not specific to the UI
* move the SVG icons as all of them were related to the UI
* remove the marging-right hack which was used to keep the title text from
overflowing the button; instead use a float and overflow properties to make
sure text that is too long gets hidden
Change-Id: Icc8ea2e766be67d86ae98c734721b2185bd6c36e
