✨refactor: Update resource filter templates and styles; remove unused files and add new styles
This commit is contained in:
Keith Solomon
@@ -1,48 +0,0 @@
|
||||
<?php
|
||||
if (!defined('ABSPATH')) { exit; } // Prevent direct access
|
||||
|
||||
$resource_types = get_terms(['taxonomy' => 'resource_type', 'hide_empty' => true]);
|
||||
$resource_subjects = get_terms(['taxonomy' => 'resource_subject', 'hide_empty' => true]);
|
||||
?>
|
||||
|
||||
<!-- Theme override -->
|
||||
<form id="resource-filter">
|
||||
<!-- Search Field-->
|
||||
<div class="search-text">
|
||||
<input class="full-width" type="text" id="search" name="search" placeholder="Search resources..." value="<?php echo isset($search) ? esc_attr($search) : ''; ?>">
|
||||
|
||||
<button type="reset" id="clear-search">×</button>
|
||||
<button type="submit">Filter</button>
|
||||
</div>
|
||||
|
||||
<div class="search-tax">
|
||||
<!-- Resource Type Filters -->
|
||||
<details>
|
||||
<summary>Resource Type</summary>
|
||||
|
||||
<div class="filter-options">
|
||||
<?php foreach ($resource_types as $type) : ?>
|
||||
<label>
|
||||
<input type="checkbox" name="resource_type[]" value="<?php echo esc_attr($type->slug); ?>"
|
||||
<?php echo (isset($_POST['resource_type']) && $_POST['resource_type'] === $type->slug) ? 'checked' : ''; ?>>
|
||||
<?php echo esc_html($type->name); ?>
|
||||
</label>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<!-- Resource Subject Filters -->
|
||||
<details>
|
||||
<summary>Resource Subject</summary>
|
||||
|
||||
<div class="filter-options">
|
||||
<?php foreach ($resource_subjects as $subject) : ?>
|
||||
<label>
|
||||
<input type="checkbox" name="resource_subject[]" value="<?php echo esc_attr($subject->slug); ?>">
|
||||
<?php echo esc_html($subject->name); ?>
|
||||
</label>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
</form>
|
||||
@@ -1,20 +0,0 @@
|
||||
<?php if (!defined('ABSPATH')) { exit; } ?>
|
||||
|
||||
<form class="flex w-full" id="homepage-filter" action="<?php echo site_url('/browse-resources/'); ?>" method="POST">
|
||||
<?php
|
||||
$resource_types = get_terms(['taxonomy' => 'resource_type']);
|
||||
|
||||
if (!empty($resource_types)) :
|
||||
?>
|
||||
<select class="w-fit" name="resource_type">
|
||||
<option value="">All Types</option>
|
||||
<?php foreach ($resource_types as $type) : ?>
|
||||
<option value="<?php echo esc_attr($type->slug); ?>"><?php echo esc_html($type->name); ?></option>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
<?php endif; ?>
|
||||
|
||||
<input class="full-width" type="text" name="search" placeholder="Search resources...">
|
||||
|
||||
<button class="btn btn-primary" type="submit">Search</button>
|
||||
</form>
|
||||
@@ -1,38 +0,0 @@
|
||||
<?php
|
||||
if (!defined('ABSPATH')) { exit; } // Prevent direct access
|
||||
|
||||
if (!empty($resources)) :
|
||||
foreach ($resources as $resource) :
|
||||
$postID = $resource->ID;
|
||||
$postTitle = get_the_title($postID);
|
||||
$postLink = get_permalink($postID);
|
||||
?>
|
||||
<div class="resource-item border border-primary-500 p-4 rounded">
|
||||
<h3 class="text-22px font-semibold leading-2 my-0 py-0"><a class="text-indigo-400" href="<?php echo esc_url($postLink); ?>"><?php echo esc_html($postTitle); ?></a></h3>
|
||||
|
||||
<div class="flex flex-col mt-8">
|
||||
<p class="text-14px leading-tight my-0 py-0"><strong>Resource Type:</strong> <?php echo esc_html(get_the_terms($postID, 'resource_type')[0]->name); ?></p>
|
||||
<p class="text-14px leading-tight my-0 py-0">
|
||||
<strong>Resource Subject(s):</strong>
|
||||
<?php
|
||||
$subjects = get_the_terms($postID, 'resource_subject');
|
||||
$count = count($subjects);
|
||||
$i = 1;
|
||||
|
||||
foreach ($subjects as $subject) {
|
||||
if ($i === $count) {
|
||||
echo esc_html($subject->name);
|
||||
} else {
|
||||
echo esc_html($subject->name) . ', ';
|
||||
}
|
||||
|
||||
$i++;
|
||||
}
|
||||
?>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
<?php else : ?>
|
||||
<p>No resources found.</p>
|
||||
<?php endif; ?>
|
||||
171
templates/style.css
Normal file
171
templates/style.css
Normal file
@@ -0,0 +1,171 @@
|
||||
.search-text {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
margin-bottom: 1.25rem;
|
||||
|
||||
.full-width {
|
||||
border: 1px solid #ccc;
|
||||
border-right: none;
|
||||
font-size: 1rem;
|
||||
padding: .5rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
button {
|
||||
border: 1px solid #ccc;
|
||||
font-size: 1rem;
|
||||
padding: .5rem 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.search-tax {
|
||||
align-items: flex-start;
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1.25rem;
|
||||
position: relative;
|
||||
|
||||
.filter-options { padding-top: .5rem; }
|
||||
|
||||
.filter-options label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
/* Dropdown Container */
|
||||
.custom-dropdown {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Dropdown Button */
|
||||
.custom-dropdown .dropdown-toggle {
|
||||
background: #f0f0f0;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
/* Dropdown Menu (Hidden by Default) */
|
||||
.custom-dropdown .dropdown-menu {
|
||||
background: #fff;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
display: none;
|
||||
left: 0;
|
||||
max-height: fit-content;
|
||||
overflow-y: auto;
|
||||
padding: 10px;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* Show Dropdown Menu */
|
||||
.custom-dropdown.open .dropdown-menu {
|
||||
display: grid;
|
||||
gap: .5rem;
|
||||
grid-template-columns: repeat(auto-fill, minmax(15ch, 1fr));
|
||||
}
|
||||
|
||||
/* Checkbox Labels */
|
||||
.dropdown-menu label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.dropdown-menu input[type="checkbox"] {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
#resource-filter-summary {
|
||||
display: flex;
|
||||
gap: .5rem;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 1.25rem;
|
||||
width: 100%;
|
||||
|
||||
p { margin: 0; padding: 0; }
|
||||
}
|
||||
|
||||
#resource-results {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
#applied-filters {
|
||||
margin-top: 15px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.filter-item {
|
||||
background: #f0f0f0;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 20px;
|
||||
display: inline-block;
|
||||
margin: 5px;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.filter-item button.remove-filter {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #0073aa;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.filter-item button.remove-filter:hover { color: #d63638; }
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.pagination ul {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.pagination a,
|
||||
.pagination span {
|
||||
margin: 0 5px;
|
||||
padding: 8px 12px;
|
||||
text-decoration: none;
|
||||
color: #0073aa;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.pagination a:hover {
|
||||
background: #0073aa;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.pagination .current {
|
||||
background: #0073aa;
|
||||
color: #fff;
|
||||
border-color: #0073aa;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) { /* Tailwind 'md' breakpoint */
|
||||
#resource-results {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) { /* Tailwind 'lg' breakpoint */
|
||||
#resource-results {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user