Merge pull request #58 from cmanon/feature/14-responsive-tables

Feature/14 responsive tables

css/wp-strava.css

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

readme.txt

@@ -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
@@ -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
 

src/WPStrava.php

@@ -78,7 +78,7 @@ class WPStrava {
 
 		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' ) );
 		}

src/WPStrava/ActivityRenderer.php

@@ -67,7 +67,7 @@ class WPStrava_ActivityRenderer {
 	/**
 	 * 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 <justin@foell.org>
@@ -80,27 +80,42 @@ class WPStrava_ActivityRenderer {
 		$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 = '';
@@ -109,13 +124,12 @@ class WPStrava_ActivityRenderer {
 		}
 
 		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>
@@ -127,22 +141,23 @@ class WPStrava_ActivityRenderer {
 					</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>
 		';

src/WPStrava/AuthRefresh.php

@@ -107,7 +107,7 @@ class WPStrava_AuthRefresh extends WPStrava_Auth {
 			// 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' );
 

src/WPStrava/Blocks/Activity.php

@@ -38,7 +38,7 @@ class WPStrava_Blocks_Activity implements WPStrava_Blocks_Interface {
 		}
 
 		$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(

src/WPStrava/RouteShortcode.php

@@ -102,7 +102,7 @@ class WPStrava_RouteShortcode {
 	/**
 	 * 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 <justin@foell.org>
@@ -122,7 +122,7 @@ class WPStrava_RouteShortcode {
 		}
 
 		return '
-			<table id="activity-details-table">
+			<table class="activity-details-table">
 				<thead>
 					<tr>
 						<th>' . __( 'Est. Moving Time', 'wp-strava' ) . '</th>

src/WPStrava/SOM.php

@@ -36,9 +36,9 @@ abstract class WPStrava_SOM {
 	 * @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 );
 	}
 

src/WPStrava/Settings.php

@@ -236,10 +236,19 @@ class WPStrava_Settings {
 	 * @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
 		}
@@ -408,7 +417,7 @@ class WPStrava_Settings {
 	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
 	}
 
@@ -436,7 +445,7 @@ class WPStrava_Settings {
 	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
 	}
 
@@ -464,7 +473,7 @@ class WPStrava_Settings {
 	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
 	}
 
@@ -492,8 +501,8 @@ class WPStrava_Settings {
 	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
 	}
 
@@ -560,7 +569,7 @@ class WPStrava_Settings {
 	/**
 	 * Get all IDs and their nicknames in one array.
 	 *
-	 * @return void
+	 * @return array Array of IDs and nicknames.
 	 * @author Justin Foell <justin@foell.org>
 	 * @since  2.0.0
 	 */
@@ -644,7 +653,8 @@ class WPStrava_Settings {
 	 * @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;
@@ -661,7 +671,7 @@ class WPStrava_Settings {
 	 * @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;