Isarra has uploaded a new change for review.
https://gerrit.wikimedia.org/r/239585
Change subject: Fix some mobile... stuff?
......................................................................
Fix some mobile... stuff?
Change-Id: Ie40e4620a88493748f1fdb2ab732b56091958572
---
M GreyStuff.skin.php
M GreyStuffTemplate.php
M resources/main.js
M resources/main.less
A resources/mobile.js
A resources/mobile.js.css
M resources/screen-full.less
M resources/screen-mobile.less
M skin.json
9 files changed, 98 insertions(+), 19 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/skins/GreyStuff
refs/changes/85/239585/1
diff --git a/GreyStuff.skin.php b/GreyStuff.skin.php
index 27357df..9a60563 100644
--- a/GreyStuff.skin.php
+++ b/GreyStuff.skin.php
@@ -26,6 +26,7 @@
// Add JS
$out->addModules( 'skins.greystuff.js' );
+ $out->addModules( 'skins.greystuff.mobile' );
}
/**
diff --git a/GreyStuffTemplate.php b/GreyStuffTemplate.php
index 3e0d0f7..4e9b881 100644
--- a/GreyStuffTemplate.php
+++ b/GreyStuffTemplate.php
@@ -53,6 +53,9 @@
</div>
<?php
$this->outputPersonalNavigation();
+ ?>
+ <div class="mobileClear"></div>
+ <?php
$this->outputSearch();
?>
<div class="visualClear"></div>
@@ -110,6 +113,7 @@
<?php
$this->html( 'title' ) ?>
</h1>
+ <div class="mobileClear"></div>
<div id="page-namespaces"
class="noprint">
<?php
$this->outputPortlet( array(
diff --git a/resources/main.js b/resources/main.js
index 34cd857..74e6f9d 100644
--- a/resources/main.js
+++ b/resources/main.js
@@ -1,3 +1,6 @@
+
+/* Expanding menus (desktop mostly, but personal still applies to mobile too)
*/
+
$( function() {
// When the menus (or their respective little arrows, which are still
// contained in the menu element) are clicked, show their contents.
@@ -11,7 +14,6 @@
e.stopPropagation(); // stop hiding it!
if ( !wasOpen ) {
$( this ).next( '.dropdown' ).fadeIn( 300 );
- $( this ).closest( 'h3' ).addClass( 'menu-down-arrow' );
}
} );
$( document ).click( function( e ) {
@@ -28,7 +30,6 @@
$( '#p-personal, #header-navigation .navigation .mw-portlet,
#p-toolbox' ).children( '.dropdown' ).each( function() {
if ( $( this ).is( ':visible' ) ) {
// .closest() doesn't work here like it does above...
- $( this ).parent().children( 'h3' ).removeClass(
'menu-down-arrow' );
$( this ).fadeOut( 300 );
}
} );
diff --git a/resources/main.less b/resources/main.less
index 07be443..ac6f1a2 100644
--- a/resources/main.less
+++ b/resources/main.less
@@ -10,6 +10,9 @@
color: #000;
background: @bold-bkg;
}
+#content-header .mobileClear {
+ display: none;
+}
.client-nojs {
/* need to specify #header-container to have the style actually applied,
* otherwise some stupid display: none; somewhere overrides it. Yay for
@@ -23,7 +26,7 @@
display: block;
}
h3 {
- background-position: 100% 60%;
+ background-position: 100% 90%;
.background-image-svg('images/arrow-down.svg', 'images/arrow-down.png');
}
}
@@ -77,7 +80,7 @@
#header-navigation,
#content,
#footer-navigation,
-#footer-bottom {
+#footer-container {
.widths;
margin: auto;
padding: 1.5em;
@@ -190,14 +193,9 @@
font-size: 1em;
line-height: 1.3;
background-repeat: no-repeat;
- background-position: 100% 0%;
- .background-image-svg('images/arrow-right.svg',
'images/arrow-right.png');
+ background-position: 100% 30%;
+ .background-image-svg('images/arrow-down.svg',
'images/arrow-down.png');
padding: 0 1.75em .3em 0;
-
- &.menu-down-arrow {
- background-position: 100% 60%;
- .background-image-svg('images/arrow-down.svg',
'images/arrow-down.png');
- }
/* Dropdown stuff */
&:hover {
@@ -249,8 +247,6 @@
*
*/
#footer-container {
- font-size: 80%;
-
#footer-bottom {
font-size: 85%;
color: @text-grey;
@@ -629,9 +625,9 @@
#contentSub {
font-size: 85%;
- margin: .25em 0 0;
+ margin: 0;
border-bottom: solid 1px @soft-border;
- padding: 0 0 .1em;
+ padding: .25em 0 .1em;
color: @fluff-grey;
a {
diff --git a/resources/mobile.js b/resources/mobile.js
new file mode 100644
index 0000000..a659e71
--- /dev/null
+++ b/resources/mobile.js
@@ -0,0 +1,10 @@
+/* Expanding menus (footer only so far) */
+
+$( function() {
+ $( '#footer-navigation h3' ).on( 'click', function( e ) {
+ if ( $( window ).width() <= 760 ) {
+ $( this ).next( 'div' ).slideToggle( 300 );
+ $( this ).parent().toggleClass( 'visible', 300, 'slide'
);
+ }
+ } );
+} );
diff --git a/resources/mobile.js.css b/resources/mobile.js.css
new file mode 100644
index 0000000..b6a0795
--- /dev/null
+++ b/resources/mobile.js.css
@@ -0,0 +1,22 @@
+/* js stuff */
+
+/* For the footer menus */
+#footer-container {
+ padding-top: 0;
+}
+#footer-navigation .p-body {
+ display: none;
+}
+#footer-navigation .mw-portlet {
+ padding: 0;
+}
+#footer-navigation h3 {
+ margin: 0;
+ padding: .75em 0 .75em 0;
+}
+#footer-navigation .mw-portlet.visible {
+ padding-bottom: .75em;
+}
+#footer-navigation li {
+ padding: .25em 1em;
+}
diff --git a/resources/screen-full.less b/resources/screen-full.less
index 296c022..0e8c332 100644
--- a/resources/screen-full.less
+++ b/resources/screen-full.less
@@ -16,7 +16,7 @@
display: block;
}
h3 {
- background-position: 100% 60%;
+ background-position: 100% 90%;
.background-image-svg('images/arrow-down.svg', 'images/arrow-down.png');
}
}
@@ -53,12 +53,12 @@
font-weight: normal;
font-size: 90%;
background-repeat: no-repeat;
- background-position: 100% 100%;
- .background-image-svg('images/arrow-right.svg',
'images/arrow-right.png');
+ background-position: 100% 90%;
+ .background-image-svg('images/arrow-right.svg',
'images/arrow-down.png');
text-shadow: none;
&.menu-down-arrow {
- background-position: 100% 60%;
+ background-position: 100% 90%;
.background-image-svg('images/arrow-down.svg',
'images/arrow-down.png');
}
diff --git a/resources/screen-mobile.less b/resources/screen-mobile.less
index a4d4e05..2a80cb3 100644
--- a/resources/screen-mobile.less
+++ b/resources/screen-mobile.less
@@ -63,3 +63,39 @@
width: 100%;
}
+/* Mobile float cleanup */
+.mobileClear,
+#content-header .mobileClear {
+ display: block;
+ clear: both;
+}
+
+/* Footer links and icons */
+
+#footer-container #f-list li#lastmod {
+ display: block;
+ margin-bottom: 1em;
+}
+#footer-container .footer-icons {
+ float: none;
+ display: inline;
+}
+#f-list {
+ font-size: 100%;
+}
+
+/* Footer (need to accordianise and do same with top but hidden by a toggle?)
*/
+
+#footer-navigation {
+ font-size: 100%;
+}
+#footer-navigation .mw-portlet {
+ float: none;
+ padding: 1em 0 1.5em;
+ border-bottom: solid 1px #e0e0e0;
+}
+#footer-navigation .p-body ul {
+ columns: 12em 2;
+ -moz-columns: 12em 2;
+ -webkit-columns: 12em 2;
+}
diff --git a/skin.json b/skin.json
index 659abac..fba75b9 100644
--- a/skin.json
+++ b/skin.json
@@ -46,6 +46,15 @@
"skins.greystuff.js": {
"scripts": [ "resources/main.js" ],
"position": "bottom"
+ },
+ "skins.greystuff.mobile": {
+ "styles": {
+ "resources/mobile.js.css": {
+ "media": "(max-width: 760px)"
+ }
+ },
+ "scripts": [ "resources/mobile.js" ],
+ "position": "top"
}
},
"manifest_version": 1
--
To view, visit https://gerrit.wikimedia.org/r/239585
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ie40e4620a88493748f1fdb2ab732b56091958572
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/skins/GreyStuff
Gerrit-Branch: master
Gerrit-Owner: Isarra <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
