Commit graph

41 commits

Author SHA1 Message Date
Volker E 9055676640 Unify LESS variable naming scheme for @font-size-* variables
Unifying variable naming to property-identifier-modifier scheme, while
also collecting all non-print values variables in corresponding file.
We will amend the `em` based values to calculations that will enable
rendered full pixel values and also fix some connected
usability issues in the future.

Change-Id: I378e8a2af91fe0790708e6fb2d2e7a5718ce93c5
2019-09-26 18:53:00 -07:00
Volker E 66aaf36bf6 Align LESS color variables to naming scheme, combine and cleanup
Merging similar value applications in generalized variables,
and aligning to property-identifier-modifier scheme.

Change-Id: I274ef24140a36e285c67b33a41ab6afe7c98676b
2019-09-26 15:39:25 -07:00
Volker E b11b5d44f9 Remove obsolete .vectorMenu ul selector
Has been made obsolete in I8e45af51ffc.

Change-Id: I23c69b5615199899be9bc16ba012ed21e920f317
2019-09-18 15:37:36 -07:00
jenkins-bot b4355e039f Merge "Use opacity for a WikimediaUI aligned transition on opening menu" 2019-01-10 07:04:38 +00:00
Volker E 0e089a0d4c build: Update 'stylelint-config-wikimedia' and make pass
Change-Id: I147ea18307c58c5091c5ad79585b5acec9d46235
2018-12-02 14:40:28 -08:00
Volker E 85cce3dcaa Use opacity for a WikimediaUI aligned transition on opening menu
Replacing `display` with `visibility` and add a transition to
overflow menu.

Change-Id: Iaef15dcd342c15410c56e00988f130056fe269e2
2018-11-26 20:08:53 -08:00
Volker E d0360d0b04 Vector menu: Simplify and cleanup LESS structure
Grouping related things, nest selectors in LESS way for easier
readability.
Placing `.vectorTabs li` & `.vectorMenuCheckbox` styles mostly
in its own nested selector to lower specificity.

Change-Id: I8e45af51ffcec618d585a54417e6a7cc3a9b82ad
2018-11-26 10:21:42 -08:00
Volker E da6d4eb280 Remove unnecessary div wrapper on overflow menu
Unordered lists can be absolute positioned down to IE 7.
Outdated selector `.vectorMenu ul` remains for a release cycle
until HTML cache is renewed.

Bug: T209558
Change-Id: Id18ca9a8d705572b1f7e17920ef52b80e9aec373
2018-11-14 20:41:08 -08:00
Volker E 6c3e0b62f2 Use list-style shorthand with x-browser compatible values
Change-Id: I6e47cb2dc406b9cfa3e2ca9b63f8cecce7c59ce1
2018-10-15 19:13:07 -07:00
Volker E 2476fe7775 Improve keyboard focus outline appearance
Change-Id: Iaa141bbd434acbe501a08a09b4eaba7084a6bea7
2018-09-06 23:06:16 +00:00
Timo Tijhof 8795cee025 Remove min-width/-moz-any-link hack for vectorMenu in old Firefox
I've tested as far back as Firefox 3.6 on Windows XP and
Firefox 16 on Windows 8 (localhost tunnel via BrowserStack), and
could not find any rendering issue with the menu.

For Firefox 3.6 it is Grade C without JavaScript, so the menu
only appears when logged-in (e.g. as admin) where it contains
Delete, Protect, and Move.

For Firefox 16 it is Grad A with JavaScript, and the menu can
also can be seen by narrowing the browser window when logged-out
until the History tab turns into a menu.

In both cases, the menu rendered without issue both with
and without these two rules.

Change-Id: I4946b115595424fdcf74429b237e0c2ee5715fc3
2018-09-04 03:47:25 +01:00
Timo Tijhof feca6b276b Remove unused margin/padding override for '#mw-head h3'
Matches the following 6 elements:

1. h3#p-personal-label
   Hidden per `#p-personal h3`.

2. h3#p-namespaces-label
3. h3#p-views-label
   Hidden per `div.vectorTabs h3`.

4. #p-search h3
   Already has its own margin and padding that override
   this override.

