jacek/wp-cycling-stats
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Material Design

Browse Source
This commit is contained in:
Jacek Fefliński
2026-04-22 13:11:06 +02:00
parent d31591e287
commit 94569539d7
4 changed files with 244 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files
includes/frontend/shortcodes.php
+118 -97
View File
@@ -38,7 +38,7 @@ function statpress_shortcode_handler( $atts ) {
$table_activities = $wpdb->prefix . 'statpress_activities';
$sql = $wpdb->prepare(
"
SELECT a.*, c.name as category_name, eq.name as equipment_name
SELECT a.*, c.name as category_name, c.icon, c.color, eq.name as equipment_name
FROM $table_activities a
LEFT JOIN {$wpdb->prefix}statpress_categories c ON a.category_id = c.id
LEFT JOIN {$wpdb->prefix}statpress_equipment eq ON a.equipment_id = eq.id
@@ -68,78 +68,95 @@ function statpress_shortcode_handler( $atts ) {
// Rozpoczęcie buforowania wyjścia
ob_start();
?>
<div class="statpress-shortcode-container">
<style>
.statpress-md-container { font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.statpress-md-container h3 { color: #202124; font-weight: 400; margin: 24px 0 16px; font-size: 20px; }
/* Karty podsumowania */
.statpress-summary-cards { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 32px; }
.statpress-summary-card { background: #fff; border-radius: 8px; padding: 20px; flex: 1; min-width: 140px; box-shadow: 0 1px 2px 0 rgba(60,64,67,0.3), 0 1px 3px 1px rgba(60,64,67,0.15); border-left: 4px solid #1a73e8; }
.statpress-summary-card-title { font-size: 12px; color: #5f6368; text-transform: uppercase; font-weight: 500; margin-bottom: 8px; letter-spacing: 0.5px; }
.statpress-summary-card-value { font-size: 28px; color: #202124; font-weight: 400; }
/* Karty aktywności */
.statpress-activity-list { display: flex; flex-direction: column; gap: 16px; }
.statpress-activity-card { background: #fff; border-radius: 8px; box-shadow: 0 1px 2px 0 rgba(60,64,67,0.3), 0 1px 3px 1px rgba(60,64,67,0.15); display: flex; padding: 16px 20px; align-items: center; flex-wrap: wrap; gap: 20px; transition: transform 0.2s, box-shadow 0.2s; }
.statpress-activity-card:hover { transform: translateY(-2px); box-shadow: 0 1px 3px 0 rgba(60,64,67,0.3), 0 4px 8px 3px rgba(60,64,67,0.15); }
.statpress-activity-icon { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.statpress-activity-icon .material-icons { font-size: 24px; }
.statpress-activity-info { flex: 1; min-width: 200px; }
.statpress-activity-title { font-size: 16px; font-weight: 500; color: #202124; margin: 0 0 6px 0; line-height: 1.3; }
.statpress-activity-meta { font-size: 13px; color: #5f6368; margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.statpress-activity-meta-dot { font-size: 8px; color: #dadce0; }
.statpress-activity-stats { display: flex; gap: 24px; flex-wrap: wrap; }
.statpress-stat-item { display: flex; flex-direction: column; }
.statpress-stat-label { font-size: 11px; color: #5f6368; text-transform: uppercase; font-weight: 500; margin-bottom: 2px; }
.statpress-stat-value { font-size: 15px; color: #202124; font-weight: 500; }
/* Responsywność */
@media (max-width: 600px) {
.statpress-activity-card { align-items: flex-start; padding: 16px; gap: 16px; }
.statpress-activity-stats { width: 100%; justify-content: space-between; border-top: 1px solid #f1f3f4; padding-top: 16px; margin-top: 4px; }
.statpress-summary-card { min-width: 100%; border-left: none; border-top: 4px solid #1a73e8; }
}
</style>
<div class="statpress-shortcode-container statpress-md-container">
<h3>Podsumowanie miesiąca</h3>
<table class="statpress-summary-table">
<thead>
<tr>
<th>Całkowity dystans</th>
<th>Całkowity czas</th>
</tr>
</thead>
<tbody>
<tr>
<td><?php echo number_format( $total_distance, 2, ',', ' ' ); ?> km</td>
<td><?php echo esc_html( $total_duration_formatted ); ?></td>
</tr>
</tbody>
</table>
<div class="statpress-summary-cards">
<div class="statpress-summary-card">
<div class="statpress-summary-card-title">Całkowity dystans</div>
<div class="statpress-summary-card-value"><?php echo number_format( $total_distance, 2, ',', ' ' ); ?> km</div>
</div>
<div class="statpress-summary-card" style="border-color: #188038;">
<div class="statpress-summary-card-title">Całkowity czas</div>
<div class="statpress-summary-card-value"><?php echo esc_html( $total_duration_formatted ); ?></div>
</div>
</div>
<h3>Lista aktywności</h3>
<table class="statpress-activity-table">
<thead>
<tr>
<th>Data</th>
<th>Tytuł</th>
<th>Kategoria</th>
<th>Dystans</th>
<th>Czas</th>
<th>Sprzęt</th>
</tr>
</thead>
<tbody>
<?php if ( ! empty( $activities ) ) : ?>
<?php foreach ( $activities as $row ) : ?>
<tr>
<td><?php echo esc_html( date_i18n( 'd.m.Y', strtotime( $row->date ) ) ); ?></td>
<td><?php echo esc_html( $row->title ); ?></td>
<td><?php echo esc_html( $row->category_name ); ?></td>
<td><?php echo number_format( $row->distance, 2, ',', ' ' ); ?> km</td>
<td><?php echo esc_html( $row->duration ); ?></td>
<td><?php echo esc_html( $row->equipment_name ); ?></td>
</tr>
<?php if ( $row->avg_speed || $row->avg_heart_rate || $row->avg_cadence ) : ?>
<tr class="statpress-activity-details-row">
<td colspan="6" class="statpress-activity-details-cell">
<table class="statpress-nested-details-table">
<thead>
<tr>
<?php if ( $row->avg_speed ) { echo '<th>Śr. prędkość</th>'; } ?>
<?php if ( $row->avg_heart_rate ) { echo '<th>Śr. tętno</th>'; } ?>
<?php if ( $row->avg_cadence ) { echo '<th>Śr. kadencja</th>'; } ?>
</tr>
</thead>
<tbody>
<tr>
<?php if ( $row->avg_speed ) { echo '<td>' . number_format( $row->avg_speed, 1, ',', ' ' ) . ' km/h</td>'; } ?>
<?php if ( $row->avg_heart_rate ) { echo '<td>' . $row->avg_heart_rate . ' bpm</td>'; } ?>
<?php if ( $row->avg_cadence ) { echo '<td>' . $row->avg_cadence . ' rpm</td>'; } ?>
</tr>
</tbody>
</table>
</td>
</tr>
<?php endif; ?>
<?php endforeach; ?>
<?php else : ?>
<tr>
<td colspan="6">Brak aktywności w tym miesiącu.</td>
</tr>
<?php endif; ?>
</tbody>
</table>
<div class="statpress-activity-list">
<?php if ( ! empty( $activities ) ) : ?>
<?php foreach ( $activities as $row ) :
$material_icon = 'fitness_center';
if ( strpos( $row->icon, 'groups' ) !== false ) { $material_icon = 'directions_bike'; }
elseif ( strpos( $row->icon, 'businessman' ) !== false ) { $material_icon = 'directions_run'; }
$bg_color = !empty($row->color) ? $row->color : '#1a73e8';
?>
<div class="statpress-activity-card">
<div class="statpress-activity-icon" style="background-color: <?php echo esc_attr( $bg_color ); ?>;">
<span class="material-icons"><?php echo esc_html( $material_icon ); ?></span>
</div>
<div class="statpress-activity-info">
<h4 class="statpress-activity-title"><?php echo esc_html( $row->title ); ?></h4>
<p class="statpress-activity-meta">
<span><?php echo esc_html( date_i18n( 'd.m.Y', strtotime( $row->date ) ) ); ?></span>
<span class="statpress-activity-meta-dot">•</span>
<span><?php echo esc_html( $row->category_name ); ?></span>
<?php if ( $row->equipment_name ) : ?>
<span class="statpress-activity-meta-dot">•</span>
<span><?php echo esc_html( $row->equipment_name ); ?></span>
<?php endif; ?>
</p>
</div>
<div class="statpress-activity-stats">
<div class="statpress-stat-item"><span class="statpress-stat-label">Dystans</span><span class="statpress-stat-value"><?php echo number_format( $row->distance, 2, ',', ' ' ); ?> km</span></div>
<div class="statpress-stat-item"><span class="statpress-stat-label">Czas</span><span class="statpress-stat-value"><?php echo esc_html( $row->duration ); ?></span></div>
<?php if ( $row->avg_speed ) : ?><div class="statpress-stat-item"><span class="statpress-stat-label">Śr. prędkość</span><span class="statpress-stat-value"><?php echo number_format( $row->avg_speed, 1, ',', ' ' ); ?> km/h</span></div><?php endif; ?>
<?php if ( $row->avg_heart_rate ) : ?><div class="statpress-stat-item"><span class="statpress-stat-label">Śr. tętno</span><span class="statpress-stat-value"><?php echo esc_html( $row->avg_heart_rate ); ?> bpm</span></div><?php endif; ?>
</div>
</div>
<?php endforeach; ?>
<?php else : ?>
<div class="statpress-summary-card">
<p style="margin: 0; color: #5f6368;">Brak aktywności w tym miesiącu.</p>
</div>
<?php endif; ?>
</div>
</div>
<?php
// Zwrócenie zawartości bufora
@@ -188,10 +205,10 @@ function statpress_single_activity_shortcode_handler( $atts ) {
// Funkcja pomocnicza do wyświetlania wiersza
$render_row = function( $label, $value, $unit = '' ) {
if ( ! is_null( $value ) && '' !== $value && 0 != $value ) {
echo '<tr>';
echo '<th>' . esc_html( $label ) . '</th>';
echo '<td>' . esc_html( $value ) . ( $unit ? ' ' . esc_html( $unit ) : '' ) . '</td>';
echo '</tr>';
echo '<div class="statpress-single-data-item">';
echo '<span class="statpress-single-data-label">' . esc_html( $label ) . '</span>';
echo '<span class="statpress-single-data-value">' . esc_html( $value ) . ( $unit ? ' ' . esc_html( $unit ) : '' ) . '</span>';
echo '</div>';
}
};
@@ -323,32 +340,36 @@ function statpress_single_activity_shortcode_handler( $atts ) {
}
?>
<div class="statpress-single-activity-shortcode" id="<?php echo esc_attr( $unique_id ); ?>">
<h4><?php echo esc_html( $activity->title ); ?></h4>
<p><em><?php echo esc_html( date_i18n( 'j F Y', strtotime( $activity->date ) ) ); ?></em></p>
<style>
.statpress-single-card { background: #fff; border-radius: 8px; box-shadow: 0 1px 2px 0 rgba(60,64,67,0.3), 0 1px 3px 1px rgba(60,64,67,0.15); padding: 24px; margin-bottom: 24px; font-family: 'Roboto', -apple-system, sans-serif; }
.statpress-single-header { border-bottom: 1px solid #e8eaed; padding-bottom: 16px; margin-bottom: 20px; }
.statpress-single-header h4 { margin: 0 0 8px 0; font-size: 22px; color: #202124; font-weight: 400; }
.statpress-single-header p { margin: 0; color: #5f6368; font-size: 14px; }
.statpress-single-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 20px; }
.statpress-single-data-item { display: flex; flex-direction: column; }
.statpress-single-data-label { font-size: 12px; color: #5f6368; text-transform: uppercase; font-weight: 500; margin-bottom: 4px; }
.statpress-single-data-value { font-size: 16px; color: #202124; font-weight: 500; }
</style>
<div class="statpress-single-activity-shortcode statpress-single-card" id="<?php echo esc_attr( $unique_id ); ?>">
<div class="statpress-single-columns-container">
<div class="statpress-single-col">
<table class="statpress-single-summary-table">
<tbody>
<?php $render_row( 'Dystans', number_format( $activity->distance, 2, ',', ' ' ), 'km' ); ?>
<?php $render_row( 'Czas trwania', $activity->duration ); ?>
<?php $render_row( 'Średnia prędkość', number_format( $activity->avg_speed, 1, ',', ' ' ), 'km/h' ); ?>
<?php $render_row( 'Suma wzniosów', $activity->total_elevation_gain, 'm' ); ?>
</tbody>
</table>
</div>
<div class="statpress-single-col">
<table class="statpress-single-summary-table">
<tbody>
<?php $render_row( 'Kategoria', $activity->category_name ); ?>
<?php $render_row( 'Sprzęt', $activity->equipment_name ); ?>
<?php if ( ! empty( $activity->strava_url ) ) : ?>
<tr><th>Strava</th><td><a href="<?php echo esc_url( $activity->strava_url ); ?>" target="_blank" rel="noopener noreferrer">Zobacz aktywność</a></td></tr>
<?php endif; ?>
</tbody>
</table>
<div class="statpress-single-header">
<h4><?php echo esc_html( $activity->title ); ?></h4>
<p><?php echo esc_html( date_i18n( 'j F Y', strtotime( $activity->date ) ) ); ?></p>
</div>
<div class="statpress-single-grid">
<?php $render_row( 'Dystans', number_format( $activity->distance, 2, ',', ' ' ), 'km' ); ?>
<?php $render_row( 'Czas trwania', $activity->duration ); ?>
<?php $render_row( 'Średnia prędkość', number_format( $activity->avg_speed, 1, ',', ' ' ), 'km/h' ); ?>
<?php $render_row( 'Suma wzniosów', $activity->total_elevation_gain, 'm' ); ?>
<?php $render_row( 'Kategoria', $activity->category_name ); ?>
<?php $render_row( 'Sprzęt', $activity->equipment_name ); ?>
<?php if ( ! empty( $activity->strava_url ) ) : ?>
<div class="statpress-single-data-item">
<span class="statpress-single-data-label">Strava</span>
<span class="statpress-single-data-value"><a href="<?php echo esc_url( $activity->strava_url ); ?>" target="_blank" rel="noopener noreferrer" style="color: #1a73e8; text-decoration: none;">Zobacz aktywność</a></span>
</div>
<?php endif; ?>
</div>
<?php if ( $has_gpx_data ) : ?>