Skip to content

Commit

Permalink
Merge pull request #58 from cmanon/feature/14-responsive-tables
Browse files Browse the repository at this point in the history
Feature/14 responsive tables
  • Loading branch information
jrfoell authored Nov 3, 2020
2 parents 3fca1bb + 73bf4e1 commit bdf3057
Show file tree
Hide file tree
Showing 9 changed files with 119 additions and 48 deletions.
48 changes: 45 additions & 3 deletions css/wp-strava.css
Original file line number Diff line number Diff line change
Expand Up @@ -12,15 +12,15 @@
display: table;
margin: 0 auto;
}
#activity-details-table tr td {
.activity-details-table tr td {
padding: 5px;
}
#activity-details-table th {
.activity-details-table th {
padding: 5px;
text-align: center;
font-size: 0.8em;
}
#activity-details-table td {
.activity-details-table td {
text-align: center;
border: 1px solid #e7e7e7;
}
Expand All @@ -32,3 +32,45 @@
.activity-details-table-units {
font-size: 0.8em;
}

/* Responsive Tables */
@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;
}

td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #e7e7e7;
position: relative;
padding-left: 50%;
}

td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 5px;
left: 5px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
content: attr(data-label);
}

.activity-details-table-info, .activity-details-table-units {
display: inline;
}
}
6 changes: 5 additions & 1 deletion readme.txt
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
Contributors: cmanon, jrfoell, lancewillett, dlintott, sebastianerb
Tags: strava, activity, bicycle, cycling, biking, running, run, swimming, swim, paddle, kayak, gps, shortcode, widget, plugin
Requires at least: 4.6
Tested up to: 5.4
Tested up to: 5.5
Stable tag: 2.3.2
Requires PHP: 5.3
License: GPLv2 or later
Expand Down Expand Up @@ -116,6 +116,10 @@ On the WP-Strava settings page you cannot currently remove and add another athle

== Changelog ==

= 2.4.0 =
Made activity table responsive https://wordpress.org/support/topic/responsive-strava-activity-table/
Improve output escaping, documentation, and other coding standards

= 2.3.2 =
Added support to not link to activities https://wordpress.org/support/topic/feature-request-make-link-to-activity-optional

