Jack Phoenix has submitted this change and it was merged.
Change subject: Mobile fixes and general cleanup
......................................................................
Mobile fixes and general cleanup
* Turn the footer navigation into accordion menus for mobile/whatever
* Generally cleanup layout of mobile footer display
* Fix various weird float bugs in mobile browsers (mobileClears)
* Revert sideways arrows for dropdown menus; will always point down now
* Fix margin on contentSub
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, 102 insertions(+), 20 deletions(-)
Approvals:
Jack Phoenix: Looks good to me, approved
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..0768ca0 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');
}
}
@@ -64,9 +67,11 @@
/* Set up appearance */
+#header-container {
+ border-bottom: solid 1px @bold-border;
+}
#header-navigation-container {
background: #fff;
- border-top: solid 1px @bold-border;
}
#content-container {
background: #fff;
@@ -77,7 +82,7 @@
#header-navigation,
#content,
#footer-navigation,
-#footer-bottom {
+#footer-container {
.widths;
margin: auto;
padding: 1.5em;
@@ -190,14 +195,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 +249,6 @@
*
*/
#footer-container {
- font-size: 80%;
-
#footer-bottom {
font-size: 85%;
color: @text-grey;
@@ -629,9 +627,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..04e57ef 100644
--- a/resources/screen-mobile.less
+++ b/resources/screen-mobile.less
@@ -1,3 +1,4 @@
+@import "variables.less";
/* Extra stuff mobile doesn't need */
#sitesubtitle,
@@ -63,3 +64,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 @bold-border;
+}
+#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: merged
Gerrit-Change-Id: Ie40e4620a88493748f1fdb2ab732b56091958572
Gerrit-PatchSet: 3
Gerrit-Project: mediawiki/skins/GreyStuff
Gerrit-Branch: master
Gerrit-Owner: Isarra <[email protected]>
Gerrit-Reviewer: Jack Phoenix <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
