ruben/quiztech_theme
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Updated styling for 'Manage Jobs' page

Browse source
This commit is contained in:
Ruben Ramirez 2025-04-04 15:01:19 -05:00
parent 254e8bbdeb
commit 0919217fdf
3 changed files with 215 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
functions.php
View file

@ -57,6 +57,10 @@ function quiztech_theme_enqueue_scripts() {
} }
// Only enqueue the script on our specific template pages // Only enqueue the script on our specific template pages
// Enqueue Google Fonts (Sora & Inter)
wp_enqueue_style( 'quiztech-google-fonts', 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Sora:wght@600&display=swap', array(), null );
if ( $is_quiztech_template ) { if ( $is_quiztech_template ) {
$script_path = get_stylesheet_directory() . '/js/quiztech-theme.js'; $script_path = get_stylesheet_directory() . '/js/quiztech-theme.js';
$script_url = get_stylesheet_directory_uri() . '/js/quiztech-theme.js'; $script_url = get_stylesheet_directory_uri() . '/js/quiztech-theme.js';

184
style.css
View file

@ -267,6 +267,190 @@
} }
/* --- Global Quiztech Theme Styles --- */
/* General Content Area */
.quiztech-content-area {
font-family: var(--quiztech-font-body);
color: var(--quiztech-text-primary);
}
/* Page Title */
.quiztech-page-title {
font-family: var(--quiztech-font-heading);
font-weight: 600;
color: var(--quiztech-text-primary);
margin-bottom: 25px; /* Consistent spacing */
}
/* Section Title */
.quiztech-section-title {
font-family: var(--quiztech-font-heading);
font-weight: 600;
font-size: 18px; /* Slightly smaller than page title */
color: var(--quiztech-text-primary);
margin-top: 30px;
margin-bottom: 15px;
padding-bottom: 5px;
border-bottom: 1px solid var(--quiztech-border-light);
}
/* Tables */
.quiztech-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
font-size: 13px;
}
.quiztech-table th,
.quiztech-table td {
padding: 12px 15px;
text-align: left;
border: 1px solid var(--quiztech-border-light);
vertical-align: middle;
}
.quiztech-table th {
background-color: var(--quiztech-widget-bg); /* Use widget bg for header */
font-weight: 600;
color: var(--quiztech-text-primary);
}
.quiztech-table tbody tr:nth-child(odd) td {
/* Optional alternating row color - use widget bg for subtle difference */
/* background-color: var(--quiztech-widget-bg); */
}
.quiztech-table tbody tr:hover td {
background-color: rgba(0, 0, 0, 0.02); /* Subtle hover */
}
/* Forms */
.quiztech-form p {
margin-bottom: 15px;
}
.quiztech-label {
display: block;
margin-bottom: 5px;
font-weight: 500;
font-size: 13px;
color: var(--quiztech-text-secondary);
}
.quiztech-input,
.quiztech-textarea,
.quiztech-select {
display: block;
width: 100%;
padding: 10px;
border: 1px solid var(--quiztech-border-light);
border-radius: 4px;
background-color: var(--quiztech-widget-bg);
color: var(--quiztech-text-primary);
font-family: var(--quiztech-font-body);
font-size: 14px;
box-sizing: border-box; /* Include padding and border in element's total width and height */
transition: border-color 0.2s ease;
}
.quiztech-input:focus,
.quiztech-textarea:focus,
.quiztech-select:focus {
outline: none;
border-color: var(--quiztech-accent-primary);
box-shadow: 0 0 0 1px var(--quiztech-accent-primary);
}
.quiztech-textarea {
min-height: 100px;
}
/* Buttons */
.quiztech-button {
display: inline-block;
padding: 10px 20px;
text-decoration: none;
border: 1px solid transparent;
border-radius: 6px;
font-family: var(--quiztech-font-body);
font-weight: 500;
font-size: 14px;
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
text-align: center;
vertical-align: middle;
margin-right: 5px; /* Spacing between adjacent buttons */
}
.quiztech-button-primary {
background-color: var(--quiztech-accent-primary);
color: #FFFFFF;
border-color: var(--quiztech-accent-primary);
}
.quiztech-button-primary:hover {
background-color: #0d36a8; /* Darker blue */
border-color: #0d36a8;
color: #FFFFFF;
}
.quiztech-button-secondary {
background-color: var(--quiztech-widget-bg);
color: var(--quiztech-text-secondary);
border-color: var(--quiztech-border-light);
}
.quiztech-button-secondary:hover {
background-color: #f0f0f0; /* Slightly darker background */
border-color: #cccccc;
color: var(--quiztech-text-primary);
}
.quiztech-button-small {
padding: 5px 10px;
font-size: 12px;
}
/* Links */
.quiztech-link {
color: var(--quiztech-accent-primary);
text-decoration: none;
transition: color 0.2s ease;
}
.quiztech-link:hover {
color: #0d36a8; /* Darker blue */
text-decoration: underline;
}
/* Inline Forms (like Send Invite row) */
.quiztech-form-inline {
display: flex;
align-items: center;
gap: 10px; /* Spacing between elements */
flex-wrap: wrap; /* Allow wrapping */
}
.quiztech-form-inline .quiztech-label {
margin-bottom: 0; /* Remove bottom margin for inline */
}
.quiztech-form-inline .quiztech-input {
width: auto; /* Allow input to size based on content/size attribute */
flex-grow: 1; /* Allow input to take available space */
}
/* Status Messages */
.quiztech-status-message {
font-size: 13px;
font-style: italic;
color: var(--quiztech-text-secondary);
}
/* Dark Mode Styles */ /* Dark Mode Styles */

