Dynamic colors in tables and fix #67

This commit is contained in:
Brian Miyaji
2014-10-23 13:27:20 +11:00
parent 12064bd8c3
commit 6344be35a3
4 changed files with 41 additions and 25 deletions

View File

@@ -242,11 +242,16 @@
/* Alternate */
.sp-data-table tbody tr.odd,
.sp-data-table tbody tr.alternate,
.sp-calendar tbody td#today {
.sp-data-table tbody tr.alternate {
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;

View File

@@ -153,11 +153,14 @@ 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;}';
if ( $enabled == 'yes' && sizeof( $colors ) > 0 ) {
@@ -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 );
}

View File

@@ -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) :
if ( $absolute ) {
$amount = $factor;
} else {
$amount = $v / 100;
$amount = round($amount * $factor);
$new_decimal = $v - $amount;
}
$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) :
if ( $absolute ) {
$amount = $factor;
} else {
$amount = 255 - $v;
$amount = $amount / 100;
$amount = round($amount * $factor);
$new_decimal = $v + $amount;
}
$new_decimal = min( $v + $amount, 255 );
$new_hex_component = dechex($new_decimal);
if(strlen($new_hex_component) < 2) :

View File

@@ -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>';
$after = '</strong>';
$class = ' highlighted';
$tr_class = ' highlighted';
$td_class = ' sp-highlight';
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>';