wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-11-28 01:20:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Support Vector 2022 at > 320px

Browse source 
In preparation for enabling responsive Vector on Wikifunctions,
we lower the support threshold to 320px for Vector.

Minor adjustments are made to the header to make it use two
lines at lower resolutions.

Fixes to tables to make them responsive will be made shortly as
part of T330527 which will complete the responsive behaviour.

Bug: T361573
Change-Id: Idbac393ab6ee60100ba0fd6df4b224cc45949bfd
This commit is contained in:
Jon Robson 2024-05-17 16:28:50 -07:00 committed by Jdlrobson
parent ff5a61e9c6
commit e3d2ab5031
4 changed files with 21 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
resources/skins.vector.styles/components/Header.less
View file

@ -20,10 +20,13 @@
.search-toggle {
// At lower resolutions the search input is hidden and a toggle is shown
display: inline-flex;
float: right;
// Ensures the button has a font size of 16px
font-size: unit( 16 / @font-size-browser, rem );
@media ( min-width: @min-width-breakpoint-tablet ) {
float: right;
}
@media ( min-width: @min-width-breakpoint-desktop ) {
// Override .cdx-button styles
display: none !important; /* stylelint-disable-line declaration-no-important */
@ -39,6 +42,11 @@
}
@media ( max-width: @max-width-breakpoint-tablet ) {
#p-search,
.vector-header-end {
.cdx-mixin-button-layout-flush( 'start', true );
}
/**
* Toggles the visibility of the search box at lower resolutions.
*/

6
resources/skins.vector.styles/components/Logo.less
View file

@ -22,15 +22,9 @@
// This will be ignored in flexbox browsers.
float: left;
margin-right: 10px;
// Hide mobile icon at lower resolutions and defer to wordmark
display: none;
@size-mw-logo-icon: unit( 50 / @font-size-browser, em );
width: @size-mw-logo-icon;
height: @size-mw-logo-icon;
@media ( min-width: @min-width-breakpoint-tablet ) {
display: block;
}
}
.mw-logo-container {

11
resources/skins.vector.styles/layouts/screen.less
View file

@ -114,6 +114,17 @@ body {
background-color: @background-color-page-container;
}
@media ( max-width: @max-width-breakpoint-tablet ) {
.vector-header {
flex-flow: column;
}
.vector-header-start,
.vector-header-end {
width: 100%;
}
}
@media ( min-width: @min-width-breakpoint-desktop ) {
.mw-page-container,
.vector-header-container .mw-header,

2
resources/skins.vector.styles/variables.less
View file

@ -13,7 +13,7 @@
// Defines the minimum viewport width, at which point the layout will not get any
// smaller and will start horizontal scrolling instead.
@min-width-supported: unit( 500px / @font-size-browser, em );
@min-width-supported: unit( 300px / @font-size-browser, em );
// Sizing calculation primitives.
@font-size-root: 100%;