54
template-manage-jobs.php
View file

@ -20,16 +20,16 @@ if ( ! is_user_logged_in() || ! current_user_can( 'manage_options' ) ) {
get_header(); ?> get_header(); ?>
<div id="primary" class="content-area"> <div id="primary" class="content-area quiztech-content-area">
<main id="main" class="site-main"> <main id="main" class="site-main">
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="entry-header"> <header class="entry-header">
<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?> <?php the_title( '<h1 class="entry-title quiztech-page-title">', '</h1>' ); ?>
</header><!-- .entry-header --> </header><!-- .entry-header -->
<div class="entry-content"> <div class="entry-content">
<h2><?php esc_html_e( 'Your Job Postings', 'quiztech' ); ?></h2> <h2 class="quiztech-section-title"><?php esc_html_e( 'Your Job Postings', 'quiztech' ); ?></h2>
<?php <?php
// Query args to get jobs for the current user // Query args to get jobs for the current user
$current_user_id = get_current_user_id(); $current_user_id = get_current_user_id();
@ -46,7 +46,7 @@ get_header(); ?>
if ( $user_jobs_query->have_posts() ) : if ( $user_jobs_query->have_posts() ) :
?> ?>
<table class="quiztech-manage-table wp-list-table widefat fixed striped"> <table class="quiztech-table wp-list-table widefat fixed striped">
<thead> <thead>
<tr> <tr>
<th scope="col"><?php esc_html_e( 'Title', 'quiztech' ); ?></th> <th scope="col"><?php esc_html_e( 'Title', 'quiztech' ); ?></th>
@ -64,20 +64,20 @@ get_header(); ?>
<td><?php echo esc_html( get_post_status( get_the_ID() ) ); ?></td> <td><?php echo esc_html( get_post_status( get_the_ID() ) ); ?></td>
<td> <td>
<?php $results_url = '#view-results-' . get_the_ID(); // Placeholder ?> <?php $results_url = '#view-results-' . get_the_ID(); // Placeholder ?>
<button class="button button-small quiztech-edit-job-btn" data-job-id="<?php echo esc_attr( get_the_ID() ); ?>"><?php esc_html_e( 'Edit', 'quiztech' ); ?></button> | <button class="quiztech-button quiztech-button-secondary quiztech-button-small quiztech-edit-job-btn" data-job-id="<?php echo esc_attr( get_the_ID() ); ?>"><?php esc_html_e( 'Edit', 'quiztech' ); ?></button> |
<a href="<?php echo esc_url( $results_url ); ?>"><?php esc_html_e( 'View Results', 'quiztech' ); ?></a> | <a href="<?php echo esc_url( $results_url ); ?>" class="quiztech-link"><?php esc_html_e( 'View Results', 'quiztech' ); ?></a> |
<a href="#send-invite" class="send-job-invite" data-job-id="<?php echo esc_attr( get_the_ID() ); ?>"><?php esc_html_e( 'Send Invite', 'quiztech' ); ?></a> <a href="#send-invite" class="quiztech-link send-job-invite" data-job-id="<?php echo esc_attr( get_the_ID() ); ?>"><?php esc_html_e( 'Send Invite', 'quiztech' ); ?></a>
</td> </td>
</tr> </tr>
<tr class="send-invite-form-row" id="send-invite-row-<?php echo esc_attr( get_the_ID() ); ?>" style="display: none;"> <tr class="send-invite-form-row quiztech-form-row" id="send-invite-row-<?php echo esc_attr( get_the_ID() ); ?>" style="display: none;">
<td colspan="3"> <td colspan="3">
<div class="send-invite-form-wrapper" style="padding: 10px; background-color: #f9f9f9;"> <div class="send-invite-form-wrapper quiztech-form-inline" style="padding: 10px; background-color: #f9f9f9;">
<label for="applicant_email_<?php echo esc_attr( get_the_ID() ); ?>"><?php esc_html_e( 'Applicant Email:', 'quiztech' ); ?></label> <label class="quiztech-label" for="applicant_email_<?php echo esc_attr( get_the_ID() ); ?>"><?php esc_html_e( 'Applicant Email:', 'quiztech' ); ?></label>
<input type="email" id="applicant_email_<?php echo esc_attr( get_the_ID() ); ?>" name="applicant_email" size="40" /> <input class="quiztech-input" type="email" id="applicant_email_<?php echo esc_attr( get_the_ID() ); ?>" name="applicant_email" size="40" />
<button class="button button-primary send-invite-submit" data-job-id="<?php echo esc_attr( get_the_ID() ); ?>"><?php esc_html_e( 'Send', 'quiztech' ); ?></button> <button class="quiztech-button quiztech-button-primary send-invite-submit" data-job-id="<?php echo esc_attr( get_the_ID() ); ?>"><?php esc_html_e( 'Send', 'quiztech' ); ?></button>
<button class="button cancel-invite"><?php esc_html_e( 'Cancel', 'quiztech' ); ?></button> <button class="quiztech-button quiztech-button-secondary cancel-invite"><?php esc_html_e( 'Cancel', 'quiztech' ); ?></button>
<span class="spinner" style="float: none; vertical-align: middle;"></span> <span class="spinner" style="float: none; vertical-align: middle;"></span>
<div class="invite-status" style="display: inline-block; margin-left: 10px;"></div> <div class="invite-status quiztech-status-message" style="display: inline-block; margin-left: 10px;"></div>
</div> </div>
</td> </td>
</tr> </tr>
@ -93,30 +93,30 @@ get_header(); ?>
wp_reset_postdata(); wp_reset_postdata();
?> ?>
<p style="margin-top: 20px;"><a href="#add-new-job-form" class="button add-new-job-button"><?php esc_html_e( 'Add New Job', 'quiztech' ); ?></a></p> <p style="margin-top: 20px;"><a href="#add-new-job-form" class="quiztech-button quiztech-button-primary add-new-job-button"><?php esc_html_e( 'Add New Job', 'quiztech' ); ?></a></p>
<div id="add-new-job-form" style="margin-top: 20px; padding-top: 20px; border-top: 1px solid #ccc; display: none;"> <!-- Initially hidden --> <div id="add-new-job-form" class="quiztech-section" style="margin-top: 20px; padding-top: 20px; border-top: 1px solid #ccc; display: none;"> <!-- Initially hidden -->
<h2><?php esc_html_e( 'Add New Job Details', 'quiztech' ); ?></h2> <h2 class="quiztech-section-title"><?php esc_html_e( 'Add New Job Details', 'quiztech' ); ?></h2>
<form id="new-job-form" method="post" action=""> <form id="new-job-form" class="quiztech-form" method="post" action="">
<?php wp_nonce_field( 'quiztech_add_new_job_action', 'quiztech_add_new_job_nonce' ); ?> <?php wp_nonce_field( 'quiztech_add_new_job_action', 'quiztech_add_new_job_nonce' ); ?>
<p> <p>
<label for="job_title"><?php esc_html_e( 'Job Title:', 'quiztech' ); ?></label><br /> <label class="quiztech-label" for="job_title"><?php esc_html_e( 'Job Title:', 'quiztech' ); ?></label><br />
<input type="text" id="job_title" name="job_title" value="" required style="width: 100%;" /> <input class="quiztech-input" type="text" id="job_title" name="job_title" value="" required style="width: 100%;" />
<input type="hidden" id="quiztech-job-id" name="job_id" value=""> <input type="hidden" id="quiztech-job-id" name="job_id" value="">
</p> </p>
<p> <p>
<label for="job_description"><?php esc_html_e( 'Job Description:', 'quiztech' ); ?></label><br /> <label class="quiztech-label" for="job_description"><?php esc_html_e( 'Job Description:', 'quiztech' ); ?></label><br />
<?php <?php
// Basic textarea for now. Replace with wp_editor in a later refinement step if needed. // Basic textarea for now. Replace with wp_editor in a later refinement step if needed.
// wp_editor( '', 'job_description', array('textarea_rows' => 10) ); // wp_editor( '', 'job_description', array('textarea_rows' => 10) );
?> ?>
<textarea id="job_description" name="job_description" rows="10" style="width: 100%;"></textarea> <textarea class="quiztech-textarea" id="job_description" name="job_description" rows="10" style="width: 100%;"></textarea>
</p> </p>
<p> <p>
<label for="quiztech_associated_assessment_id"><?php esc_html_e( 'Linked Assessment:', 'quiztech' ); ?></label><br /> <label class="quiztech-label" for="quiztech_associated_assessment_id"><?php esc_html_e( 'Linked Assessment:', 'quiztech' ); ?></label><br />
<?php <?php
// Query published assessments // Query published assessments
$assessments_query = new WP_Query( [ $assessments_query = new WP_Query( [
@ -127,7 +127,7 @@ get_header(); ?>
'order' => 'ASC', 'order' => 'ASC',
] ); ] );
echo '<select name="quiztech_associated_assessment_id" id="quiztech_associated_assessment_id" style="width: 100%;">'; echo '<select class="quiztech-select" name="quiztech_associated_assessment_id" id="quiztech_associated_assessment_id" style="width: 100%;">';
echo '<option value="">' . esc_html__( '-- None --', 'quiztech' ) . '</option>'; echo '<option value="">' . esc_html__( '-- None --', 'quiztech' ) . '</option>';
if ( $assessments_query->have_posts() ) { if ( $assessments_query->have_posts() ) {
@ -150,10 +150,10 @@ get_header(); ?>
<p> <p>
<input type="submit" name="submit_new_job" class="button button-primary" value="<?php esc_attr_e( 'Save Job', 'quiztech' ); ?>" /> <input type="submit" name="submit_new_job" class="quiztech-button quiztech-button-primary" value="<?php esc_attr_e( 'Save Job', 'quiztech' ); ?>" />
<button type="button" class="button cancel-add-job"><?php esc_html_e( 'Cancel', 'quiztech' ); ?></button> <button type="button" class="quiztech-button quiztech-button-secondary cancel-add-job"><?php esc_html_e( 'Cancel', 'quiztech' ); ?></button>
<span class="spinner" style="float: none; vertical-align: middle;"></span> <span class="spinner" style="float: none; vertical-align: middle;"></span>
<div class="add-job-status" style="display: inline-block; margin-left: 10px;"></div> <div class="add-job-status quiztech-status-message" style="display: inline-block; margin-left: 10px;"></div>
</p> </p>
</form> </form>
</div> </div>