Jdlrobson has uploaded a new change for review.
https://gerrit.wikimedia.org/r/51210
Change subject: Tweak: Position fixed elements and open navigation panel
......................................................................
Tweak: Position fixed elements and open navigation panel
add class position-fixed-element to all fixed position elements
alter positioning when menu opened/closed
Change-Id: I52d4bc965d585442c8fc09b0264667ae0cb88d3a
---
M includes/specials/SpecialMobileDiff.php
M javascripts/common/mf-notification.js
A stylesheets/common/mf-buttons.css
M stylesheets/common/mf-navigation.css
M stylesheets/less/common/mf-navigation.less
M templates/photoUploadPreview.html
6 files changed, 140 insertions(+), 8 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/10/51210/1
diff --git a/includes/specials/SpecialMobileDiff.php
b/includes/specials/SpecialMobileDiff.php
index 206854b..a27fdce 100644
--- a/includes/specials/SpecialMobileDiff.php
+++ b/includes/specials/SpecialMobileDiff.php
@@ -127,7 +127,8 @@
$output = $this->getOutput();
$output->addHtml(
- Html::openElement( 'div', array( 'id' =>
'mw-mf-userinfo' ) )
+ Html::openElement( 'div', array( 'id' =>
'mw-mf-userinfo',
+ 'class' => 'position-fixed-element' ) )
);
$userId = $this->rev->getUser();
diff --git a/javascripts/common/mf-notification.js
b/javascripts/common/mf-notification.js
index 26009d8..418e335 100644
--- a/javascripts/common/mf-notification.js
+++ b/javascripts/common/mf-notification.js
@@ -23,6 +23,7 @@
$( '#mf-notification div' ).html( html );
calculatePosition();
return $( '#mf-notification' ).removeAttr( 'class' ).
+ addClass( 'position-fixed-element' ).
addClass( classes ).show();
}
@@ -45,7 +46,9 @@
}
function init( firstRun ) {
+ // FIXME: turn into view with template
var el = $( '<div
id="mf-notification"><div></div></div>' ).hide().
+ addClass( 'position-fixed-element' ).
appendTo( document.body )[ 0 ];
if ( M.getConfig( 'beta' ) ) {
diff --git a/stylesheets/common/mf-buttons.css
b/stylesheets/common/mf-buttons.css
new file mode 100644
index 0000000..60c5bb5
--- /dev/null
+++ b/stylesheets/common/mf-buttons.css
@@ -0,0 +1,119 @@
+/* reuses https://github.com/wikimedia/agora */
+.button,
+button,
+input[type=submit] {
+ display: inline-block;
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ border-radius: 3px;
+ padding: 1em 1.25em 1em;
+ line-height: 1;
+ text-align: center;
+ cursor: pointer;
+ border: 1px #33589f solid;
+ color: #ffffff;
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+ background-color: #3366bb;
+ background-image: -moz-linear-gradient(top, #3670c8 0, #3366bb 100%);
+ background-image: -ms-linear-gradient(top, #3670c8 0, #3366bb 100%);
+ background-image: -webkit-gradient(linear, left top, left bottom,
color-stop(0, #3670c8), color-stop(100%, #3366bb));
+ background-image: -webkit-linear-gradient(top, #3670c8 0, #3366bb 100%);
+ background-image: linear-gradient(#3670c8 0, #3366bb 100%);
+}
+.button:hover,
+button:hover,
+input[type=submit]:hover {
+ background-color: #3f77d7;
+ background-image: -moz-linear-gradient(top, #4c84da 0, #3f77d7 100%);
+ background-image: -ms-linear-gradient(top, #4c84da 0, #3f77d7 100%);
+ background-image: -webkit-gradient(linear, left top, left bottom,
color-stop(0, #4c84da), color-stop(100%, #3f77d7));
+ background-image: -webkit-linear-gradient(top, #4c84da 0, #3f77d7 100%);
+ background-image: linear-gradient(#4c84da 0, #3f77d7 100%);
+}
+.button:active,
+button:active,
+input[type=submit]:active {
+ background-color: #2a549c;
+ background-image: -moz-linear-gradient(top, #2d5ea9 0, #2a549c 100%);
+ background-image: -ms-linear-gradient(top, #2d5ea9 0, #2a549c 100%);
+ background-image: -webkit-gradient(linear, left top, left bottom,
color-stop(0, #2d5ea9), color-stop(100%, #2a549c));
+ background-image: -webkit-linear-gradient(top, #2d5ea9 0, #2a549c 100%);
+ background-image: linear-gradient(#2d5ea9 0, #2a549c 100%);
+}
+.button:visited,
+button:visited,
+input[type=submit]:visited {
+ color: #fff;
+}
+.button:disabled,
+button:disabled,
+input[type=submit]:disabled,
+.button:disabled.hover,
+button:disabled.hover,
+input[type=submit]:disabled.hover,
+.button.disabled,
+button.disabled,
+input[type=submit].disabled,
+.button.disabled:hover,
+button.disabled:hover,
+input[type=submit].disabled:hover {
+ color: white;
+ text-shadow: none;
+ background-color: #7297d7;
+ background-image: -moz-linear-gradient(top, #7297d7 0, #7297d7 100%);
+ background-image: -ms-linear-gradient(top, #7297d7 0, #7297d7 100%);
+ background-image: -webkit-gradient(linear, left top, left bottom,
color-stop(0, #7297d7), color-stop(100%, #7297d7));
+ background-image: -webkit-linear-gradient(top, #7297d7 0, #7297d7 100%);
+ background-image: linear-gradient(#7297d7 0, #7297d7 100%);
+ border-color: #5e89d1;
+}
+.button.languageSelector,
+button.languageSelector,
+input[type=submit].languageSelector {
+ margin-top: 14pt;
+}
+.button.cancel,
+button.cancel,
+input[type=submit].cancel {
+ background: #999;
+ border: 1px #777 solid;
+}
+.header a.button {
+ font-size: 1em;
+ margin-top: 8px;
+ margin-bottom: 8px;
+ -webkit-border-radius: 0;
+ -moz-border-radius: 0;
+ border-radius: 0;
+ padding-top: 7px;
+ padding-bottom: 7px;
+ text-decoration: none;
+ text-shadow: none;
+ background-color: #e9e9ea;
+ background-image: -moz-linear-gradient(top, #ffffff 45%, #e9e9ea 100%);
+ background-image: -ms-linear-gradient(top, #ffffff 45%, #e9e9ea 100%);
+ background-image: -webkit-gradient(linear, left top, left bottom,
color-stop(45%, #ffffff), color-stop(100%, #e9e9ea));
+ background-image: -webkit-linear-gradient(top, #ffffff 45%, #e9e9ea 100%);
+ background-image: linear-gradient(#ffffff 45%, #e9e9ea 100%);
+ color: #58595b;
+ border: 1px solid #9ea0a3;
+ border-right: none;
+ vertical-align: middle;
+ white-space: nowrap;
+}
+.header a.button.active {
+ background: #c8cacb;
+ font-weight: bold;
+}
+.header a.button:first-child {
+ -webkit-border-radius: 3px 0 0 3px;
+ -moz-border-radius: 3px 0 0 3px;
+ border-radius: 3px 0 0 3px;
+ border-left: 1px solid #9ea0a3;
+}
+.header a.button:last-child {
+ -webkit-border-radius: 0 3px 3px 0;
+ -moz-border-radius: 0 3px 3px 0;
+ border-radius: 0 3px 3px 0;
+ border-right: 1px solid #9ea0a3;
+}
diff --git a/stylesheets/common/mf-navigation.css
b/stylesheets/common/mf-navigation.css
index bb1b1dd..61a83a3 100644
--- a/stylesheets/common/mf-navigation.css
+++ b/stylesheets/common/mf-navigation.css
@@ -199,8 +199,9 @@
width: 80%;
right: 20%;
}
+.navigationEnabled .position-fixed-element,
.navigationEnabled #mw-mf-page-center {
- left: 80%;
+ left: 80% !important;
overflow-x: hidden;
}
.navigationEnabled.navigationFullScreen #mw-mf-page-left {
@@ -529,14 +530,18 @@
}
}
@media all and (min-width: 700px) {
+ .navigationEnabled .alpha #mw-mf-page-left,
.navigationEnabled .beta #mw-mf-page-left {
width: 20%;
display: block;
right: 80%;
}
+ .navigationEnabled .alpha .position-fixed-element,
+ .navigationEnabled .beta .position-fixed-element,
+ .navigationEnabled .alpha #mw-mf-page-center,
.navigationEnabled .beta #mw-mf-page-center {
- left: 20%;
- right: 0;
+ left: 20% !important;
+ right: 0 !important;
width: 80%;
overflow: auto;
}
diff --git a/stylesheets/less/common/mf-navigation.less
b/stylesheets/less/common/mf-navigation.less
index 1493f95..8b49fe1 100644
--- a/stylesheets/less/common/mf-navigation.less
+++ b/stylesheets/less/common/mf-navigation.less
@@ -94,8 +94,9 @@
right: 20%;
}
+ .position-fixed-element,
#mw-mf-page-center {
- left: 80%;
+ left: 80% !important;
overflow-x: hidden; // prevent horizontal scroll on chrome
}
@@ -477,15 +478,18 @@
}
@media all and (min-width: 700px) {
+ .navigationEnabled .alpha,
.navigationEnabled .beta {
#mw-mf-page-left {
width: 20%;
display: block;
right: 80%;
}
+
+ .position-fixed-element,
#mw-mf-page-center {
- left: 20%;
- right: 0;
+ left: 20% !important;
+ right: 0 !important;
width: 80%;
overflow: auto;
}
diff --git a/templates/photoUploadPreview.html
b/templates/photoUploadPreview.html
index a60dae3..7c199fc 100644
--- a/templates/photoUploadPreview.html
+++ b/templates/photoUploadPreview.html
@@ -3,7 +3,7 @@
<textarea name="description"
placeholder="{{descriptionPlaceholder}}"></textarea>
<div class="license">{{{license}}}</div>
</div>
-<div class="buttonBar">
+<div class="buttonBar position-fixed-element">
<button class="cancel">{{cancelButton}}</button>
<button class="submit" disabled>{{submitButton}}</button>
</div>
--
To view, visit https://gerrit.wikimedia.org/r/51210
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I52d4bc965d585442c8fc09b0264667ae0cb88d3a
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Jdlrobson <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
