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 );
+	}
+}

templates/event-list.php

@@ -31,6 +31,7 @@ $defaults = array(
 	'link_teams' => get_option( 'sportspress_link_teams', 'no' ) == 'yes' ? true : false,
 	'link_venues' => get_option( 'sportspress_link_venues', 'yes' ) == 'yes' ? true : false,
 	'abbreviate_teams' => get_option( 'sportspress_abbreviate_teams', 'yes' ) === 'yes' ? true : false,
+	'responsive' => get_option( 'sportspress_enable_responsive_tables', 'yes' ) == 'yes' ? true : false,
 	'sortable' => get_option( 'sportspress_enable_sortable_tables', 'yes' ) == 'yes' ? true : false,
 	'scrollable' => get_option( 'sportspress_enable_scrollable_tables', 'yes' ) == 'yes' ? true : false,
 	'paginated' => get_option( 'sportspress_event_list_paginated', 'yes' ) == 'yes' ? true : false,
@@ -91,6 +92,7 @@ if ( $show_title && false === $title && $id ):
 	else
 		$title = get_the_title( $id );
 endif;
+$labels = array();
 ?>
 <div class="sp-template sp-template-event-list">
 	<?php if ( $title ) { ?>
@@ -102,70 +104,88 @@ endif;
 				<tr>
 					<?php
 					echo '<th class="data-date">' . __( 'Date', 'sportspress' ) . '</th>';
+					$labels[] = __( 'Date', 'sportspress' );
 
 					switch ( $title_format ) {
 						case 'homeaway':
 							if ( sp_column_active( $usecolumns, 'event' ) ) {
 								echo '<th class="data-home">' . __( 'Home', 'sportspress' ) . '</th>';
+								$labels[] = __( 'Home', 'sportspress' );
 							}
 
 							if ( 'combined' == $time_format && sp_column_active( $usecolumns, 'time' ) ) {
 								echo '<th class="data-time">' . __( 'Time/Results', 'sportspress' ) . '</th>';
+								$labels[] = __( 'Time/Results', 'sportspress' );
 							} elseif ( in_array( $time_format, array( 'separate', 'results' ) ) && sp_column_active( $usecolumns, 'results' ) ) {
 								echo '<th class="data-results">' . __( 'Results', 'sportspress' ) . '</th>';
+								$labels[] = __( 'Results', 'sportspress' );
 							}
 
 							if ( sp_column_active( $usecolumns, 'event' ) ) {
 								echo '<th class="data-away">' . __( 'Away', 'sportspress' ) . '</th>';
+								$labels[] = __( 'Away', 'sportspress' );
 							}
 
 							if ( in_array( $time_format, array( 'separate', 'time' ) ) && sp_column_active( $usecolumns, 'time' ) ) {
 								echo '<th class="data-time">' . __( 'Time', 'sportspress' ) . '</th>';
+								$labels[] = __( 'Time', 'sportspress' );
 							}
 							break;
 						default:
 							if ( sp_column_active( $usecolumns, 'event' ) ) {
-								if ( $title_format == 'teams' )
+								if ( $title_format == 'teams' ){
 									echo '<th class="data-teams">' . __( 'Teams', 'sportspress' ) . '</th>';
-								else
+									$labels[] = __( 'Teams', 'sportspress' );
+								}else{
 									echo '<th class="data-event">' . __( 'Event', 'sportspress' ) . '</th>';
+								$labels[] = __( 'Event', 'sportspress' );}
 							}
 
 							switch ( $time_format ) {
 								case 'separate':
 									if ( sp_column_active( $usecolumns, 'time' ) )
 										echo '<th class="data-time">' . __( 'Time', 'sportspress' ) . '</th>';
+										$labels[] = __( 'Time', 'sportspress' );
 									if ( sp_column_active( $usecolumns, 'results' ) )
 										echo '<th class="data-results">' . __( 'Results', 'sportspress' ) . '</th>';
+										$labels[] = __( 'Results', 'sportspress' );
 									break;
 								case 'time':
 									if ( sp_column_active( $usecolumns, 'time' ) )
 										echo '<th class="data-time">' . __( 'Time', 'sportspress' ) . '</th>';
+										$labels[] = __( 'Time', 'sportspress' );
 									break;
 								case 'results':
 									if ( sp_column_active( $usecolumns, 'results' ) )
 										echo '<th class="data-results">' . __( 'Results', 'sportspress' ) . '</th>';
+										$labels[] = __( 'Results', 'sportspress' );
 									break;
 								default:
 									if ( sp_column_active( $usecolumns, 'time' ) )
 										echo '<th class="data-time">' . __( 'Time/Results', 'sportspress' ) . '</th>';
+										$labels[] = __( 'Time/Results', 'sportspress' );
 							}
 					}
 
 					if ( sp_column_active( $usecolumns, 'league' ) )
 						echo '<th class="data-league">' . __( 'League', 'sportspress' ) . '</th>';
+						$labels[] = __( 'League', 'sportspress' );
 
 					if ( sp_column_active( $usecolumns, 'season' ) )
 						echo '<th class="data-season">' . __( 'Season', 'sportspress' ) . '</th>';
+						$labels[] = __( 'Season', 'sportspress' );
 
 					if ( sp_column_active( $usecolumns, 'venue' ) )
 						echo '<th class="data-venue">' . __( 'Venue', 'sportspress' ) . '</th>';
+						$labels[] = __( 'Venue', 'sportspress' );
 
 					if ( sp_column_active( $usecolumns, 'article' ) )
 						echo '<th class="data-article">' . __( 'Article', 'sportspress' ) . '</th>';
+						$labels[] = __( 'Article', 'sportspress' );
 
 					if ( sp_column_active( $usecolumns, 'day' ) )
 						echo '<th class="data-day">' . __( 'Match Day', 'sportspress' ) . '</th>';
+						$labels[] = __( 'Match Day', 'sportspress' );
 
 					do_action( 'sportspress_event_list_head_row', $usecolumns );
 					?>
@@ -428,6 +448,11 @@ endif;
 		</table>
 	</div>
 	<?php
+	//var_dump($labels);
+	// If responsive tables are enabled then load the inline css code
+if ($responsive == true){
+	responsive_tables_css($labels);
+}
 	if ( $id && $show_all_events_link )
 		echo '<div class="sp-calendar-link sp-view-all-link"><a href="' . get_permalink( $id ) . '">' . __( 'View all events', 'sportspress' ) . '</a></div>';
 	?>

templates/event-performance-table.php

@@ -20,6 +20,8 @@ if ( ! isset( $class ) ) $class = null;
 // Initialize arrays
 if ( ! isset( $lineups ) ) $lineups = array();
 if ( ! isset( $subs ) ) $subs = array();
+$responsive = get_option( 'sportspress_enable_responsive_tables', 'yes' ) == 'yes' ? true : false;
+$rlabels = array();
 ?>
 <div class="sp-template sp-template-event-performance sp-template-event-performance-<?php echo $mode; ?><?php if ( isset( $class ) ) { echo ' ' . $class; } ?>">
 	<?php if ( $caption ): ?>
@@ -33,17 +35,21 @@ if ( ! isset( $subs ) ) $subs = array();
 						<?php if ( $show_players ): ?>
 							<?php if ( apply_filters( 'sportspress_event_performance_show_numbers', $show_numbers, $section ) ) { ?>
 								<th class="data-number">#</th>
+								<?php $rlabels[] = '#'; ?>
 							<?php } ?>
 							<th class="data-name">
 								<?php if ( isset( $section_label ) ) { ?>
 									<?php echo $section_label; ?>
+									<?php $rlabels[] = $section_label; ?>
 								<?php } else { ?>
 									<?php _e( 'Player', 'sportspress' ); ?>
+									<?php $rlabels[] = __( 'Player', 'sportspress' ); ?>
 								<?php } ?>
 							</th>
 						<?php endif; ?>
 						<?php foreach ( $labels as $key => $label ): ?>
 							<th class="data-<?php echo $key; ?>"><?php echo $label; ?></th>
+							<?php $rlabels[] = $label; ?>
 						<?php endforeach; ?>
 					<?php endif; ?>
 				</tr>
@@ -257,3 +263,8 @@ if ( ! isset( $subs ) ) $subs = array();
 	
 	<?php do_action( 'sportspress_after_event_performance_table', $data, $lineups, $subs, $class ); ?>
 </div>
+<?php
+// If responsive tables are enabled then load the inline css code
+if ($responsive == true && $mode == 'values'){
+	responsive_tables_css($rlabels);
+}

templates/league-table.php

@@ -19,6 +19,7 @@ $defaults = array(
 	'show_title' => get_option( 'sportspress_table_show_title', 'yes' ) == 'yes' ? true : false,
 	'show_team_logo' => get_option( 'sportspress_table_show_logos', 'yes' ) == 'yes' ? true : false,
 	'link_posts' => null,
+	'responsive' => get_option( 'sportspress_enable_responsive_tables', 'yes' ) == 'yes' ? true : false,
 	'sortable' => get_option( 'sportspress_enable_sortable_tables', 'yes' ) == 'yes' ? true : false,
 	'scrollable' => get_option( 'sportspress_enable_scrollable_tables', 'yes' ) == 'yes' ? true : false,
 	'paginated' => get_option( 'sportspress_table_paginated', 'yes' ) == 'yes' ? true : false,
@@ -60,7 +61,10 @@ $data = $table->data();
 
 // The first row should be column labels
 $labels = $data[0];
-
+// If responsive tables are enabled then load the inline css code
+if ($responsive == true){
+	responsive_tables_css($labels);
+}
 // Remove the first row to leave us with the actual data
 unset( $data[0] );
 

templates/player-list.php

@@ -25,6 +25,7 @@ $defaults = array(
 	'link_posts' => get_option( 'sportspress_link_players', 'yes' ) == 'yes' ? true : false,
 	'link_teams' => get_option( 'sportspress_link_teams', 'no' ) == 'yes' ? true : false,
 	'abbreviate_teams' => get_option( 'sportspress_abbreviate_teams', 'yes' ) === 'yes' ? true : false,
+	'responsive' => get_option( 'sportspress_enable_responsive_tables', 'yes' ) == 'yes' ? true : false,
 	'sortable' => get_option( 'sportspress_enable_sortable_tables', 'yes' ) == 'yes' ? true : false,
 	'scrollable' => get_option( 'sportspress_enable_scrollable_tables', 'yes' ) == 'yes' ? true : false,
 	'paginated' => get_option( 'sportspress_list_paginated', 'yes' ) == 'yes' ? true : false,
@@ -55,7 +56,10 @@ $data = $list->data();
 
 // The first row should be column labels
 $labels = $data[0];
-
+// If responsive tables are enabled then load the inline css code
+if ($responsive == true){
+	responsive_tables_css($labels);
+}
 // Remove the first row to leave us with the actual data
 unset( $data[0] );