Use global variable for tablet media query in responsive.less
The Vector skin's responsive mode originally used 768px as a hardcoded value for the media query set up in skin.json. I attempted to switch to the @deviceWidthTablet global Less variable provided by MediaWiki inside skin.json, but this would not work under any circumstances. Evidently, ResourceLoader does not compile Less, so it just ignores the media query if it contains a Less variable. I was forced to leave the media query within skin.json blank and hard-code it into responsive.less. When using the @deviceWidthTablet variable inside responsive.less, it worked fine. Obviously this is not ideal, as I am bypassing ResourceLoader, but I have no other choice. See this comment (T124994#2864136) for details. Bug: T124994 Change-Id: I28565e5ba88be41dcd9cb38fc09cffe29d263e06
This commit is contained in:
jo12bar
parent
16f60f3e79
commit
565011c5c4
182
responsive.less
182
responsive.less
|
|
@ -4,105 +4,107 @@
|
|||
left for it.
|
||||
*/
|
||||
|
||||
div#mw-head {
|
||||
position: static !important; /* stylelint-disable-line declaration-no-important */
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
@media screen and ( max-width: @deviceWidthTablet ) {
|
||||
div#mw-head {
|
||||
position: static !important; /* stylelint-disable-line declaration-no-important */
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
/* Move the panel to the bottom and display it as in-line lists */
|
||||
div#mw-navigation {
|
||||
div#mw-panel {
|
||||
display: table;
|
||||
position: static;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
font-size: 150%;
|
||||
|
||||
.portal {
|
||||
display: block;
|
||||
/* Move the panel to the bottom and display it as in-line lists */
|
||||
div#mw-navigation {
|
||||
div#mw-panel {
|
||||
display: table;
|
||||
position: static;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
}
|
||||
overflow: hidden;
|
||||
font-size: 150%;
|
||||
|
||||
ul li {
|
||||
list-style: none;
|
||||
.portal {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
ul li {
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Hide the logo and tabs */
|
||||
div#p-logo {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Rearrange various page elements to fill the now-available space */
|
||||
body div#footer {
|
||||
margin-left: 0;
|
||||
padding-top: 0;
|
||||
|
||||
/* don't need these in the footer either... */
|
||||
li#footer-info-lastmod,
|
||||
li#footer-info-viewcount {
|
||||
/* Hide the logo and tabs */
|
||||
div#p-logo {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
div#p-personal {
|
||||
display: table;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
top: inherit;
|
||||
left: inherit;
|
||||
right: inherit;
|
||||
|
||||
ul {
|
||||
/* Rearrange various page elements to fill the now-available space */
|
||||
body div#footer {
|
||||
margin-left: 0;
|
||||
padding-top: 0;
|
||||
|
||||
/* don't need these in the footer either... */
|
||||
li#footer-info-lastmod,
|
||||
li#footer-info-viewcount {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
div#p-personal {
|
||||
display: table;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
top: inherit;
|
||||
left: inherit;
|
||||
right: inherit;
|
||||
|
||||
ul {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
div#right-navigation {
|
||||
position: absolute;
|
||||
top: inherit;
|
||||
right: 0;
|
||||
margin-top: 0;
|
||||
float: none;
|
||||
}
|
||||
div#left-navigation {
|
||||
position: absolute;
|
||||
top: inherit;
|
||||
margin: 0;
|
||||
display: block;
|
||||
float: none;
|
||||
}
|
||||
div#p-namespaces,
|
||||
div#p-views,
|
||||
div#p-variants {
|
||||
position: relative;
|
||||
top: 2.5em;
|
||||
}
|
||||
div#p-namespaces {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
div#right-navigation {
|
||||
position: absolute;
|
||||
top: inherit;
|
||||
right: 0;
|
||||
margin-top: 0;
|
||||
float: none;
|
||||
}
|
||||
div#left-navigation {
|
||||
position: absolute;
|
||||
top: inherit;
|
||||
margin: 0;
|
||||
display: block;
|
||||
float: none;
|
||||
}
|
||||
div#p-namespaces,
|
||||
div#p-views,
|
||||
div#p-variants {
|
||||
position: relative;
|
||||
top: 2.5em;
|
||||
}
|
||||
div#p-namespaces {
|
||||
padding-left: 0;
|
||||
}
|
||||
div#p-cactions {
|
||||
top: 2.5em;
|
||||
float: right;
|
||||
}
|
||||
div#p-search {
|
||||
float: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 100vw;
|
||||
margin: 0;
|
||||
}
|
||||
div#simpleSearch {
|
||||
margin: 0 3em;
|
||||
width: 80vw;
|
||||
padding: 0;
|
||||
}
|
||||
div.vectorMenu div.menu {
|
||||
left: inherit;
|
||||
right: -1px;
|
||||
}
|
||||
div#content {
|
||||
/* Hide the 1px blue border on the left side */
|
||||
border-left: 0;
|
||||
margin-left: 0;
|
||||
div#p-cactions {
|
||||
top: 2.5em;
|
||||
float: right;
|
||||
}
|
||||
div#p-search {
|
||||
float: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 100vw;
|
||||
margin: 0;
|
||||
}
|
||||
div#simpleSearch {
|
||||
margin: 0 3em;
|
||||
width: 80vw;
|
||||
padding: 0;
|
||||
}
|
||||
div.vectorMenu div.menu {
|
||||
left: inherit;
|
||||
right: -1px;
|
||||
}
|
||||
div#content {
|
||||
/* Hide the 1px blue border on the left side */
|
||||
border-left: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue