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
Avoid ugly selection colors when people double-click the dropdown
button.
(Why would people double-click the dropdown button? Not sure, but
I did, so...)
Change-Id: If505c7b62ca501a492aa7f85d2f6c92790ecd6dd
- Split button has been adjusted to have the same height on both parts (button and drop-down)
- The attribution panel has been adjusted to add hover states and adjust sizes and colors
Change-Id: I3ba80776add6dbca9f0b096dfe7ad4a8779f1a0d
The invite animation has been adjusted to:
- Make the panel movement more subtle (reduced distance and length)
- Add an animation for the chevron and coordinate it whith th panel movement.
Change-Id: I8fbd01d23fd9bf74fc272c40acd2663f5907326a
* partially undo the RTL fix from mingle #512 which looks bad,
and use four-value syyntax for background-position instead.
* use noflip on :before rule as :before itself is not flipped
* handle better the uncertainty resulting from image name
usually not being RTL
Change-Id: If4aa7240e9bee5c0a06f1785edb9c72964dfc60f
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
- fix sizing error so that the image actually fits the screen
- hide some stuff that didn't work properly in fullscreen anyway
(commons/survey buttons just exited fullscreen, reuse menu
did not fade with the metadata panel, view terms link didn't do
anything)
- move metadata scroller CSS rules into metadata scroller LESS file
- disable invite animation which broke the opacity transition
- move opacity transition to the main metadata panel element;
remove background-color transition which is pointless since there
is an opacity transition
Change-Id: Ib26160cc6431ea007dab8441c634d0faf9ee1d0a
This uses best-effort logging (like most other links do), not the
blocking call that's used by the other file page link, since
analytics folks had severe misgivings about that.
Change-Id: I35204420c834fa4fce3dcf81403cb78b92811caf
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/726
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
