Events: Better date for the table. (#1131)

WordPress · Dec 7, 2023 · 862a38b · 862a38b
1 parent 43a2deb
commit 862a38b
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 4 deletions.
diff --git a/public_html/wp-content/themes/wporg-events-2023/postcss/blocks/wporg-google-map.pcss b/public_html/wp-content/themes/wporg-events-2023/postcss/blocks/wporg-google-map.pcss
@@ -66,8 +66,25 @@
 		}
 	}
 
-	.wporg-google-map__date-time-separator {
-		@media (--medium) {
+	.wporg-google-map__date {
+		position: relative;
+	}
+
+	.wporg-google-map__date:after {
+		content: '';
+		margin-top: -1px; /* vertical-middle doesn't subtract the size of the element */
+		margin-left: 10px;
+		margin-right: 10px;
+		height: 3px;
+		width: 3px;
+		border-radius: 3px;
+		background: var(--wp--preset--color--charcoal-5);
+		display: inline-block;
+		vertical-align: middle;
+	}
+
+	@media (--medium) {
+		.wporg-google-map__date:after {
 			display: none;
 		}
 	}
@@ -80,7 +97,7 @@
 			justify-content: flex-end;
 		}
 
-		.wporg-google-map__date-time-separator {
+		.wporg-google-map__date:after {
 			display: inline-block;
 		}
 	}

diff --git a/public_html/wp-content/themes/wporg-events-2023/src/event-list/index.php b/public_html/wp-content/themes/wporg-events-2023/src/event-list/index.php
@@ -60,7 +60,12 @@ function render( $attributes, $content, $block ) {
 			$content .= '<li class="wporg-marker-list-item">';
 			$content .= '<h3 class="wporg-marker-list-item__title"><a class="external-link" href="' . esc_url($event->url) . '">' . esc_html($event->title) . '</a></h3>';
 			$content .= '<div class="wporg-marker-list-item__location">' . esc_html($event->location) . '</div>';
-			$content .= '<div class="wporg-marker-list-item__date-time">' . gmdate( 'F j, Y', esc_html( $event->timestamp ) ) . '</div>';
+			$content .= sprintf(
+				'<time class="wporg-marker-list-item__date-time" date-time="%1$s" title="%1$s"><span class="wporg-google-map__date">%2$s</span><span class="wporg-google-map__time">%3$s</span></time>',
+				gmdate( 'c', esc_html( $event->timestamp ) ),
+				gmdate( 'l, M j', esc_html( $event->timestamp ) ),
+				esc_html( gmdate('H:i', $event->timestamp) . ' UTC' ),
+			);
 			$content .= '</li>';
 		}