Updated styling for 'Manage Questions' page

This commit is contained in:
Ruben Ramirez 2025-04-04 15:29:06 -05:00
parent 18ac849317
commit fb404964f8

View file

@ -31,39 +31,39 @@ $question_types = [
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">
<p><button id="quiztech-add-new-question-btn" class="button"><?php esc_html_e( 'Add New Question', 'quiztech' ); ?></button></p> <p><button id="quiztech-add-new-question-btn" class="quiztech-button quiztech-button-primary"><?php esc_html_e( 'Add New Question', 'quiztech' ); ?></button></p>
<div id="quiztech-add-edit-question-form" style="display: none; border: 1px solid #ccc; padding: 15px; margin-bottom: 20px;"> <div id="quiztech-add-edit-question-form" class="quiztech-section" style="display: none; border: 1px solid #ccc; padding: 15px; margin-bottom: 20px;">
<h3><?php esc_html_e( 'Add/Edit Question', 'quiztech' ); ?></h3> <h3 class="quiztech-section-title"><?php esc_html_e( 'Add/Edit Question', 'quiztech' ); ?></h3>
<p style="font-weight: bold;"><?php esc_html_e( 'Credits:', 'quiztech' ); ?> 3</p> <?php // TODO: Make credit cost dynamic ?> <p style="font-weight: bold;"><?php esc_html_e( 'Credits:', 'quiztech' ); ?> 3</p> <?php // TODO: Make credit cost dynamic ?>
<form id="question-form"> <form id="question-form" class="quiztech-form">
<?php wp_nonce_field( 'quiztech_save_question_action', 'quiztech_question_nonce' ); ?> <?php wp_nonce_field( 'quiztech_save_question_action', 'quiztech_question_nonce' ); ?>
<input type="hidden" id="quiztech-question-id" name="question_id" value=""> <input type="hidden" id="quiztech-question-id" name="question_id" value="">
<p> <p>
<label for="quiztech-question-title"><?php esc_html_e( 'Question Title (for reference):', 'quiztech' ); ?></label><br> <label class="quiztech-label" for="quiztech-question-title"><?php esc_html_e( 'Question Title (for reference):', 'quiztech' ); ?></label><br>
<input type="text" id="quiztech-question-title" name="question_title" class="widefat" required> <input class="quiztech-input widefat" type="text" id="quiztech-question-title" name="question_title" required>
</p> </p>
<p> <p>
<label for="quiztech-question-content"><?php esc_html_e( 'Question Text:', 'quiztech' ); ?></label><br> <label class="quiztech-label" for="quiztech-question-content"><?php esc_html_e( 'Question Text:', 'quiztech' ); ?></label><br>
<textarea id="quiztech-question-content" name="question_content" class="widefat" rows="4" required></textarea> <textarea class="quiztech-textarea widefat" id="quiztech-question-content" name="question_content" rows="4" required></textarea>
</p> </p>
<p> <p>
<label for="quiztech-question-type"><?php esc_html_e( 'Question Type:', 'quiztech' ); ?></label><br> <label class="quiztech-label" for="quiztech-question-type"><?php esc_html_e( 'Question Type:', 'quiztech' ); ?></label><br>
<select id="quiztech-question-type" name="question_type" required> <select class="quiztech-select" id="quiztech-question-type" name="question_type" required>
<option value=""><?php esc_html_e( '-- Select Type --', 'quiztech' ); ?></option> <option value=""><?php esc_html_e( '-- Select Type --', 'quiztech' ); ?></option>
<?php foreach ( $question_types as $value => $label ) : ?> <?php foreach ( $question_types as $value => $label ) : ?>
<option value="<?php echo esc_attr( $value ); ?>"><?php echo esc_html( $label ); ?></option> <option value="<?php echo esc_attr( $value ); ?>"><?php echo esc_html( $label ); ?></option>
@ -72,18 +72,19 @@ get_header(); ?>
</p> </p>
<p id="quiztech-question-options-wrapper" style="display: none;"> <p id="quiztech-question-options-wrapper" style="display: none;">
<label for="quiztech-question-options"><?php esc_html_e( 'Options (one per line, mark correct with *):', 'quiztech' ); ?></label><br> <label class="quiztech-label" for="quiztech-question-options"><?php esc_html_e( 'Options (one per line, mark correct with *):', 'quiztech' ); ?></label><br>
<textarea id="quiztech-question-options" name="question_options" class="widefat" rows="5"></textarea> <textarea class="quiztech-textarea widefat" id="quiztech-question-options" name="question_options" rows="5"></textarea>
<small><?php esc_html_e('Example: Option A*'); ?></small> <?php // TODO: Clarify correct answer format for checkboxes ?> <small><?php esc_html_e('Example: Option A*'); ?></small> <?php // TODO: Clarify correct answer format for checkboxes ?>
</p> </p>
<p> <p>
<label for="quiztech-question-category"><?php esc_html_e( 'Category:', 'quiztech' ); ?></label><br> <label class="quiztech-label" for="quiztech-question-category"><?php esc_html_e( 'Category:', 'quiztech' ); ?></label><br>
<?php <?php
wp_dropdown_categories( array( wp_dropdown_categories( array(
'taxonomy' => 'quiztech_category', 'taxonomy' => 'quiztech_category',
'name' => 'question_category', 'name' => 'question_category',
'id' => 'quiztech-question-category', 'id' => 'quiztech-question-category',
'class' => 'quiztech-select', // Add class here
'show_option_none'=> __( '-- Select Category --', 'quiztech' ), 'show_option_none'=> __( '-- Select Category --', 'quiztech' ),
'hide_empty' => 0, 'hide_empty' => 0,
'hierarchical' => 1, 'hierarchical' => 1,
@ -92,21 +93,21 @@ get_header(); ?>
</p> <?php // Closing </p> was missing here ?> </p> <?php // Closing </p> was missing here ?>
<p> <p>
<label for="quiztech-question-points"><?php esc_html_e( 'Question Points:', 'quiztech' ); ?></label><br> <label class="quiztech-label" for="quiztech-question-points"><?php esc_html_e( 'Question Points:', 'quiztech' ); ?></label><br>
<input type="number" id="quiztech-question-points" name="question_points" class="small-text" min="0" step="1" value="1"> <input class="quiztech-input small-text" type="number" id="quiztech-question-points" name="question_points" min="0" step="1" value="1">
<small><?php esc_html_e('Points awarded for a correct answer.', 'quiztech'); ?></small> <small><?php esc_html_e('Points awarded for a correct answer.', 'quiztech'); ?></small>
</p> </p>
<?php // Removed extra closing </p> tag from line 97 of original ?> <?php // Removed extra closing </p> tag from line 97 of original ?>
<p> <p>
<button type="submit" class="button button-primary"><?php esc_html_e( 'Save Question', 'quiztech' ); ?></button> <button type="submit" class="quiztech-button quiztech-button-primary"><?php esc_html_e( 'Save Question', 'quiztech' ); ?></button>
<button type="button" id="quiztech-cancel-edit-question-btn" class="button" style="display: none;"><?php esc_html_e( 'Cancel', 'quiztech' ); ?></button> <button type="button" id="quiztech-cancel-edit-question-btn" class="quiztech-button quiztech-button-secondary" style="display: none;"><?php esc_html_e( 'Cancel', 'quiztech' ); ?></button>
</p> </p>
</form> </form>
</div> </div>
<h2><?php esc_html_e( 'Question Library', 'quiztech' ); ?></h2> <h2 class="quiztech-section-title"><?php esc_html_e( 'Question Library', 'quiztech' ); ?></h2>
<?php <?php
$args = array( $args = array(
@ -120,7 +121,7 @@ get_header(); ?>
?> ?>
<?php if ( $questions_query->have_posts() ) : ?> <?php if ( $questions_query->have_posts() ) : ?>
<table class="wp-list-table widefat fixed striped"> <table class="quiztech-table wp-list-table widefat fixed striped">
<thead> <thead>
<tr> <tr>
<th><?php esc_html_e( 'Title', 'quiztech' ); ?></th> <th><?php esc_html_e( 'Title', 'quiztech' ); ?></th>
@ -144,8 +145,8 @@ get_header(); ?>
<td><?php echo esc_html( $q_type_label ); ?></td> <td><?php echo esc_html( $q_type_label ); ?></td>
<td><?php echo esc_html( $category_name ); ?></td> <td><?php echo esc_html( $category_name ); ?></td>
<td> <td>
<button class="button quiztech-edit-question-btn" data-question-id="<?php echo esc_attr( $question_id ); ?>"><?php esc_html_e( 'Edit', 'quiztech' ); ?></button> <button class="quiztech-button quiztech-button-secondary quiztech-button-small quiztech-edit-question-btn" data-question-id="<?php echo esc_attr( $question_id ); ?>"><?php esc_html_e( 'Edit', 'quiztech' ); ?></button>
<button class="button quiztech-delete-question-btn" data-question-id="<?php echo esc_attr( $question_id ); ?>"><?php esc_html_e( 'Delete', 'quiztech' ); ?></button> <button class="quiztech-button quiztech-button-secondary quiztech-button-small quiztech-delete-question-btn" data-question-id="<?php echo esc_attr( $question_id ); ?>"><?php esc_html_e( 'Delete', 'quiztech' ); ?></button>
<?php // Add nonces and JS handlers later ?> <?php // Add nonces and JS handlers later ?>
</td> </td>
</tr> </tr>