JGonera has uploaded a new change for review.
https://gerrit.wikimedia.org/r/100515
Change subject: [WIP] Story 1483: Make overlay headers fixed
......................................................................
[WIP] Story 1483: Make overlay headers fixed
Change-Id: I0c5bc2426c24ab15646b840c407713ee1228f5ab
---
M javascripts/common/OverlayNew.js
M less/common/OverlayNew.less
M less/common/common.less
M templates/OverlayNew.html
M templates/modules/editorNew/EditorOverlay.html
M templates/modules/searchNew/SearchOverlay.html
6 files changed, 22 insertions(+), 8 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/15/100515/1
diff --git a/javascripts/common/OverlayNew.js b/javascripts/common/OverlayNew.js
index 492fbee..2671084 100644
--- a/javascripts/common/OverlayNew.js
+++ b/javascripts/common/OverlayNew.js
@@ -7,6 +7,19 @@
template: M.template.get( 'OverlayNew' ),
defaults: {
headerButtonsListClassName: 'v-border bottom-border'
+ },
+
+ show: function() {
+ // header height can change
+ var self = this, $header = this.$( '.overlay-header' );
+
+ this._super();
+
+ setTimeout( function() {
+ var headerHeight = $header.outerHeight() + 'px';
+ self.$el.css( 'padding-top', headerHeight );
+ $header.css( 'margin-top', '-' + headerHeight );
+ }, 0 );
}
} );
diff --git a/less/common/OverlayNew.less b/less/common/OverlayNew.less
index 01e05b9..5f191b4 100644
--- a/less/common/OverlayNew.less
+++ b/less/common/OverlayNew.less
@@ -27,11 +27,13 @@
width: 100%;
background: #fff;
z-index: 4;
+ .box-sizing(border-box);
.overlay-header {
display: table;
width: 100%;
.box-sizing(border-box);
+ background: #fff;
h2 {
span {
@@ -44,6 +46,8 @@
> ul, > div {
display: table-cell;
vertical-align: middle;
+ // not sure why the one in .overlay-header isn't
sufficient
+ background: #fff
}
.bottom-border {
diff --git a/less/common/common.less b/less/common/common.less
index 5f6359c..ea6e1bb 100644
--- a/less/common/common.less
+++ b/less/common/common.less
@@ -167,9 +167,6 @@
}
.content {
- // allow absolute positioned children e.g. edit link
- position: relative;
-
// Includes images on the profile and uploads special pages
img {
// FIXME [Inline Styles]: Important ensures we can overwrite
any inline styles
diff --git a/templates/OverlayNew.html b/templates/OverlayNew.html
index c2a2b79..d6328d8 100644
--- a/templates/OverlayNew.html
+++ b/templates/OverlayNew.html
@@ -1,4 +1,4 @@
-<div class="overlay-header with-margins">
+<div class="overlay-header with-margins position-fixed">
<ul class="v-border bottom-border">
<li><button class="cancel icon">{{closeMsg}}</button></li>
</ul>
diff --git a/templates/modules/editorNew/EditorOverlay.html
b/templates/modules/editorNew/EditorOverlay.html
index 3f52e0e..e55bf0f 100644
--- a/templates/modules/editorNew/EditorOverlay.html
+++ b/templates/modules/editorNew/EditorOverlay.html
@@ -1,4 +1,4 @@
-<div class="overlay-header with-margins initial-header hideable hidden">
+<div class="overlay-header with-margins position-fixed initial-header hideable
hidden">
<ul class="v-border bottom-border">
<li><button class="cancel icon">{{closeMsg}}</button></li>
</ul>
@@ -9,7 +9,7 @@
<li><button class="continue icon"
disabled>{{continueMsg}}</button></li>
</ul>
</div>
-<div class="overlay-header with-margins save-header hideable hidden">
+<div class="overlay-header with-margins position-fixed save-header hideable
hidden">
<ul class="v-border bottom-border">
<li><button class="back icon">{{keepEditingMsg}}</button></li>
</ul>
@@ -20,7 +20,7 @@
<li><button class="submit icon">{{saveMsg}}</button></li>
</ul>
</div>
-<div class="overlay-header with-margins saving-header hideable hidden">
+<div class="overlay-header with-margins position-fixed saving-header hideable
hidden">
<ul class="v-border bottom-border">
<li><button class="cancel icon"
disabled>{{closeMsg}}</button></li>
</ul>
diff --git a/templates/modules/searchNew/SearchOverlay.html
b/templates/modules/searchNew/SearchOverlay.html
index 25a9081..26c23c7 100644
--- a/templates/modules/searchNew/SearchOverlay.html
+++ b/templates/modules/searchNew/SearchOverlay.html
@@ -1,4 +1,4 @@
-<div class="overlay-header with-margins">
+<div class="overlay-header with-margins position-fixed">
<ul class="v-border bottom-border">
<li><button class="cancel icon">{{closeMsg}}</button></li>
</ul>
--
To view, visit https://gerrit.wikimedia.org/r/100515
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I0c5bc2426c24ab15646b840c407713ee1228f5ab
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: JGonera <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
