Use CSS to decide whether to show the button or not. This retains the
existing logic for hiding the button on any page where the action is not
view.
Bug: T327795
Change-Id: If74246418f87c871c01cb7b2b62f6c59263bf976
The TypeaheadSearch component in Codex switched from using content-box
to border-box for the dimensions of its menu items, reducing their
height by 2px (because of the top and bottom border). Update the
height calculation for the loading indicator accordingly.
Bug: T322383
Change-Id: I5367e402fa8ac9891358bb2f7ba87584b2835a9a
Overrides the `wikibase.client.init` module to
better style the interlanguage link button in
Vector 2022.
Also adds the `.mw-list-item` class to that link
so that it maintains consistency with the other
menu list items.
Bug: T328069
Change-Id: I5c84b7f036afb4b8dc11e92a59dff8000f068e67
Only do this when JS is enabled and the Vue search (Codex
TypeaheadSearch) is going to be loaded. Without this, when viewing
Vector with an increased browser font size, Codex's icon scales up but
ours doesn't, causing the icon to grow and jump when Codex loads.
Set the icon's size in relative units (em instead of px), and change the
background position so it stays in the same place.
Change-Id: Ie0b33797f9da75dc758a8afbe58eb004d90f3776
This reverts commit 45247802db.
Reason for revert: This is causing the TOC button to become focused on page load
Change-Id: Ib3d5ca79372dd40587879cbb39846e4c9ed9eb21
No longer needed now that the underlying cause has been fixed.
This reverts commit 5bcc1597ca.
Bug: T327229
Change-Id: I69ae0634446ea546a1d221932caf3e61bebaa6d0
Depends-On: I71f1cc0d08bfd02e1a9edb6cbfd849f10f929f3c
Clicking the bolded text in the search footer didn't work. This change
fixes that by working around the underlying issue, rewriting the search
footer template to use v-html instead of v-i18n-html. I don't know
exactly know why this works, but it does. Hopefully we'll be able to
fix the underlying issue and undo this workaround in the future.
Bug: T327229
Change-Id: I5d05d6ade1a34b12163bb96aa888ed3cfee78b4d
Move feature classes to HTML element - this is significant
for anonymous as placing the classes on the body tag breaks
the browser's ability to parse the article concurrently
with the stylesheet download, because inline scripts
are spec'ed to be able to see document.styleSheets.
Changes:
* Feature classes are moved from BODY tag to HTML tag
* For now disable localStorage storage until we've worked out
the storage mechanism in core.
Bug: T321498
Change-Id: Id5afe2c60dc0067e7c74433eda5cd7858f54b0d7
In production this is always true, so remove feature flag.
Retain A/B testing code in case it is still needed.
Bug: T324799
Change-Id: Ia2057eb69d0a8d3e6e51acb5729a4399fb17a18b
Adds an extra grid area for content translation
so that it doesn't interfere with the page header
on user contribution pages.
Bug: T327715
Change-Id: I68d2c9dbe50dcdfe1924f29a96b48ab07bcc5f10
Adding 'contain: paint' to the TOC container works around the issue.
This property is intended to prevent element's rendering from
affecting other elements, so it makes sense that this works.
https://developer.mozilla.org/en-US/docs/Web/CSS/contain
Because this property also clips the rendering of the element to its
bounding box (similar to 'overflow: hidden'), we need to move some
negative margins to this element from its children, otherwise the TOC
expand/collapse arrows would be cut off.
Bug: T327460
Change-Id: I34f414a99608450882e83c0ff22e64c05dff8807
The pinnable element would cause exceptions on older versions of
Safari during the setup and the ToC menu would show instead of being
pinned and hidden.
Bug: T327602
Change-Id: I99b656d0070d3e9af5641274134736b742c28f58
Extra:
- Reactivated active list element, This still does not work if the current active gets edited.
- Removed pinning event reattach as we do not replace teh full element anymore.
Known Issues:
- Collapse/Expand not working
Bug: T326839
Change-Id: I2ce251f5312659b827ac2941d789248473bb0ef5
The media query for the CSS portion of this feature
should not include the `screen` portion because
that's included in the top-level import in skin.less.
Bug: T326364
Change-Id: I1ab0e321dde908982834c92ee428b512218bbe3d
The server-rendered input's height was using pixels instead of relative units so
it did not scale with the browser's font size. This adjusts the styles of the
server-rendered input to match the styles used by Codex. In addition, the
magnifying glass dimensions were set to pixels to match the Codex icon.
Bug: T326863
Change-Id: I6aa5b60841087dfa5b32e873e3ed21a22c37353e
Fixes this https://phabricator.wikimedia.org/F36201839, which you can see for anon users, who have an empty "Actions" menu inside the page tools dropdown
Follow-up: Ia2cba7eb60739f0af8153c6c4246aa80d2a189c0
Change-Id: I617b37fbdb7b300a4266fd9f927d81e6a63d74bc
The search box was overlapping the logo when increasing the browser's default
font size as a result of the logo's width using relative units and the column
using pixels [1]. This converts the column to use relative units so that it can
scale with the logo's width and not overlap.
[1] https://phabricator.wikimedia.org/F36201423
Bug: T326863
Change-Id: I08b54908f0f2b81ac4b8f506d4bfaea14350f399
At resolutions below 1000px, we want pinned elements
such as the Page Tools menu and Main Menu to collapse.
This behaviour is temporary and when the browser is resized,
the pinned elements should revert to their previous pinned state.
We also want to remove the ability to pin these menus at
low resolutions, so the "hide/move" button is hidden.
A new matchMedia event handler is added to PinnableElement.js
to handle this behaviour.
CSS is also added to hide the pinned menus at low resolution.
This is to account for the situation where the page is loaded
at narrow widths, with pinned elements,
and the JS hasn't loaded yet.
features.js is refactors so that class toggling can happen
independently of saving the state to user preferences
(since we want to toggle the classes but not save the state
at lower resolutions).
Bug: T326364
Change-Id: I3113ab83deb15843e04ed63ec767a85c522517b5
Splits the click handler for pinnable elements into
separate functions to reduce indentation and
maybe improve testability.
The click handler for pinnable elements is now
placed in a function called `togglePinnableElement()`
and attached to the click event via `.bind()`.
Class toggling is split into a separate
function called `togglePinnableClasses()` as well.
This should have no functional impact.
Change-Id: Ib27a469f6eb7e28360203d09db3315c6bde5c890
Causes 4 minor visual regressions where the collapsed toc width is slightly smaller
will be fixed when page tools is deployed.
https://jmp.sh/o3vlGVlb
- Remove @padding-vertical-toc, @padding-right-toc and @padding-left-toc variables, which would need to be removed after page tools is enabled anyway
- Remove @height-collapsed-toc-button, @padding-top-content-px and @max-width-collapsed-toc variables which weren't needed
- Greatly simplify CSS for collapsed TOC width
Bug: T324877
Change-Id: I6d44d4b49fb5dccd776dfe0e96740fdb9bff4c5d
- Addresses "when pinned, can we maintain the alignment between the search bar and the article title for larger screens?"
https://phabricator.wikimedia.org/T324877#8499980
Bug: T324877
Change-Id: I7d3447cccdff40fc5a5e0b8978c17db8ffab065c
Pages that are not supported in other languages should not display the
ULS when the language button is clicked. Instead, a simple message
explaining that the page contents are supported in other languages
should be displayed inside the dropdown. Additionally, the language
button should be modified for these non-content pages, to non include
any label and be quiet instead of progressive.
This patch implements these specifications by appropriately modifying
the mustache templates and the underlying skin classes.
Bug: T316559
Change-Id: I37d8e61a1287b31d1a304d2a955f532b9b8fa505
* Don't hide language button
This code can be removed now T287206 is resolved.
Also simplify legacy logic - as the language menu
is always a portlet there.
Additional changes:
* Create LanguageButtonDropdown component to distinguish
this code from the LanguageButton in the sticky header.
* Fixes a style in LanguageButtonDropdown.less which wasn't
accounting for multiple vector-menu-content classes
Bug: T320927
Bug: T325017
Change-Id: Ic331684c384c5d57b60b098f23485e44fb75fb8f
This should be a no-op since Wikibase change I6a7a42a64c (commit
19267799da), which enables the wikibase.vector.searchClient module on
wikidatawiki as well; assuming no problems turn up when that is
deployed, we should be able to merge this soon afterwards.
Bug: T316093
Change-Id: I8d7aaf67d98cc015d94bb6aa1c71a92905dad024
Follows-Up: I0aa0e432181b14cdb7b92e2550b78f2d7d48094d
Using PinnableElement in the TOC allows us to reuse styles associated with all PinnableElements, and helps ensure consistency between page tools and the TOC. This is something that would probably need to be done for T324505 anyway
Rather than updating PinnableElement to accept a class prop, I chose to rename '.sidebar-toc' to '.vector-toc', making the TOC's naming conventions consistent with the rest of Vector.
"sidebar" doesn't make sense anymore anyway, as the TOC can be in multiple locations and it's best to avoid the "sidebar" term
Bug: T324877
Change-Id: I5b9228380f5c4674ef424d33127a5cb4010822da
- Generalize spacing for pinnable header and menu items under PinnableHeader.less and PinnableElement.less
- Impacts main menu, page tools & personal tools
Bug: T324877
Change-Id: I4042e5c1957d64797f21146f687ef960721299ce
- Register new feature for main menu pinned
- Update UserPreferenceRequirement to optionally handle default config values
- Add nav landmarks for the main menu
Bug: T317900
Change-Id: I8fc6e0a79a1155d68afb9e33e5101a2a160dc4e5
- Rename data-portlets-main-menu to data-main-menu
- Rename MainMenuContents.mustache to MainMenu
- Replace usage of .vector-main-menu-contents in favor of .vector-main-menu
- Add classes to PinnableContainer
- Use PinnableContainer and PinnableElement in main menu
- Remove MainMenuDropdown.less
Bug: T317900
Change-Id: I59b3acd3d56cd5761e5978607634dfb9a88f60e3
This allows '.vector-main-menu' to correspond to MainMenu.mustache, and 'vector-page-tools' with PageTools.mustache
Bug: T317900
Change-Id: I65c0d7cffbdf1cf9e59cde0c0fc4dca788e799de
- getTocData is moved into VectorComponentTableOfContents and it's test file
The following changes were made to the main menu, toc and page tools PHP components
- Avoid passing in $skin to the constructor
- Handle isPinned logic inside the component
- Add a public ID constant to the components
- Dropdown data for each feature use the same naming convention
Bug: T317900
Change-Id: I77a617a6c1d93bccd3b6e59353299f5534624e53
This partially reverts 94c7f31082.
Headings inside wrapper divs etc. actually are rendered in the table
of contents.
Bug: T318044
Bug: T324869
Change-Id: Ie3181d9e9605cd2b5897b12931572057e80d6661
While removing this we also noticed that we check the value of
isMainPage. This doesn't seem like a good idea as most main pages
do not have a table of contents, so it seems like adding
unnecessary complexity for a state that doesn't exist in practice.
The existing code path also doesn't work as it adds a table of contents
unstyled to the page.
Bug: T324874
Change-Id: Idaeff6ace5912ea74ed9d335526027c4690ac8fa
