wikimedia/mediawiki-skins-MinervaNeue
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue synced 2024-11-27 15:40:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

styles: Replace deprecated breakpoints

Browse source 
The values have slightly changed:
- Tablet breakpoint is decreased by 80px,
  pushing lesser devices into a mobile only experience but
  should make barely a difference to vast majority of our users.
- Biggest difference is in `min-width-breakpoint-desktop`,
  which is increased by 120px in comparison to
  `@width-breakpoint-desktop: 1000px`

Also removing one out-dated feature phone clause.

TECHNICAL CHANGES:
* The previous breakpoint was tied to the maximum content width.
The previous maximum content width is preserved, and several media
queries are adjusted to make use of it.
* The header (logo) is not optimized for  640px-720px. For now
a temporary fix is but in place which will be investigated as part
of T366859

VISUAL CHANGES:
* 6 visual changes which improve alignment in language and
visual editor overlay and diffs (where wikidiff2 is not
installed)

Bug: T349793
Depends-On: I3afba8c51f60de9271054499bfa3ffbcc1a9d779
Change-Id: I9552d8ad7509aae90e15edda26e786465773d3ac
This commit is contained in:
Volker E 2023-11-07 01:03:29 -08:00 committed by Jon Robson
parent c6209b906b
commit dd154b4ea7
26 changed files with 88 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
minerva.less/minerva.variables.less
View file

@ -32,7 +32,6 @@
// Navigation Drawers
@drawer-width-right: 60%;
@menu-button-icon-size: 3.5em;
// Headings
@font-size-h1: 1.7em;
@ -48,8 +47,18 @@
@height-overlay-header: unit( 48 / @font-size-browser, em );
@padding-vertical-header: 0.15em;
@width-search-box: 375/16em;
@device-width-tablet-ems: unit( @width-breakpoint-tablet / @font-size-browser, em );
@width-branding-box: @device-width-tablet-ems - (3 * @menu-button-icon-size + @width-icon-gutter) - @width-search-box;
@device-width-tablet-ems: unit( @min-width-breakpoint-tablet / @font-size-browser, em );
// This is the minimum width at which the logo can be rendered safely for logged in users,
// using advanced mobile mode,
// without overflowing the viewport at @min-width-breakpoint-tablet.
//
// This is calculated by taking @min-width-breakpoint-tablet and counting the space available
// after accounting for 3 icons - main menu, notification bell and user menu icon,
// and the search bar.
@min-size-interactive-touch-ems: unit( @min-size-interactive-touch / @font-size-browser, em );
@min-width-branding-box-ems: @device-width-tablet-ems - ( 3 * @min-size-interactive-touch-ems ) - @width-search-box;
// FIXME: This is the min-width before T349793 was merged. Remove when T366859 is resolved.
@T366859-min-width-branding-box-ems: 10.0625em;
@top-spacing-title-section: @spacing-125;
@ -76,8 +85,11 @@
// custom tablet styling
@padding-content-tablet: 3.35em;
// note since content does not use view border box we have to include padding.
@max-width-content-tablet: @width-breakpoint-desktop - ( 2 * @padding-content-tablet );
// This value was previously derived from taking the old tablet breakpoint of 720px
// and subtracting ( 2 * @padding-content-tablet ) ) to account for the lack of
// view border box.
// This may be reassessed in phab:T366860.
@max-width-content-tablet: 993.3px;
// Wiki specific variables
@width-infobox: 320px;

2
resources/skins.minerva.base.styles/LanguageSection.less
View file

@ -21,7 +21,7 @@
list-style: none;
}
@media all and ( min-width: @width-breakpoint-tablet ) {
@media all and ( min-width: @min-width-breakpoint-tablet ) {
column-count: 3;
}
}

2
resources/skins.minerva.base.styles/LastModifiedBar.less
View file

@ -42,7 +42,7 @@
.text-overflow( @visible: false );
}
@media ( max-width: @width-breakpoint-tablet ) {
@media ( max-width: @max-width-breakpoint-mobile ) {
.last-modified-bar__text {
padding-right: 1em;
}

2
resources/skins.minerva.base.styles/buttons.less
View file

@ -35,7 +35,7 @@
// On desktop reveal labels of icon-only buttons.
// This applies to page actions and other icon only buttons
// that are not scoped in the rule above.
@media all and ( max-width: @width-breakpoint-desktop ) {
@media all and ( max-width: @max-width-breakpoint-tablet ) {
.cdx-button.cdx-button--icon-only {
span + span:last-child {
.mixin-screen-reader-text();

4
resources/skins.minerva.base.styles/content/main.less
View file

@ -32,7 +32,7 @@ body {
}
// Feature phones < 320px viewport receive smaller font.
@media all and ( max-width: @width-breakpoint-mobile - 1 ) {
@media all and ( max-width: @min-width-breakpoint-mobile - 1 ) {
html {
font-size: @font-size-root--feature-phone;
}
@ -66,7 +66,7 @@ body {
font-size: @font-size-root * @dynamic-type-scaling-factor;
}
@media all and ( max-width: @width-breakpoint-mobile - 1 ) {
@media all and ( max-width: @min-width-breakpoint-mobile - 1 ) {
body {
font-size: @font-size-root--feature-phone * @dynamic-type-scaling-factor;
}

2
resources/skins.minerva.base.styles/content/tables.less
View file

@ -9,7 +9,7 @@
// by putting the original in a media query instead.
// This also avoids having a reset with too-high specificity, which
// would break unrelated styles from core and extensions.
@media all and ( max-width: @width-breakpoint-tablet ) {
@media all and ( max-width: @max-width-breakpoint-mobile ) {
.content {
table {
display: block;

6
resources/skins.minerva.base.styles/content/tablet/common.less
View file

@ -5,7 +5,7 @@ A file for css that optimises the Minerva skin on larger devices.
@import '../../../../minerva.less/minerva.variables.less';
@import '../../../../minerva.less/minerva.mixins.less';
@media screen and ( min-width: @width-breakpoint-tablet ) {
@media screen and ( min-width: @min-width-breakpoint-tablet ) {
.client-js #searchIcon { // stylelint-disable-line selector-max-id
display: none;
}
@ -67,7 +67,7 @@ A file for css that optimises the Minerva skin on larger devices.
figure[ typeof~='mw:File/Thumb' ],
figure[ typeof~='mw:File/Frame' ],
.thumb {
max-width: @width-breakpoint-tablet - @margin-content;
max-width: calc( @max-width-breakpoint-mobile - @margin-content );
&.mw-halign-left,
&.tleft {
@ -127,7 +127,7 @@ A file for css that optimises the Minerva skin on larger devices.
}
}
@media screen and ( min-width: @width-breakpoint-desktop ) {
@media screen and ( min-width: @max-width-content-tablet ) {
// stylelint-disable-next-line selector-max-id
.banner-container,
.minerva-anon-talk-message,

2
resources/skins.minerva.base.styles/content/templates/ambox.less
View file

@ -133,7 +133,7 @@ table.ambox {
}
}
@media screen and ( min-width: @width-breakpoint-tablet ) {
@media screen and ( min-width: @min-width-breakpoint-tablet ) {
.mbox-text-div,
.mbox-text-span {
height: auto;

2
resources/skins.minerva.base.styles/content/toc.less
View file

@ -90,7 +90,7 @@
}
}
@media screen and ( min-width: @width-breakpoint-tablet ) {
@media screen and ( min-width: @min-width-breakpoint-tablet ) {
.toc {
// Reset the rule for mobile mode
display: table;

13
resources/skins.minerva.base.styles/header.less
View file

@ -56,12 +56,12 @@
}
}
@media screen and ( min-width: @width-breakpoint-tablet ) {
@media screen and ( min-width: @min-width-breakpoint-tablet ) {
.minerva-header {
.branding-box {
// Handle logos that are larger than the set branding box width
// This will also cause the searchbox overlay to be misaligned with the .minerva-heading searchbox
min-width: @width-branding-box;
min-width: @min-width-branding-box-ems;
width: auto;
}
@ -73,6 +73,15 @@
}
}
/* FIXME: Remove when T366859 has been addressed */
@media screen and ( min-width: 720px ) {
.minerva-header {
.branding-box {
min-width: @T366859-min-width-branding-box-ems;
}
}
}
// Night mode
html.skin-theme-clientpref-night {
// The following icons use background-image instead of mask-image.

4
resources/skins.minerva.base.styles/pageactions.less
View file

@ -84,8 +84,8 @@
}
}
// On small devices that don't support Javascript, hide the page actions bar
@media all and ( max-width: @width-breakpoint-mobile - 1 ) {
// On feature phone devices that don't support JavaScript, hide the page actions bar.
@media all and ( max-width: @min-width-breakpoint-mobile - 1 ) {
.client-nojs {
#p-views {
display: none;

2
resources/skins.minerva.base.styles/print/styles.less
View file

@ -43,7 +43,7 @@
}
}
@media print and ( max-device-width: @width-breakpoint-tablet ) {
@media print and ( max-width: @max-width-breakpoint-mobile ) {
// Chrome: override the default margins and reveal the footer
// Experimental technology (see https://developer.mozilla.org/en-US/docs/Web/CSS/@page/size)
@page {

2
resources/skins.minerva.base.styles/ui.less
View file

@ -238,7 +238,7 @@ main {
}
// stylelint-enable selector-max-id
@media all and ( min-width: @width-breakpoint-tablet ) {
@media all and ( min-width: @min-width-breakpoint-tablet ) {
/* FIXME: this should be one generic class name */
/* SpecialMobileEditWatchlist */
.page-summary-list,

4
resources/skins.minerva.mainMenu.styles/MainMenu.less
View file

@ -12,8 +12,8 @@
min-width: 275px;
visibility: hidden;
@media screen and ( min-width: @width-breakpoint-tablet ) {
min-width: @width-breakpoint-mobile;
@media screen and ( min-width: @min-width-breakpoint-tablet ) {
min-width: @min-width-breakpoint-mobile;
}
// It should always be possible to dismiss the menu by tapping outside of it.
max-width: 80%;

2
resources/skins.minerva.mainMenu.styles/NotificationsOverlay.less
View file

@ -18,7 +18,7 @@
}
}
@media all and ( min-width: @width-breakpoint-tablet ) {
@media all and ( min-width: @min-width-breakpoint-tablet ) {
@rightDrawerLeftOffset: 100% - @drawer-width-right;
.notifications-overlay.navigation-drawer {

4
skinStyles/mediawiki.diff.styles.less
View file

@ -25,7 +25,7 @@
padding: 0 6px 1px;
}
@media all and ( max-width: @width-breakpoint-tablet ) {
@media all and ( max-width: @max-width-breakpoint-mobile ) {
//
// Navigation links
//Reveal the previous and next navigation links
@ -84,7 +84,7 @@
//
// Diff
//
table.diff {
.content table.diff {
display: block;
tbody, tr, td {

2
skinStyles/mediawiki.page.gallery.styles/tablet.less
View file

@ -2,7 +2,7 @@
@import '../../minerva.less/minerva.mixins.less';
// Hacks to render galleries and multicol tables better on mobile
@media all and ( max-width: @width-breakpoint-tablet ) {
@media all and ( max-width: @max-width-breakpoint-mobile ) {
// Center images that might be less than the screen width.
// Image will appear centered and caption will take up full screen.

2
skinStyles/mediawiki.searchSuggest/index.less
View file

@ -1,6 +1,6 @@
@import '../../minerva.less/minerva.variables.less';
@media screen and ( max-width: @width-breakpoint-tablet ) {
@media screen and ( max-width: @max-width-breakpoint-mobile ) {
.suggestions-results {
display: table;
width: 100%;

2
skinStyles/mediawiki.special.changeslist.less
View file

@ -212,7 +212,7 @@ ul.mw-contributions-list li .mw-rollback-link {
}
/** Reduce clutter on mobile devices. Users can use "Use desktop site" to reveal these. */
@media all and ( max-width: @width-breakpoint-tablet ) {
@media all and ( max-width: @max-width-breakpoint-mobile ) {
/* Reduce space at top of page */
.mw-rcfilters-ui-filterWrapperWidget-bottom-mobile,
.mw-rcfilters-ui-watchlistTopSectionWidget,

2
skinStyles/mobile.languages.structured/LanguageSearcher.less
View file

@ -5,7 +5,7 @@ ol.site-link-list {
padding: 0;
}
@media screen and ( min-width: @width-breakpoint-desktop ) {
@media screen and ( min-width: @max-width-content-tablet ) {
.language-searcher {
.panel-body,
.overlay-content-body {

2
skinStyles/mobile.special.mobileoptions.styles/minerva.less
View file

@ -1,6 +1,6 @@
@import '../../minerva.less/minerva.variables.less';
@media all and ( min-width: @width-breakpoint-tablet ) {
@media all and ( min-width: @min-width-breakpoint-tablet ) {
.ns-special .pre-content {
background: var( --background-color-base );
margin-bottom: 15px;

4
skinStyles/mobile.special.pagefeed.styles.less
View file

@ -7,9 +7,9 @@
}
}
@media screen and ( min-width: @width-breakpoint-tablet ) {
@media screen and ( min-width: @max-width-content-tablet ) {
.empty-page {
max-width: @max-width-content-tablet + 2 * @width-icon-gutter;
max-width: calc( @max-width-content-tablet + ( 2 * @width-icon-gutter ) );
margin-left: auto;
margin-right: auto;
}

2
skinStyles/mobile.special.styles/minerva.less
View file

@ -152,7 +152,7 @@ body.mw-special-Newpages {
}
.mw-mf-history-wrap-link {
@media all and ( min-width: @width-breakpoint-desktop ) {
@media all and ( min-width: @min-width-breakpoint-desktop ) {
margin: 0;
max-width: none;
}

4
skinStyles/mobile.startup/Overlay.less
View file

@ -62,10 +62,10 @@
}
}
@media all and ( min-width: @width-breakpoint-desktop ) {
@media all and ( min-width: @min-width-breakpoint-desktop ) {
.overlay-header {
// Make sure the close button and secondary button icon images are aligned
// with the content.
max-width: @max-width-content-tablet + ( 2 * @width-icon-gutter );
max-width: calc( @max-width-content-tablet + ( 2 * @width-icon-gutter ) );
}
}

2
skinStyles/mobile.startup/languageOverlay/languageOverlay.less
View file

@ -1,6 +1,6 @@
@import '../../../minerva.less/minerva.variables.less';
@media screen and ( min-width: @width-breakpoint-desktop ) {
@media screen and ( min-width: @min-width-breakpoint-desktop ) {
.language-overlay {
// FIXME: Consolidate this into skinStyles/Overlay.less
.overlay-content {

39
skinStyles/mobile.startup/search/SearchOverlay.less
View file

@ -27,14 +27,13 @@
}
}
@media all and ( min-width: @width-breakpoint-tablet ) {
// Calculate padding based off icon and branding box widths,
// accounting for `box-sizing: border-box` on the icon
@spacing-search-horizontal-ems: unit( @spacing-horizontal-button / @font-size-browser, ems );
@media all and ( min-width: @min-width-breakpoint-tablet ) {
.overlay.search-overlay {
// TODO: update @size-icon and @width-icon-gutter to reflect new icon button specs
@size-icon-updated: 1.25em; // 20px icon width
@width-icon-gutter-updated: 0.75em; // 12px padding width
@border-width-icon: 0.125em; // 1px border width * 2
// Calculate padding based off icon and branding box widths, accounting for `box-sizing: border-box` on the icon
@searchPadding: (@size-icon-updated + @width-icon-gutter-updated + @border-width-icon) + @width-branding-box;
@searchPadding: @min-size-interactive-touch-ems + @min-width-branding-box-ems - @spacing-search-horizontal-ems;
.search-box,
.search-content,
@ -54,12 +53,11 @@
.overlay-title {
width: auto;
padding-left: 0;
}
.overlay-content {
// Override default width styles
width: 100%;
width: 90%;
max-width: none;
}
@ -70,7 +68,28 @@
}
}
@media screen and ( min-width: @width-breakpoint-desktop ) {
/* Keeps search input aligned */
@media all and ( min-width: @min-width-breakpoint-tablet ) and ( max-width: @min-width-breakpoint-desktop ) {
.overlay-title {
padding-left: 0 !important;
}
}
/* FIXME: Remove when T366859 has been addressed */
@media screen and ( min-width: 720px ) {
.overlay.search-overlay {
@T366859-searchPadding: @min-size-interactive-touch-ems + @T366859-min-width-branding-box-ems - @spacing-search-horizontal-ems;
.search-box,
.search-content,
.spinner-container,
.results {
margin-left: @T366859-searchPadding;
}
}
}
@media screen and ( min-width: @min-width-breakpoint-desktop ) {
.overlay.search-overlay {
// Normally .overlay-content would have these styles by default
// But since we need to account for .heading-container padding in .overlay-content,