Einanas
commented
4 weeks ago Analyseren en Ontwerpen
The filter buttons that are made by the 2nd years last year, was missing some styling, UI (userinteraction) or something with animation. In short, it looked like it was missing something and looked empty.
This is how it looked before:
Design Sketches
So I made three different kinds of sketches for a filter button. **- The first one is just simple where you press the filter and the plus icon/svg changes into checked as to indicate the filter is selected.
- The second has a little bit of animation/ui. What happens is that if you press on the "filteren" button with the option icon/svg, the filter buttons come out of hiding one by one and goes to their assigned places for the user to choose from.
- The third one is just a simple dropdown filter where you have to press on "filter" to choose your filter.**
I have shared my idea with my team and the client. They all appeared to like the idea of the second sketch. So i went to work.
The Second Sketch
Before i went to work, i wanted to figure out what code the 2nd years student last year used to make the filter buttons. They seemed to have worked with HTML CSS and JavaScript. They used JavaScript to give the "filter" button an loading(state) animation to show the user that the filter button is about to work.
<script>
let filter = $page.url.searchParams.getAll("categorie") || [];
let isLoading = false;
function applyFilter() {
return function (event) {
event.preventDefault();
isLoading = true; // Start loading animation
const formData = new FormData(event.target);
const categorie = formData.getAll("categorie");
const url = new URL(window.location);
url.searchParams.delete("categorie");
categorie.forEach((slug) => url.searchParams.append("categorie", slug));
setTimeout(() => {
window.location = url;
}, 1000);
};
}
</script>They also used <label> and <input type="checkbox"> to make those buttons.
<form method="GET" action="/tekenmethodes#methodes" on:submit={applyFilter()}>
<!-- <button class="filteroption">Filter
<svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M20 6H10m0 0a2 2 0 1 0-4 0m4 0a2 2 0 1 1-4 0m0 0H4m16 6h-2m0 0a2 2 0 1 0-4 0m4 0a2 2 0 1 1-4 0m0 0H4m16 6H10m0 0a2 2 0 1 0-4 0m4 0a2 2 0 1 1-4 0m0 0H4"/>
</svg>
</button> -->
{#each data.categories as category}
<label for={category.slug}>
<input
type="checkbox"
id={category.slug}
value={category.slug}
checked={filter.includes(category.slug)}
name="categorie"
tabindex="0"
/>
{category.title}
</label>
{/each}
{#if isLoading}
<div class="loading-spinner"></div>
{:else}
<button type="submit"> Pas filters toe </button>
{/if}
</form>Now i have to figure out a way to change the css part for the animation i intend to make.
The design of the Methods page filter could use some work. A drop down instead of check boxes perhaps?