Commit graph

409 commits

Author SHA1 Message Date
Stephen Niedzielski 17ffe01016 [hack] [toolbar] tighten the icon spacing
Reduce the spacing between toolbar icons in a kind-of sort-of hacky
kinda way.

Bug: T230232
Change-Id: I53d194bc0fe760d1b855ca84bcd4b40ce2ec4c2e
2019-08-30 17:58:26 +00:00
jdlrobson 9150aec131 Feature flag overhaul
Two new feature flags:
1) MinervaPersonalMenu
2) MinervaAdvancedMainMenu

Changes:
* AMC defaults to false on desktop - desktop doesn't have AMC mode it just
enables several skin options.
* WHen inserting a link at the bottom of the page check whether the talk at top
of the page (tabs) is enabled.. not AMC
* Update ServiceWiring to construct menu based on MinervaAdvancedMainMenu
and  MinervaPersonalMenu - note when former is enabled but not latter there is
no way to logout. Noted in README.
* Use one entry point for skins.minerva.amc.styles/index.less
* Document files inside skins.minerva.amc.styles to make it clear which features
they are associated with
* Drop history page styles when AMC is disabled - it's not possible to ever get to
these as the history page redirects in non-AMC mode
* Rename the class .minerva--amc-enabled to minerva--history-page-action-enabled
to reflect its real purpose and move styles from skins.minerva.base.styles to skins.minerva.amc.styles
No need to worry about cached HTML as AMC runs without cache...
* Remove isAnyAMCOptionEnabled - it's an antipattern and should be discouraged as it discourages the
art of feature flagging. Nothing is using it after these changes.
* The AMC_MODE flag is disabled. There is no need for this - AMC is not a feature and therefore not a
skin option. It is a mechanism for turning on other skin options. Tests are updated.

Testing:
It should now be possible to enable any feature in `beta` and see it in the beta of the
site.

Bug: T229295
Change-Id: I48959905f5c09721b14a27aa1a5ad82849ac6263
2019-08-23 10:48:14 -07:00
jdlrobson 7280d255c0 Dev: Prep for storybook
* Remove ambiguity in imports - say the file extension
'less' for all instances of variables and mixins.
* Separate toast styles from drawer styles so they can be
imported separately
* associate header-action selector with its parent
(.overlay-header) not parent's parent (.overlay) so it can be imported
and rendered without the Overlay.

Change-Id: Ib7e19a440ba095d6424d35305fb41d643ca9764c
2019-08-21 12:20:26 -07:00
Stephen Niedzielski bfdfc1165c [UI] [menu] slide the main menu over the page
Slide the main menu over the page instead of sliding the page over the
menu. Also, use viewport units for the main and notification menus.

Note, this lays foundation work for T225213.

Bug: T206354
Change-Id: I14b67d1e97b84086ea13e28df8148824a1f493e3
2019-08-12 18:22:45 +00:00
Ed Sanders aad8addcec AMC actions: Increase touch target size to 44px
Bug: T230033
Change-Id: I3ec9091380d48e2fcedb8d222fa22b0143f7bceb
2019-08-11 12:42:05 +01:00
Stephen Niedzielski 83f90dacad [fix] [Visual Editor] [LESS] [content] create stacking context differently
b96ab7bd created a new CSS stacking context[0-1] for .content.
Unfortunately, this triggered a browser bug[2] which affects VE edit
cards (an unwanted margin appears around them). This also occurs when
creating a stacking context with filters. The issue does not occur when
the stacking context is created by changing position or opacity. Replace
the identity transform a `position: relative`.

[0] https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
[1] https://stackoverflow.com/questions/16148007/which-css-properties-create-a-stacking-context?answertab=votes#tab-top
[2] https://bugs.chromium.org/p/chromium/issues/detail?id=20574

Bug: T230154
Change-Id: I23ad776f0bcde8f7eec5ffbdefb8f0825db084ec
2019-08-08 13:17:13 -06:00
Stephen Niedzielski b96ab7bd40 [LESS] [content] lower content render order
Create a new stacking context for page content. Previously, it was
possible for on page content to defeat the skin's z-index values with
superior numbers. This occurred with StructuredDiscussion OOUI widgets
on https://test.m.wikipedia.org/wiki/Talk:Main_Page and the
`position: sticky` header on Special:Notifications.

`scaleY(1)` is an identity transform that is terse and unlikely to be
confused when RTL flipping.

Bug: T225959
Change-Id: If8f718a707d9dd07e1182bc26e63e6e665bf98c2
2019-08-07 13:24:02 -06:00
jenkins-bot df7abeae25 Merge "Empty subtitle elements should not have margin" 2019-08-01 17:48:58 +00:00
jdlrobson 64896669e2 Empty subtitle elements should not have margin
I considered not outputting the subtitle, but the PHP mustaching
templating library requires truthy values and that seemed like overkill

Bug: T217197
Change-Id: I3ebe550bad8b5eb0f24d742261ea696950c91a59
2019-08-01 17:18:32 +00:00
jdlrobson c63fceea6e Normalize small fonts
We use 0.9em in a variety of places, to shrink font-size from the
default font-size. However given we use 16px as a base font this results
in a font-size of 14.4px. This can also cause problems with icons resulting
in rounding errors when used with multiple icons

This changes the font-size to 14px for those areas and makes future usages
centralized by adding a specific variable.
Also amending `@font-size-browser` variable to be aligned to naming convention
and equal to Vector one.

Bug: T229399
Change-Id: I8e31bca2982c049a9be73c89aa9e8e2aa8141269
2019-08-01 16:11:29 +00:00
Stephen Niedzielski 93f930ce3e [UI] [menu] remove menu height resizing
Remove the page action overflow and user menu height sizing. Previously,
a maximum menu height was set so that the menu itself would scroll. A
minimum height was also used so that the menu couldn't be shrunk down to
a silly size. Both the minimum height LESS and maximum height JS are now
removed.

Bug: T225959
Change-Id: I201374ab8b249272ee5dbb1401b844ffe034ea66
2019-07-31 20:05:54 +00:00
jdlrobson 87a0795ed8 Subtitle appear below page actions
Bug: T217197
Change-Id: I6582db82ac750783dffa5612c9a0b3ccc86749a1
2019-07-30 09:59:58 -07:00
jdlrobson f0503a52d0 Refresh the user, bell and search icon
* New module skins.minerva.icons.wikimedia provides icons
from Wikimedia UI in Minerva
* search selector in skins.minerva.content.styles.images is
retained for cached HTML
* skins.minerva.icons.loggedin now a
ResourceLoaderOOUIIconPackModule and bell removed from repo.
* userAvatar replaced with userAvatarOutline

Bug: T224070
Change-Id: Ibed609371060acc4b69e5cd4cd4f20edc871b3ba
2019-07-25 16:35:01 +00:00
Stephen Niedzielski 0a4f5b6126 [UI] [new] add user menu
Add new user menu. The changes required include:

- Break up AuthMenuEntry into reusable components. They're now simple,
  independent, static functions in AuthUtil that are easy to reason
  about and compose.

  There's lots of verbose code because of the builder and director
  patterns. That is, most of the code is for building the thing we
  actually want to build instead of just building it. It's easy to write
  but no fun to read--even simple configurations are extremely verbose
  expressions that must be threaded through the system.

  These builders are also single purpose and unlikely to be reusable
  unlike a URI builder, for example. As objects, they're not especially
  composable either.

- Similarly, break up Menu/DefaultBuilder into BuilderUtil and ban
  inheritance. Inheritance has not worked well on the frontend of
  MobileFrontend. I don't think it's going to work well here. E.g., I
  could have made changes to the base class' getPersonalTools() method
  such that the client passes a parameter for the advanced config or
  maybe I just override it in the subclass. In either case, I think it
  makes the whole hierarchy nuanced and harder to reason about for
  something that should be simple.

- Add ProfileMenuEntry and LogOutMenuEntry for the user menu.

- Rename insertLogInOutMenuItem() to insertAuthMenuItem() which matches
  the entry name, AuthMenuEntry.

- Extension:SandboxLink is needed to display the sandbox link in the
  user menu.

- Performance note: the toolbar is now processed in MinervaTemplate,
  which corresponds to removing the buildPersonalUrls() override.

- To mimic the design of main menu, the following steps would be
  necessary:

  1. Create a user/Default and user/Advanced user menu builder and also
     a user/IBuilder interface.
  2. Create a user/Director.
  3. Create a service entry for Minerva.Menu.UserDirector in
     ServiceWiring. The Director is actually powerless and doesn't get
     to make any decisions--the appropriate builder is passed in from
     ServiceWiring which checks the mode.
  4. Access the service in SkinMinerva to set a userMenuHTML data member
     on the Minerva QuickTemplate.
  5. In MinervaTemplate, access the userMenuHTML QuickTemplate member
     and do the usual song and dance of inflating a Mustache template.

  This patch does everything except add a service, which was agreed to
  be unnecessary, so that logic is now in SkinMinerva.

- Wrap the existing echo user notifications button and new user menu
  button in a nav element. This seems like a semantic improvement.

- The existing styling and logic for the search bar and search overlay
  are pretty messy and delicate. Changes made to that LESS endeavored to
  be surgical. There's lots of room for improvement in the toolbar but
  it's out of scope.

- Rename logout icon to logOut.

Bug: T214540
Change-Id: Ib517864fcf4e4d611e05525a6358ee6662fe4e05
2019-07-24 18:24:07 +00:00
Jan Drewniak 8ae59453de Reduce margin below article/discussion tabs.
Bug: T225230
Change-Id: I318848d8e47b0a7d4f47946a1f2ae22a5c7878bb
2019-07-22 13:42:12 +02:00
Bartosz Dziewoński 1fed815868 Allow .transparent-shield styles for navigation to be reused
Define the color etc. in the base styles, so that other drawers will
not have to redefine them to display the shield.

Bug: T214049
Change-Id: Ife957374cb0d21446db2067171e68fb726ad8347
2019-07-17 23:32:37 +02:00
jenkins-bot e6b4f4f2b2 Merge "Make sure lazy loaded images display in printed PDFs" 2019-07-16 23:39:27 +00:00
Piotr Miazga dee1c197b9 On user pages, move language icon from Toolbar to Overflow menu
The Language icon is not useful on user pages as most probably there
are no translated user pages, thus there is no need to show all-time
disabled Language icon.

If overflow menu is available, don't show Language switcher icon in
toolbar, show it as first item in the overflow menu.

Bug: T224735
Follow-Up: I46d58758356e870c408a74b2c087a42d6ad0ddea
Change-Id: I05be9e6457257a1f2eb224ca9ec5808814bc9ed7
2019-07-16 17:51:11 +00:00
jdlrobson d996008e9a Make sure lazy loaded images display in printed PDFs
The CSS animation will never complete in print media so will not display
in PDF rendering. A note is added to explain this rule.

Bug: T220668
Change-Id: I82260fa4e18a13970243d3cb2fc585aefb3c1d09
2019-07-09 10:50:46 -07:00
Stephen Niedzielski edb4385345 Hygiene: extract ToggleList to a reusable component
A list that toggles visibility via the checkbox hack is needed in at
least two spots: the page actions overflow menu and the user menu. This
patch makes several refactors to turn what was previously hardcoded into
page actions a reusable component:

