From ddd44bc08f9df10513f9e3643fa4d2b08f7ed139 Mon Sep 17 00:00:00 2001
From: Kelly Dwan <ryelle@users.noreply.github.com>
Date: Mon, 25 Nov 2024 15:45:21 -0500
Subject: [PATCH] Add small screen styles for submission table

---
 .../src/style/_submission.scss                | 33 +++++++++++++++++++
 .../view/submissions-pending.php              | 15 +++++++--
 2 files changed, 45 insertions(+), 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
index 5b04fc1..158a61c 100644
--- 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
index 4f1abf1..c7e713b 100644
--- 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>