Expand Down
2 changes: 1 addition & 1 deletion src/WPStrava.php
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ public function hook() {

if ( is_admin() ) {
$this->settings->hook();
} else {
} else { // Front-end.
add_action( 'init', array( $this, 'register_shortcodes' ) );
add_action( 'wp_enqueue_scripts', array( $this, 'register_scripts' ) );
}
Expand Down
71 changes: 43 additions & 28 deletions src/WPStrava/ActivityRenderer.php
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ public function get_html( $atts ) {
/**
* The the activity details in in HTML table.
*
* @param string $activity_details Activity details from the activity class.
* @param stdClass $activity_details Activity details from the activity class.
* @param string $som System of measure (english/metric).
* @return string HTML Table of activity details.
* @author Justin Foell <[email protected]>
Expand All @@ -80,27 +80,42 @@ private function get_table( $activity_details, $som ) {
$avg_title = '<th>' . __( 'Average Speed', 'wp-strava' ) . '</th>';
$max_title = '<th>' . __( 'Max Speed', 'wp-strava' ) . '</th>';
$elevation_title = '<th>' . __( 'Elevation Gain', 'wp-strava' ) . '</th>';
$elevation = '<td data-label="' . __( 'Elevation Gain', 'wp-strava' ) . '">
<div class="activity-details-table-info">' . $strava_som->elevation( $activity_details->total_elevation_gain ) . '</div>
<div class="activity-details-table-units">' . $strava_som->get_elevation_label() . '</div>
</td>';
$avg_speed = '';
$max_speed = '';
$elevation = '<td>' . $strava_som->elevation( $activity_details->total_elevation_gain ) . '</td>';
$speed_label = '';
$elevation_label = '<td>' . $strava_som->get_elevation_label() . '</td>';

switch ( $strava_activitytype ) {
case WPStrava_ActivityType::TYPE_GROUP_PACE:
$avg_speed = '<td>' . $strava_som->pace( $activity_details->average_speed ) . '</td>';
$max_speed = '<td>' . $strava_som->pace( $activity_details->max_speed ) . '</td>';
$speed_label = '<td>' . $strava_som->get_pace_label() . '</td>';
$avg_speed = '<td data-label="' . __( 'Average Speed', 'wp-strava' ) . '">
<div class="activity-details-table-info">' . $strava_som->pace( $activity_details->average_speed ) . '</div>
<div class="activity-details-table-units">' . $strava_som->get_pace_label() . '</div>
</td>';
$max_speed = '<td data-label="' . __( 'Max Speed', 'wp-strava' ) . '">
<div>' . $strava_som->pace( $activity_details->max_speed ) . '</div>
</td>';
break;
case WPStrava_ActivityType::TYPE_GROUP_SPEED:
$avg_speed = '<td>' . $strava_som->speed( $activity_details->average_speed ) . '</td>';
$max_speed = '<td>' . $strava_som->speed( $activity_details->max_speed ) . '</td>';
$speed_label = '<td>' . $strava_som->get_speed_label() . '</td>';
$avg_speed = '<td data-label="' . __( 'Average Speed', 'wp-strava' ) . '">
<div class="activity-details-table-info">' . $strava_som->speed( $activity_details->average_speed ) . '</div>
<div class="activity-details-table-units">' . $strava_som->get_speed_label() . '</div>
</td>';
$max_speed = '<td data-label="' . __( 'Max Speed', 'wp-strava' ) . '">
<div class="activity-details-table-info">' . $strava_som->speed( $activity_details->max_speed ) . '</div>
<div class="activity-details-table-units">' . $strava_som->get_speed_label() . '</div>
</td>';
break;
case WPStrava_ActivityType::TYPE_GROUP_PACE:
$avg_speed = '<td>' . $strava_som->swimpace( $activity_details->average_speed ) . '</td>';
$max_speed = '<td>' . $strava_som->swimpace( $activity_details->max_speed ) . '</td>';
$speed_label = '<td>' . $strava_som->get_swimpace_label() . '</td>';
$avg_speed = '<td data-label="' . __( 'Average Speed', 'wp-strava' ) . '">
<div class="activity-details-table-info">' . $strava_som->swimpace( $activity_details->average_speed ) . '</div>
<div class="activity-details-table-units">' . $strava_som->get_swimpace_label() . '</div>
</td>';
$max_speed = '<td data-label="' . __( 'Max Speed', 'wp-strava' ) . '">
<div class="activity-details-table-info">' . $strava_som->swimpace( $activity_details->max_speed ) . '</div>
<div class="activity-details-table-units">' . $strava_som->get_swimpace_label() . '</div>
</td>';
break;
default:
$avg_title = '';
Expand All @@ -109,13 +124,12 @@ private function get_table( $activity_details, $som ) {
}

if ( WPStrava::get_instance()->settings->hide_elevation ) {
$elevation = '';
$elevation_title = '';
$elevation_label = '';
$elevation = '';
}

return '
<table id="activity-details-table">
<table class="activity-details-table">
<thead>
<tr>
<th>' . __( 'Elapsed Time', 'wp-strava' ) . '</th>
Expand All @@ -127,22 +141,23 @@ private function get_table( $activity_details, $som ) {
</tr>
</thead>
<tbody>
<tr class="activity-details-table-info">
<td>' . $strava_som->time( $activity_details->elapsed_time ) . '</td>
<td>' . $strava_som->time( $activity_details->moving_time ) . '</td>
<td>' . $strava_som->distance( $activity_details->distance ) . '</td>
<tr>
<td data-label="' . __( 'Elapsed Time', 'wp-strava' ) . '">
<div class="activity-details-table-info">' . $strava_som->time( $activity_details->elapsed_time ) . '</div>
<div class="activity-details-table-units">' . $strava_som->get_time_label() . '</div>
</td>
<td data-label="' . __( 'Moving Time', 'wp-strava' ) . '">
<div class="activity-details-table-info">' . $strava_som->time( $activity_details->moving_time ) . '</div>
<div class="activity-details-table-units">' . $strava_som->get_time_label() . '</div>
</td>
<td data-label="' . __( 'Distance', 'wp-strava' ) . '">
<div class="activity-details-table-info">' . $strava_som->distance( $activity_details->distance ) . '</div>
<div class="activity-details-table-units">' . $strava_som->get_distance_label() . '</div>
</td>
' . $avg_speed . '
' . $max_speed . '
' . $elevation . '
</tr>
<tr class="activity-details-table-units">
<td>' . $strava_som->get_time_label() . '</td>
<td>' . $strava_som->get_time_label() . '</td>
<td>' . $strava_som->get_distance_label() . '</td>
' . $speed_label . '
' . $speed_label . '
' . $elevation_label . '
</tr>
</tbody>
</table>
';
Expand Down
2 changes: 1 addition & 1 deletion src/WPStrava/AuthRefresh.php
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ protected function token_exchange_refresh( $client_id, $info ) {
// Translators: Token refresh success message.
$this->feedback .= __( 'ID %s successfully re-authenticated.', 'wp-strava' );

if ( $strava_info->access_token != $info->access_token ) {
if ( $strava_info->access_token !== $info->access_token ) {
// Translators: New token created message.
$this->feedback .= __( 'ID %s access extended.', 'wp-strava' );

Expand Down
2 changes: 1 addition & 1 deletion src/WPStrava/Blocks/Activity.php
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ public function render_block( $attributes, $content ) {
}

$matches = [];
preg_match( "/\/activities\/([0-9].*)$/", $attributes['url'], $matches );
preg_match( '/\/activities\/([0-9].*)$/', $attributes['url'], $matches );
if ( $matches[1] ) {
// Transform from block attributes to shortcode standard.
$attributes = array(
Expand Down
4 changes: 2 additions & 2 deletions src/WPStrava/RouteShortcode.php
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ public function handler( $atts ) {
/**
* The the route details in in HTML table.
*
* @param string $route_details route details from the route class.
* @param stdClass $route_details route details from the route class.
* @param string $som System of measure (english/metric).
* @return string HTML Table of route details.
* @author Justin Foell <[email protected]>
Expand All @@ -122,7 +122,7 @@ private function get_table( $route_details, $som ) {
}

return '
<table id="activity-details-table">
<table class="activity-details-table">
<thead>
<tr>
<th>' . __( 'Est. Moving Time', 'wp-strava' ) . '</th>
Expand Down
6 changes: 3 additions & 3 deletions src/WPStrava/SOM.php
Original file line number Diff line number Diff line change
Expand Up @@ -36,9 +36,9 @@ abstract public function get_pace_label();
* @see https://stackoverflow.com/a/20870843/2146022
*/
public function time( $seconds ) {
$zero = new DateTime( '@0' );
$offset = new DateTime( "@{$seconds}" );
$diff = $zero->diff( $offset );
$zero = new DateTime( '@0' );
$offset = new DateTime( "@{$seconds}" );
$diff = $zero->diff( $offset );
return sprintf( '%02d:%02d:%02d', $diff->days * 24 + $diff->h, $diff->i, $diff->s );
}

Expand Down
26 changes: 18 additions & 8 deletions src/WPStrava/Settings.php
Original file line number Diff line number Diff line change
Expand Up @@ -236,10 +236,19 @@ public function print_nickname_input() {
* @since 2.0.0
*/
public function print_id_input() {
$first = true;
foreach ( $this->get_all_ids() as $id => $nickname ) {
?>
<input type="text" name="strava_id[]" value="<?php echo esc_attr( $id ); ?>" />
<input type="text" name="strava_nickname[]" value="<?php echo esc_attr( $nickname ); ?>" />
<?php
if ( $first ) :
?>
<span class="default-id"><?php esc_html_e( 'Default', 'wp-strava' ); ?></span>
<?php
endif;
$first = false;
?>
<br/>
<?php
}
Expand Down Expand Up @@ -408,7 +417,7 @@ public function sanitize_som( $som ) {
public function print_hide_time_input() {
?>
<label for="strava_hide_time"><input type="checkbox" id="strava_hide_time" name="strava_hide_time" <?php checked( $this->hide_time, 'on' ); ?>/>
<?php _e( 'Do not show time on activities', 'wp-strava' ); ?></label>
<?php esc_html_e( 'Do not show time on activities', 'wp-strava' ); ?></label>
<?php
}

Expand Down Expand Up @@ -436,7 +445,7 @@ public function sanitize_hide_time( $checked ) {
public function print_hide_elevation_input() {
?>
<label for="strava_hide_elevation"><input type="checkbox" id="strava_hide_elevation" name="strava_hide_elevation" <?php checked( $this->hide_elevation, 'on' ); ?>/>
<?php _e( 'Do not show elevation on activities', 'wp-strava' ); ?></label>
<?php esc_html_e( 'Do not show elevation on activities', 'wp-strava' ); ?></label>
<?php
}

Expand Down Expand Up @@ -464,7 +473,7 @@ public function sanitize_hide_elevation( $checked ) {
public function print_no_link_input() {
?>
<label for="strava_no_link"><input type="checkbox" id="strava_no_link" name="strava_no_link" <?php checked( $this->no_link, 'on' ); ?>/>
<?php _e( 'Do not link activities to Strava.com', 'wp-strava' ); ?></label>
<?php esc_html_e( 'Do not link activities to Strava.com', 'wp-strava' ); ?></label>
<?php
}

Expand Down Expand Up @@ -492,8 +501,8 @@ public function sanitize_no_link( $checked ) {
public function print_clear_input() {
?>
<label for="strava_cache_clear"><input type="checkbox" id="strava_cache_clear" name="strava_cache_clear" />
<?php _e( 'Clear cached image and transient data', 'wp-strava' ); ?></label>
<p class="description"><?php _e( 'To clear cache, check this box and click "Save Changes"' ); ?></p>
<?php esc_html_e( 'Clear cached image and transient data', 'wp-strava' ); ?></label>
<p class="description"><?php esc_html_e( 'To clear cache, check this box and click "Save Changes"' ); ?></p>
<?php
}

Expand Down Expand Up @@ -560,7 +569,7 @@ public function get_default_id() {
/**
* Get all IDs and their nicknames in one array.
*
* @return void
* @return array Array of IDs and nicknames.
* @author Justin Foell <[email protected]>
* @since 2.0.0
*/
Expand Down Expand Up @@ -644,7 +653,8 @@ public function add_id( $id ) {
* @since 2.0.0
*/
public function save_info( $id, $secret, $info ) {
$infos = get_option( 'strava_info', array() );
$infos = get_option( 'strava_info' );
$infos = empty( $infos ) ? array() : $infos;
$infos = array_filter( $infos, array( $this, 'filter_by_id' ), ARRAY_FILTER_USE_KEY ); // Remove old IDs.

$info->client_secret = $secret;
Expand All @@ -661,7 +671,7 @@ public function save_info( $id, $secret, $info ) {
* @since 2.0.0
*/
public function filter_by_id( $key ) {
if ( in_array( $key, $this->ids ) ) {
if ( in_array( $key, $this->ids ) ) { // phpcs:ignore WordPress.PHP.StrictInArray.MissingTrueStrict -- Loose comparison OK.
return true;
}
return false;
Expand Down

0 comments on commit bdf3057

Please sign in to comment.