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

feat: reorganize list tag positioning

Browse source
This commit is contained in:
Sebin Nyshkim 2023-07-22 01:28:08 +02:00
parent ddde6df30b
commit 30a573e9cf
1 changed files with 56 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

81
src/components/FilteredList.vue
View file

@ -50,20 +50,27 @@ const toLabel = (rating: number) => {
<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 class="filter-list__item-name"> <span
{{ item.name }} v-if="filterOptions.length > 1"
<span class="filter-list__tag category"
v-if="filterOptions.length > 1" :class="toLabel(item.rating)?.toLowerCase()"
class="filter-list__tag" >
:class="toLabel(item.rating)?.toLowerCase()" <span>
>
{{ toLabel(item.rating) }} {{ toLabel(item.rating) }}
</span> </span>
</span> </span>
<span class="filter-list__tag-list"> <span class="filter-list__item-name">
<span v-if="item.receive" class="filter-list__tag receive">receive</span> <span>
<span v-if="item.give" class="filter-list__tag give">give</span> {{ item.name }}
</span>
</span> </span>
<span class="filter-list__tag receive">
<span v-if="item.receive">receive</span>
</span>
<span class="filter-list__tag give">
<span v-if="item.give">give</span>
</span>
<!-- <span class="filter-list__tag-list"> </span> -->
</li> </li>
</ul> </ul>
</template> </template>
@ -80,6 +87,7 @@ const toLabel = (rating: number) => {
background: var(--quickfacts-background); background: var(--quickfacts-background);
border-radius: 1rem; border-radius: 1rem;
box-shadow: var(--container-box-shadow); box-shadow: var(--container-box-shadow);
overflow: hidden;
&__options { &__options {
display: flex; display: flex;
@ -209,7 +217,7 @@ const toLabel = (rating: number) => {
} }
&__intro-msg { &__intro-msg {
font-size: 3rem; font-size: 2rem;
font-weight: bold; font-weight: bold;
font-style: italic; font-style: italic;
text-align: center; text-align: center;
@ -233,6 +241,7 @@ const toLabel = (rating: number) => {
flex-flow: row nowrap; flex-flow: row nowrap;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
gap: 0.5rem;
padding: 0.25rem 0.875rem; padding: 0.25rem 0.875rem;
@ -242,6 +251,7 @@ const toLabel = (rating: number) => {
} }
&__item-name { &__item-name {
flex: 1 0 0;
line-height: 2; line-height: 2;
} }
@ -254,41 +264,62 @@ const toLabel = (rating: number) => {
} }
&__tag { &__tag {
font-size: 0.75rem; flex: 0 0 0;
font-weight: bold;
background: rgba(#f5f5f5, 0.7);
border: 1px solid #f5f5f5;
border-radius: 1em;
padding: 0 0.5em;
&.love { 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); background: var(--theme-c-love);
border: 1px solid var(--theme-c-love-dark); border: 1px solid var(--theme-c-love-dark);
} }
&.yes { &.yes span {
background: var(--theme-c-yes); background: var(--theme-c-yes);
border: 1px solid var(--theme-c-yes-dark); border: 1px solid var(--theme-c-yes-dark);
} }
&.maybe { &.maybe span {
background: var(--theme-c-maybe); background: var(--theme-c-maybe);
border: 1px solid var(--theme-c-maybe-dark); border: 1px solid var(--theme-c-maybe-dark);
} }
&.no { &.no span {
background: var(--theme-c-no); background: var(--theme-c-no);
border: 1px solid var(--theme-c-no-dark); border: 1px solid var(--theme-c-no-dark);
} }
&.category {
flex: 0 0 3rem;
}
&.receive { &.receive {
background: var(--theme-c-receive); flex: 0 0 3.125rem;
border: 1px solid var(--theme-c-receive);
span {
background: var(--theme-c-receive);
border: 1px solid var(--theme-c-receive);
}
} }
&.give { &.give {
background: var(--theme-c-give); flex: 0 0 2.125rem;
border: 1px solid var(--theme-c-give);
span {
background: var(--theme-c-give);
border: 1px solid var(--theme-c-give);
}
} }
} }
} }