The right data column has been adjusted to:
* Make the position of license info consistent when moving through images.
* Make the position of the right list of data consistent when the panel is open.
That is achieved by adjusting the license position in a different way depending on
the status of the panel (open or closed).
Change-Id: Ia1a54d400e9810119d5222a9da732e099d81d9cf
* make top of "below-the-fold" be actually above the fold
* put all above-the-fold content except title and more details button
into that area
* kep below-the-fold area in fullscreen mode when title/credit gets untruncated
* increase title length to 180 (140 before reducing font size) - works nicely on
my 1600x900 laptop
* remove old styles which were intended to make the button smaller when the
panel is close but were mostly broken anyway and only caused the button to
twitch
To avoid redoing all the size calculation logic, we cheat and use a negative
margin to pull the below-the-fold content above the fold.
Change-Id: I18d7bdb7dbbdfb8201c0d66257731febfac31263
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/833
* 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
For files with long credit information, part of the text can get hidden
with the down-pointing chevron.
This patchset adjust sizes and margins of different elements to reduce that overlap.
Change-Id: I03f3b84d4ad0f754a0a20f2e78016711164ef433
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
* 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 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
With latest refactorings, the animatin looked like a glitch.
The position of the panel has been adjusted to (a) make the initial
position the same as shown while the progress bar for better continuity,
and (b) make the move more noticeable by increasing the distance the
panel moves.
To test, clear the local storage variable mmv.hasOpenedMetadata
Change-Id: Ie3ed29826fa15bf4c6b38f0fc8bde4bd84563fb9
The CSS to make the favico twice as big was looking horrible in
Firefox and possibly other browsers. Since we're already
special-casing commons, let's apply a proper SVG instead of the
favico.
Change-Id: Ie32302342eba7aa37bd310c013a9f4d7f9ae187e
- error caused by select() called during focus event
- HTMLElement not existing in older IEs
- filter rotation for older IEs causing black background bug in IE9
- IE9 lacking progress would have its progress bar never reach 100% and disappear
- Handle e.which value for clicks on IE < 9
Change-Id: I5727ef3f2a9f9aa77eac930f93320e6ce5964c78
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
With apologies to anyone who gets a hundred merge conflicts
because of this :)
We had several different prefix styles (mlb-, mw-mlb-, mw-mmv-,
mw-mmv-mmv-, a few unprefixed), which was getting annoying,
and will be confusing to wiki editors who are trying to figure out
where a given style comes from. Such changes are better done before
going live because it breaks all local CSS tweaks on the wiki,
so I am renaming things now (also removing some stuff which wasnt
used anywhere).
Change-Id: I00447a25f0028e234169c6db941bedc99622eb8d
This change makes the columns on the matadata panel use
a different width (2/3 and 1/3) to emphazize the description
with respect to the more advanced technical details.
Change-Id: I246e3496dd01649f360c1f80b859e2260bb1d87f
changes include:
* Aligning license and usage boxes with content above.
* Limit the maximum size for the licensing box when open.
* Adjust font sizes and colours to adjust the alance in the prominence of each part.
Change-Id: I0e4465baaf7a9f7830b95a8d731256d6b4974e17
Some styling adjustments to:
* Make description fonts not to be de-emphasized in comparison to license terms.
* Avoid metadata on the right to wrap when there is enough space.
Change-Id: I49514060dec200d93489d2b853a1dfdc1bfa5f46