5. h3#p-variants-label
6. h3#p-cactions-label
   Margin overriden by `div#mw-head div.vectorMenu h3`.
   Moved padding there as well.

This last one is the one the styles were originally intended for,
because the tabs that the menus align with also don't have padding.

The other instances of an 'h3' within mw-head, however, were not
vector menus and even if they didn't have their own padding
already or weren't display-none, then it's unlikely they would
want to align with the unrelated vectorMenu styles, e.g. the
p-personal area is quite different and just happens to be in
the same parent element as an h3.

Change-Id: Id127ead7a50fcd64821442afd0e781f97756502f
2018-05-31 10:23:30 +00:00
Volker E 0a0ddcc581 Align tabs and search input font-size
Bumping font-size slightly up from 12.8px to 13px and unify it on
Vector tabs and search input.

Change-Id: Ia2e2d623b19fba2566db36b9800102d52130af6b
2018-05-30 01:45:31 +00:00
Volker E fff89b5352 Lower CSS selector specificity on Vector tabs and menu
Lowering selector specificity, higher specificity is unneeded here.

Change-Id: I36779db2d526e1496d2ddcb70ce86968e0d8ad39
2018-05-23 13:52:41 +02:00
Volker E 73eb37394d Remove special Vector tabs CSS for IE 6
Removing special CSS for Internet Explorer 6.
It's mid 2018 and users will still be able to read
the content if they have to.

Change-Id: I0f98c61cf9108c0a91769e9b7044023b01f974ed
2018-05-23 10:44:40 +02:00
Bartosz Dziewoński 0ee8510ce7 Remove old selectors and JavaScript for dropdown menus
Bug: T168080
Change-Id: I49006314d42a00818464a94412cb63190b59a99b
2018-03-12 23:34:32 +00:00
Bartosz Dziewoński d82e4db35e Make dropdown menus keyboard-accessible without JavaScript
Instead of implementing keyboard (and mouse click) handling in
JavaScript, put an invisible <input type="checkbox"> into the
dropdown handle. It can be focused and toggled using keyboard
actions like a normal checkbox. This checkbox also takes over
the duties of handling mouse hovering and clicking.

Old JavaScript and CSS are left in place for compatibility with
cached page HTML, to be removed later in a follow-up.

Bug: T168080
Change-Id: I27532140b06c97921f1cfb64e44bff814d99a358
2018-01-03 21:58:51 +00:00
Fomafix fb79cd46b3 Restore indicator for menuForceShow of tab menus
The previous indicator was removed in 7a42af066b because of a position
transition. The new indicator has no animation.

An indicator is useful to distinguish between the hover and the click
actions.

Change-Id: Icf765d4985aea36e4f4f6653e769aafaf3c30d07
2017-11-19 19:34:15 +01:00
Bartosz Dziewoński e4b05ae836 Revert "Fix reversed nav elements when viewing cached HTML"
No longer needed for Wikimedia wikis after the HTML caches expired.
This reverts commit e951a09913.

Change-Id: I5eda153e3368f6a7f9d2f88e336e02b65d01f2b5
2017-11-10 19:17:57 +01:00
Bartosz Dziewoński ff2f37bc7c Use 'color' to change lightness of "More" menu label rather than 'opacity'
Changing 'opacity' from 1 to other values can cause the browser to use
a different text rendering method, producing unpleasant effects.

We still have to use 'opacity' to change the lightness of the arrow
icon, so move it into an :after pseudoelement.

Bug: T179988
Change-Id: I19c5eafb9ab7e652f2661144abc1e03b381f5ff4
2017-11-07 23:37:46 +01:00
Volker E 29c515ae3f Align VectorMenu items and unify padding with tabs
Aligning VectorMenu items horizontally with menu handle and
set `padding` consistently to `8px` – taking into account
different `font-size`.
Also removing unnecessary duplication of `margin-top` as `margin`
is set in same rule.

Bug: T179782
Change-Id: I30e9b4e50589ef09a0e5dcb0e6c4486e7779a39d
2017-11-07 20:46:33 +00:00
Volker E e2c9a585e4 Bring menu tab appearance closer to standard widgets
Bringing appearance and behaviour closer to standard widget like
DropdownWidget:
- Amending color to be (closest) aligned to WikimediaUI color
  palette, but switch normal and `:hover`/`:focus` state in order not
  to be too disruptive of a change and align with rest of Vector tabs,
