From 2cb831e45f91a1c9d7eb126cb0dea998fdedeecf Mon Sep 17 00:00:00 2001
From: Tom Hutchison <Hutchy68@gmail.com>
Date: Wed, 4 Nov 2015 07:50:24 -0500
Subject: [PATCH] addressing some duplication issues

---
 Pivot.skin.php                           |  22 +--
 assets/stylesheets/pivot.css             |   3 +
 assets/stylesheets/responsive-tables.css | 212 +++++++++++++++++++++++
 view/sidebar.php                         |  16 ++
 4 files changed, 234 insertions(+), 19 deletions(-)
 create mode 100644 assets/stylesheets/responsive-tables.css
 create mode 100644 view/sidebar.php

diff --git a/Pivot.skin.php b/Pivot.skin.php
index bacc5cf..617737a 100644
--- a/Pivot.skin.php
+++ b/Pivot.skin.php
@@ -129,16 +129,8 @@ class pivotTemplate extends BaseTemplate {
 										</div>
 									</form>
 								</li>
-				
-							<?php foreach ( $this->getSidebar() as $boxName => $box ) { if ( ($box['header'] != wfMessage( 'toolbox' )->text())  ) { ?>
-								<li id='<?php echo Sanitizer::escapeId( $box['id'] ) ?>'<?php echo Linker::tooltip( $box['id'] ) ?>>
-									<li><label><?php echo htmlspecialchars( $box['header'] ); ?></label></li>
-										<?php if ( is_array( $box['content'] ) ) { ?>
-											<?php foreach ( $box['content'] as $key => $item ) { echo $this->makeListItem( $key, $item ); } ?>
-										<?php } } ?>
-								<?php } ?>
-								<li><label></i>Toolbox</label></li>
-									<?php foreach ( $this->getToolbox() as $key => $item ) { echo $this->makeListItem($key, $item); } ?>
+								
+							<?php include(__DIR__.'/view/sidebar.php'); ?>
 						</ul>
 					</aside>
 					
@@ -183,15 +175,7 @@ class pivotTemplate extends BaseTemplate {
 												</form>
 											</li>
 								
-											<?php foreach ( $this->getSidebar() as $boxName => $box ) { if ( ($box['header'] != wfMessage( 'toolbox' )->text())  ) { ?>
-												<li id='<?php echo Sanitizer::escapeId( $box['id'] ) ?>'<?php echo Linker::tooltip( $box['id'] ) ?>>
-													<li><label><?php echo htmlspecialchars( $box['header'] ); ?></label></li>
-														<?php if ( is_array( $box['content'] ) ) { ?>
-															<?php foreach ( $box['content'] as $key => $item ) { echo $this->makeListItem( $key, $item ); } ?>
-														<?php } } ?>
-												<?php } ?>
-												<li><label>Toolbox</label></li>
-													<?php foreach ( $this->getToolbox() as $key => $item ) { echo $this->makeListItem($key, $item); } ?>
+											<?php include(__DIR__.'/view/sidebar.php'); ?>
 										</ul>
 								</div>
 								
diff --git a/assets/stylesheets/pivot.css b/assets/stylesheets/pivot.css
index 3b142c1..73a7110 100644
--- a/assets/stylesheets/pivot.css
+++ b/assets/stylesheets/pivot.css
@@ -101,6 +101,9 @@ color: #fff;
 ul.off-canvas-list form#searchform {
 margin: 1em;
 }
+ul.off-canvas-list form#searchform-offcanvas {
+    margin: 1em;
+}
 a.feedlink {
 background: none;
 }
