Jdlrobson has uploaded a new change for review.
https://gerrit.wikimedia.org/r/62659
Change subject: Code hygiene: Move overlays into separate stylesheet
......................................................................
Code hygiene: Move overlays into separate stylesheet
Change-Id: I1c479de51f2814a635af6176834905f725868945
---
M MobileFrontend.php
M less/common/mf-navigation.less
A less/common/overlays.less
M stylesheets/common/mf-navigation.css
A stylesheets/common/overlays.css
5 files changed, 260 insertions(+), 258 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/59/62659/1
diff --git a/MobileFrontend.php b/MobileFrontend.php
index fabdddb..dfb102d 100644
--- a/MobileFrontend.php
+++ b/MobileFrontend.php
@@ -234,6 +234,7 @@
'stylesheets/common/mf-footer.css',
// FIXME: move to module mobile.stable.styles for some reason
it breaks RTL when in that module
'stylesheets/common/mf-navigation.css',
+ 'stylesheets/common/overlays.css',
'stylesheets/common/mf-hacks.css',
),
'position' => 'top',
diff --git a/less/common/mf-navigation.less b/less/common/mf-navigation.less
index b715aa6..7afaf74 100644
--- a/less/common/mf-navigation.less
+++ b/less/common/mf-navigation.less
@@ -93,101 +93,6 @@
}
}
-.mw-mf-overlay {
- display: none;
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background-color: white;
- z-index: 4;
-
- .header .cancel {
- display: block;
- position: absolute;
- cursor: pointer;
- border: none;
- height: @headerHeight;
- width: @searchBarPaddingLeft;
- left: 0;
- background: none;
- background-image: url(images/arrow-left.png);
- background-repeat: no-repeat;
- background-position: center center;
- text-indent: -999px;
- .background-size( auto, @searchBoxHeight );
- }
-
- div.languageOverlay ul,
- ul.content {
- li {
- .overlayListItem();
- &.preferred {
- font-weight: bold;
- }
- }
- }
-
- .mw-mf-overlay-header {
- background-color: #F1F1F1;
- }
-
- li {
- text-align: left;
- }
-
- div.content {
- padding-bottom: 20px;
-
- textarea {
- display: block;
- width: 100%;
- }
- }
-
- .content {
- margin-top: @headingMarginTop;
-
- .confirm,
- .cancel {
- display: block;
- margin: auto;
- }
- }
-
- .buttonBar {
- position: fixed;
- bottom: 0;
- width: 100%;
- padding: 10px 0;
- border-top: 1px solid #ccc;
- background: #f3f3f3;
- text-align: center;
-
- button {
- margin: 0 5px;
- }
- }
-
- .mw-mf-overlay-footer,
- .mw-mf-overlay-header {
- padding: 4px 8px 4px @searchBarPaddingLeft;
-
- margin: 0;
- font-size: 0.8em;
- color: #666;
- border-bottom: solid 1px #eee;
- }
-
- .mw-mf-overlay-footer {
- a {
- display: inline;
- color: #002BB8;
- }
- }
-}
-
.search.error,
.error {
border: solid @overlayBorderWidth @overlayAlertErrorBorderColor;
@@ -244,36 +149,6 @@
padding: 0;
line-height: @headerHeight;
font-family: @fontFamily;
- }
-}
-
-.overlay ul {
- text-align: left;
- left: 0;
- width: 100% !important;
- border: none;
- z-index: 1;
- position: relative;
- opacity: 1;
- padding: 0;
- cursor: pointer;
- margin: 0;
- list-style: none;
-
- &.informative {
- margin-left: 16px;
- list-style: outside square;
- margin-bottom: 16px;
-
- li {
- margin-bottom: 8px;
- }
- }
-}
-
-html[dir="rtl"] {
- .mw-mf-overlay .header .cancel {
- .transform( rotate(180deg) );
}
}
diff --git a/less/common/overlays.less b/less/common/overlays.less
new file mode 100644
index 0000000..1685b84
--- /dev/null
+++ b/less/common/overlays.less
@@ -0,0 +1,126 @@
+@import "../mf-mixins.less";
+
+.overlay ul {
+ text-align: left;
+ left: 0;
+ width: 100% !important;
+ border: none;
+ z-index: 1;
+ position: relative;
+ opacity: 1;
+ padding: 0;
+ cursor: pointer;
+ margin: 0;
+ list-style: none;
+
+ &.informative {
+ margin-left: 16px;
+ list-style: outside square;
+ margin-bottom: 16px;
+
+ li {
+ margin-bottom: 8px;
+ }
+ }
+}
+
+html[dir="rtl"] {
+ .mw-mf-overlay .header .cancel {
+ .transform( rotate(180deg) );
+ }
+}
+
+.mw-mf-overlay {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: white;
+ z-index: 4;
+
+ .header .cancel {
+ display: block;
+ position: absolute;
+ cursor: pointer;
+ border: none;
+ height: @headerHeight;
+ width: @searchBarPaddingLeft;
+ left: 0;
+ background: none;
+ background-image: url(images/arrow-left.png);
+ background-repeat: no-repeat;
+ background-position: center center;
+ text-indent: -999px;
+ .background-size( auto, @searchBoxHeight );
+ }
+
+ div.languageOverlay ul,
+ ul.content {
+ li {
+ .overlayListItem();
+ &.preferred {
+ font-weight: bold;
+ }
+ }
+ }
+
+ .mw-mf-overlay-header {
+ background-color: #F1F1F1;
+ }
+
+ li {
+ text-align: left;
+ }
+
+ div.content {
+ padding-bottom: 20px;
+
+ textarea {
+ display: block;
+ width: 100%;
+ }
+ }
+
+ .content {
+ margin-top: @headingMarginTop;
+
+ .confirm,
+ .cancel {
+ display: block;
+ margin: auto;
+ }
+ }
+
+ .buttonBar {
+ position: fixed;
+ bottom: 0;
+ width: 100%;
+ padding: 10px 0;
+ border-top: 1px solid #ccc;
+ background: #f3f3f3;
+ text-align: center;
+
+ button {
+ margin: 0 5px;
+ }
+ }
+
+ .mw-mf-overlay-footer,
+ .mw-mf-overlay-header {
+ padding: 4px 8px 4px @searchBarPaddingLeft;
+
+ margin: 0;
+ font-size: 0.8em;
+ color: #666;
+ border-bottom: solid 1px #eee;
+ }
+
+ .mw-mf-overlay-footer {
+ a {
+ display: inline;
+ color: #002BB8;
+ }
+ }
+}
diff --git a/stylesheets/common/mf-navigation.css
b/stylesheets/common/mf-navigation.css
index 4bf9089..7f1a886 100644
--- a/stylesheets/common/mf-navigation.css
+++ b/stylesheets/common/mf-navigation.css
@@ -70,114 +70,6 @@
html.overlay #footer {
display: none !important;
}
-.mw-mf-overlay {
- display: none;
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background-color: white;
- z-index: 4;
-}
-.mw-mf-overlay .header .cancel {
- display: block;
- position: absolute;
- cursor: pointer;
- border: none;
- height: 46px;
- width: 40px;
- left: 0;
- background: none;
- background-image: url(images/arrow-left.png);
- background-repeat: no-repeat;
- background-position: center center;
- text-indent: -999px;
- /* use -webkit prefix for older android browsers eg. nexus 1 */
-
- -moz-background-size: auto 30px;
- -o-background-size: auto 30px;
- -webkit-background-size: auto 30px;
- background-size: auto 30px;
-}
-.mw-mf-overlay div.languageOverlay ul li,
-.mw-mf-overlay ul.content li {
- color: #666;
- border: none;
- position: relative;
- border-bottom: solid 1px #999999;
- border-bottom: solid 1px #eee;
- padding: 12px 40px;
- font-size: 0.9em;
-}
-.mw-mf-overlay div.languageOverlay ul li a,
-.mw-mf-overlay ul.content li a {
- display: block;
- text-decoration: none;
- color: #666;
-}
-.mw-mf-overlay div.languageOverlay ul li a:active,
-.mw-mf-overlay ul.content li a:active,
-.mw-mf-overlay div.languageOverlay ul li a:hover,
-.mw-mf-overlay ul.content li a:hover,
-.mw-mf-overlay div.languageOverlay ul li a:visited,
-.mw-mf-overlay ul.content li a:visited {
- text-decoration: none;
- color: #666;
-}
-.mw-mf-overlay div.languageOverlay ul li:hover,
-.mw-mf-overlay ul.content li:hover {
- background-color: #ACD1E9;
-}
-.mw-mf-overlay div.languageOverlay ul li.preferred,
-.mw-mf-overlay ul.content li.preferred {
- font-weight: bold;
-}
-.mw-mf-overlay .mw-mf-overlay-header {
- background-color: #F1F1F1;
-}
-.mw-mf-overlay li {
- text-align: left;
-}
-.mw-mf-overlay div.content {
- padding-bottom: 20px;
-}
-.mw-mf-overlay div.content textarea {
- display: block;
- width: 100%;
-}
-.mw-mf-overlay .content {
- margin-top: 14pt;
-}
-.mw-mf-overlay .content .confirm,
-.mw-mf-overlay .content .cancel {
- display: block;
- margin: auto;
-}
-.mw-mf-overlay .buttonBar {
- position: fixed;
- bottom: 0;
- width: 100%;
- padding: 10px 0;
- border-top: 1px solid #ccc;
- background: #f3f3f3;
- text-align: center;
-}
-.mw-mf-overlay .buttonBar button {
- margin: 0 5px;
-}
-.mw-mf-overlay .mw-mf-overlay-footer,
-.mw-mf-overlay .mw-mf-overlay-header {
- padding: 4px 8px 4px 40px;
- margin: 0;
- font-size: 0.8em;
- color: #666;
- border-bottom: solid 1px #eee;
-}
-.mw-mf-overlay .mw-mf-overlay-footer a {
- display: inline;
- color: #002BB8;
-}
.search.error,
.error {
border: solid 1px #dd0000;
@@ -224,31 +116,6 @@
padding: 0;
line-height: 46px;
font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-}
-.overlay ul {
- text-align: left;
- left: 0;
- width: 100% !important;
- border: none;
- z-index: 1;
- position: relative;
- opacity: 1;
- padding: 0;
- cursor: pointer;
- margin: 0;
- list-style: none;
-}
-.overlay ul.informative {
- margin-left: 16px;
- list-style: outside square;
- margin-bottom: 16px;
-}
-.overlay ul.informative li {
- margin-bottom: 8px;
-}
-html[dir="rtl"] .mw-mf-overlay .header .cancel {
- -webkit-transform: rotate(180deg);
- transform: rotate(180deg);
}
body.navigation-enabled,
body.navigation-enabled #mw-mf-viewport,
diff --git a/stylesheets/common/overlays.css b/stylesheets/common/overlays.css
new file mode 100644
index 0000000..e67695d
--- /dev/null
+++ b/stylesheets/common/overlays.css
@@ -0,0 +1,133 @@
+.overlay ul {
+ text-align: left;
+ left: 0;
+ width: 100% !important;
+ border: none;
+ z-index: 1;
+ position: relative;
+ opacity: 1;
+ padding: 0;
+ cursor: pointer;
+ margin: 0;
+ list-style: none;
+}
+.overlay ul.informative {
+ margin-left: 16px;
+ list-style: outside square;
+ margin-bottom: 16px;
+}
+.overlay ul.informative li {
+ margin-bottom: 8px;
+}
+html[dir="rtl"] .mw-mf-overlay .header .cancel {
+ -webkit-transform: rotate(180deg);
+ transform: rotate(180deg);
+}
+.mw-mf-overlay {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: white;
+ z-index: 4;
+}
+.mw-mf-overlay .header .cancel {
+ display: block;
+ position: absolute;
+ cursor: pointer;
+ border: none;
+ height: 46px;
+ width: 40px;
+ left: 0;
+ background: none;
+ background-image: url(images/arrow-left.png);
+ background-repeat: no-repeat;
+ background-position: center center;
+ text-indent: -999px;
+ /* use -webkit prefix for older android browsers eg. nexus 1 */
+
+ -moz-background-size: auto 30px;
+ -o-background-size: auto 30px;
+ -webkit-background-size: auto 30px;
+ background-size: auto 30px;
+}
+.mw-mf-overlay div.languageOverlay ul li,
+.mw-mf-overlay ul.content li {
+ color: #666;
+ border: none;
+ position: relative;
+ border-bottom: solid 1px #999999;
+ border-bottom: solid 1px #eee;
+ padding: 12px 40px;
+ font-size: 0.9em;
+}
+.mw-mf-overlay div.languageOverlay ul li a,
+.mw-mf-overlay ul.content li a {
+ display: block;
+ text-decoration: none;
+ color: #666;
+}
+.mw-mf-overlay div.languageOverlay ul li a:active,
+.mw-mf-overlay ul.content li a:active,
+.mw-mf-overlay div.languageOverlay ul li a:hover,
+.mw-mf-overlay ul.content li a:hover,
+.mw-mf-overlay div.languageOverlay ul li a:visited,
+.mw-mf-overlay ul.content li a:visited {
+ text-decoration: none;
+ color: #666;
+}
+.mw-mf-overlay div.languageOverlay ul li:hover,
+.mw-mf-overlay ul.content li:hover {
+ background-color: #ACD1E9;
+}
+.mw-mf-overlay div.languageOverlay ul li.preferred,
+.mw-mf-overlay ul.content li.preferred {
+ font-weight: bold;
+}
+.mw-mf-overlay .mw-mf-overlay-header {
+ background-color: #F1F1F1;
+}
+.mw-mf-overlay li {
+ text-align: left;
+}
+.mw-mf-overlay div.content {
+ padding-bottom: 20px;
+}
+.mw-mf-overlay div.content textarea {
+ display: block;
+ width: 100%;
+}
+.mw-mf-overlay .content {
+ margin-top: 14pt;
+}
+.mw-mf-overlay .content .confirm,
+.mw-mf-overlay .content .cancel {
+ display: block;
+ margin: auto;
+}
+.mw-mf-overlay .buttonBar {
+ position: fixed;
+ bottom: 0;
+ width: 100%;
+ padding: 10px 0;
+ border-top: 1px solid #ccc;
+ background: #f3f3f3;
+ text-align: center;
+}
+.mw-mf-overlay .buttonBar button {
+ margin: 0 5px;
+}
+.mw-mf-overlay .mw-mf-overlay-footer,
+.mw-mf-overlay .mw-mf-overlay-header {
+ padding: 4px 8px 4px 40px;
+ margin: 0;
+ font-size: 0.8em;
+ color: #666;
+ border-bottom: solid 1px #eee;
+}
+.mw-mf-overlay .mw-mf-overlay-footer a {
+ display: inline;
+ color: #002BB8;
+}
--
To view, visit https://gerrit.wikimedia.org/r/62659
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I1c479de51f2814a635af6176834905f725868945
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
