Merge pull request #677 from WordPress/281-we-need-to-fix-mobile-ui-o…

…n-plugin-check-page

Fix responsive table results

assets/css/plugin-check-admin.css

@@ -0,0 +1,63 @@
+/* Responsive table */
+@media screen and (max-width: 782px) {
+	#plugin-check__submit {
+		margin-top: 1em;
+	}
+
+	table#plugin-check__categories td {
+		padding-bottom: .5em;
+	}
+
+  table.plugin-check__results-table {
+    border: 0;
+  }
+
+  table.plugin-check__results-table caption {
+    font-size: 1.3em;
+  }
+
+  table.plugin-check__results-table thead {
+    border: none;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+  }
+
+  table.plugin-check__results-table tr {
+    border-bottom: 3px solid #ddd;
+    display: block;
+  }
+
+	table.plugin-check__results-table td, 
+	table.plugin-check__results-table code {
+		font-size: .9em;
+	}
+
+  table.plugin-check__results-table td {
+    border-bottom: 1px solid #ddd;
+    display: block;
+    text-align: right;
+  }
+
+  table.plugin-check__results-table td::before {
+    content: attr(data-label);
+    float: left;
+    font-weight: bold;
+  }
+
+	.rtl table.plugin-check__results-table td {
+		text-align: left;
+	}
+
+	.rtl table.plugin-check__results-table td::before {
+		float: right;
+	}
+
+  table.plugin-check__results-table td:last-child {
+    border-bottom: 0;
+  }
+}

includes/Admin/Admin_Page.php

@@ -184,6 +184,13 @@ public function enqueue_scripts() {
 			true
 		);
 
+		wp_enqueue_style(
+			'plugin-check-admin',
+			WP_PLUGIN_CHECK_PLUGIN_DIR_URL . 'assets/css/plugin-check-admin.css',
+			array(),
+			WP_PLUGIN_CHECK_VERSION
+		);
+
 		wp_add_inline_script(
 			'plugin-check-admin',
 			'const PLUGIN_CHECK = ' . json_encode(

templates/admin-page.php

@@ -39,7 +39,7 @@
 				<?php
 				if ( ! empty( $categories ) ) {
 				?>
-				<table>
+				<table id="plugin-check__categories">
 				<?php
 				foreach ( $categories as $category => $label ) { ?>
 					<tr>

templates/results-row.php

@@ -1,17 +1,17 @@
 <tr class="plugin-check__results-row">
-	<td>
+	<td data-label="<?php esc_attr_e( 'Line', 'plugin-check' ); ?>">
 		{{data.line}}
 	</td>
-	<td>
+	<td data-label="<?php esc_attr_e( 'Column', 'plugin-check' ); ?>">
 		{{data.column}}
 	</td>
-	<td>
+	<td data-label="<?php esc_attr_e( 'Type', 'plugin-check' ); ?>">
 		{{data.type}}
 	</td>
-	<td>
+	<td data-label="<?php esc_attr_e( 'Code', 'plugin-check' ); ?>">
 		{{data.code}}
 	</td>
-	<td>
+	<td data-label="<?php esc_attr_e( 'Message', 'plugin-check' ); ?>">
 		{{{data.message}}}
 		<# if ( data.docs ) { #>
 			<br>