JGonera has uploaded a new change for review.
https://gerrit.wikimedia.org/r/82067
Change subject: Fix loading spinner page actions buttons
......................................................................
Fix loading spinner page actions buttons
* Hide the number of conversations when the talk page actions button is
replaced with a spinner.
* Stop page actions jumping when any of the buttons is replaced with a
spinner (regression from a7a1ed27).
* Reuse .spinner class from the editor in notifications.
Change-Id: Ib9541cd1237316d0157630c019e5d1362584e50d
---
M less/common/common-js.less
M less/modules/editor.less
M less/modules/talk.less
M stylesheets/common/common-js.css
M stylesheets/modules/editor.css
M stylesheets/modules/talk.css
M templates/overlays/notifications.html
7 files changed, 26 insertions(+), 18 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/67/82067/1
diff --git a/less/common/common-js.less b/less/common/common-js.less
index d2b076a..825537a 100644
--- a/less/common/common-js.less
+++ b/less/common/common-js.less
@@ -1,12 +1,16 @@
@import "../mixins.less";
.loading {
+ &.spinner {
+ height: 100px;
+ }
+
// 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 );
- min-height: 50px;
+ min-height: 30px;
&.content {
padding-top: 48px;
diff --git a/less/modules/editor.less b/less/modules/editor.less
index 7c4ff67..1441d77 100644
--- a/less/modules/editor.less
+++ b/less/modules/editor.less
@@ -25,10 +25,6 @@
}
.editor-overlay {
- .spinner {
- height: 100px;
- }
-
textarea {
width: 100%;
min-height: 50%;
diff --git a/less/modules/talk.less b/less/modules/talk.less
index af994c9..bf56fe5 100644
--- a/less/modules/talk.less
+++ b/less/modules/talk.less
@@ -1,14 +1,19 @@
@import "../mixins.less";
+.alpha #page-actions #ca-talk.count {
+ a {
+ text-indent: 0;
+ text-align: center;
+ line-height: 38px;
+ font-weight: bold;
+ color: #FFF;
+ padding-left: 4px;
+ font-size: 9px; // FIXME: use pixels for time being as the icon
in pixels.
+ }
-.alpha #page-actions #ca-talk.count a {
- text-indent: 0;
- text-align: center;
- line-height: 38px;
- font-weight: bold;
- color: #FFF;
- padding-left: 4px;
- font-size: 9px; // FIXME: use pixels for time being as the icon in
pixels.
+ &.loading a {
+ text-indent: -9999px;
+ }
}
.mw-mf-overlay .header {
diff --git a/stylesheets/common/common-js.css b/stylesheets/common/common-js.css
index 42d7026..01b98f4 100644
--- a/stylesheets/common/common-js.css
+++ b/stylesheets/common/common-js.css
@@ -14,7 +14,10 @@
-o-background-size: 32px auto;
-webkit-background-size: 32px auto;
background-size: 32px auto;
- min-height: 50px;
+ min-height: 30px;
+}
+.loading.spinner {
+ height: 100px;
}
.loading.content {
padding-top: 48px;
diff --git a/stylesheets/modules/editor.css b/stylesheets/modules/editor.css
index fb2a074..3531c23 100644
--- a/stylesheets/modules/editor.css
+++ b/stylesheets/modules/editor.css
@@ -28,9 +28,6 @@
margin: 0;
display: block;
}
-.editor-overlay .spinner {
- height: 100px;
-}
.editor-overlay textarea {
width: 100%;
min-height: 50%;
diff --git a/stylesheets/modules/talk.css b/stylesheets/modules/talk.css
index 6f252cd..e2d884b 100644
--- a/stylesheets/modules/talk.css
+++ b/stylesheets/modules/talk.css
@@ -14,6 +14,9 @@
padding-left: 4px;
font-size: 9px;
}
+.alpha #page-actions #ca-talk.count.loading a {
+ text-indent: -9999px;
+}
.mw-mf-overlay .header button.add {
position: absolute;
right: 0;
diff --git a/templates/overlays/notifications.html
b/templates/overlays/notifications.html
index d7874a2..59a9b54 100644
--- a/templates/overlays/notifications.html
+++ b/templates/overlays/notifications.html
@@ -2,7 +2,7 @@
<button class="cancel">{{closeMsg}}</button>
<h2>{{heading}}</h2>
</div>
-<div class="loading"></div>
+<div class="spinner loading"></div>
{{#errorMessage}}<div class="content">{{errorMessage}}</div>{{/errorMessage}}
<ul class="mw-mf-notifications">
{{#notifications}}
--
To view, visit https://gerrit.wikimedia.org/r/82067
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ib9541cd1237316d0157630c019e5d1362584e50d
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
