minerva.variables.less: added gray color variable
MainMenu.less: added shadow to navigation
NotificationOverlay.less: changed alpha color of shadow
drawers.less: replaced rgba color with the same color variable
Bug: T231205
Change-Id: Ib1e16804b941a8f3b0cc639673baf73dc749a60a
Following Vector and OOUI in `@font-size-root` and put it in central
file. Removing duplicated code in `html` and `body` achieving the
same thing.
Also renaming `@font-size-body-mobile` to a distinct
`@font-size-body--feature-phone` ending the confusion that it's a
variable only used at `@width-breakpoint-mobile - 1`.
Change-Id: Ie355d015d882f61c813991c3244bfcb67f161791
It dates back before MinervaNeue was its own skin in Iff1f7e63e796cc
and was probably an idea to provide a simple one-stop solution for
a typography change of font size.
It isn't very well setup for this and also provides no value as of now,
for code simplicity's sake, let's remove it.
From a design perspective, we would approach this problem differently
nowadays.
Change-Id: If43ea2590468832e135b3f654022e8b2064b06c1
Adds labels to page-actions menu via a new
`.mw-ui-icon-with-label-desktop` class that shows labels at the
desktop break-point.
Bug: T226562
Change-Id: If57ab44660e0dc2a58c04fbf22dee6c27dd1f45f
While working on I05c4e5f7a8b18a3 I've noticed the missing transition.
Also adding standard WikimediaUI variables in support of this.
Change-Id: I30c75ed306bf826ae40db3703ef423dfad85fa74
Leftover from our color changes a while ago. Use blue shade for
background like in most other products.
Change-Id: Ic6e7e7a50d5698dfcd302f5988df1327f7435976
* Add @font-size-minerva-smallest and use it in place
of font-size: 0.8em across the site so that we get a round
number for our font sizes.
Bug: T229568
Change-Id: I4270225c07941b4c164d5e044f70d4b131dbc19d
* Refactor less variables to make icon touch-area sizes flexible
* Search input is bumped up 1px to an even number
Bug: T233156
Change-Id: I156d09bfca8db9506c0e9cee21e4d6e0a2e91689
Note: this agitates T230232 again - when merging this please
make sure a merge for I929090848f3e04647a97f4979ec78682623fa070
is pending.
In various places we try to override the default mw-ui-icon behaviours
The hacks need to be removed as part of addressing the core problem.
Changes:
* Wherever we use mw-ui-icon-before in PHP - wrap the label with a span
so that label font-size is altered where needed - not the icon
* Where a small icon is needed us isSmall parameter for the Icon component
* Apply font-size to labels of mw-ui-icon-before elements
* The browser tests need a slight update to access the span element inside
a menu item - in the case of the logout button the label is always hidden,
so we need to check the visibility of the parent element (secondary_action)
Bug: T229440
Depends-On: I3f803ec4c9068b30aa93b803391aa4d65d8310ff
Change-Id: I07e4ae233979636b739f1117dd7703571e0a9366
Split @headerHeight variable into @siteHeaderHeight and @overlayHeaderHeight.
@overlayHeaderHeight is now set to 3em (48px).
Use @siteHeaderHeight for the base skin interface, and @overlayHeaderHeight
for overlays.
skinStyles/mobile.notifications.overlay/minerva.less:
* Update footer height to remain the same as header height.
skinStyles/mobile.startup/search/SearchOverlay.less:
* Use @siteHeaderHeight even though it is an overlay, because it's
supposed to exactly match the base skin interface.
Bug: T215426
Change-Id: Iaa36f581a12a8eea2b755ae583b8a2c6324ebe29
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
Split apart the extensive mainmenu.less file into a few component-like
files: MainMenu, MainMenuFooter, MainMenuItem, and NotificationsOverlay.
Two variables, @duration and @easing, were moved to minerva.variables.
The separation is imperfect as some overlap still exists but is far
better than before.
This patch is focused on division without regression. Please limit any
refactor requests.
No user visible changes intended. The only selector that was cognizantly
changed was to duplicate the drawer visibility on main menu and
notifications overlay:
// Old: mainmenu.less
.navigation-drawer,
.transparent-shield {
visibility: visible;
}
// ---
// New: MainMenu.less
#mw-mf-page-left,
.transparent-shield {
visibility: visible;
}
// New: NotifcationsOverlay.less
.navigation-enabled {
.notifications-overlay {
visibility: visible;
}
}
The is unfortunately useless. It is best to reproduce these changes
locally by renaming mainmenu.less to MainMenu.less and extract parts to
MainMenuFooter, MainMenuItem, and NotificationsOverlay LESS files until
the result matches.
Bug: T206354
Change-Id: I8d37c5346efcf39a4d76322fd6e6af3fff96ac53
Force rollback, tagmarkers and revision delete/undelete onto their
own lines without floats
Bug: T229704
Change-Id: I0727f89bf4e906def9d3cfc8af8f921d6c12c68a
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
The changeslist module is the list of results on special
pages such as recent changes, watchlist, and parts of action history.
Adds a skin style to special.changeslist module.
Bug: T228419
Change-Id: I324b1f136f5314cb6acdba3155b07136bbde363a
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
Replacing messages variables with mediawiki.ui ones to ensure following
Style Guide color treatment.
Also renaming `@colorErrorText` with new default `@colorError`.
Bug: T228022
Depends-On: I49ca4b8f510888dff7a2487470174666143bcd76
Change-Id: Iefb881ab2eec1fa0ac83b40730853d449da595f4
Styles the action=history page to resemble it's desktop
counterpart for users in AMC mode.
Bug: T219895
Change-Id: Ide359724a4628f69ef03acee7718d70c698b8faf
`@z-indexAboveContent` is a variable that places element above the
page content, but below the drawers. Initially added for the
fixed/sticky position button on the action=history page.
Bug: T219895
Change-Id: Ib773dd976221a60a0ea666c1a9a1104a0ba17613
Amending name to be equal to current CSS class naming scheme,
even if it's not perfect, for simpler maintainability.
Change-Id: Ie1f0dc26dceb92be650d827d63a62092912ac504
This provides us with a blank canvas for styling Minerva's history
page in AMC mode.
I have also provided styles for a non-AMC mode (test by changing
the class on body tag to minerva--amc-disabled). This will allow us
to remove the SpecialMobileHistory page in mobile if we choose to
do so.
Change-Id: Ic57cb79903e90ce1bbfa6d87ab0499f09373e732
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
Using Design Style Guide defined operating system font stack for
monospace fonts, to align to similar sans serif choices.
Bug: T221043
Change-Id: Ic5e2fd4d4803a830c61678aafd8411ac607dd08d
Using system font stack provides better reading experience on wider
range of operating systems and languages combinations.
Adding `fontFamilyBase` variable to easier update and clarify usage.
Bug: T175877
Change-Id: Id00fbe7ca90a3b31524c618de4441c413fe4afbe
This is no longer needed when Varnish cache has cleared (About a
week from I7e989a3d4553eb3357598a5cad3ccebf51dc9fae being deployed
Bug: T212216
Change-Id: I1afb68f68cc90d89c442907426bd046ddc68f488
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
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
There should be no visual changes in this commit.
The goal of this change is to stop using variables from
minerva.variables, and thus to be able to move this file
to mediawiki/extensions/MobileFrontend (T202978).
Bug: T202978
Change-Id: Ib4b3206f724c3e6f089e626b704dc8ff790a76ae
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
* 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
$wgResourceLoaderLESSVars is deprecated. Let's not use it anymore.
Change-Id: If28ab6884668700bc46533c8e2c377f17e6be696
Depends-On: Ib9f843147db4473ce5590741e0fb490384b0007e
Bug: T171365
Replacing `#9aa0a7` with standard subtle `#999` print color.
Also clarfiying LESS variable naming and removing unused variable
`@printBorderColorLight`.
Change-Id: I2c1b36099935aa99d63a3316b3a107a23ffa0afd
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
