Jack Phoenix has submitted this change and it was merged.
Change subject: Content header style stuff
......................................................................
Content header style stuff
Format header, add ToC (stolen from refreshed skin)
Format some other random things - content, button placement, etc
Add special mainpage formatting
Possibly other stuff.
Needs cleaning up and integration into the skin itself (basically just tacked
on the end)
Change-Id: I13b06c4365afec6ea2ac1a6365a7c4cb44232b62
---
M BlueSky.php
M BlueSky.skin.php
M i18n/en.json
M resources/css/home.css
M resources/css/main.less
A resources/images/edited.png
A resources/images/viewed.png
7 files changed, 205 insertions(+), 259 deletions(-)
Approvals:
Jack Phoenix: Verified; Looks good to me, approved
diff --git a/BlueSky.php b/BlueSky.php
index d1ac153..e55e866 100644
--- a/BlueSky.php
+++ b/BlueSky.php
@@ -195,6 +195,8 @@
/**
* Additional junk for the page head element.
*/
+$wgHooks['OutputPageParserOutput'][] = 'wfTOCCrap';
+
$wgHooks['BeforePageDisplay'][] = function( &$out, &$skin ) {
//global $wgRequest, $wgUser;
@@ -254,3 +256,17 @@
return true;
};
+
+/**
+ * TOC processing
+ * Shamelessly stolen from brickimedia's refreshed skin
+ * Currently:
https://github.com/Brickimedia/Refreshed/blob/master/Refreshed.skin.php#L72
+ */
+$blueSkyTOC = '';
+
+function wfTOCCrap( OutputPage &$out, ParserOutput $parseroutput ) {
+ global $blueSkyTOC;
+ $blueSkyTOC = $parseroutput->mSections;
+
+ return true;
+}
diff --git a/BlueSky.skin.php b/BlueSky.skin.php
old mode 100644
new mode 100755
index c4c50b7..003d526
--- a/BlueSky.skin.php
+++ b/BlueSky.skin.php
@@ -482,7 +482,7 @@
if ( empty( $categoryLinks['normal'] ) ) {
$t = $embed . '' . $pop;
} else {
- $t = $embed . implode( "{$pop} | {$embed}",
$categoryLinks['normal'] ) . $pop;
+ $t = $embed . implode( "{$pop}, {$embed}",
$categoryLinks['normal'] ) . $pop;
}
if ( !$usebrowser ) {
return $t;
@@ -1549,7 +1549,24 @@
* outputs a formatted page.
*/
public function execute() {
- global $wgStylePath, $wgSitename, $wgForumLink;
+ global $wgStylePath, $wgSitename, $wgForumLink, $blueSkyTOC;
+
+ $tocHTML = '';
+ if ( $blueSkyTOC != '' ) {
+ if ( sizeof( $blueSkyTOC ) > 6 ) {
+ $tocHTML .= "<div class='toc_long'>";
+ } else {
+ $tocHTML .= "<div class='toc_short'>";
+ }
+ $i = 0;
+ foreach ( $blueSkyTOC as $tocpart ) {
+ $class = "toclevel-{$tocpart['toclevel']}";
+ $href = "#{$tocpart['anchor']}";
+ $tocHTML .= "<a href='$href' data-to='$href'
data-numid='$i' class='$class'><span
class='toc_square'></span>{$tocpart['line']}</a>";
+ $i++;
+ }
+ $tocHTML .= '</div>';
+ }
if ( class_exists( 'MobileWikihow' ) ) {
$mobileWikihow = new MobileWikihow();
@@ -1834,8 +1851,6 @@
<div id="container"<?php echo !$showSideBar ? '
class="no_sidebar"' : '' ?>>
<div id="article_shell">
<div id="article"<?php if ( class_exists( 'Microdata' ) ) {
echo Microdata::genSchemaHeader(); } ?> class="mw-body">
- <div id="contentSub2"><?php $this->html( 'subtitle' )
?></div>
- <?php if ( $this->data['undelete'] ) { ?><div
id="contentSub"><?php $this->html( 'undelete' ) ?></div><?php } ?>
<?php if ( $this->data['newtalk'] ) { ?><div
class="usermessage"><?php $this->html( 'newtalk' ) ?></div><?php } ?>
<?php
wfRunHooks( 'BeforeTabsLine', array( &$out ) );
@@ -1848,16 +1863,25 @@
<?php if ( !$sk->suppressH1Tag() &&
$this->data['title'] && !isset( $this->data['bodyheading'] ) ) { ?><h1
id="firstHeading" class="firstHeading" lang="<?php $this->text( 'pageLanguage'
) ?>"><span dir="auto"><?php $this->html( 'title' ) ?></span></h1><?php }?>
<div id="info"><?php
if ( isset( $this->data['viewcount'] )
&& $this->data['viewcount'] ) {
+ echo '<span id="view_count">';
$this->html( 'viewcount' );
+ echo '</span>';
}
echo $sk->msg( 'word-separator'
)->escaped();
$lastEdit = $sk->getPageLastEdit(
$title );
if ( !empty( $lastEdit ) ) {
- echo '<p id="originators">' .
$lastEdit . '</p>';
+ echo '<span id="originators">'
. $lastEdit . '</span>';
}
?>
</div>
+ <?php if ( $this->data['undelete'] ) { ?><div
id="contentSub"><?php $this->html( 'undelete' ) ?></div><?php } ?>
+ <div id="contentSub2"><?php $this->html(
'subtitle' ) ?></div>
<div class="clearall"></div>
+ <?php if ( $tocHTML != '' ) { ?>
+ <div id="header_toc">
+ <span id="header-toc-header"><?php echo
$sk->msg( 'bluesky-toc-sections' ) ?></span><?php echo $tocHTML; ?>
+ </div>
+ <?php } ?>
</div>
<?php
@@ -1938,7 +1962,11 @@
</ul> <!--end #end_options -->
<div class="clearall"></div>
</div><!--end #article_info
.section_text-->
- <p class="page_stats"><?php echo
$sk->pageStats() ?></p>
+ <?php if ( $sk->pageStats() != '' ) { ?>
+ <p class="page_stats">
+ <?php echo $sk->pageStats() ?>
+ </p>
+ <?php } ?>
</div><!--end .section-->
<?php }
diff --git a/i18n/en.json b/i18n/en.json
index 6f2dc91..13550f6 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -39,5 +39,6 @@
"bluesky-unwatch": "Remove watch",
"bluesky-watch": "Watch",
"bluesky-write-article": "Write article",
- "bluesky-write-article-url": "{{ns:help}}:Creating a new page"
+ "bluesky-write-article-url": "{{ns:help}}:Creating a new page",
+ "bluesky-toc-sections": "Sections:"
}
diff --git a/resources/css/home.css b/resources/css/home.css
old mode 100644
new mode 100755
index 0ac927c..1ff08c3
--- a/resources/css/home.css
+++ b/resources/css/home.css
@@ -1,250 +1,11 @@
-/*** HOMEPAGE STYLES ***/
-#main_container.mainpage {
- margin-top: 0;
-}
-
-.mainpage #sidebar{
- padding-top: 3px;
-}
-
-#hp_container {
- position: relative;
- margin-top: 39px;
- *margin-top: 0; /*ie7 fix*/
- min-height: 560px;
- max-height: 700px;
-}
-
-.hp_top {
- position: absolute;
- overflow: hidden;
- width: 100%;
- height: 100%;
- left: 0;
- top: 0;
- min-width: 1000px;
-}
-
-.hp_top .hp_text {
- /* IE9 SVG, needs conditional override of 'filter' to 'none' */
- background:
url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjY1Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjI1JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjcwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4zIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
- background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%,
rgba(0,0,0,0) 25%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.3) 100%); /* FF3.6+ */
- background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,rgba(0,0,0,0.65)), color-stop(25%,rgba(0,0,0,0)),
color-stop(70%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.3))); /*
Chrome,Safari4+ */
- background: -webkit-linear-gradient(top, rgba(0,0,0,0.65)
0%,rgba(0,0,0,0) 25%,rgba(0,0,0,0) 70%,rgba(0,0,0,0.3) 100%); /*
Chrome10+,Safari5.1+ */
- background: -o-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0)
25%,rgba(0,0,0,0) 70%,rgba(0,0,0,0.3) 100%); /* Opera 11.10+ */
- background: -ms-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0)
25%,rgba(0,0,0,0) 70%,rgba(0,0,0,0.3) 100%); /* IE10+ */
- background: linear-gradient(to bottom, rgba(0,0,0,0.65)
0%,rgba(0,0,0,0) 25%,rgba(0,0,0,0) 70%,rgba(0,0,0,0.3) 100%); /* W3C */
- width: 100%;
- height: 100%;
- position: absolute;
-}
-
-.hp_top p {
- position: absolute;
- color: #ffffff;
-}
-
-.hp_top img {
- width: 100%;
-}
-
-.hp_tag {
- font-size: 36px;
- font-weight: bold;
- color: #ffffff;
- padding-top: 45px;
- padding-bottom: 5px;
-}
-
-.hp_title {
- /* @embed */
- background: url(../images/home_bkg_long.png) no-repeat;
- font-size: 32px;
- font-weight: bold;
- bottom: 64px;
- width: 704px;
- height: 47px;
- position: absolute;
- color: #ffffff;
-}
-
-.hp_tag, .hp_title, .hp_howto, #cse-search-hp {
- margin-left: 25px;
- position: absolute;
- z-index: 6;
-}
-
-@font-face {
- font-family:'CompleteInHimPro';
- src: url('../fonts/2211C6_0_0.eot') format('embedded-opentype'),
url('../fonts/2211C6_0_0.woff') format('woff'), url('../fonts/2211C6_0_0.ttf')
format('truetype');
-}
-.CompleteInHimPro {
- font-family: CompleteInHimPro;
- font-weight: normal;
- font-style: normal;
-}
-
-.hp_howto {
- font-family: CompleteInHimPro;
- color: #ffffff;
- font-size: 65px;
- position: absolute;
- bottom: 90px;
- *bottom: 105px;
-}
-
-#hp_container .userlogin {
- z-index: 3;
- background-color: #8fb778;
- background-color: #f6f5f4;
- filter: alpha(opacity=95);
- opacity: .95;
- padding: 20px;
- -moz-border-radius: 4px;
- -webkit-border-radius: 4px;
- -khtml-border-radius: 4px;
- border-radius: 4px;
- font-size: .8em;
- width: 260px;
- float: right;
- position: relative;
- margin-top: 130px;
- z-index: 6;
-}
-
-#hp_container #userlogin_x {
+.page-Main_Page #intro,
+.page-Main_Page .wh_block {
display: none;
}
-
-#hp_middle {
- position: absolute;
- height: 100%;
- width: 100%;
+.page-Main_Page #actionbar {
+ height: 18px;
}
-
-#hp_middle2 {
- width: 1049px;
- margin: 0 auto;
-}
-
-#hp_navigation {
- position: absolute;
- z-index: 5;
- bottom: 20px;
- width: 100%;
- text-align: center;
-}
-
-.hp_nav {
- /* @embed */
- background: url(../images/hp_nav.png) 0px -10px no-repeat;
- width: 8px;
- height: 8px;
- display: inline-block;
- margin: 0 4px;
- cursor: pointer;
-}
-
-.hp_nav.on {
- background-position: 0 0;
-}
-
-#hp_categories {
- list-style: none;
- margin-left: 0px;
-}
-
-#hp_categories li {
- list-style-image: none;
- height: 30px;
- line-height: 34px;
- padding-left: 10px;
-}
-
-#hp_categories li a {
- padding-left: 48px;
-}
-
-#hp_categories li.cat_icon {
- /* @embed */
- background: url(../images/cat_icon_sprite.png) no-repeat 0 0;
-}
-#hp_categories li.cat_artsandentertainment { background-position: 9px 5px; }
-#hp_categories li.cat_carsandothervehicles { background-position: 9px -27px; }
-#hp_categories li.cat_computersandelectronics { background-position: 9px
-60px; }
-#hp_categories li.cat_educationandcommunications { background-position: 9px
-94px; }
-#hp_categories li.cat_familylife { background-position: 9px -134px; }
-#hp_categories li.cat_financeandbusiness { background-position: 9px -174px; }
-#hp_categories li.cat_foodandentertaining { background-position: 9px -216px; }
-#hp_categories li.cat_health { background-position: 9px -255px; }
-#hp_categories li.cat_hobbiesandcrafts { background-position: 9px -289px; }
-#hp_categories li.cat_holidaysandtraditions { background-position: 9px -323px;
}
-#hp_categories li.cat_homeandgarden { background-position: 9px -357px; }
-#hp_categories li.cat_personalcareandstyle { background-position: 9px -388px; }
-#hp_categories li.cat_petsandanimals { background-position: 9px -420px; }
-#hp_categories li.cat_philosophyandreligion { background-position: 9px -456px;
}
-#hp_categories li.cat_relationships { background-position: 9px -494px; }
-#hp_categories li.cat_sportsandfitness { background-position: 9px -523px; }
-#hp_categories li.cat_travel { background-position: 9px -554px; }
-#hp_categories li.cat_wikihow { background-position: 9px -586px; }
-#hp_categories li.cat_workworld { background-position: 9px -617px; }
-#hp_categories li.cat_youth { background-position: 9px -650px; }
-
-#cse-search-hp {
- position: absolute;
- bottom: 65px;
-}
-
-#cse-search-hp input {
- background-color: transparent;
- color: #ffffff;
- font-size: 32px;
- font-weight: bold;
+.page-Main_Page .minor_section {
border: none;
- width: 515px;
-}
-
-#cse-search-hp .search_button {
- display: none;
-}
-
-/* end main page styles */
-
-#main_container {
- border: none;
-}
-
-.mainpage #bodycontents.minor_section {
- background-color: #ecebe8;
padding: 0;
-}
-
-#fa_container {
- margin-left: 16px;
-}
-
-#worldwide {
- margin-top: 10px;
-}
-
-#languages {
- line-height: 16px;
-}
-
-.mainpage #actionbar {
- height: 15px;
-}
-
-.mainpage div#header_space {
- display: none;
-}
-
-.hp_top a {
- display: block;
- position: absolute;
- width: 100%;
- height: 100%;
- z-index: 5;
- /* @embed */
- background: url(../images/1x1_transparent.gif) repeat;
}
diff --git a/resources/css/main.less b/resources/css/main.less
index a11e1ae..1c31dd6 100755
--- a/resources/css/main.less
+++ b/resources/css/main.less
@@ -897,7 +897,7 @@
.userlogin .input_med, #userloginForm .input_med, #mw-resetpass-table
.mw-input input {
margin: 5px 0;
width: 65%;
- border: 1px solid @text-header-bg-color;
+ border: 1px solid @generic-grey-65;
}
.userlogin .input_med {
width: 90%;
@@ -970,6 +970,7 @@
}
#forgot_pwd_head, #forgot_pwd {
float: right;
+ margin-left: 1.5em;
}
#fb_connect_head, #gplus_connect_head, #fb_connect, #gplus_connect {
@@ -1657,13 +1658,6 @@
/*padding: 0 1em 1em 0;*/ /*took out for article page. may need it
again */
}
-#originators {
- font-size: 11px;
- line-height: normal;
- color: @generic-grey-2;
- margin-bottom: 25px;
-}
-
#method_toc {
line-height:15px;
margin-bottom:5px;
@@ -2197,3 +2191,149 @@
div.usermessage {
margin-top: 0px;
}
+
+
+
+/* Miscellaneous disorderly stuff - please integrate this properly */
+.mw-editsection-bracket {
+ display: none;
+}
+#breadcrumb {
+ font-size: 13px;
+ font-weight: 500;
+ color: @generic-grey-5;
+}
+#breadcrumb a {
+ color: @generic-grey-4;
+}
+.section {
+ padding: 27px 27px;
+ overflow-wrap: break-word;
+ word-wrap: break-word;
+}
+h2.section_head {
+ line-height: 24px;
+}
+#intro .editsection {
+ float: right;
+ font-size: 13px;
+ margin-top: -6px;
+}
+#top_links {
+ text-align: center;
+}
+.firstHeading, #firstHeading {
+ margin-bottom: 0;
+}
+
+#contentSub, #contentSub2, #info {
+ color: @generic-grey-4;
+ font-size: 11px;
+ line-height: 20px;
+ margin: 0;
+ width: auto;
+}
+#contentSub a, #contentSub2 a, #info a {
+ color: @generic-grey-3;
+}
+#contentSub2, #info {
+ display: inline;
+}
+#contentSub2 {
+ margin-left: 1em;
+}
+#originators {
+ /* @embed */
+ background: url(../../images/edited.png) center left no-repeat;
+ padding-left: 1.8em;
+ display: inline-block;
+}
+#view_count {
+ /* @embed */
+ background: url(../../images/viewed.png) center left no-repeat;
+ padding-left: 1.8em;
+ margin-left: 1em;
+ display: inline-block;
+}
+
+#header_toc {
+ border: 1px @generic-grey-6;
+ border-style: solid none;
+ font-weight: bold;
+ font-size: 12px;
+ margin: 10px 0 0;
+ padding: 2px 0 0;
+}
+#header_toc a {
+ margin-left: 18px;
+ display: inline-block;
+}
+#header_toc a.toclevel-1 {
+ display: block;
+ margin-left: 0;
+}
+#header_toc a.toclevel-2,
+#header_toc a.toclevel-3,
+#header_toc a.toclevel-4,
+#header_toc a.toclevel-5,
+#header_toc a.toclevel-6{
+ font-weight: normal;
+}
+#header_toc a.toclevel-3,
+#header_toc a.toclevel-4,
+#header_toc a.toclevel-5,
+#header_toc a.toclevel-6 {
+ font-size: 10px;
+}
+#header_toc a.toclevel-3:before,
+#header_toc a.toclevel-4:before,
+#header_toc a.toclevel-5:before,
+#header_toc a.toclevel-6:before {
+ content: '(';
+}
+#header_toc a.toclevel-3:after,
+#header_toc a.toclevel-4:after,
+#header_toc a.toclevel-5:after,
+#header_toc a.toclevel-6:after {
+ content: ')';
+}
+
+#toc {
+ display: none;
+ position: absolute;
+ top: -1000px;
+}
+
+#header_toc a.toclevel-1 .toc_square {
+ display: inline-block;
+ height: 9px;
+ border-left: 9px solid @nav-bg;
+ padding-left: 5px;
+}
+h1 .mw-headline,
+h2 .mw-headline {
+ border-left: solid 10px @nav-bg;
+ padding-left: 6px;
+}
+
+#header_toc .toc_short a.toclevel-1 {
+ display: inline;
+ margin-left: 1em;
+}
+.toc_short {
+ display: inline;
+}
+
+p {
+ margin: 1em 0;
+}
+hr {
+ border: none;
+ background: @generic-grey-6;
+ height: 1px;
+}
+/* Screenplay extension */
+.screenplay {
+ font-size: 13px;
+ margin: 0;
+}
diff --git a/resources/images/edited.png b/resources/images/edited.png
new file mode 100644
index 0000000..4d468c1
--- /dev/null
+++ b/resources/images/edited.png
Binary files differ
diff --git a/resources/images/viewed.png b/resources/images/viewed.png
new file mode 100644
index 0000000..1dd9b8d
--- /dev/null
+++ b/resources/images/viewed.png
Binary files differ
--
To view, visit https://gerrit.wikimedia.org/r/154375
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I13b06c4365afec6ea2ac1a6365a7c4cb44232b62
Gerrit-PatchSet: 5
Gerrit-Project: mediawiki/skins/BlueSky
Gerrit-Branch: master
Gerrit-Owner: Isarra <zhoris...@gmail.com>
Gerrit-Reviewer: Isarra <zhoris...@gmail.com>
Gerrit-Reviewer: Jack Phoenix <j...@countervandalism.net>
Gerrit-Reviewer: Siebrand <siebr...@kitano.nl>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
