Jdlrobson has uploaded a new change for review.
https://gerrit.wikimedia.org/r/62658
Change subject: Separate notifications styling
......................................................................
Separate notifications styling
Add style rules to desktop
Change-Id: I2333a2cea7517a0ada488b8d891857d93c1d9546
---
M MobileFrontend.php
M less/common/mf-navigation.less
A less/common/notifications.less
M stylesheets/common/mf-navigation.css
A stylesheets/common/notifications.css
5 files changed, 276 insertions(+), 267 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/58/62658/1
diff --git a/MobileFrontend.php b/MobileFrontend.php
index ae27b84..fabdddb 100644
--- a/MobileFrontend.php
+++ b/MobileFrontend.php
@@ -414,6 +414,13 @@
),
);
+$wgResourceModules['mobile.notifications'] = $wgMFMobileResourceBoilerplate +
array(
+ 'styles' => array(
+ 'stylesheets/common/notifications.css',
+ ),
+ 'position' => 'top',
+);
+
$wgResourceModules['mobile.stable.styles'] = $wgMFMobileResourceBoilerplate +
array(
'styles' => array(
'stylesheets/modules/mf-search.css',
@@ -431,6 +438,7 @@
'dependencies' => array(
'mobile.startup',
'mobile.stable.dependencies',
+ 'mobile.notifications',
),
'scripts' => array(
'javascripts/externals/hogan.js',
diff --git a/less/common/mf-navigation.less b/less/common/mf-navigation.less
index f30aa68..b715aa6 100644
--- a/less/common/mf-navigation.less
+++ b/less/common/mf-navigation.less
@@ -9,7 +9,6 @@
@overlayAlertPaddingHorizontal: 1em;
@overlayAlertPadding: 0.5em @overlayAlertPaddingHorizontal;
@overlayBorderWidth: 1px;
-@toastNotificationColor: #373737;
@watchThisArticleSize: 22px;
#mw-mf-menu-page {
@@ -344,135 +343,5 @@
a.signup {
display: block;
- }
-}
-
-/* Notifications */
-#mf-notification,
-.drawer {
- position: fixed;
- /* -2px to avoid a weird glitch in some browsers where the popup moves
- * slightly when scrolling */
- bottom: -2px;
- width: 100%;
- background-color: @searchBoxColorTo;
- .boxshadow( 0, -1px, 8px, 0, rgba(0, 0, 0, 0.35) );
- word-wrap: break-word;
- z-index: 3;
- display: none;
-
- &.visible {
- display: block
- }
-}
-
-.transforms .alpha {
- #mf-notification,
- .drawer {
- display: block;
- bottom: -100px;
- opacity: 0;
- .transition( all, .2s );
-
- &.visible {
- opacity: 1;
- .transform( translate3d(0, -98px, 0) );
- }
- }
-}
-
-#mf-notification {
- font-size: 0.9em;
-
- &.noButton button {
- display: none;
- }
-
- &.loading {
- background-position: @contentMarginLeft 50%;
- background-repeat: no-repeat;
- .background-size( 32px, auto );
- padding: 0 0 0 @contentMarginLeft + 30px;
- }
-
- &.toast {
- left: 10%;
- right: 10%;
- padding: 0;
- font-size: @baseFontSize * 0.8;
- background-color: @toastNotificationColor;
- color: white;
- margin: 0 auto 20px auto;
- width: 80%;
- text-align: center;
- .border-radius( 1px );
- .boxshadow( 0, 0, 1px, 3px, @toastNotificationColor );
-
- button {
- display: none;
- }
-
- &.error {
- background-image: url(images/error.png);
- background-position: 16px 50%;
- background-repeat: no-repeat;
- padding-left: 5%;
- width: 75%;
- }
-
- &.locked button {
- display: block;
- top: 0.8em;
- right: 1.4em;
- }
-
- > div {
- padding: 0.8em 1.4em;
- }
- }
-
- > div {
- position: relative;
- padding: 16px 38px 18px 22px; /* 38px is 22px padding + close
button icon 16px */
- }
-
- .mw-cite-backlink {
- display: none;
- }
-
- button {
- top: 22px;
- right: 22px; /* padding of #content_wrapper */
- width: 16px;
- height: 12px;
- background: url(../common/images/close-button-beta.png)
no-repeat scroll 0 0 transparent;
- margin: 0;
- background-position: right center;
- .background-size( auto, 12px );
- cursor: pointer;
- position: absolute;
- text-indent: -999px;
- overflow: hidden;
- border: none;
- }
-
- h3 {
- margin: 0;
- padding-right: 4px;
- line-height: 1em;
- display: inline;
- }
-
- a:visited, a {
- color: #3354C0;
- }
-
- p {
- line-height: 1.2;
- margin: 0 0 .5em;
- }
-
- .progress-bar {
- margin: .9em 0 0;
}
}
diff --git a/less/common/notifications.less b/less/common/notifications.less
new file mode 100644
index 0000000..2f316c7
--- /dev/null
+++ b/less/common/notifications.less
@@ -0,0 +1,132 @@
+@import "../mf-mixins.less";
+@toastNotificationColor: #373737;
+
+/* Notifications */
+#mf-notification,
+.drawer {
+ position: fixed;
+ /* -2px to avoid a weird glitch in some browsers where the popup moves
+ * slightly when scrolling */
+ bottom: -2px;
+ width: 100%;
+ background-color: @searchBoxColorTo;
+ .boxshadow( 0, -1px, 8px, 0, rgba(0, 0, 0, 0.35) );
+ word-wrap: break-word;
+ z-index: 3;
+ display: none;
+
+ &.visible {
+ display: block
+ }
+}
+
+.transforms .alpha {
+ #mf-notification,
+ .drawer {
+ display: block;
+ bottom: -100px;
+ opacity: 0;
+ .transition( all, .2s );
+
+ &.visible {
+ opacity: 1;
+ .transform( translate3d(0, -98px, 0) );
+ }
+ }
+}
+
+#mf-notification {
+ font-size: 0.9em;
+
+ &.noButton button {
+ display: none;
+ }
+
+ &.loading {
+ background-position: @contentMarginLeft 50%;
+ background-repeat: no-repeat;
+ .background-size( 32px, auto );
+ padding: 0 0 0 @contentMarginLeft + 30px;
+ }
+
+ &.toast {
+ left: 10%;
+ right: 10%;
+ padding: 0;
+ font-size: @baseFontSize * 0.8;
+ background-color: @toastNotificationColor;
+ color: white;
+ margin: 0 auto 20px auto;
+ width: 80%;
+ text-align: center;
+ .border-radius( 1px );
+ .boxshadow( 0, 0, 1px, 3px, @toastNotificationColor );
+
+ button {
+ display: none;
+ }
+
+ &.error {
+ background-image: url(images/error.png);
+ background-position: 16px 50%;
+ background-repeat: no-repeat;
+ padding-left: 5%;
+ width: 75%;
+ }
+
+ &.locked button {
+ display: block;
+ top: 0.8em;
+ right: 1.4em;
+ }
+
+ > div {
+ padding: 0.8em 1.4em;
+ }
+ }
+
+ > div {
+ position: relative;
+ padding: 16px 38px 18px 22px; /* 38px is 22px padding + close
button icon 16px */
+ }
+
+ .mw-cite-backlink {
+ display: none;
+ }
+
+ button {
+ top: 22px;
+ right: 22px; /* padding of #content_wrapper */
+ width: 16px;
+ height: 12px;
+ background: url(../common/images/close-button-beta.png)
no-repeat scroll 0 0 transparent;
+ margin: 0;
+ background-position: right center;
+ .background-size( auto, 12px );
+ cursor: pointer;
+ position: absolute;
+ text-indent: -999px;
+ overflow: hidden;
+ border: none;
+ }
+
+ h3 {
+ margin: 0;
+ padding-right: 4px;
+ line-height: 1em;
+ display: inline;
+ }
+
+ a:visited, a {
+ color: #3354C0;
+ }
+
+ p {
+ line-height: 1.2;
+ margin: 0 0 .5em;
+ }
+
+ .progress-bar {
+ margin: .9em 0 0;
+ }
+}
diff --git a/stylesheets/common/mf-navigation.css
b/stylesheets/common/mf-navigation.css
index ca0af89..4bf9089 100644
--- a/stylesheets/common/mf-navigation.css
+++ b/stylesheets/common/mf-navigation.css
@@ -300,139 +300,3 @@
.drawer a.signup {
display: block;
}
-/* Notifications */
-#mf-notification,
-.drawer {
- position: fixed;
- /* -2px to avoid a weird glitch in some browsers where the popup moves
- * slightly when scrolling */
-
- bottom: -2px;
- width: 100%;
- background-color: #f3f3f3;
- box-shadow: 0 -1px 8px 0 rgba(0, 0, 0, 0.35);
- word-wrap: break-word;
- z-index: 3;
- display: none;
-}
-#mf-notification.visible,
-.drawer.visible {
- display: block;
-}
-.transforms .alpha #mf-notification,
-.transforms .alpha .drawer {
- display: block;
- bottom: -100px;
- opacity: 0;
- -webkit-backface-visibility: hidden;
- -webkit-transition-property: all;
- transition-property: all;
- -webkit-transition-duration: 0.2s;
- transition-duration: 0.2s;
- -webkit-transition-timing-function: ease;
- transition-timing-function: ease;
-}
-.transforms .alpha #mf-notification.visible,
-.transforms .alpha .drawer.visible {
- opacity: 1;
- -webkit-transform: translate3d(0, -98px, 0);
- transform: translate3d(0, -98px, 0);
-}
-#mf-notification {
- font-size: 0.9em;
-}
-#mf-notification.noButton button {
- display: none;
-}
-#mf-notification.loading {
- background-position: 23px 50%;
- background-repeat: no-repeat;
- /* use -webkit prefix for older android browsers eg. nexus 1 */
-
- -moz-background-size: 32px auto;
- -o-background-size: 32px auto;
- -webkit-background-size: 32px auto;
- background-size: 32px auto;
- padding: 0 0 0 53px;
-}
-#mf-notification.toast {
- left: 10%;
- right: 10%;
- padding: 0;
- font-size: 0.8em;
- background-color: #373737;
- color: white;
- margin: 0 auto 20px auto;
- width: 80%;
- text-align: center;
- -webkit-border-radius: 1px;
- -moz-border-radius: 1px;
- border-radius: 1px;
- box-shadow: 0 0 1px 3px #373737;
-}
-#mf-notification.toast button {
- display: none;
-}
-#mf-notification.toast.error {
- background-image: url(images/error.png);
- background-position: 16px 50%;
- background-repeat: no-repeat;
- padding-left: 5%;
- width: 75%;
-}
-#mf-notification.toast.locked button {
- display: block;
- top: 0.8em;
- right: 1.4em;
-}
-#mf-notification.toast > div {
- padding: 0.8em 1.4em;
-}
-#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;
-}
-#mf-notification button {
- top: 22px;
- right: 22px;
- /* padding of #content_wrapper */
-
- width: 16px;
- height: 12px;
- background: url(../common/images/close-button-beta.png) no-repeat scroll 0 0
transparent;
- margin: 0;
- background-position: right center;
- /* use -webkit prefix for older android browsers eg. nexus 1 */
-
- -moz-background-size: auto 12px;
- -o-background-size: auto 12px;
- -webkit-background-size: auto 12px;
- background-size: auto 12px;
- cursor: pointer;
- position: absolute;
- text-indent: -999px;
- overflow: hidden;
- border: none;
-}
-#mf-notification h3 {
- margin: 0;
- padding-right: 4px;
- line-height: 1em;
- display: inline;
-}
-#mf-notification a:visited,
-#mf-notification a {
- color: #3354C0;
-}
-#mf-notification p {
- line-height: 1.2;
- margin: 0 0 .5em;
-}
-#mf-notification .progress-bar {
- margin: .9em 0 0;
-}
diff --git a/stylesheets/common/notifications.css
b/stylesheets/common/notifications.css
new file mode 100644
index 0000000..5fb2398
--- /dev/null
+++ b/stylesheets/common/notifications.css
@@ -0,0 +1,136 @@
+/* Notifications */
+#mf-notification,
+.drawer {
+ position: fixed;
+ /* -2px to avoid a weird glitch in some browsers where the popup moves
+ * slightly when scrolling */
+
+ bottom: -2px;
+ width: 100%;
+ background-color: #f3f3f3;
+ box-shadow: 0 -1px 8px 0 rgba(0, 0, 0, 0.35);
+ word-wrap: break-word;
+ z-index: 3;
+ display: none;
+}
+#mf-notification.visible,
+.drawer.visible {
+ display: block;
+}
+.transforms .alpha #mf-notification,
+.transforms .alpha .drawer {
+ display: block;
+ bottom: -100px;
+ opacity: 0;
+ -webkit-backface-visibility: hidden;
+ -webkit-transition-property: all;
+ transition-property: all;
+ -webkit-transition-duration: 0.2s;
+ transition-duration: 0.2s;
+ -webkit-transition-timing-function: ease;
+ transition-timing-function: ease;
+}
+.transforms .alpha #mf-notification.visible,
+.transforms .alpha .drawer.visible {
+ opacity: 1;
+ -webkit-transform: translate3d(0, -98px, 0);
+ transform: translate3d(0, -98px, 0);
+}
+#mf-notification {
+ font-size: 0.9em;
+}
+#mf-notification.noButton button {
+ display: none;
+}
+#mf-notification.loading {
+ background-position: 23px 50%;
+ background-repeat: no-repeat;
+ /* use -webkit prefix for older android browsers eg. nexus 1 */
+
+ -moz-background-size: 32px auto;
+ -o-background-size: 32px auto;
+ -webkit-background-size: 32px auto;
+ background-size: 32px auto;
+ padding: 0 0 0 53px;
+}
+#mf-notification.toast {
+ left: 10%;
+ right: 10%;
+ padding: 0;
+ font-size: 0.8em;
+ background-color: #373737;
+ color: white;
+ margin: 0 auto 20px auto;
+ width: 80%;
+ text-align: center;
+ -webkit-border-radius: 1px;
+ -moz-border-radius: 1px;
+ border-radius: 1px;
+ box-shadow: 0 0 1px 3px #373737;
+}
+#mf-notification.toast button {
+ display: none;
+}
+#mf-notification.toast.error {
+ background-image: url(images/error.png);
+ background-position: 16px 50%;
+ background-repeat: no-repeat;
+ padding-left: 5%;
+ width: 75%;
+}
+#mf-notification.toast.locked button {
+ display: block;
+ top: 0.8em;
+ right: 1.4em;
+}
+#mf-notification.toast > div {
+ padding: 0.8em 1.4em;
+}
+#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;
+}
+#mf-notification button {
+ top: 22px;
+ right: 22px;
+ /* padding of #content_wrapper */
+
+ width: 16px;
+ height: 12px;
+ background: url(../common/images/close-button-beta.png) no-repeat scroll 0 0
transparent;
+ margin: 0;
+ background-position: right center;
+ /* use -webkit prefix for older android browsers eg. nexus 1 */
+
+ -moz-background-size: auto 12px;
+ -o-background-size: auto 12px;
+ -webkit-background-size: auto 12px;
+ background-size: auto 12px;
+ cursor: pointer;
+ position: absolute;
+ text-indent: -999px;
+ overflow: hidden;
+ border: none;
+}
+#mf-notification h3 {
+ margin: 0;
+ padding-right: 4px;
+ line-height: 1em;
+ display: inline;
+}
+#mf-notification a:visited,
+#mf-notification a {
+ color: #3354C0;
+}
+#mf-notification p {
+ line-height: 1.2;
+ margin: 0 0 .5em;
+}
+#mf-notification .progress-bar {
+ margin: .9em 0 0;
+}
--
To view, visit https://gerrit.wikimedia.org/r/62658
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I2333a2cea7517a0ada488b8d891857d93c1d9546
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
