Dynamic colors in tables and fix #67

assets/css/sportspress.css

@@ -242,11 +242,16 @@
 
 /* Alternate */
 .sp-data-table tbody tr.odd,
-.sp-data-table tbody tr.alternate,
+.sp-data-table tbody tr.alternate {
-.sp-calendar tbody td#today {
 	background: rgba(0, 0, 0, 0.02);
 }
 
+/* Highlight */
+.sp-highlight {
+	background: #fff;
+	font-weight: bold;
+}
+
 @media only screen and (max-width: 40em) {
 	.sp-responsive-table {
 		margin-bottom: 0;

includes/class-sp-frontend-scripts.php

@@ -153,10 +153,13 @@ class SP_Frontend_Scripts {
 		// Defaults
 		if ( empty( $colors['primary'] ) ) $colors['primary'] = '#00a69c';
 		if ( empty( $colors['background'] ) ) $colors['background'] = '#f4f4f4';
-		if ( empty( $colors['highlight'] ) ) $colors['highlight'] = '#ffffff';
 		if ( empty( $colors['text'] ) ) $colors['text'] = '#363f48';
 		if ( empty( $colors['heading'] ) ) $colors['heading'] = '#ffffff';
 		if ( empty( $colors['link'] ) ) $colors['link'] = '#00a69c';
+
+		// Calculate colors
+		$colors['highlight'] = sp_hex_lighter( $colors['background'], 30, true );
+		$colors['lowlight'] = sp_hex_darker( $colors['background'], 8, true );
 		
 		echo '<style type="text/css">.sp-data-table tbody a,.sp-data-table tbody a:hover,.sp-calendar tbody a,.sp-calendar tbody a:hover{background:none;}';
 
@@ -169,9 +172,6 @@ class SP_Frontend_Scripts {
 			if ( isset( $colors['background'] ) )
 				echo '.sp-data-table tbody,.sp-calendar tbody{background: ' . $colors['background'] . ' !important}';
 
-			if ( isset( $colors['highlight'] ) )
-				echo '.sp-data-table tbody .sp-highlight,.sp-calendar tbody .sp-highlight{background: ' . $colors['highlight'] . ' !important}';
-
 			if ( isset( $colors['text'] ) )
 				echo '.sp-data-table tbody,.sp-calendar tbody{color: ' . $colors['text'] . ' !important}';
 
@@ -181,6 +181,12 @@ class SP_Frontend_Scripts {
 			if ( isset( $colors['link'] ) )
 				echo '.sp-data-table tbody a,.sp-data-table tbody a:hover,.sp-calendar tbody a:focus{color: ' . $colors['link'] . ' !important}';
 
+			if ( isset( $colors['highlight'] ) )
+				echo '.sp-highlight,.sp-calendar td#today{background: ' . $colors['highlight'] . ' !important}';
+
+			if ( isset( $colors['lowlight'] ) )
+				echo '.sp-lowlight,.sp-data-table tbody tr.odd,.sp-data-table tr.alternate{background: ' . $colors['lowlight'] . ' !important}';
+
 			do_action( 'sportspress_frontend_css', $colors );
 		}
 

includes/sp-formatting-functions.php

@@ -141,14 +141,18 @@ if ( ! function_exists( 'sp_hex_darker' ) ) {
 	 * @param int $factor (default: 30)
 	 * @return string
 	 */
-	function sp_hex_darker( $color, $factor = 30 ) {
+	function sp_hex_darker( $color, $factor = 30, $absolute = false ) {
 		$base = sp_rgb_from_hex( $color );
 		$color = '#';
 
 		foreach ($base as $k => $v) :
-	        $amount = $v / 100;
+	    	if ( $absolute ) {
-	        $amount = round($amount * $factor);
+	    		$amount = $factor;
-	        $new_decimal = $v - $amount;
+	    	} else {
+		        $amount = $v / 100;
+		        $amount = round($amount * $factor);
+		    }
+	        $new_decimal = max( $v - $amount, 0 );
 
 	        $new_hex_component = dechex($new_decimal);
 	        if(strlen($new_hex_component) < 2) :
@@ -171,15 +175,19 @@ if ( ! function_exists( 'sp_hex_lighter' ) ) {
 	 * @param int $factor (default: 30)
 	 * @return string
 	 */
-	function sp_hex_lighter( $color, $factor = 30 ) {
+	function sp_hex_lighter( $color, $factor = 30, $absolute = false ) {
 		$base = sp_rgb_from_hex( $color );
 		$color = '#';
 
 	    foreach ($base as $k => $v) :
-	        $amount = 255 - $v;
+	    	if ( $absolute ) {
-	        $amount = $amount / 100;
+	    		$amount = $factor;
-	        $amount = round($amount * $factor);
+	    	} else {
-	        $new_decimal = $v + $amount;
+		        $amount = 255 - $v;
+		        $amount = $amount / 100;
+		        $amount = round($amount * $factor);
+		    }
+	        $new_decimal = min( $v + $amount, 255 );
 
 	        $new_hex_component = dechex($new_decimal);
 	        if(strlen($new_hex_component) < 2) :

templates/league-table.php

@@ -103,22 +103,19 @@ foreach ( $data as $team_id => $row ):
 	if ( ! $name ) continue;
 
 	// Generate tags for highlighted team
-	$before = $after = $class = '';
+	$tr_class = $td_class = '';
 	if ( $highlight == $team_id ):
-		$before = '<strong>';
+		$tr_class = ' highlighted';
-		$after = '</strong>';
+		$td_class = ' sp-highlight';
-		$class = ' highlighted';
 	endif;
 
-	$output .= '<tr class="' . ( $i % 2 == 0 ? 'odd' : 'even' ) . $class . '">';
+	$output .= '<tr class="' . ( $i % 2 == 0 ? 'odd' : 'even' ) . $tr_class . '">';
 
 	// Rank
-	$output .= '<td class="data-rank">' . $before . sp_array_value( $row, 'pos' ) . $after . '</td>';
+	$output .= '<td class="data-rank' . $td_class . '">' . sp_array_value( $row, 'pos' ) . '</td>';
 
 	$name_class = '';
 
-	$name = $before . $name . $after;
-
 	if ( $show_team_logo ):
 		if ( has_post_thumbnail( $team_id ) ):
 			$logo = get_the_post_thumbnail( $team_id, 'sportspress-fit-icon' );
@@ -132,13 +129,13 @@ foreach ( $data as $team_id => $row ):
 		$name = '<a href="' . $permalink . '">' . $name . '</a>';
 	endif;
 
-	$output .= '<td class="data-name' . $name_class . '">' . $name . '</td>';
+	$output .= '<td class="data-name' . $name_class . $td_class . '">' . $name . '</td>';
 
 	foreach( $labels as $key => $value ):
 		if ( in_array( $key, array( 'pos', 'name' ) ) )
 			continue;
 		if ( ! is_array( $columns ) || in_array( $key, $columns ) )
-			$output .= '<td class="data-' . $key . '">' . $before . sp_array_value( $row, $key, '&mdash;' ) . $after . '</td>';
+			$output .= '<td class="data-' . $key . $td_class . '">' . sp_array_value( $row, $key, '&mdash;' ) . '</td>';
 	endforeach;
 
 	$output .= '</tr>';