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

Style settings page header #2641

Merged
merged 6 commits into from
Nov 28, 2023
Merged

Style settings page header #2641

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9a2c81b
Style settings header and move Save button
yscik Nov 17, 2023
bc32b1c
Style header for Marketplace
yscik Nov 17, 2023
69a6e07
Fix add-on search
yscik Nov 17, 2023
5339d07
Update lost license link
yscik Nov 17, 2023
bbe203c
Fix escaping
yscik Nov 20, 2023
0b81e90
Improve mobile styles
yscik Nov 20, 2023
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
94 changes: 87 additions & 7 deletions assets/css/admin.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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;
Expand All @@ -747,6 +815,7 @@ a.wpjm-activate-license-link:active {
display: flex;
flex-direction: row;
gap: 16px;
flex-wrap: wrap;

img {
width: 48px;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -945,29 +1017,37 @@ 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;
border-bottom: 3px solid transparent;
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;
}
}
Expand Down
2 changes: 2 additions & 0 deletions assets/css/wpjm-brand.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -30,6 +31,7 @@

background: var(--wpjm-brand-color-primary);
color: #ffffff;
cursor: pointer;

&:hover, &:active, &:focus {
background: #1D00D0;
Expand Down
Binary file added assets/images/jm-full-logo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 10 additions & 0 deletions assets/js/admin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
90 changes: 51 additions & 39 deletions includes/admin/class-wp-job-manager-addons.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,53 +180,65 @@ public function get_animated_logo() {
*/
public function output() {
?>
<div class="wrap wp_job_manager wp_job_manager_add_ons_wrap">
<nav class="nav-tab-wrapper woo-nav-tab-wrapper">
<a href="<?php echo esc_url( admin_url( 'edit.php?post_type=job_listing&page=job-manager-marketplace' ) ); ?>"
class="nav-tab
<?php
// phpcs:ignore WordPress.Security.NonceVerification.Recommended -- Input is used safely.
if ( ! isset( $_GET['section'] ) || 'helper' !== $_GET['section'] ) {
echo ' nav-tab-active';
}
?>
">
<?php esc_html_e( 'Marketplace', 'wp-job-manager' ); ?>
</a>
<?php if ( current_user_can( 'update_plugins' ) ) : ?>
<a href="<?php echo esc_url( admin_url( 'edit.php?post_type=job_listing&page=job-manager-marketplace&section=helper' ) ); ?>"
class="nav-tab
<div class="wrap wp_job_manager wp_job_manager_add_ons_wrap job-manager-settings-wrap">
<div class="job-manager-settings-header-wrap">
<div class="job-manager-settings-header">
<div class="job-manager-settings-header-row">
<img class="job-manager-settings-logo"
src="<?php echo esc_url( JOB_MANAGER_PLUGIN_URL . '/assets/images/jm-full-logo.png' ); ?>"
alt="<?php esc_attr_e( 'Job Manager', 'wp-job-manager' ); ?>" />
</div>
<nav class="nav-tab-wrapper woo-nav-tab-wrapper">
<a href="<?php echo esc_url( admin_url( 'edit.php?post_type=job_listing&page=job-manager-marketplace' ) ); ?>"
class="nav-tab
<?php
// phpcs:ignore WordPress.Security.NonceVerification.Recommended -- Input is used safely.
if ( isset( $_GET['section'] ) && 'helper' === $_GET['section'] ) {
if ( ! isset( $_GET['section'] ) || 'helper' !== $_GET['section'] ) {
echo ' nav-tab-active';
}
?>
">
<?php esc_html_e( 'Licenses', 'wp-job-manager' ); ?>
</a>
<?php endif; ?>
</nav>
<?php
// phpcs:ignore WordPress.Security.NonceVerification.Recommended -- Input is used safely.
if ( isset( $_GET['section'] ) && 'helper' === $_GET['section'] ) {
do_action( 'job_manager_helper_output' );
} else {
// phpcs:ignore WordPress.Security.NonceVerification.Recommended -- Input is used safely.
$category = isset( $_GET['category'] ) ? sanitize_text_field( wp_unslash( $_GET['category'] ) ) : null;
">
<?php esc_html_e( 'Marketplace', 'wp-job-manager' ); ?>
</a>
<?php if ( current_user_can( 'update_plugins' ) ) : ?>
<a href="<?php echo esc_url( admin_url( 'edit.php?post_type=job_listing&page=job-manager-marketplace&section=helper' ) ); ?>"
class="nav-tab
<?php
// phpcs:ignore WordPress.Security.NonceVerification.Recommended -- Input is used safely.
if ( isset( $_GET['section'] ) && 'helper' === $_GET['section'] ) {
echo ' nav-tab-active';
}
?>
">
<?php esc_html_e( 'Licenses', 'wp-job-manager' ); ?>
</a>
<?php endif; ?>
</nav>
</div>
</div>
<div class="job-manager-settings-body">
<div class="wp-header-end"></div>
<?php
// 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();

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';
}
?>
</div>
</div>
<?php
}
Expand Down
2 changes: 1 addition & 1 deletion includes/admin/class-wp-job-manager-admin.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' );
Expand Down
36 changes: 26 additions & 10 deletions includes/admin/class-wp-job-manager-settings.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -552,13 +552,28 @@ public function output() {

<?php settings_fields( $this->settings_group ); ?>

<h2 class="nav-tab-wrapper">
<?php
foreach ( $this->settings as $key => $section ) {
echo '<a href="#settings-' . esc_attr( sanitize_title( $key ) ) . '" class="nav-tab">' . esc_html( $section[0] ) . '</a>';
}
?>
</h2>
<div class="job-manager-settings-header-wrap">
<div class="job-manager-settings-header">
<div class="job-manager-settings-header-row">
<div class="job-manager-settings-logo-wrap">
<img class="job-manager-settings-logo"
src="<?php echo esc_url( JOB_MANAGER_PLUGIN_URL . '/assets/images/jm-full-logo.png' ); ?>"
alt="<?php esc_attr_e( 'Job Manager', 'wp-job-manager' ); ?>" />
</div>
<input type="submit" class="job-manager-settings-submit wpjm-button is-outline" value="<?php esc_attr_e( 'Save Changes', 'wp-job-manager' ); ?>" />
</div>

<div class="nav-tab-wrapper">
<?php
foreach ( $this->settings as $key => $section ) {
echo '<a href="' . esc_url( '#settings-' . sanitize_title( $key ) ) . '" class="nav-tab">' . esc_html( $section[0] ) . '</a>';
}
?>
</div>
</div>
</div>
<div class="job-manager-settings-body">
<div class="wp-header-end"></div>

<?php
// phpcs:ignore WordPress.Security.NonceVerification.Recommended -- Used for basic flow.
Expand Down Expand Up @@ -588,9 +603,10 @@ public function output() {

}
?>
<p class="submit">
<input type="submit" class="button-primary" value="<?php esc_attr_e( 'Save Changes', 'wp-job-manager' ); ?>" />
</p>
</div>
<div class="job-manager-settings-footer-mobile">
<input type="submit" class="job-manager-settings-submit wpjm-button is-outline" value="<?php esc_attr_e( 'Save Changes', 'wp-job-manager' ); ?>" />
</div>
</form>
</div>
<script type="text/javascript">
Expand Down
2 changes: 1 addition & 1 deletion includes/admin/views/html-admin-page-addons.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
?>
<form class="extension-search" method="get" action="<?php esc_url( admin_url( 'edit.php?post_type=job_listing&page=job-manager-addons' ) ); ?>">
<input type="hidden" name="post_type" value="job_listing" />
<input type="hidden" name="page" value="job-manager-addons" />
<input type="hidden" name="page" value="job-manager-marketplace" />
<input class="wpjm-extension-search-input" type="text" name="search" value="<?php echo esc_attr( $search ); ?>" placeholder="<?php echo esc_attr__( 'Search', 'wp-job-manager' ); ?>" />
<input class="wpjm-extension-search-button button" type="submit" value="<?php echo esc_attr__( 'Search', 'wp-job-manager' ); ?>" />
</form>
Expand Down
2 changes: 1 addition & 1 deletion includes/helper/views/html-licenses.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,7 +183,7 @@
<?php endforeach; ?>
<?php endif; ?>
<?php // translators: Placeholder %s is the lost license key URL. ?>
<p><?php printf( wp_kses_post( __( 'Lost your license key? <a href="%s">Retrieve it here</a>.', 'wp-job-manager' ) ), 'https://wpjobmanager.com/lost-license-key/' ); ?></p>
<p><?php printf( wp_kses_post( __( 'Lost your license key? <a href="%s">You can find them on the My Account page</a>.', 'wp-job-manager' ) ), 'https://wpjobmanager.com/my-account/' ); ?></p>
<?php else : ?>
<div class="notice notice-warning inline"><p><?php esc_html_e( 'No plugins are activated that have licenses managed by WP Job Manager.', 'wp-job-manager' ); ?></p></div>
<?php endif; ?>
Expand Down
Loading