From 9a2c81b946f6db8bffbf2a446d34e4c8e56864cc Mon Sep 17 00:00:00 2001 From: Peter Kiss Date: Fri, 17 Nov 2023 13:49:06 +0100 Subject: [PATCH 1/6] Style settings header and move Save button --- assets/css/admin.scss | 52 ++++++++++++++++-- assets/css/wpjm-brand.scss | 2 + assets/images/jm-full-logo.png | Bin 0 -> 5764 bytes assets/js/admin.js | 10 ++++ includes/admin/class-wp-job-manager-admin.php | 2 +- .../admin/class-wp-job-manager-settings.php | 31 +++++++---- 6 files changed, 82 insertions(+), 15 deletions(-) create mode 100644 assets/images/jm-full-logo.png diff --git a/assets/css/admin.scss b/assets/css/admin.scss index 0b04fdb7d..acdff8652 100644 --- a/assets/css/admin.scss +++ b/assets/css/admin.scss @@ -3,10 +3,52 @@ .job-manager-settings-wrap { + min-height: calc(100vh - 65px); + margin: 0px 40px 0 20px; + .job-manager-updated { display: block; margin: 1em 0 0; } + + &, .form-table th, .form-wrap label, p.description { + color: var(--wpjm-brand-color-text, #3c434a); + } + + p.description { + margin: 12px 0; + font-size: 12px; + } +} + +.job-manager-settings-header-wrap { + margin: 0 -40px 20px -40px; + padding: 0 40px; + background: #fff; + position: sticky; + top: var(--wp-admin--admin-bar--height, 32px); + +} +.job-manager-settings-header-row { + display: flex; + justify-content: space-between; + align-items: center; +} +.job-manager-settings-footer { + margin-top: 40px; + display: flex; + justify-content: flex-end; +} + +.job-manager-settings-header, +.job-manager-settings-body { + max-width: 1200px; + margin: 0 auto; +} + +.job-manager-settings-logo { + width: 177px; + margin: 24px 0; } a.wpjm-activate-license-link, @@ -945,9 +987,11 @@ tr.email-setting-row { /** * Nav Tabs */ + .nav-tab-wrapper, .wrap h2.nav-tab-wrapper { border-bottom: 0; - margin-bottom: 18px; + margin: unset; + padding: unset; } .nav-tab { border: none; @@ -963,11 +1007,11 @@ tr.email-setting-row { } } -h2 .nav-tab-active, nav .nav-tab-active { - border-bottom: 3px solid #2270B1; +.nav-tab-wrapper .nav-tab-active, nav .nav-tab-active { + border-bottom: 3px solid var(--wpjm-brand-color-primary, #2270B1); box-sizing: border-box; &:hover, &:focus, &:focus:active { - border-bottom: 3px solid #2270B1; + border-bottom: 3px solid var(--wpjm-brand-color-primary, #2270B1); box-sizing: border-box; } } diff --git a/assets/css/wpjm-brand.scss b/assets/css/wpjm-brand.scss index e986727d8..fc6a65a17 100644 --- a/assets/css/wpjm-brand.scss +++ b/assets/css/wpjm-brand.scss @@ -8,6 +8,7 @@ --wpjm-brand-color-shade-4: #FFEF82; --wpjm-brand-color-shade-5: #FFFCE8; --wpjm-brand-sizing-scale: clamp(0px, (100vw - 400px) / (1200 - 400), 1px); + --wpjm-brand-color-text: #1A1A1A; } @function fluid($desktop, $mobile) { @@ -30,6 +31,7 @@ background: var(--wpjm-brand-color-primary); color: #ffffff; + cursor: pointer; &:hover, &:active, &:focus { background: #1D00D0; diff --git a/assets/images/jm-full-logo.png b/assets/images/jm-full-logo.png new file mode 100644 index 0000000000000000000000000000000000000000..cf88802d459ea13865c851dab9541adc5fd3be31 GIT binary patch literal 5764 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 $settings_submit_button.removeClass( 'is-outline' ) ) + + if( $settings_submit_button.length ) { + window.scrollTo( 0, 0 ); + setTimeout( () => window.scrollTo( 0, 0 ), 0 ); + } + // Author $( 'p.form-field-author' ).on( 'click', 'a.change-author', function() { $(this).closest( 'p' ).find('.current-author').hide(); diff --git a/includes/admin/class-wp-job-manager-admin.php b/includes/admin/class-wp-job-manager-admin.php index ad00fa039..9f1708269 100644 --- a/includes/admin/class-wp-job-manager-admin.php +++ b/includes/admin/class-wp-job-manager-admin.php @@ -109,7 +109,7 @@ public function admin_enqueue_scripts() { wp_enqueue_style( 'jquery-ui' ); wp_enqueue_style( 'select2' ); - WP_Job_Manager::register_style( 'job_manager_admin_css', 'css/admin.css', [] ); + WP_Job_Manager::register_style( 'job_manager_admin_css', 'css/admin.css', [ 'job_manager_brand' ] ); wp_enqueue_style( 'job_manager_admin_css' ); wp_enqueue_script( 'wp-job-manager-datepicker' ); diff --git a/includes/admin/class-wp-job-manager-settings.php b/includes/admin/class-wp-job-manager-settings.php index 63b1222ca..59126be2b 100644 --- a/includes/admin/class-wp-job-manager-settings.php +++ b/includes/admin/class-wp-job-manager-settings.php @@ -552,13 +552,26 @@ public function output() { settings_group ); ?> -

- settings as $key => $section ) { - echo '' . esc_html( $section[0] ) . ''; - } - ?> -

+
+
+
+ + +
+ +
+ settings as $key => $section ) { + echo '' . esc_html( $section[0] ) . ''; + } + ?> +
+
+
+
+
-

- -

+