- Start a new components directory. Components are reusable and
  composable. The subdirectories are organized by function, not
  ResourceLoader module bundling which greatly improves the ability to
  see a component's full functionality in one directory instead of
  examining the entire codebase. See updates to README.

- Extract pageactions.less into:
  - ToggleList.less: LESS for any checkbox hack list.
  - DropDownList.less: LESS for lists that open downwards.
  - MenuListItem.less: LESS for list items of menus.
  The division makes it easier to see concerns, dependencies, and change
  code.

- Move pageActionMenu.mustache to a component and extract ToggleList
  template.

- Extract ToggleList.js from Toolbar.js.

Bug: T214540
Change-Id: I171831469a6733c458bc5c7ba249a5096ca975b8
2019-07-04 13:48:13 -06:00
jenkins-bot 17b821861a Merge "Fix: AMC overflow menu initial CSS and SSR icons" 2019-05-01 21:06:18 +00:00
Stephen Niedzielski b594daf8c8 Fix: AMC overflow menu initial CSS and SSR icons
When advanced mobile contributions is enabled and the overflow menu is
shown:

- The initial state should have no transition. This prevents the menu
  from flickering initially. Move the transition to the checked state
  only.

- The icons should be available for server-side rendered HTML without
  JavaScript. Add wikimedia.ui to the SSR modules.

Bug: T216418#5129152
Change-Id: I3b91f6cdefd4b727c2fb512272d8c4282af632bf
2019-05-01 09:29:50 -06:00
Volker E e562227392 Remove ol overrides to ensure list styles in non-Arabic number scripts
Bug: T205341
Bug: T217616
Change-Id: I66a677ab5d7ea4555d16d5761340eaad4158c3bc
2019-04-29 21:53:15 +02:00
Stephen Niedzielski 815f3386e3 Update: add secondary page actions submenu in AMC mode
When advanced mobile contributions mode is enabled and
`$wgMinervaOverflowInPageActions` is set, show a secondary overflow menu
on main namespace articles and user namespace pages. The menu content
varies for each namespace. The new submenu is *disabled* by default,
even when AMC is active. This feature should not be deployed until
instrumentation is available.

The secondary menu is rendered in PHP using the existing menu system
with some changes to the template. The checkbox hack is needed for no-
JavaScript keyboard navigation until :focus-within is supported. CSS
additions are documented in the source.

All client side toolbar execution occurs in Toolbar.js. Enhancements are
documented in the source.

Minor changes to the existing download button:
- Move download and edit button initialization to Toolbar.
- Update copy (not visible) from "Download" to "Download PDF".
- When the overflow menu is present, use the "hasText" / label style.

Wikimedia UI icons are copied from OOUI at d00a0ac and seem useful to
expose as HTTP URIs (not data URIs).

The overflow menu does not show for pages provided by the content proxy
since its entries depend on $tpl->data['nav_urls'] being populated.

Bug: T216418
Depends-On: I0781151a8232b6a7b52f79a34298afcecb8e4271
Change-Id: I4b50a0e519024a7ab91dae6ab40b23cf14a03861
2019-04-19 14:51:17 +00:00
Jan Drewniak 7821b1499c Removing code related to old page-action menu markup
Bug: T218653
Change-Id: Ifafe86f36be59fc22bb02c42b3ff12509c67b53d
2019-04-10 22:31:14 +02:00
jenkins-bot 381170d00e Merge "Provide focus styles only in overlay" 2019-04-04 10:17:46 +00:00
Volker E 1c2a354a78 Provide focus styles only in overlay
Preventing double transition in search input focus by limiting styles
only to non-JS or when JavaScript enabled to the overlay.
Also introducing standard transition to smoothen it further.

Bug: T218154
Change-Id: I2344bfc7c4edc1941119565d7b113788e8713624
2019-04-03 19:46:53 -07:00
Volker E 681a752f29 Remove .background-size() mixin usage
Removing deprecated LESS `.background-size()` mixin calls.
Also
- simplifying code, where second (height) value is automatically set
  to `auto` when only one value is set and
- removing stylelint rule.

Bug: T219956
Change-Id: I643c66b3067ba77726d76cbebf7550781e18aa5d
2019-04-03 18:02:48 -07:00
jenkins-bot a03ced4677 Merge "Add default focus treatment to search" 2019-03-29 16:27:07 +00:00
Volker E e75b3dfa37 Add default focus treatment to search
Bug: T218154
Depends-on: I73505c1d180f157939493883d50a4440a66ae995
Change-Id: I187f20d9ec7847b17a19be59e87a574d813a3a10
2019-03-28 15:09:54 -07:00
jenkins-bot dddb34dfdc Merge "Remove Nokia60 override and use a CSS property order" 2019-03-16 00:35:06 +00:00
Jan Drewniak d153d78f46 Ensure page-actions icons are display:block
The technique used to hide the text in the .wm-ui-icon-element
(i.e. negative text-indent) depends on the icon container being
display block. This ensures that it is.

Bug: T218182
Change-Id: If68099c63023f878128dcedda38963f617a5c717
2019-03-13 22:09:39 +00:00
Volker E d119da1835 Remove Nokia60 override and use a CSS property order
Additionally grouping CSS properties properly for better
readability.

Bug: T218154
Change-Id: Ib174605d123b61180848506b750520822fb7f6fb
2019-03-12 14:11:15 -07:00
Jan Drewniak 69511f16b6 Add history icon to page actions menu for AMC mode
Bug: T213352
Change-Id: I6ba11c5969e03bf71fb891558fde68215e978083
2019-03-07 00:45:53 +00:00
jenkins-bot 566178d8ba Merge "Move html and body styles to 'ui.less'" 2019-03-06 23:20:33 +00:00
Volker E 4a7bd78d8b Move html and body styles to 'ui.less'
Moving reset properties
- `font-family` and
- `font-size`

