SebinNyshkim/sebin-reference
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: move buttons and tags to separate components

Browse source
This commit is contained in:
Sebin Nyshkim 2023-07-22 02:14:22 +02:00
parent cd9c1d950d
commit d5cf84e592
1 changed files with 27 additions and 203 deletions
Download patch file Download diff file Expand all files Collapse all files

230
src/components/FilteredList.vue
View file

@ -1,6 +1,8 @@
<script setup lang="ts">
import { computed, ref } from 'vue'
import type { Kink } from '@/interfaces'
import FilterButton from '@/components/FilterButton.vue'
import FilterListTag from '@/components/FilterListTag.vue'
interface Props {
data: Kink[]
@ -33,44 +35,43 @@ const toLabel = (rating: number) => {
<template>
<div class="filter-list">
<div class="filter-list__filters">
<input type="checkbox" name="rating" id="fave" :value="1" v-model="filterOptions" />
<label for="fave" class="filter-list__button love">Love</label>
<input type="checkbox" name="rating" id="like" :value="2" v-model="filterOptions" />
<label for="like" class="filter-list__button yes">Yes</label>
<input type="checkbox" name="rating" id="maybe" :value="3" v-model="filterOptions" />
<label for="maybe" class="filter-list__button maybe">Maybe</label>
<input type="checkbox" name="rating" id="no" :value="4" v-model="filterOptions" />
<label for="no" class="filter-list__button no">No</label>
<FilterButton name="rating" id="love" kind="love" :value="1" v-model="filterOptions">
Love
</FilterButton>
<FilterButton name="rating" id="yes" kind="yes" :value="2" v-model="filterOptions">
Yes
</FilterButton>
<FilterButton name="rating" id="maybe" kind="maybe" :value="3" v-model="filterOptions">
Maybe
</FilterButton>
<FilterButton name="rating" id="no" kind="no" :value="4" v-model="filterOptions">
No
</FilterButton>
</div>
<div class="filter-list__list-container">
<template v-if="filterOptions.length > 0">
<ul class="filter-list__list">
<li v-for="(item, idx) in filteredItems" :key="idx" class="filter-list__item">
<span
<FilterListTag
v-if="filterOptions.length > 1"
class="filter-list__tag category"
:class="toLabel(item.rating)?.toLowerCase()"
class="category"
:type="toLabel(item.rating)?.toLowerCase()"
>
<span>
{{ toLabel(item.rating) }}
</span>
</span>
<span>{{ toLabel(item.rating) }}</span>
</FilterListTag>
<span class="filter-list__item-name">
<span>
{{ item.name }}
</span>
<span>{{ item.name }}</span>
</span>
<span class="filter-list__tag receive">
<FilterListTag type="receive">
<span v-if="item.receive">receive</span>
</span>
<span class="filter-list__tag give">
</FilterListTag>
<FilterListTag type="give">
<span v-if="item.give">give</span>
</span>
<!-- <span class="filter-list__tag-list"> </span> -->
</FilterListTag>
</li>
</ul>
</template>
@ -105,115 +106,6 @@ const toLabel = (rating: number) => {
border-collapse: collapse;
padding: 0.5rem 0.75rem;
input {
display: none;
&:checked + label {
top: 0.25rem;
box-shadow: 0 0.25rem 0 0 var(--color-button-box-shadow);
&.love {
box-shadow: 0 0.25rem 0 0 var(--theme-c-love-dark);
}
&.yes {
box-shadow: 0 0.25rem 0 0 var(--theme-c-yes-dark);
}
&.maybe {
box-shadow: 0 0.25rem 0 0 var(--theme-c-maybe-dark);
}
&.no {
box-shadow: 0 0.25rem 0 0 var(--theme-c-no-dark);
}
}
}
}
&__button {
flex: 1 1 0;
position: relative;
top: 0;
background-color: var(--color-button);
font-weight: 700;
text-decoration: none;
text-align: center;
margin: 0.5rem 0;
border-radius: 0.25rem;
padding: 0.5rem 1rem;
box-shadow: 0 0.5rem 0 0 var(--color-button-box-shadow);
transition: all 0.1s ease-out;
&:hover {
cursor: pointer;
top: -0.25rem;
box-shadow: 0 0.75rem 0 0 var(--color-button-box-shadow);
}
&:active {
top: 0.25rem;
box-shadow: 0 0.25rem 0 0 var(--color-button-box-shadow);
}
&.love {
background-color: var(--theme-c-love);
box-shadow: 0 0.5rem 0 0 var(--theme-c-love-dark);
&:hover {
box-shadow: 0 0.75rem 0 0 var(--theme-c-love-dark);
}
&:active {
box-shadow: 0 0.25rem 0 0 var(--theme-c-love-dark);
}
}
&.yes {
background-color: var(--theme-c-yes);
box-shadow: 0 0.5rem 0 0 var(--theme-c-yes-dark);
&:hover {
box-shadow: 0 0.75rem 0 0 var(--theme-c-yes-dark);
}
&:active {
box-shadow: 0 0.25rem 0 0 var(--theme-c-yes-dark);
}
}
&.maybe {
background-color: var(--theme-c-maybe);
box-shadow: 0 0.5rem 0 0 var(--theme-c-maybe-dark);
&:hover {
box-shadow: 0 0.75rem 0 0 var(--theme-c-maybe-dark);
}
&:active {
box-shadow: 0 0.25rem 0 0 var(--theme-c-maybe-dark);
}
}
&.no {
background-color: var(--theme-c-no);
box-shadow: 0 0.5rem 0 0 var(--theme-c-no-dark);
&:hover {
box-shadow: 0 0.75rem 0 0 var(--theme-c-no-dark);
}
&:active {
box-shadow: 0 0.25rem 0 0 var(--theme-c-no-dark);
}
}
}
&__intro-msg {
@ -254,73 +146,5 @@ const toLabel = (rating: number) => {
flex: 1 0 0;
line-height: 2;
}
&__tag-list {
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
gap: 0.5rem;
}
&__tag {
flex: 0 0 0;
span {
display: block;
font-size: 0.75rem;
font-weight: bold;
text-align: center;
background: rgba(#f5f5f5, 0.7);
border: 1px solid #f5f5f5;
border-radius: 1em;
padding: 0 0.5em;
}
&.love span {
background: var(--theme-c-love);
border: 1px solid var(--theme-c-love-dark);
}
&.yes span {
background: var(--theme-c-yes);
border: 1px solid var(--theme-c-yes-dark);
}
&.maybe span {
background: var(--theme-c-maybe);
border: 1px solid var(--theme-c-maybe-dark);
}
&.no span {
background: var(--theme-c-no);
border: 1px solid var(--theme-c-no-dark);
}
&.category {
flex: 0 0 3rem;
}
&.receive {
flex: 0 0 3.125rem;
span {
background: var(--theme-c-receive);
border: 1px solid var(--theme-c-receive);
}
}
&.give {
flex: 0 0 2.125rem;
span {
background: var(--theme-c-give);
border: 1px solid var(--theme-c-give);
}
}
}
}
</style>