diff --git a/assets/stylesheets/responsive-tables.css b/assets/stylesheets/responsive-tables.css
new file mode 100644
index 0000000..2a4edfb
--- /dev/null
+++ b/assets/stylesheets/responsive-tables.css
@@ -0,0 +1,212 @@
+* {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+*:before, *:after {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
+  color: #5e5d52;
+}
+
+a {
+  color: #337aa8;
+}
+a:hover, a:focus {
+  color: #4b8ab2;
+}
+
+.container {
+  margin: 5% 3%;
+}
+@media (min-width: 48em) {
+  .container {
+    margin: 2%;
+  }
+}
+@media (min-width: 75em) {
+  .container {
+    margin: 2em auto;
+    max-width: 75em;
+  }
+}
+
+.responsive-table {
+  width: 100%;
+  margin-bottom: 1.5em;
+}
+@media (min-width: 48em) {
+  .responsive-table {
+    font-size: .9em;
+  }
+}
+@media (min-width: 62em) {
+  .responsive-table {
+    font-size: 1em;
+  }
+}
+.responsive-table thead {
+  position: absolute;
+  clip: rect(1px 1px 1px 1px);
+  /* IE6, IE7 */
+  clip: rect(1px, 1px, 1px, 1px);
+  padding: 0;
+  border: 0;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+}
+@media (min-width: 48em) {
+  .responsive-table thead {
+    position: relative;
+    clip: auto;
+    height: auto;
+    width: auto;
+    overflow: auto;
+  }
+}
+.responsive-table thead th {
+  background-color: #1d96b2;
+  border: 1px solid #1d96b2;
+  font-weight: normal;
+  text-align: center;
+  color: white;
+}
+.responsive-table thead th:first-of-type {
+  text-align: left;
+}
+.responsive-table tbody,
+.responsive-table tr,
+.responsive-table th,
+.responsive-table td {
+  display: block;
+  padding: 0;
+  text-align: left;
+  white-space: normal;
+}
+@media (min-width: 48em) {
+  .responsive-table tr {
+    display: table-row;
+  }
+}
+.responsive-table th,
+.responsive-table td {
+  padding: .5em;
+  vertical-align: middle;
+}
+@media (min-width: 30em) {
+  .responsive-table th,
+  .responsive-table td {
+    padding: .75em .5em;
+  }
+}
+@media (min-width: 48em) {
+  .responsive-table th,
+  .responsive-table td {
+    display: table-cell;
+    padding: .5em;
+  }
+}
+@media (min-width: 62em) {
+  .responsive-table th,
+  .responsive-table td {
+    padding: .75em .5em;
+  }
+}
+@media (min-width: 75em) {
+  .responsive-table th,
+  .responsive-table td {
+    padding: .75em;
+  }
+}
+.responsive-table caption {
+  margin-bottom: 1em;
+  font-size: 1em;
+  font-weight: bold;
+  text-align: center;
+}
+@media (min-width: 48em) {
+  .responsive-table caption {
+    font-size: 1.5em;
+  }
+}
+.responsive-table tfoot {
+  font-size: .8em;
+  font-style: italic;
+}
+@media (min-width: 62em) {
+  .responsive-table tfoot {
+    font-size: .9em;
+  }
+}
+@media (min-width: 48em) {
+  .responsive-table tbody {
+    display: table-row-group;
+  }
+}
+.responsive-table tbody tr {
+  margin-bottom: 1em;
+  border: 2px solid #1d96b2;
+}
+@media (min-width: 48em) {
+  .responsive-table tbody tr {
+    display: table-row;
+    border-width: 1px;
+  }
+}
+.responsive-table tbody tr:last-of-type {
+  margin-bottom: 0;
+}
+@media (min-width: 48em) {
+  .responsive-table tbody tr:nth-of-type(even) {
+    background-color: rgba(94, 93, 82, 0.1);
+  }
+}
+.responsive-table tbody th[scope="row"] {
+  background-color: #1d96b2;
+  color: white;
+}
+@media (min-width: 48em) {
+  .responsive-table tbody th[scope="row"] {
+    background-color: transparent;
+    color: #5e5d52;
+    text-align: left;
+  }
+}
+.responsive-table tbody td {
+  text-align: right;
+}
+@media (min-width: 30em) {
+  .responsive-table tbody td {
+    border-bottom: 1px solid #1d96b2;
+  }
+}
+@media (min-width: 48em) {
+  .responsive-table tbody td {
+    text-align: center;
+  }
+}
+.responsive-table tbody td[data-type=currency] {
+  text-align: right;
+}
+.responsive-table tbody td[data-title]:before {
+  content: attr(data-title);
+  float: left;
+  font-size: .8em;
+  color: rgba(94, 93, 82, 0.75);
+}
+@media (min-width: 30em) {
+  .responsive-table tbody td[data-title]:before {
+    font-size: .9em;
+  }
+}
+@media (min-width: 48em) {
+  .responsive-table tbody td[data-title]:before {
+    content: none;
+  }
+}
\ No newline at end of file
diff --git a/view/sidebar.php b/view/sidebar.php
new file mode 100644
index 0000000..fccf2ee
--- /dev/null
+++ b/view/sidebar.php
@@ -0,0 +1,16 @@
+<?php
+
+if ( ! defined('MEDIAWIKI'))
+{
+	die("Wiki Wonders What You're Doing");
+}
+		
+	foreach ( $this->getSidebar() as $boxName => $box ) { if ( ($box['header'] != wfMessage( 'toolbox' )->text())  ) { ?>
+		<li id='<?php echo Sanitizer::escapeId( $box['id'] ) ?>'<?php echo Linker::tooltip( $box['id'] ) ?>>
+			<li><label><?php echo htmlspecialchars( $box['header'] ); ?></label></li>
+				<?php if ( is_array( $box['content'] ) ) { ?>
+						<?php foreach ( $box['content'] as $key => $item ) { echo $this->makeListItem( $key, $item ); } ?>
+							<?php } } ?>
+								<?php } ?>
+			<li><label>Toolbox</label></li>
+				<?php foreach ( $this->getToolbox() as $key => $item ) { echo $this->makeListItem($key, $item); } ?>
\ No newline at end of file