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