Optimize for smaller screen sizes

Emilia-Capital · Jun 24, 2024 · db2067c · db2067c
1 parent e4dcfba
commit db2067c
Show file tree

Hide file tree

Showing 6 changed files with 145 additions and 40 deletions.
diff --git a/css/style.css b/css/style.css
@@ -7,10 +7,14 @@
 	text-align: left;
 }
 .aaa_option_table .actions {
+	width: 50%;
 	text-align: right;
 }
 .aaa_option_table .actions .button {
-	margin-right: 20px;
+	margin-right: 10px;
+}
+.aaa_option_table select {
+	max-width: 20% !important;
 }
 .aaa_option_table .actions .button-delete, .aaa-option-optimizer-reset .button-delete {
 	margin-right: 0;
@@ -78,24 +82,22 @@ div.dt-container .dt-input {
 .aaa-option-optimizer-popover__close:hover {
 	cursor: pointer;
 }
-
 .aaa-option-optimizer-reset {
 	float: right;
 }
-
 .aaa-option-optimizer-tabs {
 	clear: both;
 	display: flex;
 	flex-wrap: wrap;
 	max-width: 100%;
 	background: #e5e5e5;
 	box-shadow: 0 48px 80px -32px rgba(0,0,0,0.3);
-	}
-	.aaa-option-optimizer-tabs .input {
+}
+.aaa-option-optimizer-tabs .input {
 	position: absolute;
 	opacity: 0;
-	}
-	.aaa-option-optimizer-tabs .label {
+}
+.aaa-option-optimizer-tabs .label {
 	width: 100%;
 	padding: 20px 30px;
 	background: #e5e5e5;
@@ -104,36 +106,37 @@ div.dt-container .dt-input {
 	font-size: 18px;
 	color: #7f7f7f;
 	transition: background 0.1s, color 0.1s;
-	}
-	.aaa-option-optimizer-tabs .label:hover {
+}
+.aaa-option-optimizer-tabs .label:hover {
 	background: #d8d8d8;
-	}
-	.aaa-option-optimizer-tabs .label:active {
+}
+.aaa-option-optimizer-tabs .label:active {
 	background: #ccc;
-	}
-	.aaa-option-optimizer-tabs .input:focus + .label {
+}
+.aaa-option-optimizer-tabs .input:focus + .label {
 	z-index: 1;
-	}
-	.aaa-option-optimizer-tabs .input:checked + .label {
+}
+.aaa-option-optimizer-tabs .input:checked + .label {
 	background: #fff;
 	color: #000;
-	}
-	@media (min-width: 600px) {
-	.aaa-option-optimizer-tabs .label {
-		width: auto;
-	}
-	}
-	.aaa-option-optimizer-tabs .panel {
+}
+.aaa-option-optimizer-tabs .panel {
 	display: none;
 	padding: 20px 30px 30px;
 	background: #fff;
-	}
-	@media (min-width: 600px) {
+}
+.aaa-option-optimizer-tabs .input:checked + .label + .panel {
+	display: block;
+	width: 100%;
+}
+@media (min-width: 600px) {
 	.aaa-option-optimizer-tabs .panel {
 		order: 99;
 	}
+	.aaa-option-optimizer-tabs .label {
+		width: auto;
 	}
-	.aaa-option-optimizer-tabs .input:checked + .label + .panel {
-	display: block;
-	width: 100%;
-	}
+}
+.aaa_option_table .source {
+	width: 20%;
+}
diff --git a/js/admin-script.js b/js/admin-script.js
@@ -39,6 +39,8 @@ jQuery( document ).ready(
 		function initializeDataTable(selector) {
 			const options = {
 				pageLength: 25,
+				autoWidth: false,
+				responsive: true,
 				columns: getColumns( selector ),
 				initComplete: function () {
 					this.api().columns( 'source:name' ).every( setupColumnFilters );
@@ -57,7 +59,7 @@ jQuery( document ).ready(
 
 			options.language = aaaOptionOptimizer.i18n;
 
-			const dataTable = new DataTable( selector, options );
+			const dataTable = new DataTable( selector, options ).columns.adjust().responsive.recalc();;
 		}
 
 		/**

diff --git a/js/vendor/dataTables.dataTables.min.css b/js/vendor/dataTables.dataTables.min.css
diff --git a/js/vendor/dataTables.min.js b/js/vendor/dataTables.min.js
diff --git a/js/vendor/datatables.min.css b/js/vendor/datatables.min.css
diff --git a/src/class-admin-page.php b/src/class-admin-page.php
@@ -95,15 +95,15 @@ public function enqueue_scripts( $hook ) {
 
 		\wp_enqueue_script(
 			'datatables',
-			plugin_dir_url( AAA_OPTION_OPTIMIZER_FILE ) . 'js/vendor/dataTables.min.js',
+			plugin_dir_url( AAA_OPTION_OPTIMIZER_FILE ) . 'js/vendor/datatables.min.js',
 			[], // Dependencies.
 			'2.0.1',
 			true // In footer.
 		);
 
 		\wp_enqueue_style(
 			'datatables',
-			plugin_dir_url( AAA_OPTION_OPTIMIZER_FILE ) . 'js/vendor/dataTables.dataTables.min.css',
+			plugin_dir_url( AAA_OPTION_OPTIMIZER_FILE ) . 'js/vendor/datatables.min.css',
 			[],
 			'2.0.1'
 		);
@@ -124,10 +124,10 @@ public function enqueue_scripts( $hook ) {
 				'nonce' => wp_create_nonce( 'wp_rest' ),
 				'i18n'  => [
 					'filterBySource' => esc_html__( 'Filter by source', 'aaa-option-optimizer' ),
-					'showValue'      => esc_html__( 'Show value', 'aaa-option-optimizer' ),
+					'showValue'      => esc_html__( 'Show', 'aaa-option-optimizer' ),
 					'addAutoload'    => esc_html__( 'Add autoload', 'aaa-option-optimizer' ),
 					'removeAutoload' => esc_html__( 'Remove autoload', 'aaa-option-optimizer' ),
-					'deleteOption'   => esc_html__( 'Delete option', 'aaa-option-optimizer' ),
+					'deleteOption'   => esc_html__( 'Delete', 'aaa-option-optimizer' ),
 
 					'search'         => esc_html__( 'Search:', 'aaa-option-optimizer' ),
 					'entries'        => [
@@ -192,10 +192,10 @@ public function table_section( $section, $columns ) {
 					echo '<th>' . esc_html__( 'Option', 'aaa-option-optimizer' ) . '</th>';
 					break;
 				case 'size':
-					echo '<th>' . esc_html__( 'Size (in KB)', 'aaa-option-optimizer' ) . '</th>';
+					echo '<th>' . esc_html__( 'Size (KB)', 'aaa-option-optimizer' ) . '</th>';
 					break;
 				case 'source':
-					echo '<th>' . esc_html__( 'Source', 'aaa-option-optimizer' ) . '</th>';
+					echo '<th class="source">' . esc_html__( 'Source', 'aaa-option-optimizer' ) . '</th>';
 					break;
 			}
 		}
@@ -329,7 +329,7 @@ function ( $value, $key ) {
 				// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- output escaped in get_value_button.
 				echo $this->get_value_button( $option, $value );
 				echo '<button class="button button-primary remove-autoload" data-option="' . esc_attr( $option ) . '"><span class="dashicons dashicons-minus"></span> ' . esc_html__( 'Remove autoload', 'aaa-option-optimizer' ) . '</button> ';
-				echo ' <button class="button button-delete delete-option" data-option="' . esc_attr( $option ) . '"><span class="dashicons dashicons-trash"></span> ' . esc_html__( 'Delete option', 'aaa-option-optimizer' ) . '</button>';
+				echo ' <button class="button button-delete delete-option" data-option="' . esc_attr( $option ) . '"><span class="dashicons dashicons-trash"></span> ' . esc_html__( 'Delete', 'aaa-option-optimizer' ) . '</button>';
 				echo '</td></tr>';
 			}
 			echo '</tbody>';
@@ -430,7 +430,7 @@ private function get_value_button( string $name, $value ): string {
 		$string = is_string( $value ) ? $value : wp_json_encode( $value );
 		$id     = 'aaa-option-optimizer-' . esc_attr( $name );
 		return '
-		<button class="button" popovertarget="' . $id . '"><span class="dashicons dashicons-search"></span> ' . esc_html__( 'Show value', 'aaa-option-optimizer' ) . '</button>
+		<button class="button" popovertarget="' . $id . '"><span class="dashicons dashicons-search"></span> ' . esc_html__( 'Show', 'aaa-option-optimizer' ) . '</button>
 		<div id="' . $id . '" popover class="aaa-option-optimizer-popover">
 		<button class="aaa-option-optimizer-popover__close" popovertarget="' . $id . '" popovertargetaction="hide">X</button>' .
 		// translators: %s is the name of the option.