Commit graph

30 commits

Author SHA1 Message Date
Volker E b64642a527 styles: Remove obsolete mixin
Duplicated in core mixins with `.user-select()` since v1.38.0.

Change-Id: Ia0d36bbd2fd417a7195c235854ddd81ac76e51c1
2023-05-09 18:56:17 -07:00
Volker E bee73f7520 styles: Replace old variables calls with skin variables
Replacing 'mediawiki.ui/variables.less' `@import`
with new skin-aware 'mediawiki.skin.variables.less' standard.
Also replacing and removing scattered WikimediaUI Base variables
with new skin variables.

Also
- replacing several static values with new Codex design tokens featuring
  skin variables for following properties:
  - `background-color`
  - `color`
  - `border*`
  - `border-radius`
- replacing local variables with new skin variables where applicable.

Bump required MediaWiki core version to >= v1.41.0.

Bug: T319381
Bug: T332541
Co-Authored-by: Volker E. <volker.e@wikimedia.org>
Depends-On: I04f9e48a1cf9dee915cf51e1e12b17ff0a595a06
Change-Id: Ie834b3f652bd22d9bf96c112166a5b7fcc3ecf2d
2023-04-16 03:32:27 -07:00
Umherirrender a9dad10f32 stylelint: Enable selector-pseudo-element-colon-notation
Via stylelint --fix

Change-Id: I9ea62e799573164a37181bc9b991c817a3786732
2023-04-04 08:18:59 +02:00
Volker E d5aad3a260 Add file extension to LESS imports
Similar to how other extensions have been amended.

Change-Id: Ic9905fe166507739cd687f5aa2f44a0625b9746b
2020-04-17 21:13:01 -07:00
Volker E 02c0fd738f Rename 'mmv.globals.less' to 'mmv.variables.less' following naming pattern
Renaming 'mmv.globals.less' to 'mmv.variables.less' following naming
pattern of other extensions like MobileFrontend, Echo or Flow.

Change-Id: I376c3fd1463ed225e214f165943576f3e3c7df39
2020-04-17 21:05:58 -07:00
Volker E 8e94e95f7b build: Use stylelint-config-wikimedia v0.9.0 and make pass
Change-Id: I1359fb4d78aee9d37b67c13464e31e035d3435a5
2018-11-29 10:34:00 -08:00
Ed Sanders 42b577bae9 build: Update linters
Change-Id: I7262fb369df0428c39adaf55128b83f019afb4c0
2017-10-31 18:42:04 +00:00
Volker E 7157729ae8 Align to WikimediaUI style guide and code cleanup
Aligning to WikimediaUI style guide by replacing colors with
standard color palette equivalents, merging close colors
(ex: `#E6E6E6` & `#eee` become `#eaecf0` ) and slightly increase
contrast on a few to meet WCAG 2.0 level AA criteria.
Also:
- following other code bases like MobileFrontend or OOjs UI in
using `border-radius` property instead of obsolete mixin
- removing non-existing browser vendor prefixes in mixins
- removing non-used Less variables
- bringing CSS/Less code closer to coding standards and
- simplifying Less code where applicable

Change-Id: Icb936e14ff613471ea1da6df6341ec1b0543cfaf
2017-03-02 15:55:01 -08:00
Ed Sanders e7ff2ba8b6 build: Introduce stylelint and make pass
Change-Id: I6f97359c6f34f2e5687ce91ab9926c493e613bf5
2016-07-19 13:51:05 -07: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
Pau Giner 958bedac36 More details button color fix
This patchset avoids the more button to become tranlucent due to som legacy styling.
The margin is also slightly adjusted to center the button in the panel.

Change-Id: Ic3936e90c891ded71d2954cd0e591012fb7bb33b
2014-09-25 07:19:22 +02:00
Mark Holmquist 7d7cd3a8e6 Make "more details" button bigger 'n' prettier
Change-Id: I81a370a910c0cec269a000c9dcaac8461d3421b0
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/830
2014-09-23 10:41:00 -07: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
jenkins-bot 95cc9affbc Merge "Reveal full text when user clicks on title or credit" 2014-07-17 13:44:23 +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 b622669a9e Size adjustments for moved-back repo icon
* 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
2014-07-17 00:49:10 +00:00
jenkins-bot ab63450dbe Merge "Remove all survey-related code" 2014-07-16 21:31:21 +00:00
Gilles Dubuc b0d885e4dc Remove all survey-related code
Change-Id: I67285260c13a1e8d3c37365bb80a7156c0fecd4e
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/794
2014-07-16 21:27:53 +00:00
Gilles Dubuc e17024549f Move repo icon back to the right-hand side
Also makes the grayscale filter work in Firefox.

Change-Id: I7dbeeb55502bc1ff0e1c969fb68310485c562765
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/792
2014-07-16 10:45:14 -04:00
Pau Giner 5edb949d01 Adjustments to repo icon
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
2014-07-10 10:25:23 +02:00
Gergő Tisza 5e0642a431 Make above-the-fold buttons take up more vertical space
Change-Id: Id38f4a8dace2818133d659e60036cd0f826665b4
2014-07-02 23:20:41 +00:00
Gergő Tisza 8d05dd8a6d Make description page link and reuse widget more prominent
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
2014-06-28 00:28:11 +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 2bb6c48ee2 Show a fallback repo icon for the "go to file page" button
...if the real icon is not available.

Change-Id: I36b79beb1867deb86b0a1d986db672854c3b839e
2014-04-10 19:09:28 +00:00
Pau Giner a5c146dc19 Adjustments to the Commons icon in Media Viewer
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
2014-04-09 14:52:54 +02:00
Gergő Tisza 06e50ae05d Hide buttons while loading
Change-Id: Icc4f9b1a80fd43320bd625350b840b2c353b0149
2014-04-04 22:08:11 +00:00
Gergő Tisza 052fd5d3f1 Add metadata button to go to file description page directly
Change-Id: I0f2c2b24aece3b806d572a0ed41dce8031e6ae6b
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/226
2014-04-04 08:45:56 +02:00
Gergő Tisza 042353c747 Make survey open in popup window instead of normal one
Change-Id: If971f7607bd3fc33080b903e07bd53ae3d3407cf
2014-04-04 08:34:26 +02:00
Gergő Tisza 871b49dff2 Feedback button
MVP implementation, just a link that opens the survey in a new tab

Change-Id: I9f2fb85cc47ce2be4cf57679bf37f0bda13084b7
2014-04-03 23:14:18 +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