Merge pull request #377 from WordPress/remote-event-icon

Add video icon to flag remote events
WordPress · Nov 18, 2024 · be82991 · be82991
2 parents d76ce12 + 7813876
commit be82991
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 66 deletions.
diff --git a/themes/wporg-translate-events-2024/blocks/event-title/index.php b/themes/wporg-translate-events-2024/blocks/event-title/index.php
@@ -22,7 +22,7 @@
 			<?php
 			if ( 'remote' === $event->attendance_mode() ) {
 				// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
-				echo do_blocks( sprintf( '<!-- wp:wporg-translate-events-2024/remote-attendance-icon %s  /-->', wp_json_encode( array( 'inline_css' => 'float:left; margin-right:3px' ) ) ) );
+				echo do_blocks( sprintf( '<!-- wp:wporg-translate-events-2024/remote-attendance-icon %s  /-->', wp_json_encode( array( 'css_class' => 'video-icon-on-title' ) ) ) );
 			}
 			?>
 			<h3 class="wporg-marker-list-item__title">

diff --git a/themes/wporg-translate-events-2024/style.css b/themes/wporg-translate-events-2024/style.css
@@ -189,6 +189,11 @@ span.user-remote-icon.dashicons-video-alt2 {
     margin-left: 14px;
 }
 
+.video-icon-on-title {
+	float: left;
+	margin: 5px 3px 0 0;
+}
+
  @media (min-width: 960px) {
 
 .wporg-marker-list__container .wporg-marker-list-item {
@@ -200,92 +205,84 @@ span.user-remote-icon.dashicons-video-alt2 {
 }
 
 @media (min-width: 1080px) {
-
-.wporg-marker-list__container .wporg-marker-list-item {
-			font-size: var(--wp--preset--font-size--normal);
+	.wporg-marker-list__container .wporg-marker-list-item {
+		font-size: var(--wp--preset--font-size--normal);
 	}
-		}
+}
 
 @media (min-width: 1280px) {
-
-.wporg-marker-list__container .wporg-marker-list-item {
-			grid-template-columns: 60% 1fr 1fr;
+	.wporg-marker-list__container .wporg-marker-list-item {
+		grid-template-columns: 60% 1fr 1fr;
 	}
-		}
+}
 
 .wporg-marker-list__container .wporg-marker-list-item .wporg-marker-list-item__title {
-			margin: 0;
-			font-family: var(--wp--preset--font-family--inter);
-			font-size: var(--wp--preset--font-size--small);
-			line-height: var(--wp--custom--body--typography--line-height);
-			--wp--preset--spacing--30: 0;
-		}
+	margin: 0;
+	font-family: var(--wp--preset--font-family--inter);
+	font-size: var(--wp--preset--font-size--small);
+	line-height: var(--wp--custom--body--typography--line-height);
+	--wp--preset--spacing--30: 0;
+}
 
 .wporg-marker-list__container .wporg-marker-list-item .wporg-marker-list-item__title a {
-				-webkit-text-decoration: none;
-				text-decoration: none;
-			}
+	-webkit-text-decoration: none;
+	text-decoration: none;
+}
 
 @media (min-width: 1080px) {
-
-.wporg-marker-list__container .wporg-marker-list-item .wporg-marker-list-item__title {
-				font-size: var(--wp--preset--font-size--normal);
-		}
-			}
+	.wporg-marker-list__container .wporg-marker-list-item .wporg-marker-list-item__title {
+		font-size: var(--wp--preset--font-size--normal);
+	}
+}
 
 .wporg-marker-list__container .wporg-marker-list-item .wporg-marker-list-item__attendance-mode::first-letter {
-			    text-transform: capitalize;
-			}
+	text-transform: capitalize;
+}
 
 @media (max-width: 781px) {
-
-.wporg-marker-list__container .wporg-marker-list-item .wporg-marker-list-item__attendance-mode {
-				margin-top: 2px;
-				margin-bottom: -2px;
-		}
-			}
+	.wporg-marker-list__container .wporg-marker-list-item .wporg-marker-list-item__attendance-mode {
+		margin-top: 2px;
+		margin-bottom: -2px;
+	}
+}
 
 @media (min-width: 600px) {
-
-.wporg-marker-list__container .wporg-marker-list-item .wporg-marker-list-item__attendance-mode {
-				display: inline;
-		}
-			}
+	.wporg-marker-list__container .wporg-marker-list-item .wporg-marker-list-item__attendance-mode {
+		display: inline;
+	}
+}
 
 @media (min-width: 600px) {
-
-.wporg-marker-list__container .wporg-marker-list-item .wporg-marker-list-item__date-time {
-				display: inline-flex;
-				justify-content: flex-end;
-				white-space: nowrap;
-				align-items: center;
-		}
-			}
+	.wporg-marker-list__container .wporg-marker-list-item .wporg-marker-list-item__date-time {
+		display: inline-flex;
+		justify-content: flex-end;
+		white-space: nowrap;
+		align-items: center;
+	}
+}
 
 @media (min-width: 1280px) {
-
-.wporg-marker-list__container .wporg-marker-list-item .wporg-marker-list-item__date-time {
-				display: flex;
-		}
-			}
+	.wporg-marker-list__container .wporg-marker-list-item .wporg-marker-list-item__date-time {
+		display: flex;
+	}
+}
 
 .wporg-marker-list__container .wporg-marker-list-item .wporg-marker-list-item__attendance-mode::after,
-		.wporg-marker-list__container .wporg-marker-list-item .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;
-		}
+.wporg-marker-list__container .wporg-marker-list-item .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 (max-width: 599px),(min-width: 960px) {
-
-.wporg-marker-list__container .wporg-marker-list-item .wporg-marker-list-item__attendance-mode::after {
-				display: none;
-		}
-			}
+	.wporg-marker-list__container .wporg-marker-list-item .wporg-marker-list-item__attendance-mode::after {
+		display: none;
+	}
+}