Add responsiveness to tables

For league tables, event lists, player lists, and box score (player performance).

includes/sp-template-functions.php

@@ -507,3 +507,94 @@ function sportspress_output_br_tag() {
 	<br>
 	<?php
 }
+if ( ! function_exists( 'responsive_tables_css' ) ) {
+
+	/**
+	 * Output the inlince css code for responsive tables.
+	 *
+	 * @access public
+	 * @subpackage	Responsive
+	 * @return void
+	 */
+	function responsive_tables_css($vars) {
+		$custom_css = '/* 
+		Max width before this PARTICULAR table gets nasty
+		This query will take effect for any screen smaller than 760px
+		and also iPads specifically.
+		*/
+		@media 
+		only screen and (max-width: 760px),
+		(min-device-width: 768px) and (max-device-width: 1024px)  {
+		
+			/* Force table to not be like tables anymore */
+			table, thead, tbody, th, td, tr { 
+				display: block; 
+			}
+			
+			/* Hide table headers (but not display: none;, for accessibility) */
+			thead tr { 
+				position: absolute;
+				top: -9999px;
+				left: -9999px;
+			}
+			.sp-data-table .data-number, .sp-data-table .data-rank {
+				width: auto !important;
+			}
+			
+			.sp-data-table .data-name {
+				text-align: center !important;
+			}
+			
+			tr { border: 1px solid #ccc; }
+			
+			td { 
+				/* Behave  like a "row" */
+				border: none;
+				border-bottom: 1px solid #eee; 
+				position: relative;
+				padding-left: 50%; 
+			}
+			
+			td:before { 
+				/* Now like a table header */
+				position: absolute;
+				/* Top/left values mimic padding */
+				top: 6px;
+				left: 6px;
+				width: 45%; 
+				padding-right: 10px; 
+				white-space: nowrap;
+			}
+			
+			/*
+			Label the data
+			*/';
+		$k=1;
+		foreach ($vars as $label) {
+			$custom_css .= 'td:nth-of-type('.$k.'):before { content: "'.$label.'"; }';
+			$k++;
+		}
+		
+		$custom_css .= '
+		}
+		/* Smartphones (portrait and landscape) ----------- */
+		@media only screen
+		and (min-device-width : 320px)
+		and (max-device-width : 480px) {
+			body { 
+				padding: 0; 
+				margin: 0; 
+				width: 320px; }
+			}
+		
+		/* iPads (portrait and landscape) ----------- */
+		@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
+			body { 
+				width: 495px; 
+			}
+		}';
+		wp_register_style( 'sportspress-style-inline', false );
+		wp_enqueue_style( 'sportspress-style-inline' );
+		wp_add_inline_style( 'sportspress-style-inline', $custom_css );
+	}
+}