JGonera has uploaded a new change for review.
https://gerrit.wikimedia.org/r/73525
Change subject: Cleanup .loading (spinner) CSS
......................................................................
Cleanup .loading (spinner) CSS
Also, make the talk button show the spinner when talk overlay is being
loaded.
Change-Id: I1a74774841045f820c4e8db338a819e5d08e24e6
---
M javascripts/modules/talk.js
M less/common/common-js.less
M less/common/notifications.less
M less/common/overlays.less
M less/modules/editor.less
M less/modules/mf-photo.less
M less/modules/mf-watchstar.less
M stylesheets/common/common-js.css
M stylesheets/common/notifications.css
M stylesheets/common/overlays.css
M stylesheets/modules/editor.css
M stylesheets/modules/mf-photo.css
M stylesheets/modules/mf-watchstar.css
13 files changed, 36 insertions(+), 66 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/25/73525/1
diff --git a/javascripts/modules/talk.js b/javascripts/modules/talk.js
index d773bd2..0719a54 100644
--- a/javascripts/modules/talk.js
+++ b/javascripts/modules/talk.js
@@ -135,7 +135,7 @@
function onTalkClick( ev ) {
var $talk = $( this ), talkPage = $talk.data( 'title' );
// FIXME: this currently gives an indication something async is
happening. We can do better.
- $talk.css( 'opacity', 0.2 );
+ $talk.addClass( 'loading' );
ev.preventDefault();
M.history.retrievePage( talkPage ).fail( function( resp ) {
@@ -144,11 +144,11 @@
sections: [], title: talkPage
} );
} else {
- $talk.css( 'opacity', '' );
+ $talk.removeClass( 'loading' );
}
} ).done( function( pageData ) {
renderTalkOverlay( pageData );
- $talk.css( 'opacity', '' );
+ $talk.removeClass( 'loading' );
} );
}
diff --git a/less/common/common-js.less b/less/common/common-js.less
index 38d1ff7..de21738 100644
--- a/less/common/common-js.less
+++ b/less/common/common-js.less
@@ -1,8 +1,8 @@
@import "../mf-mixins.less";
.loading {
- background-image: url(images/ajax-loader.gif);
- min-height: 56px;
+ // needs !important to override images from more specific rules
+ background-image: url(images/ajax-loader.gif) !important;
background-repeat: no-repeat;
background-position: center;
.background-size( 32px, auto );
@@ -12,6 +12,11 @@
text-align: center;
background-position: 50% 0;
}
+
+ &#mf-notification, &.buttonBar {
+ background-position: 16px 50%;
+ padding-left: 60px;
+ }
}
.progress-bar {
diff --git a/less/common/notifications.less b/less/common/notifications.less
index d3600e0..40ffa29 100644
--- a/less/common/notifications.less
+++ b/less/common/notifications.less
@@ -15,7 +15,8 @@
#mf-notification,
.drawer {
bottom: 0;
- width: 100%;
+ left: 0;
+ right: 0;
background-color: @searchBoxColorTo;
box-shadow: 0 -1px 8px 0 rgba(0, 0, 0, 0.35);
word-wrap: break-word;
@@ -56,15 +57,10 @@
#mf-notification {
font-size: 0.9em;
+ padding: 16px 38px 18px 22px; /* 38px is 22px padding + close button
icon 16px */
&.noButton button {
display: none;
- }
-
- &.loading {
- background-position: @contentMarginLeft 50%;
- .background-size( 32px, auto );
- padding: 0 0 0 @contentMarginLeft + 30px;
}
&.toast {
@@ -106,7 +102,6 @@
> div {
position: relative;
- padding: 16px 38px 18px 22px; /* 38px is 22px padding + close
button icon 16px */
}
.mw-cite-backlink {
diff --git a/less/common/overlays.less b/less/common/overlays.less
index d4746dd..9902218 100644
--- a/less/common/overlays.less
+++ b/less/common/overlays.less
@@ -93,10 +93,10 @@
border-top: 1px solid #ccc;
background-color: #f3f3f3;
text-align: center;
- padding: 0 1em;
+ padding: .7em 1em;
button {
- margin: .7em .3em;
+ margin: 0 .3em;
}
p {
@@ -111,7 +111,7 @@
background: url('../modules/images/cc-by-sa.png') 0 2px
no-repeat;
background-size: auto 16px;
padding: 0 0 0 55px;
- margin-bottom: 1.2em;
+ margin-bottom: 0;
color: #707070;
font-size: .75em !important;
// if license is only one line (big screens) prevent
cutting off the image
diff --git a/less/modules/editor.less b/less/modules/editor.less
index 0b9c977..33835a4 100644
--- a/less/modules/editor.less
+++ b/less/modules/editor.less
@@ -39,7 +39,7 @@
}
input {
- margin: .7em 0 0;
+ margin: 0 0 .7em;
width: 100%;
.box-sizing( border-box );
}
@@ -65,16 +65,6 @@
.save-bar, .saving-bar {
display: none;
- }
-
- .saving-bar {
- background-position: 16px 50%;
- .background-size( 32px, auto );
- padding: 0 0 0 46px;
-
- p:first-child {
- margin: 18px 16px 0;
- }
}
}
diff --git a/less/modules/mf-photo.less b/less/modules/mf-photo.less
index 378b8b1..5214c50 100644
--- a/less/modules/mf-photo.less
+++ b/less/modules/mf-photo.less
@@ -89,8 +89,7 @@
background-repeat: no-repeat;
&.loading {
- .background-size( auto, auto );
- background-position: 50% 50%;
+ .background-size( 32px, auto );
}
}
diff --git a/less/modules/mf-watchstar.less b/less/modules/mf-watchstar.less
index 2534768..0cc5ff6 100644
--- a/less/modules/mf-watchstar.less
+++ b/less/modules/mf-watchstar.less
@@ -3,7 +3,6 @@
a.watch-this-article {
&.loading {
background-image: @ajaxLoadingImage;
- min-height: 0;
}
}
diff --git a/stylesheets/common/common-js.css b/stylesheets/common/common-js.css
index 96baae0..4a3e488 100644
--- a/stylesheets/common/common-js.css
+++ b/stylesheets/common/common-js.css
@@ -6,8 +6,7 @@
* See README.mediawiki for details on installing.
*/
.loading {
- background-image: url(images/ajax-loader.gif);
- min-height: 56px;
+ background-image: url(images/ajax-loader.gif) !important;
background-repeat: no-repeat;
background-position: center;
/* use -webkit prefix for older android browsers eg. nexus 1 */
@@ -21,6 +20,11 @@
text-align: center;
background-position: 50% 0;
}
+.loading#mf-notification,
+.loading.buttonBar {
+ background-position: 16px 50%;
+ padding-left: 60px;
+}
.progress-bar {
width: 100%;
height: 8px;
diff --git a/stylesheets/common/notifications.css
b/stylesheets/common/notifications.css
index aa4c862..881ca4e 100644
--- a/stylesheets/common/notifications.css
+++ b/stylesheets/common/notifications.css
@@ -15,7 +15,8 @@
#mf-notification,
.drawer {
bottom: 0;
- width: 100%;
+ left: 0;
+ right: 0;
background-color: #f3f3f3;
box-shadow: 0 -1px 8px 0 rgba(0, 0, 0, 0.35);
word-wrap: break-word;
@@ -57,18 +58,12 @@
}
#mf-notification {
font-size: 0.9em;
+ padding: 16px 38px 18px 22px;
+ /* 38px is 22px padding + close button icon 16px */
+
}
#mf-notification.noButton button {
display: none;
-}
-#mf-notification.loading {
- background-position: 23px 50%;
- /* use -webkit prefix for older android browsers eg. nexus 1 */
-
- -o-background-size: 32px auto;
- -webkit-background-size: 32px auto;
- background-size: 32px auto;
- padding: 0 0 0 53px;
}
#mf-notification.toast {
left: 10%;
@@ -104,9 +99,6 @@
}
#mf-notification > div {
position: relative;
- padding: 16px 38px 18px 22px;
- /* 38px is 22px padding + close button icon 16px */
-
}
#mf-notification .mw-cite-backlink {
display: none;
diff --git a/stylesheets/common/overlays.css b/stylesheets/common/overlays.css
index 2661f97..ced77cc 100644
--- a/stylesheets/common/overlays.css
+++ b/stylesheets/common/overlays.css
@@ -80,10 +80,10 @@
border-top: 1px solid #ccc;
background-color: #f3f3f3;
text-align: center;
- padding: 0 1em;
+ padding: .7em 1em;
}
.mw-mf-overlay .buttonBar button {
- margin: .7em .3em;
+ margin: 0 .3em;
}
.mw-mf-overlay .buttonBar p {
margin: .7em 0;
@@ -95,7 +95,7 @@
background: url('../modules/images/cc-by-sa.png') 0 2px no-repeat;
background-size: auto 16px;
padding: 0 0 0 55px;
- margin-bottom: 1.2em;
+ margin-bottom: 0;
color: #707070;
font-size: .75em !important;
min-height: 18px;
diff --git a/stylesheets/modules/editor.css b/stylesheets/modules/editor.css
index 14e54d7..2dc5e86 100644
--- a/stylesheets/modules/editor.css
+++ b/stylesheets/modules/editor.css
@@ -37,7 +37,7 @@
outline: none;
}
.editor-overlay input {
- margin: .7em 0 0;
+ margin: 0 0 .7em;
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
@@ -66,18 +66,6 @@
.editor-overlay .save-bar,
.editor-overlay .saving-bar {
display: none;
-}
-.editor-overlay .saving-bar {
- background-position: 16px 50%;
- /* use -webkit prefix for older android browsers eg. nexus 1 */
-
- -o-background-size: 32px auto;
- -webkit-background-size: 32px auto;
- background-size: 32px auto;
- padding: 0 0 0 46px;
-}
-.editor-overlay .saving-bar p:first-child {
- margin: 18px 16px 0;
}
/*
hide the bar (and give more editing space) when the keyboard is visible
diff --git a/stylesheets/modules/mf-photo.css b/stylesheets/modules/mf-photo.css
index c0c7ac8..b00f634 100644
--- a/stylesheets/modules/mf-photo.css
+++ b/stylesheets/modules/mf-photo.css
@@ -96,10 +96,9 @@
.photo-nag .preview.loading {
/* use -webkit prefix for older android browsers eg. nexus 1 */
- -o-background-size: auto auto;
- -webkit-background-size: auto auto;
- background-size: auto auto;
- background-position: 50% 50%;
+ -o-background-size: 32px auto;
+ -webkit-background-size: 32px auto;
+ background-size: 32px auto;
}
.photo-nag li {
clear: both;
diff --git a/stylesheets/modules/mf-watchstar.css
b/stylesheets/modules/mf-watchstar.css
index 0c0f33c..911a3c0 100644
--- a/stylesheets/modules/mf-watchstar.css
+++ b/stylesheets/modules/mf-watchstar.css
@@ -7,7 +7,6 @@
*/
a.watch-this-article.loading {
background-image: url(../common/images/ajax-loader.gif);
- min-height: 0;
}
.animations .beta .watch-this-article,
.animations .alpha .watch-this-article {
--
To view, visit https://gerrit.wikimedia.org/r/73525
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I1a74774841045f820c4e8db338a819e5d08e24e6
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
