10h30/wp-strava
1
0
Fork 0
mirror of https://github.com/10h30/wp-strava.git synced 2026-06-05 15:10:01 +09:00
Code Issues Packages Projects Releases Wiki Activity

Responsive tables first pass

Browse Source
This commit is contained in:
Justin Foell
2020-11-02 15:50:00 -06:00
parent 0f0dbac262
commit aa9008822e
7 changed files with 258 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/wp-strava.css
+41
View File
@@ -32,3 +32,44 @@
.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 #eee;
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;
}
.activity-details-table-info, .activity-details-table-units {
display: inline;
}
}
src/WPStrava.php
-2
View File
@@ -85,8 +85,6 @@ class WPStrava {
if ( is_admin() ) {
$this->settings->hook();
} else { // Front-end.
$this->style_translations = new WPStrava_StyleTranslations();
$this->style_translations->hook();
add_action( 'init', array( $this, 'register_shortcodes' ) );
add_action( 'wp_enqueue_scripts', array( $this, 'register_scripts' ) );
}
src/WPStrava/ActivityRenderer.php
+52 -28
View File
@@ -2,7 +2,7 @@
/*
* ActivityRenderer has all the markup for the Activity Block & Shortcode.
*/
class WPStrava_ActivityRenderer {
class WPStrava_ActivityRenderer extends WPStrava_StyleTranslationRenderer {
/**
* Get the HTML for a single activity.
@@ -64,10 +64,19 @@ class WPStrava_ActivityRenderer {
return $activity_output;
}
public static function load_style_translations() {
self::add_style_translation( 'wp-strava-td-avg-speed', __( 'Average Speed', 'wp-strava' ) );
self::add_style_translation( 'wp-strava-td-max-speed', __( 'Max Speed', 'wp-strava' ) );
self::add_style_translation( 'wp-strava-td-elevation', __( 'Elevation Gain', 'wp-strava' ) );
self::add_style_translation( 'wp-strava-td-elapsed-time', __( 'Elapsed Time', 'wp-strava' ) );
self::add_style_translation( 'wp-strava-td-moving-time', __( 'Moving Time', 'wp-strava' ) );
self::add_style_translation( 'wp-strava-td-distance', __( 'Distance', 'wp-strava' ) );
}
/**
* 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 +89,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 class="wp-strava-td-elevation">
<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 class="wp-strava-td-avg-speed">
<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 class="wp-strava-td-max-speed">
<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 class="wp-strava-td-avg-speed">
<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 class="wp-strava-td-max-speed">
<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 class="wp-strava-td-avg-speed">
<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 class="wp-strava-td-max-speed">
<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,9 +133,8 @@ class WPStrava_ActivityRenderer {
}
if ( WPStrava::get_instance()->settings->hide_elevation ) {
$elevation = '';
$elevation_title = '';
$elevation_label = '';
$elevation = '';
}
return '
@@ -127,22 +150,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 class="wp-strava-td-elapsed-time">
<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 class="wp-strava-td-moving-time">
<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 class="wp-strava-td-distance">
<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/ActivityShortcode.php
+3 -1
View File
@@ -31,6 +31,8 @@ class WPStrava_ActivityShortcode {
add_shortcode( 'ride', array( $this, 'handler' ) ); // @deprecated 1.1
add_shortcode( 'activity', array( $this, 'handler' ) );
add_action( 'wp_footer', array( $this, 'print_scripts' ) );
WPStrava_ActivityRenderer::load_shortcode_style_translations( array( 'ride', 'activity' ) );
WPStrava_ActivityRenderer::load_style_translations();
}
/**
@@ -49,7 +51,7 @@ class WPStrava_ActivityShortcode {
return __( 'The <code>athlete_token</code> parameter is deprecated as of WP-Strava version 2 and should be replaced with <code>client_id</code>.', 'wp-strava' );
}
$this->add_script = true;
$this->add_script = WPStrava_ActivityRenderer::has_shortcode( array( 'ride', 'activity' ) );
$renderer = new WPStrava_ActivityRenderer();
return $renderer->get_html( $atts );
src/WPStrava/Blocks/Activity.php
+4
View File
@@ -5,6 +5,10 @@
class WPStrava_Blocks_Activity implements WPStrava_Blocks_Interface {
public function __construct() {
WPStrava_ActivityRenderer::load_style_translations( array( 'wp-strava/activity' ) );
}
/**
* Register the wp-strava/activity block.
*
src/WPStrava/StyleTranslationRenderer.php
+158
View File
@@ -0,0 +1,158 @@
<?php
/**
* Static class to load translations for tables via 'wp_head'
*
* @author Justin Foell <justin@foell.org>
* @since 2.4
*/
abstract class WPStrava_StyleTranslationRenderer {
/**
* Translations indexed by class.
* @var array
*/
private static $style_translations = array();
private static $shortcodes = array();
private static $blocks = array();
private static $has_shortcodes = array();
private static $has_blocks = array();
abstract public static function load_style_translations();
public static function load_block_style_translations( $block ) {
$block = ! is_array( $block ) ? array( $block ) : $block;
self::$blocks = array_unique( array_merge( self::$blocks, $block ) );
self::add_filter();
}
public static function load_shortcode_style_translations( $shortcode ) {
$shortcode = ! is_array( $shortcode ) ? array( $shortcode ) : $shortcode;
self::$shortcodes = array_unique( array_merge( self::$shortcodes, $shortcode ) );
self::add_filter();
}
/**
* Add translation text to column header, identified by class.
*
* @param [type] $class CSS class for table data (<td>).
* @param [type] $translation Text to add to column.
* @author Justin Foell <justin@foell.org>
* @since 2.4
*/
public static function add_style_translation( $class, $translation ) {
self::$style_translations[ $class ] = $translation;
}
public static function posts_results( $posts ) {
global $wp_query;
if ( ! $wp_query->is_main_query() || $wp_query->is_admin() ) {
return $posts;
}
if ( empty( $posts ) ) {
return $posts;
}
if ( empty( self::$shortcodes ) && empty( self::$blocks ) ) {
return $posts;
}
// This should only run once per request.
remove_filter( 'posts_results', array( __CLASS__, 'posts_results' ) );
foreach ( $posts as $post ) {
if ( self::has_shortcodes( $post ) || self::has_blocks( $post ) ) {
self::add_action();
}
}
return $posts;
}
public static function has_shortcode( $shortcode ) {
$shortcode = ! is_array( $shortcode ) ? array( $shortcode ) : $shortcode;
return ! empty( array_intersect( self::$has_shortcodes, $shortcode ) );
}
public static function has_block( $block ) {
$block = ! is_array( $block ) ? array( $block ) : $block;
return ! empty( array_intersect( self::$has_blocks, $block ) );
}
private static function add_filter() {
if ( ! has_filter( 'posts_results', array( __CLASS__, 'posts_results' ) ) ) {
add_filter( 'posts_results', array( __CLASS__, 'posts_results' ) );
}
}
private static function add_action() {
if ( ! has_action( 'wp_head', array( __CLASS__, 'print_style_translations' ) ) ) {
add_action( 'wp_head', array( __CLASS__, 'print_style_translations' ) );
}
}
private static function has_shortcodes( $post ) {
if ( empty( self::$shortcodes ) ) {
return false;
}
$has_shortcode = false;
foreach ( self::$shortcodes as $shortcode ) {
if ( has_shortcode( $post->post_content, $shortcode ) ) {
if ( ! in_array( $shortcode, self::$has_shortcodes, true ) ) {
self::$has_shortcodes[] = $shortcode;
}
$has_shortcode = true;
}
}
return $has_shortcode;
}
private static function has_blocks( $post ) {
if ( empty( self::$blocks ) ) {
return false;
}
$has_block = false;
foreach ( self::$blocks as $block ) {
if ( has_block( $block, $post ) ) {
if ( ! in_array( $block, self::$has_blocks, true ) ) {
self::$has_blocks[] = $block;
}
return true;
}
}
return $has_block;
}
/**
* Print translatable strings as <style> in <head>.
*
* @author Justin Foell <justin@foell.org>
* @since 2.4
*/
public static function print_style_translations() {
if ( empty( self::$style_translations ) ) {
return;
}
$style = '@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
';
foreach ( self::$style_translations as $class => $translation ) {
$style .= ".{$class}:before { content: \"{$translation}\"; }\n";
}
$style .= '}';
echo "<style id='wp-strava-style-translations'>\n{$style}</style>";
}
}
src/WPStrava/StyleTranslations.php
-50
View File
@@ -1,50 +0,0 @@
<?php
class WPStrava_StyleTranslations {
/**
* Translations indexed by class.
* @var array
*/
private $style_translations = array();
/**
* Hook into wp_head.
*
* @author Justin Foell <justin@foell.org>
* @since 2.4
*/
public function hook() {
add_action( 'wp_head', array( $this, 'print_style_translations' ) );
}
/**
* Add translation text to column header, identified by class.
*
* @param [type] $class CSS class for table data (<td>).
* @param [type] $translation Text to add to column.
* @author Justin Foell <justin@foell.org>
* @since 2.4
*/
public function add_style_translation( $class, $translation ) {
$this->style_translations[ $class ] = $translation;
}
/**
* Print translatable strings as <style> in <head>.
*
* @author Justin Foell <justin@foell.org>
* @since 2.4
*/
public function print_style_translations() {
if ( empty( $this->style_translations ) ) {
return;
}
$style = '';
foreach ( $this->style_translations as $class => $translation ) {
$style .= ".{$class}:before { content: \"{$translation}\"; }\n";
}
echo "<style>\n{$style}</style>";
}
}