diff --git a/assets/css/admin.scss b/assets/css/admin.scss index 0b04fdb7d..fe002b222 100644 --- a/assets/css/admin.scss +++ b/assets/css/admin.scss @@ -3,10 +3,76 @@ .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; + padding: 24px 0; + gap: 20px 24px; +} +.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; +} +.job-manager-settings-footer-mobile { + display: none; +} +@media (max-width: 782px) { + + .job-manager-settings-header-wrap { + position: static; + } + + .job-manager-settings-logo-wrap { + width: 40px; + overflow: hidden; + } + + .job-manager-settings-footer-mobile { + margin-top: 20px; + margin-bottom: -60px; + display: flex; + .job-manager-settings-submit { + flex: 1; + } + } } a.wpjm-activate-license-link, @@ -725,7 +791,9 @@ a.wpjm-activate-license-link:active { /* Addons */ .wp_job_manager_add_ons_wrap { - max-width: 1244px; + .job-manager-settings-header-wrap { + position: static; + } .products { display: grid; @@ -747,6 +815,7 @@ a.wpjm-activate-license-link:active { display: flex; flex-direction: row; gap: 16px; + flex-wrap: wrap; img { width: 48px; @@ -782,6 +851,9 @@ a.wpjm-activate-license-link:active { .product-info { flex: 1 1 0; align-self: center; + @media screen and (max-width: 550px) { + flex: 1 1 calc(100% - 68px); + } } .add-on-footer { display: flex; @@ -945,9 +1017,14 @@ tr.email-setting-row { /** * Nav Tabs */ + .nav-tab-wrapper, .wrap h2.nav-tab-wrapper { border-bottom: 0; - margin-bottom: 18px; + margin: unset; + padding: unset; + display: flex; + gap: 10px 24px; + flex-wrap: wrap; } .nav-tab { border: none; @@ -955,19 +1032,22 @@ tr.email-setting-row { font-weight: 500; background: none; padding: 5px 0; - margin-left: 0; - margin-right: 24px; + margin: 0; color: #000000; &:hover, &:focus, &:focus:active { background: none; } + + &.nav-tab-active { + margin-bottom: unset; + } } -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 000000000..cf88802d4 Binary files /dev/null and b/assets/images/jm-full-logo.png differ diff --git a/assets/js/admin.js b/assets/js/admin.js index 61be9efd0..e92b67c91 100644 --- a/assets/js/admin.js +++ b/assets/js/admin.js @@ -22,6 +22,16 @@ jQuery(document).ready(function($) { } } ); + // Settings page + + const $settings_submit_button = $( '.job-manager-settings-submit' ); + $( '.job-manager-options' ).on( 'change keyup', () => $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-addons.php b/includes/admin/class-wp-job-manager-addons.php index 9bccac574..2362dea0d 100644 --- a/includes/admin/class-wp-job-manager-addons.php +++ b/includes/admin/class-wp-job-manager-addons.php @@ -180,53 +180,65 @@ public function get_animated_logo() { */ public function output() { ?> -
- +
+ +
+
+ get_categories(); - - if ( $search ) { - $add_ons = $this->get_add_ons( null, $search ); + if ( isset( $_GET['section'] ) && 'helper' === $_GET['section'] ) { + do_action( 'job_manager_helper_output' ); } else { - $add_ons = $this->get_add_ons( $category ); - } + // phpcs:ignore WordPress.Security.NonceVerification.Recommended -- Input is used safely. + $category = isset( $_GET['category'] ) ? sanitize_text_field( wp_unslash( $_GET['category'] ) ) : null; + // phpcs:ignore WordPress.Security.NonceVerification.Recommended -- Input is used safely. + $search = isset( $_GET['search'] ) ? sanitize_text_field( wp_unslash( $_GET['search'] ) ) : null; + $categories = $this->get_categories(); - include_once dirname( __FILE__ ) . '/views/html-admin-page-addons.php'; - } - ?> + if ( $search ) { + $add_ons = $this->get_add_ons( null, $search ); + } else { + $add_ons = $this->get_add_ons( $category ); + } + + include_once dirname( __FILE__ ) . '/views/html-admin-page-addons.php'; + } + ?> +
settings_group ); ?> -

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

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

- -

+
+
+ +