Commit graph

30 commits

Author SHA1 Message Date
Pau Giner ea244e8c15 Layout adjustment for right data column
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
2014-10-29 20:17:08 +01:00
Gergő Tisza 392e714cc6 Add icon for PD licenses
Change-Id: I82c56a420d8d529a4a50cb66e64b191bbb36997f
2014-10-29 14:03:36 +01:00
Gergő Tisza 8423974c6a Change above-the-fold layout - step 3
* 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
2014-10-29 12:05:34 +01:00
Gergő Tisza f792a42f93 Change above-the-fold layout - step 2
* 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
2014-10-28 21:18:53 +00:00
Gergő Tisza a6adad35ed Change above-the-fold layout - step 1
* remove chevron
* adjust colors

Change-Id: I443fd757f5df18d099e42a81f1f323fadea77987
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/833
2014-10-28 20:02:22 +00:00
MarkTraceur 640984b2e9 Revert "Layout adjustments to reduce overlap with chevron"
This reverts commit b77ae2c62b.

Change-Id: Ibc9d864d5309eb23ec1b495a1311a614e907b5a8
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/912
2014-09-26 17:52:13 +00:00
Pau Giner b77ae2c62b Layout adjustments to reduce overlap with chevron
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
2014-09-24 13:11:47 +02:00
Gergő Tisza f14d08fd75 Reveal full text when user clicks on title or credit
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
2014-07-17 09:42:12 -04:00
Gergő Tisza eff0207199 RTL positioning tweaks
* 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
2014-06-28 01:22:50 +00:00
Gergő Tisza 5e3808a14e Make the metadata panel opening affordance more obvious
- 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
2014-06-19 21:14:56 +00:00
Gergő Tisza 0a265d7e96 Fullscreen improvements
- 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
2014-06-19 18:11:26 +00:00
Gergő Tisza c01cb55f4d Make optout link more AJAXy
Make it grey, unclickable and change text while waiting for the
AJAX request.

Change-Id: Ic5c2923944658d5be04217cdfe62e1d8608a478f
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/723
2014-06-19 10:42:04 +02:00
Gergő Tisza 40b125565d Extract metadata panel scroll/log/animate logic into separate component
Change-Id: I2441d64c094a9bfbae7a4712ff4c78efa13a62a7
2014-05-13 18:57:38 +00:00
Gilles Dubuc ad6cc656ce Fix RTL positioning for repo icon
Change-Id: Iad6f0002913fb6361f22a467b08e6489a40adeea
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/512
2014-04-30 20:55:12 +00:00
Pau Giner 2ac50f49bf Adjust invite animation for Media Viewer
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
2014-04-28 10:28:18 -07:00
Gergő Tisza c304baf0ba Show metadata panel immediately.
Change-Id: Ie71eb1d29e3863b99687a75da69fad9a1ead552c
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/458
2014-04-22 16:10:25 +00:00
Gergő Tisza c9e92da374 Split the progress bar into a component of its own.
Change-Id: I131b0d1b8ec992a7c7ad388021febea5a0303d16
2014-04-21 22:27:59 +00:00
Gergő Tisza b0fc56f039 Fix icon positioning for secondary repo link
The last change did not work so well for small (non-Commons) links,
adjusting.

Change-Id: I50bb25f4311715d93ebb12603b1b2546273efa31
2014-04-11 21:02:12 +00:00
Pau Giner e250a45eb3 Spacing adjustment for repository link
Spacing of the whole element and the Commons logo has been
adjusted to provide visual clarity.

Change-Id: I601a1d5c847199dc734911dc9e90c0fe7931bca8
2014-04-11 15:30:19 +00:00
jenkins-bot 6dae43b0cf Merge "Fix commons icon to avoid pixelation" 2014-04-10 18:12:34 +00:00
Gilles Dubuc 779b91d405 Fix commons icon to avoid pixelation
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
2014-04-10 13:20:39 +02:00
Gilles Dubuc ebeaf5cc5d Fix overlap of info box and right sidebar
Seen in Firefox: https://www.dropbox.com/s/a4d2ltanx343kh0/Screenshot%202014-04-10%2009.57.51.png

Change-Id: I8ae755eb1008078a94face60efee53c11d9ce3b9
2014-04-10 09:59:31 +02:00
Gergő Tisza ee113af8f5 Make Commons link more prominent
Change-Id: Id546de9671fdc00ba73b01a1bc6398f2da2a6a2b
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/270
2014-04-09 21:45:39 +00:00
Gilles Dubuc 3df526b919 Fixes various bugs in IE
- 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
2014-04-07 22:00:11 +00:00
Gergő Tisza 47a8bda392 Create StripeButtons class, convert reuse button to use it
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
2014-04-03 23:13:12 +00:00
Gergő Tisza 95111d2b73 Use mw-mmv CSS prefix consistently for all things
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
2014-03-31 21:33:12 +00:00
Pau Giner 4ee0e06c6d Use different widths for metadata columns
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
2014-03-11 16:05:14 +01:00
Pau Giner a3d0a654f7 Adjustments of colours and layout
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
2014-02-28 14:14:34 +01:00
Pau Giner d66681c949 Small font and layout adjustments
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
2014-02-27 19:04:00 +01:00
Gergő Tisza a04631c405 Show permission
Change-Id: I0b8b0626b36baba9732f7350213d8b53ec2cca95
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/118
2014-02-24 21:41:25 +00:00