From 30a573e9cfd68485bad45776931c20cc2f071c27 Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Sat, 22 Jul 2023 01:28:08 +0200
Subject: [PATCH] feat: reorganize list tag positioning

---
 src/components/FilteredList.vue | 81 +++++++++++++++++++++++----------
 1 file changed, 56 insertions(+), 25 deletions(-)

diff --git a/src/components/FilteredList.vue b/src/components/FilteredList.vue
index a261736..a4d09ca 100644
--- a/src/components/FilteredList.vue
+++ b/src/components/FilteredList.vue
@@ -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);
+      }
     }
   }
 }