Merge pull request #155 from Hutchy68/feature/footer-enhancements

Better options for footer, icons display, social follow

Foreground.skin.php

@@ -21,7 +21,9 @@ class Skinforeground extends SkinTemplate {
 			'showRecentChangesUnderTools' => true,
 			'wikiName' => &$GLOBALS['wgSitename'],
 			'navbarIcon' => false,
-			'IeEdgeCode' => 1
+			'IeEdgeCode' => 1,
+			'showFooterIcons' => 0,
+			'addThisFollowPUBID' => ''
 		);
 		foreach ($wgForegroundFeaturesDefaults as $fgOption => $fgOptionValue) {
 			if ( !isset($wgForegroundFeatures[$fgOption]) ) {
@@ -67,6 +69,20 @@ class foregroundTemplate extends BaseTemplate {
 				echo "<div id='navwrapper' class='". $wgForegroundFeatures['NavWrapperType']. "'>";
 				break;
 		}
+		switch ($wgForegroundFeatures['showFooterIcons']) {
+			case '0':
+				$footerLeftClass = 'small-8 large-centered columns text-center';
+				$footerRightClass = 'large-12 small-12 columns';
+				$poweredbyType = "nocopyright";
+				$poweredbyMakeType = 'withoutImage';
+				break;	
+			case '1':
+				$footerLeftClass = 'large-8 small-12 columns';
+				$footerRightClass = 'large-4 small-12 columns';
+				$poweredbyType = "icononly";
+				$poweredbyMakeType = 'withImage';
+				break;
+		}
 ?>
 <!-- START FOREGROUNDTEMPLATE -->
 		<nav class="top-bar">
@@ -193,21 +209,36 @@ class foregroundTemplate extends BaseTemplate {
 		    </div>
 		</div>
 
-		<footer class="row">
-
-		<ul class="large-12 columns">
-		<?php foreach ( $this->getFooterLinks( "flat" ) as $key ) { ?>
-			<li id="footer-<?php echo $key ?>"><?php $this->html( $key ) ?></li>
-		<?php } ?>
-		</ul>
-		<ul> <?php foreach ( $this->getFooterIcons( "nocopyright" ) as $blockName => $footerIcons ) { ?>
-	<li class="<?php echo $blockName ?>"><?php foreach ( $footerIcons as $icon ) { ?>
-	    <?php echo $this->getSkin()->makeFooterIcon( $icon, 'withoutImage' ); ?>
- 						<?php } ?>
-        </li>
-				<?php } ?>
-		</ul>
-		</footer>
+			<footer class="row">
+				<div id="footer">
+					<?php if ($wgForegroundFeatures['addThisFollowPUBID'] != '') { ?>
+						<div class="social-footer large-12 small-12 columns">
+							<div class="social-links">
+							<!-- Go to www.addthis.com/dashboard to customize your tools -->
+							<div class="addthis_horizontal_follow_toolbox"></div>
+							<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=<?php echo $wgForegroundFeatures['addThisFollowPUBID'];?>"></script>
+							</div>
+						</div>
+					<?php } ?>
+					<div id="footer-left" class="<?php echo $footerLeftClass;?>">
+					<ul id="footer-left">
+						<?php foreach ( $this->getFooterLinks( "flat" ) as $key ) { ?>
+							<li id="footer-<?php echo $key ?>"><?php $this->html( $key ) ?></li>
+						<?php } ?>									
+					</ul>
+					</div>	
+					<div id="footer-right-icons" class="<?php echo $footerRightClass;?>">
+					<ul id="poweredby">
+						<?php foreach ( $this->getFooterIcons( $poweredbyType ) as $blockName => $footerIcons ) { ?>
+							<li class="<?php echo $blockName ?>"><?php foreach ( $footerIcons as $icon ) { ?>
+								<?php echo $this->getSkin()->makeFooterIcon( $icon, $poweredbyMakeType ); ?>
+								<?php } ?>
+							</li>
+						<?php } ?>
+					</ul>
+					</div>								
+				</div>
+			</footer>
 
 		</div>
 		

assets/stylesheets/foreground.css

@@ -119,9 +119,7 @@ div.small-9.columns textarea {
 }
 
 footer.row {
-  margin-top: 3em;
-  text-align: center;
-  font-size: 80%;
+  margin-top: 2em;
   color: grey;
 }
 
@@ -152,13 +150,88 @@ ul#drop1.f-dropdown {
 
 footer.row ul {
   list-style-type: none;
-  margin: .5em 1.25em;
+  margin: 0 0 1em 0;
 }
 
 footer.row ul.views.columns li {
   margin-right: 1em;
 }
 
+#footer footer.row ul {
+margin: 0;
+list-style-type: none;
+}
+
+/* Make social footer center need overflow:hidden and other div classes */
+.social-footer {
+margin: 0 0 1em;
+font-size: 90%;
+overflow: hidden;
+}
+/* Hide all text in p elements */
+.social-footer p {
+display: none;
+}
+/* Outer wrap */
+.social-links {
+position: relative;
+left: 50%;
+float: left;
+}
+/* addThis container (inner wrap) */
+.addthis_horizontal_follow_toolbox {
+position: relative;
+left: -50%;
+float: left;
+}
+/* end social footer classes */
+
+#footer-left {
+font-size: 90%;
+text-align: left;
+}
+#footer-right-icons {
+font-size: 85%;
+text-align: center;
+}
+
+#footer-right-icons li {
+display: inline-block;
+text-align: center;
+margin: 0 0 .5em .5em;
+}
+
+li#footer-privacy {
+float: left;
+margin-right: 2em;
+}
+
+li#footer-about {
+float: left;
+margin-right: 2em;
+}
+
+li#footer-disclaimer {
+float: left;
+margin-right: 2em;
+}
+
+.text-center #footer-left li {
+float: none;
+margin: 0;
+}
+.text-center #footer-left {
+text-align: center;
+}
+
+@media only screen and (max-width: 768px) {
+#footer-left { font-size: 85%; text-align: center;}
+#footer-right-icons { font-size: 80%;}
+li#footer-privacy { float: none; margin-right: 0;}
+li#footer-about { float: none; margin-right: 0;}
+li#footer-disclaimer { float: none; margin-right: 0;}
+}
+
 .columns ul.special li {
   float:none;
   width: 100%;
@@ -276,7 +349,6 @@ td.smwpropname, th.smwpropname, td.smwspecname {
   text-align:left;
 }
 
-
 table tbody tr td, table tr td {
   line-height: 1.6em;
 }
@@ -739,4 +811,3 @@ body.mw-special-Userlogin h2.title {
 #echo-notifications #mw-echo-overlay-pref-link { padding: 10px 0 10px 30px; }
 #echo-notifications #mw-echo-overlay-link { border-right: 1px solid #DDDDDD; margin-right: 2em; }
 }
-