Isarra has uploaded a new change for review.
https://gerrit.wikimedia.org/r/214026
Change subject: Make skin sort of responsive, other random stuff
......................................................................
Make skin sort of responsive, other random stuff
Split out less into main and three sizes: large, small, mobile
Small design is basically as was. Mobile will extend upon that. Large
currently has a sidebar actually on the side, but it looks stupid as
arse.
Other random things were also done, largely out of frustration and
needing a break from the css stuff.
Change-Id: I33567f3230ee660e1dc30ca4d3fbb88984820281
---
M GreyStuff.skin.php
M i18n/en.json
M i18n/qqq.json
M resources/main.less
A resources/screen-large.less
A resources/screen-mobile.less
A resources/screen-small.less
A resources/variables.less
M skin.json
9 files changed, 320 insertions(+), 123 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/skins/GreyStuff
refs/changes/26/214026/1
diff --git a/GreyStuff.skin.php b/GreyStuff.skin.php
index bff1ca9..36a9282 100755
--- a/GreyStuff.skin.php
+++ b/GreyStuff.skin.php
@@ -64,7 +64,7 @@
<div id="header-top-container">
<div id="header-top">
<?php
- $this->outputPersonalMenu();
+ $this->outputPersonalNavigation();
$this->outputSearch();
?>
<div class="mw-portlet" id="p-header">
@@ -79,24 +79,14 @@
</div>
</div>
</div>
- <div id="header-navigation-container">
- <div id="header-navigation">
- <div id="header-tools">
- <?php
- $this->outputPortlet( array(
- 'id' => 'p-variants',
- 'headerMessage' =>
'variants',
- 'content' =>
$this->data['content_navigation']['variants'],
- ) );
- $this->outputToolbox();
- ?>
- </div>
- <div id="navigation">
- <?php
- $this->outputSidebar();
- ?>
- </div>
- </div>
+ </div>
+ <div id="train-wreck">
+ <div id="plane-wreck">
+ <div id="header-navigation-container">
+ <div id="header-navigation">
+ <?php
+ $this->outputMainNavigation();
+ ?>
</div>
</div>
<div id="content-container">
@@ -153,15 +143,25 @@
?>
</div>
<div id ="page-tools">
+
<?php
- $ptools = array_merge(
-
$this->data['content_navigation']['views'],
-
$this->data['content_navigation']['actions']
- );
+ if ( isset(
$this->data['content_navigation']['actions']['watch'] ) ) {
+
$this->data['content_navigation']['views']['watch'] =
$this->data['content_navigation']['actions']['watch'];
+ unset(
$this->data['content_navigation']['actions']['watch'] );
+ }
+ if ( isset(
$this->data['content_navigation']['actions']['unwatch'] ) ) {
+
$this->data['content_navigation']['views']['unwatch'] =
$this->data['content_navigation']['actions']['unwatch'];
+ unset(
$this->data['content_navigation']['actions']['unwatch'] );
+ }
$this->outputPortlet( array(
'id' => 'p-views',
'headerMessage' =>
'views',
- 'content' => $ptools
+ 'content' =>
$this->data['content_navigation']['views']
+ ) );
+ $this->outputPortlet( array(
+ 'id' => 'p-actions',
+ 'headerMessage' =>
'views',
+ 'content' =>
$this->data['content_navigation']['actions']
) );
?>
</div>
@@ -179,6 +179,14 @@
<?php if (
$this->data['dataAfterContent'] ) { $this->html( 'dataAfterContent' ); } ?>
</div>
</div>
+ </div>
+ <div id="footer-navigation">
+ <?php
+ $this->outputMainNavigation();
+ ?>
+ </div>
+ </div> <!-- End train and plane wrecks -->
+ <div class="visualClear"></div>
</div>
<div id="footer-container">
<div id="footer-bottom-container">
@@ -209,7 +217,27 @@
}
}
- private function outputPersonalMenu() {
+ private function outputMainNavigation() {
+ ?>
+ <div class="navigation">
+ <?php
+ $this->outputSidebar();
+ ?>
+ </div>
+ <div class="navigation-tools">
+ <?php
+ $this->outputPortlet( array(
+ 'class' => 'p-variants',
+ 'headerMessage' => 'variants',
+ 'content' =>
$this->data['content_navigation']['variants'],
+ ) );
+ $this->outputToolbox();
+ ?>
+ </div>
+ <?php
+ }
+
+ private function outputPersonalNavigation() {
$user = $this->getSkin()->getUser();
?>
<div class="mw-portlet" id="p-personal" role="navigation">
@@ -222,17 +250,23 @@
echo wfMessage( 'greystuff-loggedinas', '<b>' .
$user->getName() . '</b>' )->parse();
?>
</div>
- <div class="pBody dropdown">
+ <div class="p-body dropdown">
<?php
} else {
?>
- <div class="pBody no-dropdown">
+ <div class="p-body no-dropdown">
<?php
}
?>
<ul<?php $this->html( 'userlangattributes' ) ?>>
<?php
foreach ( $this->getPersonalTools() as $key =>
$item ) {
+ if ( $key == 'userpage' ) {
+ $item['links'][0]['text'] =
wfMessage( 'greystuff-userpage' )->text();
+ }
+ if ( $key == 'mytalk' ) {
+ $item['links'][0]['text'] =
wfMessage( 'greystuff-talkpage' )->text();
+ }
echo $this->makeListItem( $key, $item );
}
?>
diff --git a/i18n/en.json b/i18n/en.json
index d196027..ae7157a 100755
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -7,5 +7,7 @@
"greystuff-desc": "Simple grey fixed-width skin",
"greystuff-loggedinas": "Logged in as $1",
"greystuff-history": "Page history",
- "greystuff-purge": "Refresh page"
+ "greystuff-purge": "Refresh page",
+ "greystuff-userpage": "User page",
+ "greystuff-talkpage": "Talk page"
}
diff --git a/i18n/qqq.json b/i18n/qqq.json
index 884b154..0aff908 100755
--- a/i18n/qqq.json
+++ b/i18n/qqq.json
@@ -8,5 +8,7 @@
"greystuff-desc": "{{desc|what=skin|name=GreyStuff}}",
"greystuff-loggedinas": "Label for personal menu for logged in users
that really helpfully informs them that they are indeed logged
in.\n\nParameters:\n* $1 - username",
"greystuff-history": "Page history link label in
toolbox.\n{{Identical|Page history}}",
- "greystuff-purge": "Purge link label in toolbox.\n{{Identical|Refresh
page}}"
+ "greystuff-purge": "Purge link label in toolbox.\n{{Identical|Refresh
page}}",
+ "greystuff-userpage": "User page/profile link label in the personal
menu",
+ "greystuff-talkpage": "Talk page link label in the personal menu"
}
diff --git a/resources/main.less b/resources/main.less
index cddfa33..d5f9a4a 100755
--- a/resources/main.less
+++ b/resources/main.less
@@ -1,12 +1,5 @@
@import "mediawiki.mixins";
-
-/* Element colours */
-@bold-bkg: #f3f3f3;
-@bold-border: #e0e0e0;
-@soft-bkg: #f9f9f9;
-@soft-border: #eee;
-
-@text-grey: #666;
+@import "variables.less";
body {
font-family: sans-serif;
@@ -49,17 +42,8 @@
}
/* Set up appearance */
-
-#header-navigation-container,
-#content-container,
-#footer-tools-container {
+#train-wreck {
background: #fff;
-}
-#footer-bottom-container {
- border-top: solid 1px @bold-border;
-}
-#header-navigation-container {
- border-bottom: solid 1px @soft-border;
}
#header-top-container {
border-bottom: solid 1px @bold-border;
@@ -67,12 +51,16 @@
#header-top,
#header-navigation,
-#content,
+#plane-wreck,
#footer-bottom {
- width: 950px;
+ .widths;
margin: auto;
padding: 1.5em;
word-wrap: break-word;
+}
+#plane-wreck {
+ padding-top: 0;
+ padding-bottom: 0;
}
/*
@@ -117,6 +105,7 @@
clear: both;
margin-top: .5em;
margin-top: -2px !ie;
+ margin-bottom: 0;
margin-bottom: -8px !ie;
h3 {
@@ -160,67 +149,15 @@
}
}
- /*
- * Navigation menus
- *
- * Some stuff shared with personal menu
- */
- #header-navigation {
- padding: 0 1.5em;
- font-size: 90%;
- clear: both;
- height: 20px !ie;
- padding-top: .5em !ie;
-
- h3 {
- display: inline-block;
- display: inline !ie;
- padding: 0 1.75em 0 0;
- margin: .6em 1.5em .45em 0;
- font-weight: normal;
- font-size: 90%;
- background-repeat: no-repeat;
- background-position: 100% 60%;
- .background-image-svg('images/arrow-down.svg',
'images/arrow-down.png');
- text-shadow: none;
- }
- .p-body {
- display: none;
- }
- .mw-portlet {
- display: inline-block;
- display: inline !ie;
- }
- ul {
- padding: 0;
- margin: 0;
- list-style: none;
- }
- li {
- margin: 0 1.25em 0 0;
- font-size: 90%;
- }
- }
- /* Reverse right menus */
- #header-tools h3 {
- margin: .6em 0 .45em 1.5em;
- }
- #header-tools {
- float: right;
- }
-
/* Dropdown stuff */
- #p-welcome:hover,
- #header-navigation h3:hover {
+ #p-welcome:hover {
cursor: pointer;
}
- #p-personal,
- #header-navigation-container .mw-portlet {
+ #p-personal {
position: relative;
}
- #p-personal:hover .dropdown,
- #header-navigation-container .mw-portlet:hover .p-body {
+ #p-personal:hover .dropdown {
display: block;
position: absolute;
background: #fff;
@@ -242,17 +179,12 @@
margin-left: 1em;
}
- #navigation .mw-portlet:hover .p-body {
- left: 0;
- }
- .dropdown ul,
- #header-navigation-container .mw-portlet ul {
+ .dropdown ul {
margin: 0;
padding: 0;
list-style: none;
}
- .dropdown li,
- #header-navigation-container .mw-portlet li {
+ .dropdown li {
margin: .75em 0;
}
}
@@ -410,17 +342,16 @@
padding: 1em 0;
}
-
/*
*
* Content header
*
*/
-
#content-header {
border-bottom: solid 1px @soft-border;
margin-bottom: .75em;
padding-bottom: .25em;
+ padding-top: 1.25em;
h3 {
position: absolute;
@@ -450,7 +381,7 @@
li {
display: inline-block;
display: inline !ie;
- margin: 0 .75em 0 0;
+ margin: .3em .75em 0 0;
/* Duplicate with tools */
&#ca-history {
@@ -461,11 +392,15 @@
}
}
}
+
#page-tools {
float: right;
ul li {
- margin: 0 0 0 .75em;
+ margin: .3em 0 0 .75em;
+ }
+ #p-actions {
+ margin-left: .75em;
}
}
}
@@ -478,6 +413,9 @@
*/
#content-container {
font-size: 90%;
+}
+#train-wreck {
+ border-bottom: solid 1px @bold-border;
}
#siteSub {
@@ -537,9 +475,9 @@
#catlinks {
font-size: 85%;
border-top: solid 1px @soft-border;
- margin: 1.75em 0 -1.6em;
+ margin: 1.75em 0 0;
padding: .35em 0 0;
- color: #aaa;
+ color: @fluff-grey;
li {
border: none;
@@ -549,10 +487,14 @@
#contentSub {
font-size: 85%;
- margin: -1.45em 0 1.75em;
+ margin: .25em 0 0;
border-bottom: solid 1px @soft-border;
padding: 0 0 .1em;
- color: #aaa;
+ color: @fluff-grey;
+
+ a {
+ color: @link-grey;
+ }
}
/* Tables of contents */
diff --git a/resources/screen-large.less b/resources/screen-large.less
new file mode 100755
index 0000000..1a98738
--- /dev/null
+++ b/resources/screen-large.less
@@ -0,0 +1,48 @@
+@import "mediawiki.mixins";
+@import "variables.less";
+
+@sidebar-width: 11em;
+
+#header-navigation-container {
+ display: none;
+}
+
+#footer-navigation {
+ width: @sidebar-width;
+ margin: 0;
+ padding: 0;
+ font-size: 90%;
+ display: inline-block;
+
+ .mw-portlet {
+ float: none;
+ }
+ h3 {
+ font-size: 90%;
+ margin: 2em 0 .75em;
+ color: @fluff-grey;
+ }
+ .p-body {
+ margin-bottom: 1.5em;
+ font-size: 90%;
+
+ ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ }
+ a {
+ color: @text-grey;
+ }
+ }
+}
+#content-container {
+ float: right;
+ margin-left: -@sidebar-width;
+ width: 100%;
+}
+
+#content {
+ margin-left: @sidebar-width;
+}
+
diff --git a/resources/screen-mobile.less b/resources/screen-mobile.less
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/resources/screen-mobile.less
diff --git a/resources/screen-small.less b/resources/screen-small.less
new file mode 100755
index 0000000..4b7be61
--- /dev/null
+++ b/resources/screen-small.less
@@ -0,0 +1,141 @@
+@import "mediawiki.mixins";
+@import "variables.less";
+
+/*
+* Navigation menus
+*
+* Some stuff shared/duplicated with personal menu(?)
+*/
+#header-navigation {
+ padding: 0;
+ font-size: 90%;
+ clear: both;
+ height: 20px !ie;
+ padding-top: .5em !ie;
+
+ .navigation,
+ .navigation-tools {
+ display: inline-block;
+ }
+
+ /* Reverse right menus */
+ .navigation-tools {
+ float: right;
+
+ h3 {
+ margin: .6em 0 .45em 1.5em;
+ }
+ }
+ h3 {
+ display: inline-block;
+ display: inline !ie;
+ padding: 0 1.75em 0 0;
+ margin: .6em 1.5em .45em 0;
+ font-weight: normal;
+ font-size: 90%;
+ background-repeat: no-repeat;
+ background-position: 100% 60%;
+ .background-image-svg('images/arrow-down.svg',
'images/arrow-down.png');
+ text-shadow: none;
+
+ &:hover {
+ cursor: pointer;
+ }
+ }
+ ul {
+ padding: 0;
+ margin: 0;
+ list-style: none;
+ }
+ li {
+ margin: 0 1.25em 0 0;
+ font-size: 90%;
+ }
+
+ .mw-portlet {
+ position: relative;
+ display: inline-block;
+ display: inline !ie;
+
+ ul {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+
+ li {
+ margin: .75em 0;
+ }
+ }
+
+ .p-body {
+ display: none;
+ }
+ &.mw-portlet:hover .p-body {
+ display: block;
+ position: absolute;
+ background: #fff;
+ top: 100%;
+ padding: .75em 2em;
+ border: solid 1px @soft-border;
+ box-shadow: 0 2px 4px rgba(0,0,0,.05);
+ width: 8em;
+ text-align: left;
+ z-index: 5;
+ line-height: 1.1em;
+ }
+ }
+ .navigation-tools .mw-portlet:hover .p-body {
+ right: 0;
+ }
+}
+
+#header-navigation-container {
+ border-bottom: solid 1px @soft-border;
+}
+
+#footer-navigation h3 {
+ margin: 0 0 1em;
+ font-size: 85%;
+}
+#footer-navigation ul {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+}
+#footer-navigation .mw-portlet {
+ float: left;
+
+ padding: 1.5em;
+
+ li {
+ font-size: 85%;
+ }
+}
+#footer-navigation {
+ padding: 0;
+ margin: 0 -1.5em;
+ font-size: 80%;
+
+ a {
+ color: #777;
+ }
+}
+#footer-navigation .navigation-tools ul {
+ columns: 2 9em;
+ -moz-columns: 2 9em;
+ -webkit-columns: 2 9em;
+}
+#footer-container {
+ clear: both;
+}
+
+/* Bad hacks to fix background for bottom menu */
+#plane-wreck {
+ background: #fff;
+ border-bottom: 1px solid @bold-border;
+}
+#train-wreck {
+ background: @bold-bkg;
+ border-bottom: none;
+}
+
diff --git a/resources/variables.less b/resources/variables.less
new file mode 100755
index 0000000..fd7b431
--- /dev/null
+++ b/resources/variables.less
@@ -0,0 +1,15 @@
+
+/* Element colours */
+@bold-bkg: #f3f3f3;
+@bold-border: #e0e0e0;
+@soft-bkg: #f9f9f9;
+@soft-border: #eee;
+
+@text-grey: #666;
+@link-grey: #888;
+@fluff-grey: #aaa;
+
+.widths() {
+ max-width: 1050px;
+ *width: 950px;
+}
diff --git a/skin.json b/skin.json
old mode 100644
new mode 100755
index edad7ae..89c825c
--- a/skin.json
+++ b/skin.json
@@ -20,10 +20,23 @@
},
"ResourceModules": {
"skins.greystuff": {
- "styles": [
- "skins/GreyStuff/resources/normalise.css",
- "skins/GreyStuff/resources/main.less"
- ],
+ "styles": {
+ "skins/GreyStuff/resources/normalise.css": {
+ "media": "screen"
+ },
+ "skins/GreyStuff/resources/main.less": {
+ "media": "screen"
+ },
+ "skins/GreyStuff/resources/screen-large.less": {
+ "media": "(min-width: 1001px)"
+ },
+ "skins/GreyStuff/resources/screen-small.less": {
+ "media": "(max-width: 1000px)"
+ },
+ "skins/GreyStuff/resources/screen-mobile.less":
{
+ "media": "(max-width: 600px)"
+ }
+ },
"scripts": "",
"position": "top"
}
--
To view, visit https://gerrit.wikimedia.org/r/214026
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I33567f3230ee660e1dc30ca4d3fbb88984820281
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/skins/GreyStuff
Gerrit-Branch: master
Gerrit-Owner: Isarra <zhoris...@gmail.com>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