and opinionated
- `margin`
to ui.less.

All other properties from 'reset.less' don't apply to those elements.

Also
- consolidating body `background-color` and `color` in 'ui.less' and
- moving `html` affecting property there as well.

Bug: T205341
Bug: T217621
Change-Id: I4c545da76e6fdebced41e6e7e6eb89e4d97a8b24
2019-03-05 16:38:20 -08:00
Volker E 454eb6dcf4 Move main normalization to explicit selector
Change-Id: I8904bd531e14ee0bfcd7c057637fbea89c75d446
2019-03-04 19:51:15 -08:00
Jan Drewniak 864a1766a7 Refactor pageActions menu to accommodate AMC mode
This patch refactors the markup and JS associated with the page actions
menu in order to achieve greater flexibility in its presentation.
The menu items are now positioned via flexbox and rendered using a mustache
template in PHP.

The goal of this refactor is to accommodate both AMC mode and default
mode with the same markup. No changes should be visible for non-AMC
users with this refactor. No changes to AMC mode have been made in this
patch either.

This patch includes temporary workarounds to avoid problems caused by HTML caching.

Changes include:
- Changing the data structure of the page_actions property in SkinMinerva.php
- Passing that modified data structure into a new mustache template, PageActionMenu.mustache
- Adding new CSS for the new page actions menu HTML
- changing the query selectors in JS to match the new markup
- Making the JS-modified page-actions compatible with the new markup
- Keeping existing CSS and JS to avoid breaking cached HTML

Bug: T213352
Depends-On: I95cf726c4b6d8c3895a26aa6e07f4b1747ee30fe
Change-Id: I5a7d73b20617cb3c6d6379084ac4bea23ec3bc74
2019-02-28 12:31:57 +01:00
Jan Drewniak dce28f061b Adds a CSS rule for <main> element to support IE11 and under.
Bug: T207618
Change-Id: I7d750a82129559bd70500b77f4462938f95d34a1
2019-02-25 20:36:50 +00:00
Jan Drewniak f92b117158 Remove margin from tagline and add .page-heading element
Even though on most pages the tagline is empty, it still
has a bottom margin associated with it. This patch moves
that bottom margin into a container element that wraps
both the h1 and tagline.

This approach allows us to remove the bottom-margin from the tagline
as well as the top-margin from the AMC tabs in favour of just
one bottom margin on the .page-heading element.

Bug: T214195

Change-Id: I67d3938ab4a75f994acc28a8eefdf19e531c1f3d
2019-02-19 12:37:27 +01:00
jdlrobson 44ed0f5e69 Talk tab select should sit on top of page actions
Per design review with Alex.

