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