Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Optimize for small screen size #19

Merged
merged 2 commits into from
Aug 20, 2024
Merged

Optimize for small screen size #19

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e4dcfba
Restrict deploy to main
jdevalk Jun 2, 2024
db2067c
Optimize for smaller screen sizes
jdevalk Jun 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .github/workflows/deploy.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ jobs:
tag:
name: New tag
runs-on: ubuntu-latest
if: ${{ github.ref == 'refs/heads/main' }}
steps:
- uses: actions/checkout@main
- name: WordPress Plugin Deploy
Expand Down
59 changes: 31 additions & 28 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -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%;
}
4 changes: 3 additions & 1 deletion js/admin-script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
Expand All @@ -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();;
}

/**
Expand Down
1 change: 0 additions & 1 deletion js/vendor/dataTables.dataTables.min.css
View file
Open in desktop

This file was deleted.

87 changes: 85 additions & 2 deletions js/vendor/dataTables.min.js
View file
Open in desktop

Large diffs are not rendered by default.

18 changes: 18 additions & 0 deletions js/vendor/datatables.min.css
View file
Open in desktop

Large diffs are not rendered by default.

16 changes: 8 additions & 8 deletions src/class-admin-page.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
);
Expand All @@ -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' => [
Expand Down Expand Up @@ -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;
}
}
Expand Down Expand Up @@ -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>';
Expand Down Expand Up @@ -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.
Expand Down
Loading