Commit graph

23 commits

Author SHA1 Message Date
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
Mark Holmquist c0d8dbcc9e Fix font size in MonoBook
Dunno why it uses x-small, but this fixes it.

Change-Id: I3217ac5279ea23cb5a0b2408a44422c081e11a5e
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/876
2014-10-08 14:49:38 -07:00
jenkins-bot f4348a844a Merge "Revert "Show initially part of the below the fold area"" 2014-09-26 17:52:33 +00:00
Gilles be3f2a3302 Revert "Show initially part of the below the fold area"
This reverts commit 248875e703.

Change-Id: I826d2b9ff346d862e7a7e6113c19b87e718e1acd
2014-09-26 15:17:11 +00:00
jenkins-bot 6c2fe0aaf5 Merge "Style fixes for the UI changes" 2014-09-24 21:14:51 +00:00
jenkins-bot 18beee316e Merge "Make the download pane into its own dialog" 2014-09-24 21:12:20 +00:00
jenkins-bot e05655d880 Merge "Make the reuse button part of the canvas" 2014-09-24 21:12:10 +00:00
Mark Holmquist 325a8a3e27 Style fixes for the UI changes
I decided to fix them all at once since we're merging all of these
patches together anyway. I can pull changes into other patches if
absolutely necessary.

Also fixes the dialog open/close handlers for the canvas click event,
and leaves the reuse dialog open on next/prev.

Change-Id: Id1564425442aec72e5e41f2f80986d8a104dd92c
2014-09-24 17:08:02 +02:00
Mark Holmquist 0d4863dd91 Make the download pane into its own dialog
Change-Id: Ia92545ed1ef7f2e4ba7934c682eef684a22ca17f
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/841
2014-09-24 17:05:50 +02:00
Pau Giner 248875e703 Show initially part of the below the fold area
In order to communicate that there is more content below.
This is related to acceptance criteria #8 of story #830.
For more details check:  https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/830

Some further improvement to consider:
- We'll need to adjust the "more details" button margin to make it fit better in the current above the fold area (0.55 em instead of the current 0.7em).
- If the panel is open, and the user clicks outside of it (e.g., over the image), the panel should close.
- We may want to eliminate the pointing-down chevron if we don't want it to conflict with the big "more details" button.

Change-Id: If14886647aa0660a524a720e8d223eca655d5f3f
2014-09-24 11:59:39 +02:00
Mark Holmquist 59d8c5d892 Make the reuse button part of the canvas
Moves it out of stripeButtons and into canvasButtons.

Will move download to its own thing later.

Change-Id: Iaf18914b29a6283c3bade954f1adb3f206c9c911
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/834
2014-09-18 12:43:45 -07:00
Pau Giner 9865f41481 Adjust metadata panel colors
Above and below the fold areas of the panle are given slightly different
shades. A separate patchset can make the below the fold 15px visible
to increade discoverability.

Change-Id: Ib38f63131c2060002da60296f7a0d2eba9f3168d
2014-09-18 16:56:28 +02:00
Gergő Tisza 1af29bdc53 Fix metadata footer positioning in fullscreen mode
Add position:fixed to the metadata panel to stick it to the bottom
of the page.

This reverts the change in Ic37b4150288055c3fae8d22919ed7b1249db1f09
I can't recall if there was some intent behind that or it was an
accidental deletion; but this seems to work fine in Chrome and
FF.

Change-Id: Ic5fdce5fb3d6884df782f8bc9ec5c9a5c67edbd6
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/805
2014-07-23 07:32:56 +00: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 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 2079519eba Make opacity rules compatible with IE6-8
Change-Id: I426c7af8f5467c3e06abaea4f98b7e1495157e95
2014-06-17 21:11:33 +00: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
Gilles Dubuc 0fd2007923 Fix z-index bug in Firefox that would make navigation buttons appear on top of the metadata panel
Also fixes other issues:
- Some code in mmv.lightboxinterface.js wasn't doing anything
- Canvas buttons were being added to the wrong element
- Several CSS rules were being declared twice, a remnant of the multilightbox days

Change-Id: I6ffa1f6a989964d3863aa9dbeb332c0e59dff2e6
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/409
2014-04-09 17:37:14 -07: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
Gilles Dubuc 685f42f05f Display black overlay while the viewer JS is loading
I went for this option because it was the fastest to implement.
I think we should wait until we make the change to core to expose
image dimensions before we consider switching to another strategy.

Change-Id: I61c9342a2d6d6fc24a24e0988b3cf7f9a06859a2
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/248
2014-03-30 09:53:20 +02:00
Gergő Tisza 5a3d56f81b Merge MultiLightbox into LightboxInterface
Change-Id: I4363095e0504dd941793ba3addc7ee3cbe835536
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/178
2014-03-08 01:14:07 +00:00
Renamed from resources/mmv/mmv.multilightbox.less (Browse further)