Merge pull request #1 from plymouthstate/psu-theme

updating to match PSU look-and-feel

bootstrapmediawiki.php

@@ -141,6 +141,9 @@ class BootstrapMW_Template extends QuickTemplate {
 if( $subnav_links = $this->get_page_links('Bootstrap:Subnav') ) {
 ?>
 <div class="subnav subnav-fixed">
+	<select id="subnav-select">
+	<?php echo $this->nav_select( $subnav_links ); ?>
+	</select>
 	<ul class="nav nav-pills">
 	<?php echo $this->nav( $subnav_links ); ?>
 	</ul>
@@ -148,6 +151,7 @@ if( $subnav_links = $this->get_page_links('Bootstrap:Subnav') ) {
 <?php
 }//end if
 ?>
+<div id="wiki-outer-body">
     <div id="wiki-body" class="container">
       <?php if( $this->data['sitenotice'] ) { ?><div id="siteNotice" class="alert-message warning"><?php $this->html('sitenotice') ?></div><?php } ?>
 			<?php if ( $this->data['undelete'] ): ?>
@@ -184,7 +188,7 @@ if( $subnav_links = $this->get_page_links('Bootstrap:Subnav') ) {
 			</div>
 			<?php endif; ?>
     </div><!-- container -->
-
+</div>
     <div class="bottom">
       <div class="container">
         <?php
@@ -248,6 +252,41 @@ if( $subnav_links = $this->get_page_links('Bootstrap:Subnav') ) {
 		return $output;
 	}
 
+	/**
+	 * Render one or more navigations elements by name, automatically reveresed
+	 * when UI is in RTL mode
+	 */
+	private function nav_select( $nav ) {
+		$output = '';
+		foreach($nav as $topItem) {
+			$pageTitle = Title::newFromText($topItem['link'] ?: $topItem['title'] );
+			$output .= '<optgroup label="'.strip_tags($topItem['title']).'">';
+			if(array_key_exists('sublinks', $topItem)) {
+				foreach($topItem['sublinks'] as $subLink) {
+					if( 'divider' == $subLink ) {
+						$output .= "<option value='' disabled='disabled' class='unclickable'>----</option>\n";
+					} elseif( $subLink['textonly'] ) {
+						$output .= "<option value='' disabled='disabled' class='unclickable'>{$subLink['title']}</option>\n";
+					} else {
+						if( $subLink['local'] && $pageTitle = Title::newFromText($subLink['link']) ) {
+							$href = $pageTitle->getLocalURL();
+						} else {
+							$href = $subLink['link'];
+						}//end else
+						$output .= "<option value='{$href}'>{$subLink['title']}</option>";
+					}//end else
+				}
+			} else {
+				if( $pageTitle ) {
+					$output .= '<option value="' . $pageTitle->getLocalURL() . '">' . $topItem['title'] . '</option>';
+				}//end if
+			}
+			$output .= '</optgroup>';
+		}
+
+		return $output;
+	}
+
 	private function get_page_links( $source ) {
 		$titleBar = $this->getPageRawText( $source );
 		$nav = array();

js/behavior.js

@@ -1,4 +1,8 @@
 $(function() {
+	$('#subnav-select').on('change', function() {
+		document.location = $(this).find('option:selected').val();
+	});
+
 	$('.dropdown-toggle').dropdown();
 	$('table')
 		.not('#toc')

js/site.js

@@ -2003,6 +2003,10 @@
   
 })(jQuery);
 $(function() {
+	$('#subnav-select').on('change', function() {
+		document.location = $(this).find('option:selected').val();
+	});
+
 	$('.dropdown-toggle').dropdown();
 	$('table')
 		.not('#toc')

style.css

@@ -1,5 +1,6 @@
 body {
 	padding-top: 100px;
+	background-position: left 80px !important;
 }
 
 body.page-Main_Page .page-header,
@@ -45,6 +46,14 @@ h6:hover .editsection {
 	opacity: 1;
 }
 
+option.unclickable {
+	color: #ccc;
+}
+
+#subnav-select {
+	display: none;
+}
+
 .nav .user-icon {
 	border: 1px solid rgba( 55, 55, 55, 0.1 );
 	display: inline-block;
@@ -185,21 +194,47 @@ img.thumbborder {
 	border: 1px solid #dddddd;
 }
 
+.navbar .navbar-inner {
+	background: #fff;
+	-moz-box-shadow: none;
+	-webkit-box-shadow: none;
+	box-shadow: none;
+}
+
+.navbar .brand {
+	color: #00654d;
+}
+
+.navbar input {
+	background-color: #f5f5f5;
+	border-color: #ccc;
+	color: #333;
+}
+
+.navbar .nav > li > a {
+	color: #333;
+	text-shadow: none;
+}
+
+.navbar .nav > .active > a,
+.navbar .nav > .active > a:hover,
+.navbar .nav > li > a:hover {
+	color: #333;
+	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
+}
+
+.navbar .nav .dropdown-toggle .caret, 
+.navbar .nav .open.dropdown .caret {
+	border-top-color: #333;
+}
+
 /* Subnav */
 .subnav {
+	background: url(images/nav-bg.png) top center no-repeat;
   width: 100%;
   height: 36px;
+  height: 63px;
 	margin-top: 2px;
-  background-color: #eeeeee; /* Old browsers */
-  background-repeat: repeat-x; /* Repeat the gradient */
-  background-image: -moz-linear-gradient(top, #f5f5f5 0%, #eeeeee 100%); /* FF3.6+ */
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */
-  background-image: -webkit-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* Chrome 10+,Safari 5.1+ */
-  background-image: -ms-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* IE10+ */
-  background-image: -o-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* Opera 11.10+ */
-  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */
-  background-image: linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* W3C */
-  border: 1px solid #e5e5e5;
   -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
           border-radius: 4px;
@@ -207,30 +242,41 @@ img.thumbborder {
 .subnav .nav {
   margin-bottom: 0;
 }
+
 .subnav .nav > li > a {
+	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
+	text-decoration: none;
+	color: #fff;
   margin: 0;
-  padding-top:    11px;
-  padding-bottom: 11px;
-  border-left: 1px solid #f5f5f5;
-  border-right: 1px solid #e5e5e5;
+  padding-top:    16px;
+  padding-bottom: 16px;
+  border-left: 1px solid transparent;
+  border-right: 1px solid transparent;
   -webkit-border-radius: 0;
      -moz-border-radius: 0;
           border-radius: 0;
 }
+
+.subnav .nav > li > a:hover,
 .subnav .nav > .active > a,
 .subnav .nav > .active > a:hover {
   padding-left: 13px;
-  color: #777;
-  background-color: #e9e9e9;
-  border-right-color: #ddd;
+  color: #fff;
+  background-color: #497168;
+  border-right-color: transparent;
   border-left: 0;
   -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.05);
      -moz-box-shadow: inset 0 3px 5px rgba(0,0,0,.05);
           box-shadow: inset 0 3px 5px rgba(0,0,0,.05);
 }
+.subnav .nav-tabs .dropdown-toggle .caret, 
+.subnav .nav-pills .dropdown-toggle .caret {
+	border-top-color: #000;
+}
+
 .subnav .nav > .active > a .caret,
 .subnav .nav > .active > a:hover .caret {
-  border-top-color: #777;
+  border-top-color: #000;
 }
 .subnav .nav > li:first-child > a,
 .subnav .nav > li:first-child > a:hover {
@@ -249,6 +295,18 @@ img.thumbborder {
           border-radius: 0 0 4px 4px;
 }
 
+.subnav .nav-tabs .open .dropdown-toggle, 
+.subnav .nav-pills .open .dropdown-toggle, 
+.subnav .nav > .open.active > a:hover {
+	color: white;
+	background-color: #497168;
+	border-color: #497168;
+}
+
+#wiki-outer-body {
+	/*background: url(images/body-bg.png) center top repeat-y;*/
+}
+
 /* Fixed subnav on scroll, but only for 980px and up (sorry IE!) */
 @media (min-width: 980px) {
   .subnav-fixed {
@@ -262,10 +320,6 @@ img.thumbborder {
     -webkit-border-radius: 0;
        -moz-border-radius: 0;
             border-radius: 0;
-    -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
-       -moz-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
-            box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
-    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); /* IE6-9 */
   }
   .subnav-fixed .nav {
     width: 1170px;
@@ -280,6 +334,36 @@ img.thumbborder {
   }
 }
 
+@media (max-width: 979px) {
+	body { padding-top: 0px; }
+
+	.subnav #subnav-select {
+		margin-top: 9px;
+		margin-left: 20px;
+		display: inline-block;
+	}
+
+	.subnav .nav {
+		display: none;
+	}
+
+	.navbar-form,
+	.navbar-search {
+		border-bottom: 1px solid #eee;
+		border-top: 1px solid #eee;
+		margin-bottom: 0;
+	}
+
+	.nabar-inner,
+	.navbar-fixed-top {
+		margin-bottom: 0;
+	}
+
+	.navbar-inner {
+		padding-bottom: 0;
+	}
+}
+
 /* responsive */
 @media (max-width: 480px) {
 
@@ -302,8 +386,3 @@ img.thumbborder {
 		font-size: 1.5em;
 	}
 }
-
-@media (max-width: 980px) {
-
-	body { padding-top: 100px; }
-}