feat: Added filtering by optional tags in the main page. Created TagFilter... #40
@@ -1,150 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
import crossUrl from "$lib/assets/cross.svg";
|
|
||||||
|
|
||||||
export let selectedTags: string[] = [];
|
|
||||||
export let tagFilter: string;
|
|
||||||
export let tagFilterElem;
|
|
||||||
export let filteredTags;
|
|
||||||
export let dropdownVisible: boolean;
|
|
||||||
export let deleteTag;
|
|
||||||
export let addTag;
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<form>
|
|
||||||
<div class="tagDisplay">
|
|
||||||
{#each selectedTags as tagName (tagName)}
|
|
||||||
<button class="tag" onclick={deleteTag(tagName)} type="button">
|
|
||||||
{tagName}
|
|
||||||
<img src={crossUrl} alt="delete" /></button
|
|
||||||
>
|
|
||||||
{/each}
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
name="tagInput"
|
|
||||||
class="tagInput"
|
|
||||||
bind:value={tagFilter}
|
|
||||||
bind:this={tagFilterElem}
|
|
||||||
onfocus={() => {
|
|
||||||
dropdownVisible = true;
|
|
||||||
}}
|
|
||||||
onblur={() => {
|
|
||||||
dropdownVisible = false;
|
|
||||||
}}
|
|
||||||
onkeypress={(event) => {
|
|
||||||
if (event.key === "Enter") {
|
|
||||||
const tag = filteredTags[0];
|
|
||||||
if (tag) addTag(tag)();
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
placeholder="Filter by tags..."
|
|
||||||
/>
|
|
||||||
{#if dropdownVisible}
|
|
||||||
<div class="tagDropdown">
|
|
||||||
{#each filteredTags as avaliableTag (avaliableTag)}
|
|
||||||
<button
|
|
||||||
class="avaliableTag"
|
|
||||||
onclick={addTag(avaliableTag)}
|
|
||||||
onmousedown={(e) => {
|
|
||||||
// Keep input focused
|
|
||||||
e.preventDefault();
|
|
||||||
e.stopPropagation();
|
|
||||||
}}
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
{avaliableTag}
|
|
||||||
</button>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
form {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
padding: 1.5rem;
|
|
||||||
gap: 0.5rem;
|
|
||||||
max-width: 32rem;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tagDisplay {
|
|
||||||
display: flex;
|
|
||||||
gap: 0.4rem;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
align-items: left;
|
|
||||||
justify-content: left;
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
padding: 0.5rem;
|
|
||||||
border-radius: 0.5rem;
|
|
||||||
border: 2px solid #eaffeb;
|
|
||||||
background: none;
|
|
||||||
color: #eaffeb;
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
.tagInput {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: none;
|
|
||||||
color: #eaffeb;
|
|
||||||
font-size: 1rem;
|
|
||||||
border: none;
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
::placeholder {
|
|
||||||
color: #859a90;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
.tag {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
border-radius: 0.25rem;
|
|
||||||
background-color: #2e4653;
|
|
||||||
color: #eaffeb;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
cursor: pointer;
|
|
||||||
border-width: 0rem;
|
|
||||||
}
|
|
||||||
.tag img {
|
|
||||||
width: 1rem;
|
|
||||||
height: 1rem;
|
|
||||||
margin-left: 0.2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tagDropdown {
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
gap: 0.4rem;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
position: absolute;
|
|
||||||
background-color: #2e4653;
|
|
||||||
box-shadow: 1px 1px 0.5rem rgba(0, 0, 0, 0.5);
|
|
||||||
border-radius: 0.5rem;
|
|
||||||
overflow-y: auto;
|
|
||||||
max-height: 10rem;
|
|
||||||
top: 100%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.avaliableTag {
|
|
||||||
width: 100%;
|
|
||||||
text-align: left;
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
color: #eaffeb;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
margin: 0%;
|
|
||||||
padding: 0 0.8rem 0.4rem;
|
|
||||||
}
|
|
||||||
.avaliableTag:first-child {
|
|
||||||
padding-top: 0.6rem;
|
|
||||||
background-color: hsl(201, 26%, 60%);
|
|
||||||
}
|
|
||||||
.avaliableTag:last-child {
|
|
||||||
padding-bottom: 0.6rem;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@@ -3,7 +3,6 @@
|
|||||||
import defaultImg from "$lib/assets/study_space.png";
|
import defaultImg from "$lib/assets/study_space.png";
|
||||||
import crossUrl from "$lib/assets/cross.svg";
|
import crossUrl from "$lib/assets/cross.svg";
|
||||||
import Navbar from "$lib/components/Navbar.svelte";
|
import Navbar from "$lib/components/Navbar.svelte";
|
||||||
import TagFilter from "$lib/components/inputs/TagFilter.svelte";
|
|
||||||
import { allTags } from "$lib";
|
import { allTags } from "$lib";
|
||||||
|
|
||||||
const { data } = $props();
|
const { data } = $props();
|
||||||
@@ -59,15 +58,54 @@
|
|||||||
|
|
||||||
<main>
|
<main>
|
||||||
<div class="tag-filter-container">
|
<div class="tag-filter-container">
|
||||||
<TagFilter
|
<form>
|
||||||
{selectedTags}
|
<div class="tagDisplay">
|
||||||
{tagFilter}
|
{#each selectedTags as tagName (tagName)}
|
||||||
{tagFilterElem}
|
<button class="tag" onclick={deleteTag(tagName)} type="button">
|
||||||
{filteredTags}
|
{tagName}
|
||||||
{dropdownVisible}
|
<img src={crossUrl} alt="delete" /></button
|
||||||
{deleteTag}
|
>
|
||||||
{addTag}
|
{/each}
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="tagInput"
|
||||||
|
class="tagInput"
|
||||||
|
bind:value={tagFilter}
|
||||||
|
bind:this={tagFilterElem}
|
||||||
|
onfocus={() => {
|
||||||
|
dropdownVisible = true;
|
||||||
|
}}
|
||||||
|
onblur={() => {
|
||||||
|
dropdownVisible = false;
|
||||||
|
}}
|
||||||
|
onkeypress={(event) => {
|
||||||
|
if (event.key === "Enter") {
|
||||||
|
const tag = filteredTags[0];
|
||||||
|
if (tag) addTag(tag)();
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
placeholder="Search by tags..."
|
||||||
/>
|
/>
|
||||||
|
{#if dropdownVisible}
|
||||||
|
<div class="tagDropdown">
|
||||||
|
{#each filteredTags as avaliableTag (avaliableTag)}
|
||||||
|
<button
|
||||||
|
class="avaliableTag"
|
||||||
|
onclick={addTag(avaliableTag)}
|
||||||
|
onmousedown={(e) => {
|
||||||
|
// Keep input focused
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
}}
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
{avaliableTag}
|
||||||
|
</button>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{#each filteredStudySpaces() as studySpace (studySpace.id)}
|
{#each filteredStudySpaces() as studySpace (studySpace.id)}
|
||||||
@@ -109,6 +147,94 @@
|
|||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
form {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 1.5rem;
|
||||||
|
gap: 0.5rem;
|
||||||
|
max-width: 32rem;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tagDisplay {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.4rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: left;
|
||||||
|
justify-content: left;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
padding: 0.5rem;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
border: 2px solid #eaffeb;
|
||||||
|
background: none;
|
||||||
|
color: #eaffeb;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
.tagInput {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: none;
|
||||||
|
color: #eaffeb;
|
||||||
|
font-size: 1rem;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
::placeholder {
|
||||||
|
color: #859a90;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.tag {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
background-color: #2e4653;
|
||||||
|
color: #eaffeb;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
cursor: pointer;
|
||||||
|
border-width: 0rem;
|
||||||
|
}
|
||||||
|
.tag img {
|
||||||
|
width: 1rem;
|
||||||
|
height: 1rem;
|
||||||
|
margin-left: 0.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tagDropdown {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
gap: 0.4rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
position: absolute;
|
||||||
|
background-color: #2e4653;
|
||||||
|
box-shadow: 1px 1px 0.5rem rgba(0, 0, 0, 0.5);
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
overflow-y: auto;
|
||||||
|
max-height: 10rem;
|
||||||
|
top: 100%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.avaliableTag {
|
||||||
|
width: 100%;
|
||||||
|
text-align: left;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
color: #eaffeb;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
margin: 0%;
|
||||||
|
padding: 0 0.8rem 0.4rem;
|
||||||
|
}
|
||||||
|
.avaliableTag:first-child {
|
||||||
|
padding-top: 0.6rem;
|
||||||
|
background-color: hsl(201, 26%, 60%);
|
||||||
|
}
|
||||||
|
.avaliableTag:last-child {
|
||||||
|
padding-bottom: 0.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 20rem) {
|
@media (max-width: 20rem) {
|
||||||
main {
|
main {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
|
|||||||
Reference in New Issue
Block a user