- removing obsolete JS functionality as IE 6 as only major browser
  affected does receive the menu items as tabs nonetheless and replacing
  with simple CSS selector,
- removing unnecessary and obsolete images and
- Lessifying selector

Bug: T153043
Change-Id: Ia15480162bb8f923d0e9b6e42ca90c2c880978de
2017-10-19 23:24:15 +00:00
Volker E 84d1510a38 Remove fallback color from tabs
Removing fallback color from Vector tabs, that isn't part of
WikimediaUI color palette and isn't needed at all resulting
in a worse than necessary appearance.

Bug: T153043
Bug: T168420
Change-Id: Ia9790435dd3ec4df47b70d1a007fca7af79686c9
2017-10-07 18:13:19 -07:00
Bartosz Dziewoński 6b6c6ba762 Remove some unnecessary direction-specific CSS
Both of these survived across many rewrites, I tracked down the
original commits that added them:

* footer.less: Added in 6d5dca5a899d45512c1031c4235f26cc755b933b in
  MediaWiki core (rSVN62030) as a workaround for "weirdness" in IE 7.
  Users of IE 7 experience much worse weirdnesses when viewing pages
  these days.

* tabs.less: Added in 299d1f328c2ad1475c8a1ac19b4fa07fc087d239 in
  MediaWiki core (rSVN53247) under a generic label of "RTL fixes".
  After change 5d0a07bf9d this is
  actually a no-op.

Change-Id: Iac3d2a26438226a3e23e067780c4b2810ac4903f
2017-09-28 13:22:53 +00:00
Bartosz Dziewoński e951a09913 Fix reversed nav elements when viewing cached HTML
Follow-up to 5d0a07bf9d.
See T48947#3641618 for a detailed explanation of the
problem this is fixing. Essentially, our CSS has to be
compatible with both new and old HTML to avoid problems
with cached pages on Wikimedia wikis. To do this, we
add a CSS class to the body and make the new CSS only
apply on pages that have this class. This patch should
be reverted when the caches expire.

Bug: T48947
Change-Id: Icf26e6690b59f470765b2634534d18d2df25ee2a
2017-09-28 04:23:01 +02:00
Rammanoj 5d0a07bf9d Vector: Flip horizontal nav elements with CSS
Flip horizontal nav elements with CSS prperties in RTL(right-to-left) mode

Bug: T48947
Change-Id: I30a5837f84bcdeab205760644bfa40b12cefbece
2017-09-26 10:30:11 -05:00
Bartosz Dziewoński 206efa4c96 Make dropdown menus appear above VisualEditor toolbar
Bug: T171840
Change-Id: I36dc747ec2c41816df371aa5e1d4b81dff24a7dd
2017-08-03 01:27:05 +02:00
Volker E 7a42af066b Remove irritating transition on menu tabs
Removing irritating dropdown arrow position transition
on menu tabs. It is the only place we're using this and it seems obscure
and not helpful to the users from UI Standardization point of view.

Bug: T68698
Change-Id: I8d30108b86b47358349de2ea424c0ba7f67ee7e2
2017-07-20 21:20:59 +00:00
golopot 3f19c24696 Fix misaligned menu tabs
Ensure vertical alignment of menu tabs (for example “More” button) 
with link-only tabs by setting:

* `padding-top: 1.25em;` as on `div.vectorTabs span a`
* `line-height: 1.125em;` as on `div.vectorTabs ul li`

Bug: T171142
Change-Id: Ic4ef86589c6c3d442035f3d768cb9036e1ecc237
2017-07-20 14:14:15 +00:00
Fomafix 56ec1a3c87 Remove <div> inside of the <h3>
The <div> was introduced in aba11a7b but this is not valid in HTML 5.

This change ommits the <div> and attaches the background image to the
existing <span>.

Cached HTML with the <div></div> does not matter for the result.