Bug: T212216
Change-Id: Id4e1f5167c50a8d75a0682c4e8ed219c36b93be3
2019-02-13 11:42:15 -08:00
jdlrobson 577b72a14d Remove backwards compatible CSS
This is no longer needed when Varnish cache has cleared (About a
week from I7e989a3d4553eb3357598a5cad3ccebf51dc9fae being deployed

Bug: T212216
Change-Id: I1afb68f68cc90d89c442907426bd046ddc68f488
2019-02-12 17:40:49 -08:00
jdlrobson 7e423c07b7 Talk tabs in AMC mode
A new feature/skin option is added that is enabled safely inside
a MobileFrontend available/unavailable hook that changes the skin
to place talk tabs at the top of the page.

These new talk tabs purposely show on the main page, user page
and standard pages and do not show on special pages.


Depends-On: Ie1a583657176acc6f7046c569c2e94fa2f72ff93
Bug: T212216
Change-Id: I57b70cd325666a287678dc897159b5bf9d089b78
2019-02-13 00:02:35 +00:00
Ed Sanders 023364caa1 Make section edit icons display:block, predictable height
Previously they had an extra few pixels caused by line-height.
This makes some heading levels slightly shorter, but heading
heights more predictable.

Change-Id: I25cb1f39ab6c80bf9f318de18339e716156c9a2b
2019-02-11 23:19:56 +01:00
jdlrobson 95b139d756 page actions is no longer position absolute
This was causing lots of problems with the AMC design and seems
unnecessary. It dates back to tablet support added in
I14c8182473c9508ffc38a8d5baf114bcb016a35f in 2014. This no longer
appears to be needed for tablet.

Changing the HTML means we need to be careful about Varnish cached
HTML with new styles. To avoid UI regressions we use a new temporary
class heading-holding--new which will be removed as soon as possible.
The no-page-actions modifier is no longer needed given the new heading
holder doesn't care what's inside it.

Bug: T212216
Change-Id: I7e989a3d4553eb3357598a5cad3ccebf51dc9fae
2019-02-07 12:16:14 -08:00
jdlrobson d305a29db8 Do not capitalize wikidata descriptions
Many languages have no concept of capitalisation so messing with
user input is problematic. Trust editors to do the right thing and
if not, fix it on wiki.

Bug: T131013
Change-Id: Iebdb7b78fdaa31a6daf8f52077c079672ef4ff5a
2019-01-25 22:47:27 +00:00
jdlrobson 4d734942c5 Remove large bottom margin at top of main page
Main pages do not have page actions, yet the header always adds
bottom padding to compensate for the fact that page actions are
absolutely positioned.

a new class is added adopting BEM notation that informs the client
that no page actions are going to be visible. In conjuction to this
we strip the relevant HTML from the DOM.

Bug: T212216
Change-Id: Ib69991e91160ba7e2ca3beca4475c2a06c4b9cd3
2019-01-23 12:10:06 -07:00
jdlrobson 24b1e7d54d Hygiene: Merge skins.minerva.base.reset into skins.minerva.base.styles
No need for 2 modules that are both loaded on every page load
Provided consumers are loading skins.minerva.base.styles they will
continue to get the same CSS. If any consumers exist that load
skins.minerva.base.reset but not skins.minerva.base.styles they will
need to use their own css reset file
(e.g. https://meyerweb.com/eric/tools/css/reset/)

Change-Id: I599e6d5a84b311cb3bb2da197da1b688e0e6b9d4
2019-01-15 12:30:32 -08:00
Volker E f0608db19a build: Update 'stylelint-config-wikimedia' to v0.5.0 and make pass
Updates code comments and whitespacing.

Change-Id: If7665beaa2d342881483fd7a9fc0fc880768d2ef
2018-12-12 23:26:48 +00:00
jenkins-bot 5a4d8daa32 Merge "Cleanup unused page actions CSS" 2018-10-23 20:09:41 +00:00
jenkins-bot 885092114b Merge "Watchstar is accessible to non-js users" 2018-10-23 20:09:40 +00:00
jdlrobson 1326f7be69 Cleanup unused page actions CSS
Depends-On: I06ef42cb1461fde7ca0aa903f174c3b1f39ab154
Bug: T196893
Change-Id: Iccde86c7acc0bd66bbad9a9fdc0fdf172576f872
2018-10-22 17:39:25 +00:00
jdlrobson aa6a2dda4c Watchstar is accessible to non-js users
Bug: T196893
Change-Id: I5dbd164ba68e6c74e80f8bcf90819a526cda5a5e
2018-10-19 11:00:19 -07:00
Volker E 4496292268 Hygiene: Remove 'blockquotes.less' in print and screen
There's no reason to have this as separate style file in content.styles
as common text styles are taken care of in 'text.less' and
'print/articles.less' for print. Moving contents rule there.

Change-Id: Ie613d95488e9b5a814b6be8f0c856e9e92ab5aed
2018-10-17 08:25:30 -07:00
Stephen Niedzielski a905b1c161 Hygiene: replace header and content divs
- Replace the header div with a header element and the content div with
  a main element. main and header elements are already shivved:
  https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/22dd581f10/resources/lib/html5shiv/html5shiv.js#234.

- Link the wiki header title / logo to the main page. Note: the link
  border around images is already omitted. The link is identical to the
  menu home button.

Bug: T198947
Change-Id: Id312638d86179e75bc670e72e5943f8c00232bbb
2018-08-10 20:44:14 +00:00
jenkins-bot 68d1bc61f6 Merge "Limit editor text area styles to where they are needed" 2018-07-26 23:28:55 +00:00
jdlrobson c7cb4ecee0 Limit editor text area styles to where they are needed
Currently we load textarea styles across all pages. However, in practice
textareas only show up in the edit page and inside our JavaScript overlays

To avoid loading these styles as rendering blocking CSS

Additional changes:
* Drop css reset for textarea so that textareas where unstyled
have sensible defaults. Note given the usage of OOUI and MediaWiki UI
this should be minimal/no disruption.
* For consistency intentionally change the padding of the non-js editor
to be consistent with other textareas
* The padding-left/padding-right rules currently override the default rule
so consolidate them into one single rule

Note:
* This will not break non-JavaScript editor mode as the module
mediawiki.action.edit.styles is loaded on that page as a render blocking
style.

Bug: T199000
Depends-On: I1ab170fc4089b0c8129a3e62ee78efad1c6709fa
Change-Id: I91743fdf1942a1b1b750422e973bf98fc4d106db
2018-07-26 10:35:16 +08:00
jdlrobson a3efca1582 Remove unnecessary skins.minerva.base.styles
* truncated-text is only used in MainMenu, last modified bar,
 a few special pages
Making this a mixin and limiting it to mobile.startup skinStyles
and mobile.special.styles thus makes sense
* cloaked-element is only ever added by Skin.js in mobile.startup
* position-fixed is only ever added by Skin.js

Change-Id: Iaf7061e9dda87eb25c963f8a281175af08f358e5
2018-07-26 01:18:00 +00:00
jdlrobson 8351c88c50 Move overlay-header styles to Overlay
.header > form matches no element on the page
all other selectors are linked to the mobile Overlay so should
be shipped along with those styles.

Remove .header-action rule, given that header-action's only appear
inside Overlays (Editor, Category and Talk)

A more generic rule already exists (.overlay .header-action > *)
for overlays that sets the min-height

Change-Id: I114fe80e50bb833e9e6bb0fb6b13c2e929244ddf
2018-07-25 02:45:34 +00:00
jenkins-bot 65728feb27 Merge "Don't ship 2 magnifying glass icons" 2018-07-24 18:14:19 +00:00
jdlrobson 775af007f0 Don't ship 2 magnifying glass icons
We already make use of the images 'name' key inside
skins.minerva.content.styles.images to define the full
CSS selector. We can use this approach to ship a single version of
the magnifying glass icon, rather than having 2 defined in both
skins.minerva.base.styles and skins.minerva.icons.images

Change-Id: Ie5ec06152c418c4aa1b620b3d0a904cc9517e5d0
2018-07-24 11:55:41 -06:00
jdlrobson fcaf244cc4 Hygiene: lazy loading animations do not need to be render blocking
The transition only happens when images are loaded via JavaScript
so limit the styles to a file loaded via JS NOT render blocking
CSS

Change-Id: I56661db13e7fbb400a05b13c369d8598df449297
2018-07-23 13:57:42 -05:00
jdlrobson 70e4e9e85a Cleanup: Last modified active color should be loaded via JS
.active class is added via JS by skins.minerva.scripts
skins.minerva.base.styles is loaded as render blocking
Thus this css rule can be moved safely to a non-render blocking place

Change-Id: Ie8bab826ebc0785e24bb85600de261372c429434
2018-07-10 22:45:24 +00:00
jdlrobson 795c0abf06 Hygiene: Document why selectors are needed
This rule has a lot of selectors (note the fix me)
It's not clear what each of them are needed for so make that
clearer in the code.

Change-Id: I80f07118977f465b7d09efad28f94917dd962a3d
2018-07-05 23:54:52 +00:00
Stephen Niedzielski 0b043fbaa7 Fix: don't truncate the article title
Header overflow was truncated in MobileFrontend commit 1655d5233 which
added the language switcher button that appears below the title. This no
longer appears to be required even for articles with lengthy titles.
Perhaps because the language switcher button exceeds the page content
margin, it was thought to be necessary.

Bug: T194544
Change-Id: I4e25e7b03df65803cd553b412881eb565ded9b10
2018-06-13 13:51:44 -05:00
Timo Tijhof 64134bd8a6 Remove minerva.less from global import path
Use local imports instead given all relevant files are within the
same repository, and don't vary by configuraion.

Bug: T140807
Depends-On: If3edac9a35b346af0320c12f70c0d978a6346201
Change-Id: Ife3cc345a63aff452e93accbe0a593fbaa358732
2018-05-29 12:19:00 +00:00
jdlrobson ddc1e2a30d Content area needs a z-index
The content area is the sibling of the overlay.
For the overlay to overlay it and its children it
must explicitly setting a z-index

additional changes:
* Move UI styles from skins.minerva.mainMenu.styles
to their more logical place (note skins.minerva.mainMenu.styles
is loaded via JavaScript unncessarily)

Bug: T193444
Depends-On: I7c0d02f073a2fe165a6027e3c6d1455e22c1b563
Change-Id: I8be31c7daf254e22ccaed81704cbcd2b638c54f6
2018-05-03 18:01:51 +00:00
Jan Drewniak 0374ef64a0 Display content beside infobox instead of below.
Removing CSS rules that that push content below infoboxes.

Bug: T189688
Change-Id: I59736720b36f251c49a27a2dd7f5343d58629992
2018-04-30 17:33:08 +00:00
jdlrobson 026b1ff305 Remove unused CSS code
Remove:
* no-edit-js
* .content_block

Document existence of Parsoid selector
* mw-ref

Change-Id: I0cb695dd437f9e070d57adf60170788dd2047137
2018-04-25 15:16:05 -07:00
jenkins-bot 612f9b4357 Merge "Only load notification icon (bell) CSS for logged in users" 2018-04-12 16:54:29 +00:00
jdlrobson 2e453edd23 Only load notification icon (bell) CSS for logged in users
* The notification-count style is only needed if you are logged
in. Given a small percentage of our users are logged in, we
load a lot of render blocking css unnecessarily.
* The bell icon is not needed for anonymous users so pull that
out from skins.minerva.icons.images which is loaded for all users
into a module only used by logged in users (skins.minerva.icons.loggedin)
* Simplify the user-button rule - it is overly specific - probably for
historic reasons.

Additional changes:
* Simplify isAuthenticated helper

Change-Id: Ia72e7e45d276e8aac1ff5471bf6158705c7b5f99
2018-04-12 09:27:01 -07:00
jdlrobson f9ac17d94d Remove unused css rules
* language-selector can only appear in secondary actions so only
load rule on Main page
* .no-js-only not used in MobileFrontend or Minerva
* Remove last-modified-bar rules from ui.less that are repeated
inside footer less file
* #mw-mf-last-modified id is no longer used post-footer rewrite
* CSS rules for .mw-mf-banner are defined in Zero extension
* mw-mf-image-replacement is no longer needed after we turned off
the option to disable images in the mobile site

Change-Id: I7abdbac4d2d16b931e2b110fcebf0dfc82146753
2018-04-12 09:24:44 -07:00
jenkins-bot 1648c7752e Merge "multi-line, two-line and mw-ui-button-group only loaded where needed" 2018-04-12 15:57:46 +00:00
jdlrobson d228b2cbd7 multi-line, two-line and mw-ui-button-group only loaded where needed
The only usage of mw-ui-button is inside the SpecialMobileWatchList
class in MobileFrontend. Thus we needlessly load as
a render blocking CSS on all page views

multi-line and two-line are likewise only used inside
MobileSpecialPageFeed.php

mobile.special.styles is loaded on all Special pages
so let's load this instead here. This also allows us to use
the element on other special pages in future.

Change-Id: I2b363543d0356a18194a9d08922428a6cb944797
2018-04-11 21:50:53 +00:00
jdlrobson 19ceaea732 span.mw-ui-icon is defined in core
Depends-On: I3d1ed6e4a165f48244e760752342c712047a07d8
Change-Id: Ifc576bbb6ec461ed30b01ae27f02620fdf8105c1
2018-04-11 13:50:03 -07:00
Ed Sanders f4658a4d0e Fixes for action=edit page styling
* Use box-sizing:border-box when adding textarea padding - before
the right side of the textarea did not align with the right side of
the bell icon. Now it does.
* Fix specificity of rule hiding cancel link and "editing help" which
appear at the bottom of the form.
* Fix height of noJS textarea (70vh)
* Remove some unnecessary extra margins and padding (the minor edit
and watch this page checkboxes will now show on the same line)
* Update specificity for oo-ui-fieldLayout-body so that it does not
apply to the summary form.

Change-Id: I8d3d61fdc51934a6ef0885cde94dac1e8c5e33ca
2018-04-05 23:13:49 +00:00
jdlrobson 8dad1703af Special handling for links without href attribute
The link change overrides link colors in last modified,
talk button and main menu. This approach was obviously flawed.

Rather than enter a specificity
war let's instead limit the styles to links which do not have
an href. Volker you were right...

* Revert "Last modified links should not be progressive blue"
This reverts commit bc045b78a2.
* Revert "Do not style links without href attribute"
This reverts commit daa6ad5145.
* Apply a not selector for links

Certain links (including links inside navboxes) render
links to themselves - for example the navbox on the San
Francisco article (provided it is not removed by
wgMFRemovableClasses)

These links should be visually distinguished from normal links.
The not selector has support from IE9 onwards and given our browser
matrix and the low impact of if this fallback fails this is a perfectly
acceptable usecase.

Bug: T181472

Change-Id: I61b05e3c223f2ba5314aecdf26b8a0ee8caa6524
2018-03-29 15:58:09 -07:00
jdlrobson bc045b78a2 Last modified links should not be progressive blue
This regression was due to I9f842ae09751d299716d752328f747269597fbdb
Updated specifity of selector.

Additional change:
* Update comment per feedback from TheDj

Bug: T181472
Change-Id: I9534cce5f240009c9013b75e1367776519b00d81
2018-03-28 19:00:35 +00:00
Volker E 759590873b Replace #toc selector by .toc
Replacing id CSS selector by lower specific class selector.

Bug: T187808
Depends-on: I7f3a9df7f9fd1178986112b5265b1ae7c991d5b7
Change-Id: Ib1a874b644e80a26ff415003684f6ce54fd2b7e6
2018-03-20 01:49:43 +00:00
jdlrobson 0100dc33a4 CSS tweaks to issue overlay
* Remove CSS rule updating the padding of issue-notice
(this is no longer necessary after
I1b880c46fa3debfc5b68d8b416ca642cca98ce7e which defines its own padding
for the element)
* Overlay title is updated to read "Page issues"

Bug: T187916
Change-Id: I7e41d6f03c4cf9fa7563f2f608eec5be89c04a31
2018-03-14 17:54:50 +00:00
jdlrobson 4389b67989 Explicitly use LESS variable for breakpoint defined in mediawiki ui
$wgResourceLoaderLESSVars is deprecated. Let's not use it anymore.

Change-Id: If28ab6884668700bc46533c8e2c377f17e6be696
Depends-On: Ib9f843147db4473ce5590741e0fb490384b0007e
Bug: T171365
2018-02-06 22:23:32 +00:00
jdlrobson 3047f3e0fa Merge remote-tracking branch 'gerrit/master' into specialpages
Change-Id: I1bc48ac546865f515df65e9d7f0c75e7f5c6d684
2018-02-01 11:35:11 -08:00
Alangi Derick 3c81e0c717 Remove horizontal line from popups preview in MinervaNeue skin
A horizontal line shows in popup previews in the MinervaNeue skin
just above the setting icon due to a css rule that affect all footer
elements. Removing this effect to apply only for the MN skin.

Bug: T184560
Change-Id: Idb0c40c3fc24e4ec2d32cb2de9520952448da77a
2018-01-30 20:06:42 +01:00
jdlrobson 6598c1e7c3 Merge branch 'master' into HEAD
Change-Id: I220fbc57ee20d2a6717b39dba809401de2207ce0
2018-01-02 13:21:27 -08:00
jdlrobson 1146cef6b1 Optimise Special:MobileOptions for tablet display
Bug: T180095
Change-Id: I0ef0ce914a360848f8f66b39c40588f3fa04647c
2017-12-05 14:20:11 -08:00
jdlrobson c986db6c0e Always render taglines unconditionally and update styles
Adjust tagline margin per Nirzar:
https://phabricator.wikimedia.org/T180095#3801719

Note, this will  enable the tagline everywhere.

Change-Id: I3bce2a3472ab2e53261965c953572f35cc740eed
Bug: T180095
2017-12-05 00:27:11 +00:00
Volker E eaeea5dd5e Replace unique color with standard subtle print color
Replacing `#9aa0a7` with standard subtle `#999` print color.
Also clarfiying LESS variable naming and removing unused variable
`@printBorderColorLight`.

Change-Id: I2c1b36099935aa99d63a3316b3a107a23ffa0afd
2017-11-30 17:44:25 +00:00
jdlrobson b6e91de90e Pages with only forms should take up entire page
On Special:MobileOptions we want to make the form take up the full
width but pad the fields in the form
(per https://phabricator.wikimedia.org/T180095#3795514)

This change is harmless but is necessary as soon as we port
the page to OOjs UI (I70f68df9d2d305126444319b05675702af75de87)

Bug: T180095
Change-Id: I1dda3eb4d0e7ebbec544dc0f5763b079e38f5cc8
2017-11-29 19:58:09 +00:00
Volker E 8497d6d259 Unify SVG markup
Align SVG markup across Foundation products by:
- unifying XML declaration,
- adding `width` and `height` attributes where missing,
- removing all unnecessary `g` group elements where applicable,
- putting attributes in order,
- removing unnecessary ids and
- unifying whitespace.

Bug: T178867
Change-Id: I6860c9259553e0e41f7656f9e98534db8e02bbc2
2017-11-14 21:44:40 +00:00
jdlrobson 14ddb0a742 Restrict footer styles to skin footer
The Popups extension uses a footer element so these rules clash with
that and probably other extensions.

To avoid this restrict the element to the skin.

Change-Id: Iac3aa8e600969a0feb0abeee745cd26592a594fd
2017-11-10 20:06:03 -08:00
jdlrobson a7ab80335a Reveal edit icon and style top level headings on desktop Minerva
Bug: T179356
Change-Id: I414040658eeb8a24d41f6496dd634ef47e3e9952
2017-11-01 18:54:44 +00:00
jdlrobson 006dfaaa12 Hide table of contents temporarily on Minerva desktop
Currently appears unstyled, so in lieu of some styles it would be
better to hide that for the time being and revisit later.

Change-Id: If0f4f02868b1344746affcec5116c325c612d145
2017-10-30 18:11:32 -07:00
jdlrobson 88a0baeb6d Hlist tweaks (size and color)
* Font size should be relative to context
* Only apply linkColor to links in footer

Bug: T169315
Change-Id: Ibb25d8b63e4efaf8b2bc4c28e3bac95a6a16db86
2017-10-09 16:40:01 +00:00
jdlrobson 734ac36f1e Correct feature phone threshold detection
max-width should actually be one smaller than the threshold

Additional changes:
* Also rename to  @width-breakpoint-mobile and
rename @width-breakpoint-desktop for desktop variable in
anticipation of T171365

Bug: T176286
Change-Id: Ia37bceb46a6b780f473828ff38749543bdfcc9f6
2017-10-04 13:51:19 -07:00
jdlrobson c323c6858a Hygiene: Merge skins.minerva.print.styles with skins.minerva.base.styles
We no longer need to keep this as a separate entry point now we do not
feature flag our print styles

Please enter the commit message for your changes. Lines starting

Change-Id: I6bf12980aa929e84f239931beb0a505809231830
2017-08-31 19:09:03 +00:00
jdlrobson 79fd8bd799 Hygiene: Remove FIXMEs now enough time has passed
Routine maintenance - all FIXME statements suggest these can
be removed. W00t!

Depends-On: Iee059a6605cf12a073954378f49ddc721a7e016a
Change-Id: I645dca1fa4d9e80d506e907b0be78a5aef0e2f12
2017-08-29 19:26:13 +00:00
jenkins-bot 0591987137 Merge "Align SVGs to color palette and optimize" 2017-08-28 15:01:50 +00:00
Volker E a75c7fd257 Align SVGs to color palette and optimize
Aligning remaining SVGs to WikimediaUI color palette.
Also:
 - Aligning markup to each other, among others adding XML declaration
   throughout or removing unnecessary `standalone=no` attribute.
 - Optimizing with SVGO without prettified markup. Savings of up to
   17% of file size.

Bug: T146799
Bug: T172850
Change-Id: I54a21932fd5df64b7716ac66a90de5af73776c23
2017-08-25 12:55:37 -07:00
jdlrobson d59a65d133 Hide last modified text in footer
This repeats information in the last modified BAR

Bug: T173545
Change-Id: I75e07dfb08b12169cc4215995aa259b731ec2ad8
2017-08-25 15:42:48 +00:00
Volker E f08b6defd7 Replace abandoned @colorGray13 with current WikimediaUI one
Replacing abandoned `@colorGray13` (`#ddd`) with
appropriate variable `colorGray12` (`#c8ccd1`) from WikimediaUI
color palette, which is used for borders elsewhere.

Bug: T146799
Bug: T172850
Change-Id: Id529d79901aab32d30e2b50820b59a84bd9b3693
2017-08-17 15:04:07 -07:00
Volker E 875d31b03b Hygiene: Remove unnecessary Less vars
Removing unnecessary Less vars, which are not in use any more.
Also slightly modifying code comment for better code style.

Change-Id: I6e2417561afb03225eaca99ea93135f975a51593
2017-08-16 18:13:09 +00:00
Baha 97b2ddfa11 Remove first heading padding
The page actions have been brought down to the next line for all screen sizes
in Ie9ba7df0a0f052948d46b6a9b14a3bbcef2b99fe. There's no need to reserve the
space now.

Bug: T171608
Change-Id: I24d54124049895eee38da8de553b7dc15976235a
2017-08-16 11:56:59 -04:00
Baha bea5dbde62 Don't float article actions on tablets
Bug: T171608
Change-Id: Ie9ba7df0a0f052948d46b6a9b14a3bbcef2b99fe
2017-08-14 12:43:34 -04:00
Volker E b3e0ce2bae Replace abandoned color with current WikimediaUI one
Replacing abandoned `@colorGray13` (`#ddd`) with
appropriate variable from WikimediaUI color palette and
remove unneeded `@chromeContentSeparator` var, which is
just used once and not in place with `.header` anyways.

Additional changes:
* Also aligning `border` values to each other.

Bug: T146799
Bug: T172850
Change-Id: Ia9a1736b1ea5fa080b4673038b2c23ddce90f135
2017-08-10 18:06:24 +00:00
Derk-Jan Hartman 56d16e894b Make sure that all buttons in the actions area have pointer
Also include a elements here, as a elements without href, as is used
in some places in Minerva, does not have a pointer by default.

Bug: T145493
Change-Id: I08d9176e55ec298c9d423d391b6fb4ed5e9df5e7
2017-08-10 09:32:04 -04:00
Volker E f4aaea0401 Replace @colorGray6 with appropriate WikimediaUI palette color
Replacing `@colorGray6` with appropriate closest color (semantic variable)
with slightly increased contrast.

Bug: T146799
Change-Id: I067973dca580eddc09b770362183d7a5b1634b7c
2017-08-08 11:29:30 +02:00
Piotr Miazga a0e390a9e5 Show cursor:text when pointing over search input
Changes:
 -  added styles pointer:text for #searchInput element

Bug: T161763
Change-Id: I39050a3e81c6b2e014f8955df188629a025ef2c1
2017-07-31 20:26:25 +02:00
Umherirrender 211a54b568 Update and run existing stylelint
stylelint is part of config, but not run by default
Also update to 0.4.1, it is the current default in many wmf extensions

Change-Id: I55f81489182628c088e362e081417514e252e6d6
2017-07-19 20:31:24 +00:00
jdlrobson 2cc9516cde Minerva is its own skin
This is programmatic output from python3 scripts/migrate.py

This will result in a Minerva skin dependent on MobileFrontend.

Post merge we will rename message keys to have minerva- prefix

Bug: T166748
Change-Id: Iff1f7e63e796cc5d4a6d2ab0370e0c33248d2fce
2017-07-12 08:12:40 -07:00