Add small screen styles for submission table

WordPress · Nov 26, 2024 · ddd44bc · ddd44bc
1 parent 6016128
commit ddd44bc
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 3 deletions.
diff --git a/source/wp-content/themes/wporg-photos-2024/src/style/_submission.scss b/source/wp-content/themes/wporg-photos-2024/src/style/_submission.scss
@@ -11,6 +11,39 @@
 	th {
 		padding-block: var(--wp--preset--spacing--10);
 	}
+
+	.is-inline-label {
+		display: none;
+	}
+
+	@media (max-width: 600px) {
+		thead {
+			display: none;
+		}
+
+		tr {
+			display: block;
+			border-width: 1px 1px 0;
+			border-style: solid;
+			border-color: var(--wp--preset--color--light-grey-1);
+			padding-block: 5px;
+
+			&:last-of-type {
+				border-bottom-width: 1px;
+			}
+		}
+
+		td {
+			display: block;
+			border: 0;
+			padding-block: 5px;
+		}
+
+		.is-inline-label {
+			display: initial;
+			font-weight: 700;
+		}
+	}
 }
 
 #wporg-photo-upload {

diff --git a/source/wp-content/themes/wporg-photos-2024/view/submissions-pending.php b/source/wp-content/themes/wporg-photos-2024/view/submissions-pending.php
@@ -48,9 +48,18 @@
 			$image_caption = get_the_content( null, false, $photo_post ) ?: __( '(none provided)', 'wporg-photos' );
 			?>
 			<tr>
-				<td><?php echo esc_html( $image_title ); ?></td>
-				<td><?php echo esc_html( $image_date ); ?></td>
-				<td><?php echo esc_html( $image_caption ); ?></td>
+				<td>
+					<span class="is-inline-label"><?php esc_html_e( 'File:', 'wporg-photos' ); ?></span>
+					<?php echo esc_html( $image_title ); ?>
+				</td>
+				<td>
+					<span class="is-inline-label"><?php esc_html_e( 'Submission date:', 'wporg-photos' ); ?></span>
+					<?php echo esc_html( $image_date ); ?>
+				</td>
+				<td>
+					<span class="is-inline-label"><?php esc_html_e( 'Caption:', 'wporg-photos' ); ?></span>
+					<?php echo esc_html( $image_caption ); ?>
+				</td>
 			</tr>
 		<?php endforeach; ?>
 		</tbody>