Bug: T169551
Change-Id: I04f7032b6f6bafe10548fde690f55de66b56f61f
2017-07-12 06:21:51 +02:00
Fomafix 5c363643a7 Remove unused selectors for action menu
This change is a follow-up to aba11a7b1c.
Do not deploy this change until HTML cache from before aba11a7b1c expired.

Change-Id: I631260d58229b1b70e2d4e55f8302f9769de3511
2017-07-11 02:59:14 +00:00
Fomafix aba11a7b1c Use <div> instead of <a> for action menu
This change prevents that a middle click opens a new tab with the URL "#" and
prevents a wired outline around the button when selected of focused in Chrome.

The selector "> a" will be removed in a separate change which must get
deployed not before the HTML cache has expired.

Bug: T44241
Bug: T68388
Change-Id: I7255552d3bdec9e40727721b91630623ae24a08b
2017-06-06 08:02:49 +02:00
Volker E 463d95a356 Align text and border colors to WikimediaUI color palette
Aligning some text and border colors (all greyscale) to WikimediaUI color
palette and also add toolbar `box-shadow` to “More” menu dropdown
following standard pattern.

Bug: T153043
Change-Id: Ic3247ce29059ea7d7f59a99ca742334600d85ce6
2017-03-02 17:23:52 -08:00
James D. Forrester 298af67c06 build: Bump stylelint and make pass
grunt-stylelint              0.6.0  →   0.7.0
 stylelint-config-wikimedia   0.3.0  →   0.4.1

Change-Id: Id87b8df04d415e1f1058a4042a31408236402037
2017-02-17 16:34:04 -08:00
Ed Sanders f7d8d036ac build: stylelint more files
Change-Id: If62fa6ff9810de253b65feb1f7e312d22e33bfa8
2017-01-23 15:04:05 +00:00
pppery 3621078abf Specify height of tabs
This fixes the display of the tabs when `box-sizing: border-box` is
specified in local CSS. Previously, they were shifted upwards and shrunk
slightly.

Bug: T104767
Change-Id: I04333300bd1d29003e609091e0f64a73489f04c6
2016-12-14 15:43:43 -05:00
Timo Tijhof 600abc4103 Make vectorMenu expand as tabs in IE6
Right now, Vector loads the csshover.htc extension in order to
emulate CSS :hover support in IE6.

This commit makes the vectorMenu expand as basic tabs instead.
Thus allowing us to remove the csshover.htc extension.

Note that the "page action" vector menu (p-cactions) is only created if it
contains items. By default, the only actions in this menu are actions for
logged-in users. For logged-out users, the menu isn't even on the page.

The tabs aren't pretty, but they don't look broken either.

Change-Id: Ibf2332ab0a0d9d7ba3ec03665ad61ca287750ad3
2016-03-01 23:16:34 +00:00
Florian 620dec451b More-menu needs to overlap indicators
Indicators potentially can be overlap the area for the menu overlay,
which then overlaps it. Avoid it by raise the z-index for div.menu,
too.

Bug: T89410
Change-Id: Ie505d29a27aba2e8be5d5b13209442ec6daebcd9
2015-07-16 18:40:22 +00:00
Bartosz Dziewoński 966c27a9b6 Remove 'margin-left: -1px;' on "More" menu
This rule doesn't seem to be necessary and interferes with width
measurements, causing the tabs to bounce back and forth at specific
screen sizes.

Bug: T74089
Change-Id: I6a05ccf6eea1a4af22d8df3dd4d507cf9ac1b5f3
2014-12-16 17:42:18 +01:00
Bartosz Dziewoński 768ba62ad3 Vector: Remove compatibility for old variant menu HTML
Removing backwards-compatibility CSS from an earlier change.

Follow-up to Idf43d77dccff83ad81db776f3262e0ef12d25c92.

Change-Id: I2817c6e9eb52ffc785a04bb9d23b0802a553fd45
2014-08-21 20:29:48 +00:00
Bartosz Dziewoński d28f09df31 Move Vector skin from core
This is the final step of the process described at
<https://www.mediawiki.org/wiki/Separating_skins_from_core_MediaWiki>.

Corresponding core change: Idfc38503.

Change-Id: I84fcf7ce6385b8323544cafe6912a00f1886d20d
2014-08-07 13:38:34 +02:00