refactor: move buttons and tags to separate components
This commit is contained in:
Sebin Nyshkim
parent
cd9c1d950d
commit
d5cf84e592
1 changed files with 27 additions and 203 deletions
|
|
@ -1,6 +1,8 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { computed, ref } from 'vue'
|
import { computed, ref } from 'vue'
|
||||||
import type { Kink } from '@/interfaces'
|
import type { Kink } from '@/interfaces'
|
||||||
|
import FilterButton from '@/components/FilterButton.vue'
|
||||||
|
import FilterListTag from '@/components/FilterListTag.vue'
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
data: Kink[]
|
data: Kink[]
|
||||||
|
|
@ -33,44 +35,43 @@ const toLabel = (rating: number) => {
|
||||||
<template>
|
<template>
|
||||||
<div class="filter-list">
|
<div class="filter-list">
|
||||||
<div class="filter-list__filters">
|
<div class="filter-list__filters">
|
||||||
<input type="checkbox" name="rating" id="fave" :value="1" v-model="filterOptions" />
|
<FilterButton name="rating" id="love" kind="love" :value="1" v-model="filterOptions">
|
||||||
<label for="fave" class="filter-list__button love">Love</label>
|
Love
|
||||||
|
</FilterButton>
|
||||||
<input type="checkbox" name="rating" id="like" :value="2" v-model="filterOptions" />
|
<FilterButton name="rating" id="yes" kind="yes" :value="2" v-model="filterOptions">
|
||||||
<label for="like" class="filter-list__button yes">Yes</label>
|
Yes
|
||||||
|
</FilterButton>
|
||||||
<input type="checkbox" name="rating" id="maybe" :value="3" v-model="filterOptions" />
|
<FilterButton name="rating" id="maybe" kind="maybe" :value="3" v-model="filterOptions">
|
||||||
<label for="maybe" class="filter-list__button maybe">Maybe</label>
|
Maybe
|
||||||
|
</FilterButton>
|
||||||
<input type="checkbox" name="rating" id="no" :value="4" v-model="filterOptions" />
|
<FilterButton name="rating" id="no" kind="no" :value="4" v-model="filterOptions">
|
||||||
<label for="no" class="filter-list__button no">No</label>
|
No
|
||||||
|
</FilterButton>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="filter-list__list-container">
|
<div class="filter-list__list-container">
|
||||||
<template v-if="filterOptions.length > 0">
|
<template v-if="filterOptions.length > 0">
|
||||||
<ul class="filter-list__list">
|
<ul class="filter-list__list">
|
||||||
<li v-for="(item, idx) in filteredItems" :key="idx" class="filter-list__item">
|
<li v-for="(item, idx) in filteredItems" :key="idx" class="filter-list__item">
|
||||||
<span
|
<FilterListTag
|
||||||
v-if="filterOptions.length > 1"
|
v-if="filterOptions.length > 1"
|
||||||
class="filter-list__tag category"
|
class="category"
|
||||||
:class="toLabel(item.rating)?.toLowerCase()"
|
:type="toLabel(item.rating)?.toLowerCase()"
|
||||||
>
|
>
|
||||||
<span>
|
<span>{{ toLabel(item.rating) }}</span>
|
||||||
{{ toLabel(item.rating) }}
|
</FilterListTag>
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
<span class="filter-list__item-name">
|
<span class="filter-list__item-name">
|
||||||
<span>
|
<span>{{ item.name }}</span>
|
||||||
{{ item.name }}
|
|
||||||
</span>
|
|
||||||
</span>
|
</span>
|
||||||
<span class="filter-list__tag receive">
|
|
||||||
|
<FilterListTag type="receive">
|
||||||
<span v-if="item.receive">receive</span>
|
<span v-if="item.receive">receive</span>
|
||||||
</span>
|
</FilterListTag>
|
||||||
<span class="filter-list__tag give">
|
|
||||||
|
<FilterListTag type="give">
|
||||||
<span v-if="item.give">give</span>
|
<span v-if="item.give">give</span>
|
||||||
</span>
|
</FilterListTag>
|
||||||
<!-- <span class="filter-list__tag-list"> </span> -->
|
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -105,115 +106,6 @@ const toLabel = (rating: number) => {
|
||||||
|
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
padding: 0.5rem 0.75rem;
|
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 {
|
&__intro-msg {
|
||||||
|
|
@ -254,73 +146,5 @@ const toLabel = (rating: number) => {
|
||||||
flex: 1 0 0;
|
flex: 1 0 0;
|
||||||
line-height: 2;
|
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>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue