asc/sportspress
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add responsiveness to tables

Browse Source 
For league tables, event lists, player lists, and box score (player performance).
This commit is contained in:
savvasha
2017-11-29 17:34:37 +02:00
parent 5705d35e5b
commit 70611ac98c
5 changed files with 139 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
includes/sp-template-functions.php
View File

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

29
templates/event-list.php
View File

@@ -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>';
?>

11
templates/event-performance-table.php
View File

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

6
templates/league-table.php
View File

@@ -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] );

6
templates/player-list.php
View File

@@ -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] );