JGonera has submitted this change and it was merged.
Change subject: Fix header styling
......................................................................
Fix header styling
Fix the double bottom border in the header (the additional not 100%
long line) on special pages.
Get rid of #mw-mf-header and use .header everywhere. Get rid of
.escapeOverlay and use .cancel instead.
Change-Id: I8fe0f3df1f0443fcbd94e9b2dfaa17af319e245c
---
M includes/skins/SkinMobile.php
M includes/skins/SkinMobileTemplate.php
M includes/specials/SpecialMobileWatchlist.php
M javascripts/specials/uploads.js
M less/common/mf-common.less
M less/common/mf-navigation.less
M less/common/ui.less
M less/modules/mf-search.less
M stylesheets/common/mf-common.css
M stylesheets/common/mf-navigation.css
M stylesheets/common/ui.css
M stylesheets/modules/mf-search.css
M templates/overlay.html
M templates/overlays/cleanup.html
M templates/overlays/languages.html
M templates/overlays/photoCopyrightDialog.html
M templates/overlays/search/search.html
M templates/overlays/talk.html
18 files changed, 61 insertions(+), 116 deletions(-)
Approvals:
JGonera: Verified; Looks good to me, approved
Jdlrobson: Looks good to me, but someone else must approve
jenkins-bot: Checked
diff --git a/includes/skins/SkinMobile.php b/includes/skins/SkinMobile.php
index afc34c9..750898b 100644
--- a/includes/skins/SkinMobile.php
+++ b/includes/skins/SkinMobile.php
@@ -194,7 +194,7 @@
$htmlHeader = $this->getOutput()->getProperty(
'mobile.htmlHeader' );
if ( !$htmlHeader && $isSpecialPage ) {
- $htmlHeader = Html::element( 'h1', array( 'class' =>
'header' ), $pageHeading );
+ $htmlHeader = Html::element( 'h1', array(),
$pageHeading );
}
$tpl->set( 'prebodytext', $preBodyText );
diff --git a/includes/skins/SkinMobileTemplate.php
b/includes/skins/SkinMobileTemplate.php
index bab508a..666e9f9 100644
--- a/includes/skins/SkinMobileTemplate.php
+++ b/includes/skins/SkinMobileTemplate.php
@@ -32,7 +32,7 @@
}
public function renderArticleHeader() {
- echo '<div id="mw-mf-header">';
+ echo '<div class="header">';
if ( $this->data['htmlHeader'] ) {
$this->html( 'menuButton' );
echo $this->data['htmlHeader'];
diff --git a/includes/specials/SpecialMobileWatchlist.php
b/includes/specials/SpecialMobileWatchlist.php
index 115178d..b45b85b 100644
--- a/includes/specials/SpecialMobileWatchlist.php
+++ b/includes/specials/SpecialMobileWatchlist.php
@@ -105,7 +105,7 @@
$html =
Html::openElement( 'div',
array(
- 'class' => 'mw-mf-watchlist-views
header' )
+ 'class' => 'mw-mf-watchlist-views' )
) .
Html::openElement( 'div',
array(
diff --git a/javascripts/specials/uploads.js b/javascripts/specials/uploads.js
index 4bc6f72..612e88a 100644
--- a/javascripts/specials/uploads.js
+++ b/javascripts/specials/uploads.js
@@ -144,7 +144,7 @@
} );
carousel.insertBefore( '.ctaUploadPhoto' );
$( function() {
- window.scrollTo( 0, $( '#mw-mf-header'
).offset().top );
+ window.scrollTo( 0, $( '.header'
).offset().top );
} );
}
} );
diff --git a/less/common/mf-common.less b/less/common/mf-common.less
index c3efd95..2de067b 100644
--- a/less/common/mf-common.less
+++ b/less/common/mf-common.less
@@ -254,12 +254,6 @@
display: none;
}
-#mw-mf-header {
- margin: 0;
- position: relative;
- border-bottom: solid 1px #CCC;
-}
-
#mw-mf-last-modified {
margin-top: 1em;
}
diff --git a/less/common/mf-navigation.less b/less/common/mf-navigation.less
index 9d08381..01866ee 100644
--- a/less/common/mf-navigation.less
+++ b/less/common/mf-navigation.less
@@ -102,9 +102,20 @@
background-color: white;
z-index: 4;
- a.escapeOverlay,
- button.escapeOverlay {
+ .header .cancel {
display: block;
+ position: absolute;
+ cursor: pointer;
+ border: none;
+ height: @headerHeight;
+ width: @searchBarPaddingLeft;
+ left: 0;
+ background: none;
+ background-image: url(images/arrow-left.png);
+ background-repeat: no-repeat;
+ background-position: center center;
+ text-indent: -999px;
+ .background-size( auto, @searchBoxHeight );
}
div.languageOverlay ul,
@@ -204,21 +215,6 @@
}
}
-#mw-mf-page-center .header,
-.overlay .header {
-
- input.search {
- margin-top: 0;
- }
-
- h2 {
- margin: 0;
- padding: 0;
- line-height: @headerHeight;
- font-family: @fontFamily;
- }
-}
-
.overlay ul {
text-align: left;
left: 0;
@@ -243,24 +239,8 @@
}
}
-a.escapeOverlay,
-button.escapeOverlay {
- position: absolute;
- cursor: pointer;
- border: none;
- height: @headerHeight;
- width: @searchBarPaddingLeft;
- background: none;
- background-image: url(images/arrow-left.png);
- background-repeat: no-repeat;
- background-position: center center;
- text-indent: -999px;
- .background-size( auto, @searchBoxHeight );
-}
-
html[dir="rtl"] {
- a.escapeOverlay,
- button.escapeOverlay {
+ .mw-mf-overlay .header .cancel {
.transform( rotate(180deg) );
}
}
diff --git a/less/common/ui.less b/less/common/ui.less
index 3ce81f4..1f66788 100644
--- a/less/common/ui.less
+++ b/less/common/ui.less
@@ -3,13 +3,12 @@
@import 'mainmenu.less';
/* Header */
-#mw-mf-header form,
+.header form,
#mw-mf-sq {
height: @headerHeight;
}
-.header,
-#mw-mf-header {
+.header {
z-index: 2;
color: black;
.vertical-gradient( @searchBoxColor, @searchBoxColorTo );
@@ -19,17 +18,14 @@
min-height: @headerHeight;
margin: 0;
overflow: hidden;
-
- h1 {
- color: @chromeHeadingColor;
- line-height: @headerHeight;
- margin: 0;
- }
-}
-
-.mw-mf-overlay .header .search-box,
-#mw-mf-header {
+ position: relative;
padding: 0 @searchBarPaddingRight 0 @searchBarPaddingLeft;
+
+ h1, h2 {
+ font-size: @baseFontSize * 1.6;
+ color: @chromeHeadingColor;
+ margin: @headerHeight*0.22 0 0;
+ }
}
/* Menu buttons */
diff --git a/less/modules/mf-search.less b/less/modules/mf-search.less
index 01d079d..498989a 100644
--- a/less/modules/mf-search.less
+++ b/less/modules/mf-search.less
@@ -1,4 +1,3 @@
-/* escapeOverlay */
/* Search and navigation menu
moved from beta_common.css in
Change-Id: Id7715a83f8dc42cbdb23d8cbf982801606236f7c
@@ -47,7 +46,7 @@
.full-screen-search {
- #mw-mf-header {
+ .header {
z-index: 2;
color: white;
.vertical-gradient( @searchBoxColor, darken( @searchBoxColor,
2.75% ) );
diff --git a/stylesheets/common/mf-common.css b/stylesheets/common/mf-common.css
index 0ab178d..674e88c 100644
--- a/stylesheets/common/mf-common.css
+++ b/stylesheets/common/mf-common.css
@@ -215,11 +215,6 @@
#content_wrapper.home h1 {
display: none;
}
-#mw-mf-header {
- margin: 0;
- position: relative;
- border-bottom: solid 1px #CCC;
-}
#mw-mf-last-modified {
margin-top: 1em;
}
diff --git a/stylesheets/common/mf-navigation.css
b/stylesheets/common/mf-navigation.css
index 2ae8cf1..c779da1 100644
--- a/stylesheets/common/mf-navigation.css
+++ b/stylesheets/common/mf-navigation.css
@@ -79,9 +79,25 @@
background-color: white;
z-index: 4;
}
-.mw-mf-overlay a.escapeOverlay,
-.mw-mf-overlay button.escapeOverlay {
+.mw-mf-overlay .header .cancel {
display: block;
+ position: absolute;
+ cursor: pointer;
+ border: none;
+ height: 46px;
+ width: 40px;
+ left: 0;
+ background: none;
+ background-image: url(images/arrow-left.png);
+ background-repeat: no-repeat;
+ background-position: center center;
+ text-indent: -999px;
+ /* use -webkit prefix for older android browsers eg. nexus 1 */
+
+ -moz-background-size: auto 30px;
+ -o-background-size: auto 30px;
+ -webkit-background-size: auto 30px;
+ background-size: auto 30px;
}
.mw-mf-overlay div.languageOverlay ul li,
.mw-mf-overlay ul.content li {
@@ -183,17 +199,6 @@
#content .alert {
margin: 0;
}
-#mw-mf-page-center .header input.search,
-.overlay .header input.search {
- margin-top: 0;
-}
-#mw-mf-page-center .header h2,
-.overlay .header h2 {
- margin: 0;
- padding: 0;
- line-height: 46px;
- font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-}
.overlay ul {
text-align: left;
left: 0;
@@ -215,27 +220,7 @@
.overlay ul.informative li {
margin-bottom: 8px;
}
-a.escapeOverlay,
-button.escapeOverlay {
- position: absolute;
- cursor: pointer;
- border: none;
- height: 46px;
- width: 40px;
- background: none;
- background-image: url(images/arrow-left.png);
- background-repeat: no-repeat;
- background-position: center center;
- text-indent: -999px;
- /* use -webkit prefix for older android browsers eg. nexus 1 */
-
- -moz-background-size: auto 30px;
- -o-background-size: auto 30px;
- -webkit-background-size: auto 30px;
- background-size: auto 30px;
-}
-html[dir="rtl"] a.escapeOverlay,
-html[dir="rtl"] button.escapeOverlay {
+html[dir="rtl"] .mw-mf-overlay .header .cancel {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
diff --git a/stylesheets/common/ui.css b/stylesheets/common/ui.css
index a268ebf..668a9f3 100644
--- a/stylesheets/common/ui.css
+++ b/stylesheets/common/ui.css
@@ -219,12 +219,11 @@
}
}
/* Header */
-#mw-mf-header form,
+.header form,
#mw-mf-sq {
height: 46px;
}
-.header,
-#mw-mf-header {
+.header {
z-index: 2;
color: black;
background-color: #f3f3f3;
@@ -239,16 +238,14 @@
min-height: 46px;
margin: 0;
overflow: hidden;
+ position: relative;
+ padding: 0 40px 0 40px;
}
.header h1,
-#mw-mf-header h1 {
+.header h2 {
+ font-size: 1.6em;
color: #000000;
- line-height: 46px;
- margin: 0;
-}
-.mw-mf-overlay .header .search-box,
-#mw-mf-header {
- padding: 0 40px 0 40px;
+ margin: 10.12px 0 0;
}
/* Menu buttons */
#mw-mf-menu-page,
diff --git a/stylesheets/modules/mf-search.css
b/stylesheets/modules/mf-search.css
index 6ada517..f1134f7 100644
--- a/stylesheets/modules/mf-search.css
+++ b/stylesheets/modules/mf-search.css
@@ -1,4 +1,3 @@
-/* escapeOverlay */
/* Search and navigation menu
moved from beta_common.css in
Change-Id: Id7715a83f8dc42cbdb23d8cbf982801606236f7c
@@ -38,7 +37,7 @@
#remove-results {
display: none;
}
-.full-screen-search #mw-mf-header {
+.full-screen-search .header {
z-index: 2;
color: white;
background-color: #f3f3f3;
diff --git a/templates/overlay.html b/templates/overlay.html
index 10f7993..f4e26f6 100644
--- a/templates/overlay.html
+++ b/templates/overlay.html
@@ -1,5 +1,5 @@
<div class="header">
- <button class="cancel escapeOverlay">{{closeMsg}}</button>
+ <button class="cancel">{{closeMsg}}</button>
{{{heading}}}
</div>
{{{content}}}
diff --git a/templates/overlays/cleanup.html b/templates/overlays/cleanup.html
index 9271aa4..a1a2e27 100644
--- a/templates/overlays/cleanup.html
+++ b/templates/overlays/cleanup.html
@@ -1,5 +1,5 @@
<div class="header">
- <button class="cancel escapeOverlay">{{closeMsg}}</button>
+ <button class="cancel">{{closeMsg}}</button>
<h2>{{heading}}</h2>
</div>
<div class="content">
diff --git a/templates/overlays/languages.html
b/templates/overlays/languages.html
index 3e5d428..2d9e438 100644
--- a/templates/overlays/languages.html
+++ b/templates/overlays/languages.html
@@ -1,5 +1,5 @@
<div class="header">
- <button class="cancel escapeOverlay">{{closeMsg}}</button>
+ <button class="cancel">{{closeMsg}}</button>
<div class="search-box">
<input type="search" class="search"
placeholder="{{placeholder}}">
</div>
diff --git a/templates/overlays/photoCopyrightDialog.html
b/templates/overlays/photoCopyrightDialog.html
index b67b942..866c07f 100644
--- a/templates/overlays/photoCopyrightDialog.html
+++ b/templates/overlays/photoCopyrightDialog.html
@@ -1,5 +1,5 @@
<div class="header">
- <button class="cancel escapeOverlay">{{closeMsg}}</button>
+ <button class="cancel">{{closeMsg}}</button>
</div>
<div class="content">
<p>{{leadText}}</p>
diff --git a/templates/overlays/search/search.html
b/templates/overlays/search/search.html
index bbabe71..0c80176 100644
--- a/templates/overlays/search/search.html
+++ b/templates/overlays/search/search.html
@@ -1,5 +1,5 @@
<div class="header">
- <button class="cancel escapeOverlay">{{closeMsg}}</button>
+ <button class="cancel">{{closeMsg}}</button>
<form class="search-box" method="get" action="{{action}}">
<input type="search" class="search" name="search">
</form>
diff --git a/templates/overlays/talk.html b/templates/overlays/talk.html
index 32492d1..dd12f9b 100644
--- a/templates/overlays/talk.html
+++ b/templates/overlays/talk.html
@@ -1,5 +1,5 @@
<div class="header">
- <button class="cancel escapeOverlay">{{closeMsg}}</button>
+ <button class="cancel">{{closeMsg}}</button>
<h2>{{heading}}</h2>
</div>
<p class="mw-mf-overlay-header">{{explanation}}</p>
--
To view, visit https://gerrit.wikimedia.org/r/60579
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I8fe0f3df1f0443fcbd94e9b2dfaa17af319e245c
Gerrit-PatchSet: 3
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: JGonera <[email protected]>
Gerrit-Reviewer: JGonera <[email protected]>
Gerrit-Reviewer: Jdlrobson <[email protected]>
Gerrit-Reviewer: jenkins-bot
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
