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
This commit is contained in:
jdlrobson 2017-09-28 09:23:45 -05:00
parent ef54d9594e
commit 734ac36f1e
8 changed files with 12 additions and 10 deletions

View File

@ -15,8 +15,10 @@
@grayLight: @colorGray12; @grayLight: @colorGray12;
@grayLightest: @colorGray14; @grayLightest: @colorGray14;
@wgMFDeviceWidthMobileSmall: 320px; @width-breakpoint-mobile: 320px;
@wgMFDeviceWidthDesktop: 1000px; @width-breakpoint-desktop: 1000px;
// For backwards compatibility with MobileFrontend skinStyles
@wgMFDeviceWidthDesktop: @width-breakpoint-desktop;
@skinContentBgColor: #fff; @skinContentBgColor: #fff;
@ -85,7 +87,7 @@
@contentPaddingTablet: 3.35em; @contentPaddingTablet: 3.35em;
// note since content does not use view border box we have to include padding. // note since content does not use view border box we have to include padding.
@contentMaxWidthTablet: @wgMFDeviceWidthDesktop - ( 2 * @contentPaddingTablet ); @contentMaxWidthTablet: @width-breakpoint-desktop - ( 2 * @contentPaddingTablet );
@contentTopPadding: 1.6em; @contentTopPadding: 1.6em;
// Wiki specific variables // Wiki specific variables

View File

@ -112,7 +112,7 @@
} }
// On small devices that don't support Javascript, hide the page actions bar // On small devices that don't support Javascript, hide the page actions bar
@media all and ( max-width: @wgMFDeviceWidthMobileSmall ) { @media all and ( max-width: @width-breakpoint-mobile - 1 ) {
.client-nojs { .client-nojs {
#page-actions { #page-actions {
display: none; display: none;

View File

@ -28,7 +28,7 @@ body {
word-wrap: break-word; word-wrap: break-word;
} }
@media all and ( max-width: @wgMFDeviceWidthMobileSmall ) { @media all and ( max-width: @width-breakpoint-mobile - 1 ) {
body { body {
font-size: 0.8em; font-size: 0.8em;
} }

View File

@ -119,7 +119,7 @@ A file for css that optimises the Minerva skin on larger devices.
} }
} }
@media screen and ( min-width: @wgMFDeviceWidthDesktop ) { @media screen and ( min-width: @width-breakpoint-desktop ) {
// FIXME: Zero should use banner-container class or better - append to banner-container // FIXME: Zero should use banner-container class or better - append to banner-container
#mw-mf-page-center .mw-mf-banner, #mw-mf-page-center .mw-mf-banner,
.banner-container, .banner-container,

View File

@ -1,6 +1,6 @@
@import 'minerva.variables'; @import 'minerva.variables';
@media screen and ( min-width: @wgMFDeviceWidthDesktop ) { @media screen and ( min-width: @width-breakpoint-desktop ) {
.language-overlay { .language-overlay {
.overlay-content { .overlay-content {
margin: 0; margin: 0;

View File

@ -7,7 +7,7 @@
// can point to anything in the containing content area and avoid // can point to anything in the containing content area and avoid
// padding issues such as https://phabricator.wikimedia.org/F287611 // padding issues such as https://phabricator.wikimedia.org/F287611
#mw-mf-page-center .pointer-overlay { #mw-mf-page-center .pointer-overlay {
max-width: @wgMFDeviceWidthDesktop; max-width: @width-breakpoint-desktop;
} }
} }

View File

@ -45,7 +45,7 @@
} }
} }
@media all and ( min-width: @wgMFDeviceWidthDesktop ) { @media all and ( min-width: @width-breakpoint-desktop ) {
.search-overlay { .search-overlay {
.overlay-content { .overlay-content {
// align with the search form // align with the search form

View File

@ -24,7 +24,7 @@
} }
} }
@media all and ( min-width: @wgMFDeviceWidthDesktop ) { @media all and ( min-width: @width-breakpoint-desktop ) {
.overlay-header { .overlay-header {
// Make sure the close button and secondary button icon images are aligned // Make sure the close button and secondary button icon images are aligned
// with the content. // with the content.