Jdlrobson has uploaded a new change for review.
https://gerrit.wikimedia.org/r/102547
Change subject: Document overlays with KSS
......................................................................
Document overlays with KSS
Use @wgMFMobileImageRootDir to get round problem with image file
paths.
Change-Id: I05ce81dcab2d00f93cde3114452ea9dbeecce6f8
---
M MobileFrontend.php
M less/common/OverlayNew.less
M less/mobile.less
3 files changed, 87 insertions(+), 8 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/47/102547/1
diff --git a/MobileFrontend.php b/MobileFrontend.php
index cd639cc..9eb6a84 100644
--- a/MobileFrontend.php
+++ b/MobileFrontend.php
@@ -151,8 +151,13 @@
$wgSpecialPageGroups['Nearby'] = 'pages';
}
// Set LESS global variables
- $wgResourceLoaderLESSVars['wgMFDeviceWidthTablet'] =
"{$wgMFDeviceWidthTablet}px";
- $wgResourceLoaderLESSVars['wgMFDeviceWidthMobileSmall'] =
"{$wgMFDeviceWidthMobileSmall}px";
+ $wgResourceLoaderLESSVars = array_merge( $wgResourceLoaderLESSVars,
+ array(
+ 'wgMFMobileImageRootDir' => 'images',
+ 'wgMFDeviceWidthTablet' => "{$wgMFDeviceWidthTablet}px",
+ 'wgMFDeviceWidthMobileSmall' =>
"{$wgMFDeviceWidthMobileSmall}px",
+ )
+ );
}
// ResourceLoader modules
diff --git a/less/common/OverlayNew.less b/less/common/OverlayNew.less
index 2c413ce..06fc5a1 100644
--- a/less/common/OverlayNew.less
+++ b/less/common/OverlayNew.less
@@ -16,6 +16,77 @@
}
}
+// Overlays
+//
+// Styleguide 7.
+
+// Overlays [passive]
+//
+// Use this styling when there is no possible action in an overlay.
+// Markup:
+// <div class="overlay-enabled" style="position: relative; height: 200px;">
+// <div class="overlay">
+// <div class="overlay-header-container">
+// <div class="overlay-header">
+// <ul class="v-border bottom-border">
+// <li><button class="cancel icon">Close</button></li>
+// </ul>
+// <div class="bottom-border"><h2>Overlay</h2></div>
+// </div>
+// </div>
+// <div class="content">Overlay with no icon.</div>
+// </div>
+// </div>
+//
+// Styleguide 7.1.
+
+// Overlays [continuation]
+//
+// Use this styling when there is no possible action in an overlay.
+//
+// Markup:
+// <div class="overlay-enabled" style="position: relative; height: 200px;">
+// <div class="overlay">
+// <div class="overlay-header-container">
+// <div class="overlay-header">
+// <ul class="v-border bottom-border">
+// <li><button class="cancel icon">Close</button></li>
+// </ul>
+// <div class="bottom-border"><h2>Overlay</h2></div>
+// <ul class="v-border bottom-border">
+// <li><button class="continue icon">Continue</button></li>
+// </ul>
+// </div>
+// </div>
+// <div class="content">Overlay with progressive action.</div>
+// </div>
+// </div>
+//
+// Styleguide 7.2.
+
+// Overlays [final]
+//
+// Use the submit button when at the final step of process.
+//
+// Markup:
+// <div class="overlay-enabled" style="position: relative; height: 200px;">
+// <div class="overlay">
+// <div class="overlay-header-container">
+// <div class="overlay-header">
+// <ul class="v-border bottom-border">
+// <li><button class="cancel icon">Close</button></li>
+// </ul>
+// <div class="bottom-border"><h2>Overlay</h2></div>
+// <ul class="v-border bottom-border">
+// <li><button class="submit icon">Submit</button></li>
+// </ul>
+// </div>
+// </div>
+// <div class="content">Overlay with completion action.</div>
+// </div>
+// </div>
+//
+// Styleguide 7.3.
.overlay {
position: absolute;
top: 0;
@@ -99,25 +170,25 @@
}
&.cancel {
- background-image: url(images/cancel.png);
+ background-image:
url(~'@{wgMFMobileImageRootDir}/cancel.png');
}
&.clear {
- background-image: url(images/clear.png);
+ background-image:
url(~'@{wgMFMobileImageRootDir}/clear.png');
}
&.submit {
- background-image: url(images/check.png);
+ background-image:
url(~'@{wgMFMobileImageRootDir}/check.png');
background-color: #00af8b;
}
&.continue {
- background-image: url(images/continue-ltr.png);
+ background-image:
url(~'@{wgMFMobileImageRootDir}/continue-ltr.png');
background-color: #2f81f0;
}
&.back {
- background-image: url(images/back.png);
+ background-image:
url(~'@{wgMFMobileImageRootDir}/back.png');
}
}
}
@@ -173,7 +244,7 @@
.license {
// FIXME: image should not be hard-coded
- background: url('../modules/images/cc-by-sa.png') left 2px
no-repeat;
+ background:
url(~'@{wgMFMobileImageRootDir}../modules/images/cc-by-sa.png') left 2px
no-repeat;
.background-size( auto, 16px );
padding-left: 55px;
font-size: .9em;
diff --git a/less/mobile.less b/less/mobile.less
index 3e4a21e..98aa3bf 100644
--- a/less/mobile.less
+++ b/less/mobile.less
@@ -1,5 +1,7 @@
@wgMFDeviceWidthTablet: 768px;
@wgMFDeviceWidthMobileSmall: 320px;
+// actually relative to public folder
+@wgMFMobileImageRootDir: '../common/images/';
@import 'common/reset.less';
@@ -11,3 +13,4 @@
@import 'common/notifications.less';
@import 'common/pagelist.less';
@import 'common/common-js.less';
+@import 'common/OverlayNew.less';
--
To view, visit https://gerrit.wikimedia.org/r/102547
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I05ce81dcab2d00f93cde3114452ea9dbeecce6f8
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
