-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
6 changed files
with
190 additions
and
105 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,12 @@ | ||
| { | ||
| "recommendations": [ | ||
| "charliermarsh.ruff" | ||
| "charliermarsh.ruff", | ||
| "akamud.vscode-theme-onedark", | ||
| "oven.bun-vscode", | ||
| "mhutchie.git-graph", | ||
| "github.vscode-pull-request-github", | ||
| "ms-python.python", | ||
| "robbowen.synthwave-vscode", | ||
| "bradlc.vscode-tailwindcss" | ||
| ] | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,41 +1,134 @@ | ||
| {% load wagtailcore_tags wagtailimages_tags user_tags %} | ||
|
|
||
| <div class="max-w-3xl md:max-w-5xl mx-auto p-4 mb-4 drop-shadow-lg"> | ||
|
|
||
| <form method="get" action="" class=" bg-blue-800 p-4 rounded-lg"> | ||
| <h3 class="text-lg font-semibold mb-4 text-white">Filter by Author</h3> | ||
| <div class="flex flex-wrap gap-2 mb-4"> | ||
| {% for author in authors %} | ||
| <button type="submit" name="author" value="{{ author.username }}" title="{% user_display_name author %}" class="flex bg-white justify-center items-center border-4 aspect-square rounded-full {% if request.GET.author == author.username %} border-yellow-500 {% else %} border-transparent {% endif %}"> | ||
| {% if author.wagtail_userprofile.avatar %} | ||
| {% user_avatar author 'aspect-square w-8 h-8 rounded-full object-cover' %} | ||
| {% else %} | ||
| <svg class="w-8 h-8 rounded-full object-cover" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | ||
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 13a3 3 0 100-6 3 3 0 000 6z"></path> | ||
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21v-2a4 4 0 00-4-4H7a4 4 0 00-4 4v2"></path> | ||
| </svg> | ||
| {% endif %} | ||
| <span class="sr-only">{{ author.get_full_name|default:author.username }}</span> | ||
| </button> | ||
| {% endfor %} | ||
| </div> | ||
|
|
||
| <h3 class="text-lg font-semibold mb-4 text-white">Filter by Date</h3> | ||
| <div class="flex flex-wrap gap-4 mb-4"> | ||
| <div class="max-w-3xl md:max-w-5xl mx-auto drop-shadow-lg"> | ||
|
|
||
| <div class="transition p-4 rounded-lg relative min-h-16"> | ||
|
|
||
| <form id="filterForm" method="get" action="" class="flex flex-col flex-wrap sm:flex-row gap-2 md:items-end"> | ||
| <div> | ||
| <label for="date_from" class="block text-sm font-medium text-white mb-1">From:</label> | ||
| <input type="date" id="date_from" name="date_from" value="{{ request.GET.date_from }}" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"> | ||
| <h3 class="sr-only">Filter by Author</h3> | ||
| <label for="author" class="block text-sm font-medium text-white mb-1">Author:</label> | ||
| <div class="flex flex-wrap gap-2"> | ||
| {% for author in authors %} | ||
| <button type="button" name="author" value="{{ author.username }}" title="{% user_display_name author %}" class="flex bg-white justify-center items-center border-4 aspect-square rounded-full shadow-sm {% if request.GET.author == author.username %} border-yellow-500 {% else %} border-transparent {% endif %}"> | ||
| {% if author.wagtail_userprofile.avatar %} | ||
| {% user_avatar author 'aspect-square w-8 h-8 rounded-full object-cover' %} | ||
| {% else %} | ||
| <svg class="w-8 h-8 rounded-full object-cover" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | ||
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 13a3 3 0 100-6 3 3 0 000 6z"></path> | ||
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21v-2a4 4 0 00-4-4H7a4 4 0 00-4 4v2"></path> | ||
| </svg> | ||
| {% endif %} | ||
| <span class="sr-only">{{ author.get_full_name|default:author.username }}</span> | ||
| </button> | ||
| {% endfor %} | ||
| </div> | ||
| </div> | ||
|
|
||
| <div> | ||
| <label for="date_to" class="block text-sm font-medium text-white mb-1">To:</label> | ||
| <input type="date" id="date_to" name="date_to" value="{{ request.GET.date_to }}" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"> | ||
| <h3 class="sr-only">Filter by Date</h3> | ||
| <div class="flex flex-wrap gap-2"> | ||
| <div> | ||
| <label for="date_from" class="block text-sm font-medium text-white mb-1">From:</label> | ||
| <input type="date" id="date_from" name="date_from" value="{{ request.GET.date_from }}" class="mt-1 block w-full h-10 rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"> | ||
| </div> | ||
| <div> | ||
| <label for="date_to" class="block text-sm font-medium text-white mb-1">To:</label> | ||
| <input type="date" id="date_to" name="date_to" value="{{ request.GET.date_to }}" class="mt-1 block w-full h-10 rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="max-w-xs"> | ||
| <h3 class="sr-only">Search term</h3> | ||
| <label for="query" class="block text-sm font-medium text-white mb-1">Search:</label> | ||
| <input type="query" id="query" name="query" placecholder="Search query" value="{{ request.GET.query }}" class="mt-1 block w-full h-10 rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"> | ||
| </div> | ||
|
|
||
| <div class="flex justify-end self-end ml-auto items-center gap-4 md:gap-2 mt-4 md:mt-0 w-full md:w-auto"> | ||
| <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded transition opacity-50 cursor-not-allowed" id="submitButton" disabled="false"> | ||
| Search | ||
| <span>→</span> | ||
| </button> | ||
| <a href="{% pageurl page %}" class="bg-slate-300 text-gray-700 px-4 py-2 rounded transition {% if not active_filters %} opacity-50 cursor-not-allowed {% else %} hover:bg-slate-200 {% endif %}" id="resetButton"> | ||
| Reset | ||
| <span>×</span> | ||
| </a> | ||
| </div> | ||
| </div> | ||
| </form> | ||
| {% if context.active_filters %} | ||
| <span>Active filters exist</span> | ||
| {% endif %} | ||
| </div> | ||
| </div> | ||
|
|
||
| <script> | ||
| document.addEventListener('DOMContentLoaded', function() { | ||
|
|
||
| const form = document.getElementById('filterForm'); | ||
| const submitButton = document.getElementById('submitButton'); | ||
| const resetButton = document.getElementById('resetButton'); | ||
|
|
||
| function enableSubmitButton() { | ||
| submitButton.disabled = false; | ||
| submitButton.classList.remove('cursor-not-allowed', 'opacity-50'); | ||
| submitButton.classList.add('hover:bg-blue-600'); | ||
| } | ||
|
|
||
| // if the form values change, enable the submit button | ||
| document.querySelectorAll('input').forEach(input => { | ||
|
|
||
| if (input.type === 'text') { | ||
| input.addEventListener('input', enableSubmitButton); | ||
| } | ||
|
|
||
| input.addEventListener('change', enableSubmitButton); | ||
| }); | ||
|
|
||
| const authorButtons = document.querySelectorAll('button[name="author"]'); | ||
|
|
||
| authorButtons.forEach(button => { | ||
| button.addEventListener('click', function(event) { | ||
| event.preventDefault(); | ||
|
|
||
| // check if active by getting author url param | ||
| const isActive = new URLSearchParams(window.location.search).get('author') === button.value; | ||
|
|
||
| // if active, remove the author param | ||
| if (isActive) { | ||
| const url = new URL(window.location.href); | ||
| url.searchParams.delete('author'); | ||
| window.location.href = url; | ||
| } else { | ||
| // if not active, add the author param | ||
| const url = new URL(window.location.href); | ||
| url.searchParams.set('author', button.value); | ||
| window.location.href = url; | ||
| } | ||
| }); | ||
| }); | ||
|
|
||
| form.addEventListener('submit', function(event) { | ||
| event.preventDefault(); | ||
| const url = new URL(window.location.href); | ||
| const formData = new FormData(form); | ||
|
|
||
| for (const [key, value] of formData) { | ||
| if (value) { | ||
| url.searchParams.set(key, value); | ||
| } else { | ||
| url.searchParams.delete(key); | ||
| } | ||
| } | ||
|
|
||
| window.location.href = url; | ||
| }); | ||
|
|
||
| <div class="flex justify-between items-center"> | ||
| <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition-colors">Apply Filters</button> | ||
| <a href="{% pageurl page %}" class="bg-gray-300 text-gray-700 px-4 py-2 rounded hover:bg-gray-400 transition-colors">Reset Filters</a> | ||
| </div> | ||
| </form> | ||
| resetButton.addEventListener('click', function(event) { | ||
| if (resetButton.classList.contains('cursor-not-allowed')) { | ||
| event.preventDefault(); | ||
| } | ||
| }); | ||
|
|
||
| </div> | ||
| }); | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.