Jack Phoenix has submitted this change and it was merged.
Change subject: Cleanup
......................................................................
Cleanup
* Make msg calls (more) consistent
* Move helper functions to the bottom, separate out a few more
* Clean up less a bit
* Make classnames more consistent, add some wrappers
* Set up some less variables/mixins for examples
Change-Id: Ib6dddfceed22d2697de24df58f1567cb8ece959c
---
M ExampleTemplate.php
M resources/screen-common.less
M resources/screen-desktop.less
M resources/screen-mobile.less
M resources/variables.less
M skin.json
6 files changed, 258 insertions(+), 150 deletions(-)
Approvals:
Jack Phoenix: Looks good to me, approved
diff --git a/ExampleTemplate.php b/ExampleTemplate.php
index c8914f0..6c053cd 100644
--- a/ExampleTemplate.php
+++ b/ExampleTemplate.php
@@ -6,6 +6,113 @@
*/
class ExampleTemplate extends BaseTemplate {
/**
+ * Outputs the entire contents of the page
+ */
+ public function execute() {
+ $this->html( 'headelement' );
+ ?>
+ <div id="mw-wrapper">
+ <?php
+ $this->outputLogo();
+ ?>
+ <div class="mw-body" role="main">
+ <?php
+ if ( $this->data['sitenotice'] ) {
+ ?>
+ <div id="siteNotice"><?php $this->html(
'sitenotice' ) ?></div>
+ <?php
+ }
+ if ( $this->data['newtalk'] ) {
+ ?>
+ <div class="usermessage"><?php
$this->html( 'newtalk' ) ?></div>
+ <?php
+ }
+ ?>
+
+ <h1 class="firstHeading">
+ <?php $this->html( 'title' ) ?>
+ </h1>
+ <div id="siteSub"><?php echo $this->getMsg(
'tagline' )->parse() ?></div>
+ <div class="mw-body-content">
+ <div id="contentSub">
+ <?php
+ if ( $this->data['subtitle'] ) {
+ ?>
+ <p><?php $this->html(
'subtitle' ) ?></p>
+ <?php
+ }
+ if ( $this->data['undelete'] ) {
+ ?>
+ <p><?php $this->html(
'undelete' ) ?></p>
+ <?php
+ }
+ ?>
+ </div>
+
+ <?php
+ $this->html( 'bodytext' );
+ $this->html( 'catlinks' );
+ $this->html( 'dataAfterContent' );
+ ?>
+ </div>
+ </div>
+
+ <div id="mw-navigation">
+ <h2><?php echo $this->getMsg(
'navigation-heading' )->parse() ?></h2>
+ <?php
+ $this->outputSearch();
+ echo '<div id="user-tools">';
+ $this->outputUserLinks();
+ echo '</div><div id="page-tools">';
+ $this->outputPageLinks();
+ echo '</div><div id="site-navigation">';
+ $this->outputSiteNavigation();
+ echo '</div>';
+ ?>
+ </div>
+
+ <div id="mw-footer">
+ <?php
+ foreach ( $this->getFooterLinks() as $category
=> $links ) {
+ ?>
+ <ul role="contentinfo">
+ <?php
+ foreach ( $links as $key ) {
+ ?>
+ <li><?php $this->html(
$key ) ?></li>
+ <?php
+ }
+ ?>
+ </ul>
+ <?php
+ }
+ ?>
+
+ <ul role="contentinfo">
+ <?php
+ foreach ( $this->getFooterIcons(
'icononly' ) as $blockName => $footerIcons ) {
+ ?>
+ <li>
+ <?php
+ foreach ( $footerIcons
as $icon ) {
+ echo
$this->getSkin()->makeFooterIcon( $icon );
+ }
+ ?>
+ </li>
+ <?php
+ }
+ ?>
+ </ul>
+ </div>
+ </div>
+
+ <?php $this->printTrail() ?>
+ </body></html>
+
+ <?php
+ }
+
+ /**
* Outputs a single sidebar portlet of any kind.
*/
private function outputPortlet( $box ) {
@@ -23,7 +130,7 @@
<h3>
<?php
if ( isset( $box['headerMessage'] ) ) {
- $this->msg( $box['headerMessage'] );
+ echo $this->getMsg(
$box['headerMessage'] )->escaped();
} else {
echo htmlspecialchars( $box['header'] );
}
@@ -45,139 +152,97 @@
}
/**
- * Outputs the entire contents of the page
+ * Outputs the logo and (optionally) site title
*/
- public function execute() {
- $this->html( 'headelement' ) ?>
- <div id="mw-wrapper">
+ private function outputLogo( $id = 'p-logo', $imageonly = false ) {
+ ?>
+ <div id="<?php echo $id ?>" class="mw-portlet" role="banner">
<a
- id="p-logo"
- role="banner"
- href="<?php echo htmlspecialchars(
$this->data['nav_urls']['mainpage']['href'] ) ?>"
- <?php echo Xml::expandAttributes(
Linker::tooltipAndAccesskeyAttribs( 'p-logo' ) ) ?>
- >
- <img
- src="<?php $this->text( 'logopath' ) ?>"
- alt="<?php $this->text( 'sitename' ) ?>"
- />
- </a>
-
-
- <div class="mw-body" role="main">
- <?php if ( $this->data['sitenotice'] ) { ?>
- <div id="siteNotice"><?php $this->html(
'sitenotice' ) ?></div>
- <?php } ?>
-
- <?php if ( $this->data['newtalk'] ) { ?>
- <div class="usermessage"><?php
$this->html( 'newtalk' ) ?></div>
- <?php } ?>
-
- <h1 class="firstHeading">
- <?php $this->html( 'title' ) ?>
- </h1>
-
- <div id="siteSub"><?php $this->msg( 'tagline' )
?></div>
-
- <div class="mw-body-content">
- <div id="contentSub">
- <?php if (
$this->data['subtitle'] ) { ?>
- <p><?php $this->html(
'subtitle' ) ?></p>
- <?php } ?>
- <?php if (
$this->data['undelete'] ) { ?>
- <p><?php $this->html(
'undelete' ) ?></p>
- <?php } ?>
- </div>
-
- <?php $this->html( 'bodytext' ) ?>
-
- <?php $this->html( 'catlinks' ) ?>
-
- <?php $this->html( 'dataAfterContent'
); ?>
-
- </div>
- </div>
-
-
- <div id="mw-navigation">
- <h2><?php $this->msg( 'navigation-heading' )
?></h2>
-
- <form
- action="<?php $this->text( 'wgScript' )
?>"
- role="search"
- class="mw-portlet"
- id="p-search"
- >
- <input type="hidden" name="title"
value="<?php $this->text( 'searchtitle' ) ?>" />
-
- <h3><label for="searchInput"><?php
$this->msg( 'search' ) ?></label></h3>
-
- <?php echo $this->makeSearchInput(
array( "id" => "searchInput" ) ) ?>
- <?php echo $this->makeSearchButton(
'go' ) ?>
-
- </form>
-
- <?php
-
- $this->outputPortlet( array(
- 'id' => 'p-personal',
- 'headerMessage' => 'personaltools',
- 'content' => $this->getPersonalTools(),
- ) );
-
- $this->outputPortlet( array(
- 'id' => 'p-namespaces',
- 'headerMessage' => 'namespaces',
- 'content' =>
$this->data['content_navigation']['namespaces'],
- ) );
- $this->outputPortlet( array(
- 'id' => 'p-variants',
- 'headerMessage' => 'variants',
- 'content' =>
$this->data['content_navigation']['variants'],
- ) );
- $this->outputPortlet( array(
- 'id' => 'p-views',
- 'headerMessage' => 'views',
- 'content' =>
$this->data['content_navigation']['views'],
- ) );
- $this->outputPortlet( array(
- 'id' => 'p-actions',
- 'headerMessage' => 'actions',
- 'content' =>
$this->data['content_navigation']['actions'],
- ) );
-
- foreach ( $this->getSidebar() as $boxName =>
$box ) {
- $this->outputPortlet( $box );
- }
-
+ class="mw-wiki-logo"
+ href="<?php echo htmlspecialchars(
$this->data['nav_urls']['mainpage']['href'] )
+ ?>" <?php
+ echo Xml::expandAttributes(
Linker::tooltipAndAccesskeyAttribs( 'p-logo' ) )
+ ?>></a>
+ <?php
+ if ( !$imageonly ) {
?>
- </div>
-
- <div id="mw-footer">
- <?php foreach ( $this->getFooterLinks() as
$category => $links ) { ?>
- <ul role="contentinfo">
- <?php foreach ( $links as $key
) { ?>
- <li><?php $this->html(
$key ) ?></li>
- <?php } ?>
- </ul>
- <?php } ?>
-
- <ul role="contentinfo">
- <?php foreach ( $this->getFooterIcons(
'icononly' ) as $blockName => $footerIcons ) { ?>
- <li>
- <?php
- foreach ( $footerIcons
as $icon ) {
- echo
$this->getSkin()->makeFooterIcon( $icon );
- }
- ?>
- </li>
- <?php } ?>
- </ul>
- </div>
+ <a id="p-banner" class="mw-wiki-title"
href="<?php echo htmlspecialchars( $this->data['nav_urls']['mainpage']['href']
) ?>">
+ <?php echo $this->getMsg( 'sitetitle'
)->escaped() ?>
+ </a>
+ <?php
+ }
+ ?>
</div>
-
- <?php $this->printTrail() ?>
- </body></html>
-
<?php
}
+
+ /**
+ * Outputs the logo and site title
+ */
+ private function outputSearch() {
+ ?>
+ <form
+ action="<?php $this->text( 'wgScript' ) ?>"
+ role="search"
+ class="mw-portlet"
+ id="p-search"
+ >
+ <input type="hidden" name="title" value="<?php
$this->text( 'searchtitle' ) ?>" />
+ <h3>
+ <label for="searchInput"><?php echo
$this->getMsg( 'search' )->escaped() ?></label>
+ </h3>
+ <?php echo $this->makeSearchInput( array( "id" =>
"searchInput" ) ) ?>
+ <?php echo $this->makeSearchButton( 'go', array( 'id'
=> 'searchGoButton', 'class' => 'searchButton' ) ) ?>
+ <input type='hidden' name="title" value="<?php
$this->text( 'searchtitle' ) ?>"/>
+ </form>
+ <?php
+ }
+
+ /**
+ * Outputs the sidebar
+ * Set the elements to true to allow them to be part of the sidebar
+ */
+ private function outputSiteNavigation() {
+ $sidebar = $this->getSidebar();
+
+ $sidebar['SEARCH'] = false;
+ $sidebar['TOOLBOX'] = true;
+ $sidebar['LANGUAGES'] = true;
+
+ foreach ( $sidebar as $boxName => $box ) {
+ if ( $boxName === false ) {
+ continue;
+ }
+ $this->outputPortlet( $box, true );
+ }
+ }
+ private function outputPageLinks() {
+ $this->outputPortlet( array(
+ 'id' => 'p-namespaces',
+ 'headerMessage' => 'namespaces',
+ 'content' =>
$this->data['content_navigation']['namespaces'],
+ ) );
+ $this->outputPortlet( array(
+ 'id' => 'p-variants',
+ 'headerMessage' => 'variants',
+ 'content' =>
$this->data['content_navigation']['variants'],
+ ) );
+ $this->outputPortlet( array(
+ 'id' => 'p-views',
+ 'headerMessage' => 'views',
+ 'content' => $this->data['content_navigation']['views'],
+ ) );
+ $this->outputPortlet( array(
+ 'id' => 'p-actions',
+ 'headerMessage' => 'actions',
+ 'content' =>
$this->data['content_navigation']['actions'],
+ ) );
+ }
+ private function outputUserLinks() {
+ $this->outputPortlet( array(
+ 'id' => 'p-personal',
+ 'headerMessage' => 'personaltools',
+ 'content' => $this->getPersonalTools(),
+ ) );
+ }
}
diff --git a/resources/screen-common.less b/resources/screen-common.less
index 16dcd73..1a3e64b 100644
--- a/resources/screen-common.less
+++ b/resources/screen-common.less
@@ -23,6 +23,16 @@
}
#p-logo {
text-align: center;
+ width: 10em;
+
+ a.mw-wiki-logo {
+ display: block;
+ content: '';
+ width: 10em;
+ height: 10em;
+ background-repeat: no-repeat;
+ background-position: 50% 50%;
+ }
}
/* Search form and personal menu in top-right corner */
@@ -31,7 +41,6 @@
position: absolute;
top: 1em;
right: 1em;
- width: 46em;
text-align: right;
}
@@ -39,7 +48,6 @@
position: absolute;
top: 3em;
right: 1em;
- width: 46em;
text-align: right;
ul {
@@ -52,7 +60,7 @@
#mw-footer {
clear: both;
- border-top: 1px solid black;
+ border-top: 1px solid @border;
margin-top: 1em;
padding: 1em;
}
@@ -67,12 +75,9 @@
margin-right: 1em;
}
-/* Hide some headings, but keep them accessible for screen-readers */
-
#mw-navigation h2,
#p-search h3,
#p-personal h3 {
- position: absolute;
- top: -9999px;
+ .hidden;
}
diff --git a/resources/screen-desktop.less b/resources/screen-desktop.less
index 3dd2668..19b1dde 100644
--- a/resources/screen-desktop.less
+++ b/resources/screen-desktop.less
@@ -1,13 +1,13 @@
@import "variables.less";
#mw-wrapper {
- max-width: 60em;
- border-left: 1px solid black;
- border-right: 1px solid black;
+ width: 60em;
+ border-left: 1px solid @border;
+ border-right: 1px solid @border;
}
.mw-body {
- width: 46em;
- border-left: 1px solid black;
+ width: @width;
+ border-left: 1px solid @border;
float: right;
padding-top: 6em;
}
@@ -24,10 +24,24 @@
display: inline-block;
margin-right: 1em;
}
-#p-namespaces, #p-views, #p-actions {
- float: left;
- margin-right: 1em;
-}
-#p-navigation {
- clear: both;
+#page-tools {
+ position: absolute;
+ top: 5em;
+ right: 1em;
+ width: @width;
+
+ div,
+ ul,
+ li {
+ list-style: none;
+ display: inline;
+ margin: 0;
+ padding: 0;
+ }
+ li {
+ padding-right: 1em;
+ }
+ h3 {
+ .hidden;
+ }
}
diff --git a/resources/screen-mobile.less b/resources/screen-mobile.less
index c81cb8c..1114b34 100644
--- a/resources/screen-mobile.less
+++ b/resources/screen-mobile.less
@@ -4,3 +4,18 @@
.firstHeading {
margin-top: 0;
}
+
+#p-namespaces,
+#p-views,
+#p-actions {
+ float: left;
+ margin-right: 1em;
+}
+#p-navigation {
+ clear: both;
+}
+
+.mw-body,
+#mw-navigation {
+ padding: 1em;
+}
diff --git a/resources/variables.less b/resources/variables.less
index 7ce78df..ad79e7c 100644
--- a/resources/variables.less
+++ b/resources/variables.less
@@ -1 +1,10 @@
/* @import "mediawiki.mixins"; */
+
+@width: 46em;
+@border: #ccc;
+
+/* To hide objects, but keep them accessible for screen-readers */
+.hidden() {
+ position: absolute;
+ top: -9999px;
+}
diff --git a/skin.json b/skin.json
index c992273..b90c83f 100644
--- a/skin.json
+++ b/skin.json
@@ -25,10 +25,10 @@
"media": "screen"
},
"resources/screen-desktop.less": {
- "media": "screen and (min-width: 751px)"
+ "media": "screen and (min-width: 951px)"
},
"resources/screen-mobile.less": {
- "media": "screen and (max-width: 750px)"
+ "media": "screen and (max-width: 950px)"
}
}
},
--
To view, visit https://gerrit.wikimedia.org/r/249807
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Ib6dddfceed22d2697de24df58f1567cb8ece959c
Gerrit-PatchSet: 3
Gerrit-Project: mediawiki/skins/Example
Gerrit-Branch: master
Gerrit-Owner: Isarra <[email protected]>
Gerrit-Reviewer: Bartosz Dziewoński <[email protected]>
Gerrit-Reviewer: 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
