From 4985f3084e00ba03ca0a01cf77ea9ec2b4d1f266 Mon Sep 17 00:00:00 2001
From: Seraph91P <maximilianebert1991@gmail.com>
Date: Tue, 13 Aug 2024 11:29:36 +0200
Subject: [PATCH] feat(user): changed tags to be more responisve and made room
 for the action buttons

---
 src/views/UserView.vue | 98 +++++++++++++++++++-----------------------
 1 file changed, 44 insertions(+), 54 deletions(-)

diff --git a/src/views/UserView.vue b/src/views/UserView.vue
index a03ed0a..2df393b 100644
--- a/src/views/UserView.vue
+++ b/src/views/UserView.vue
@@ -130,71 +130,60 @@ export default {
       />
 
       <div class="w-full flex-wrap md:p-3">
-        <div class="inline-flex md:w-4/5">
-          <div class="w-20 h-20 relative">
-            <img
-              :src="data.pfp"
-              class="rounded-full border-4 p-0.5 w-auto h-20"
-              :style="`border-color: ${data.colorHex};`"
-            />
-
-            <span
-              v-if="data.isLive"
-              class="absolute flex left-1/2 translate-x-[-50%] whitespace-nowrap uppercase top-16 bg-red font-bold text-sm p-1.5 py-0.5 rounded-md"
-              >{{ $t('main.live') }}</span
-            >
-          </div>
-
-          <div class="ml-3 content-between">
-            <div class="">
-              <h1 class="text-2xl md:text-4xl font-bold inline-block">{{ data.username }}</h1>
-              <a v-if="$route.query['audio-only'] !== 'true'" href="?audio-only=true">
-                <v-icon name="bi-headphones" class="ml-1 w-8 h-8 inline-block"></v-icon>
-              </a>
-              <a v-else :href="$route.params.username.toString()">
-                <v-icon name="bi-camera-video-fill" class="ml-1 w-8 h-8 inline-block"></v-icon>
-              </a>
+        <div class="flex flex-col md:flex-row justify-between">
+          <div class="md:w-3/5">
+            <div class="inline-flex">
+              <div class="w-20 h-20 relative">
+                <img
+                  :src="data.pfp"
+                  class="rounded-full border-4 p-0.5 w-auto h-20"
+                  :style="`border-color: ${data.colorHex};`"
+                />
+                <span
+                  v-if="data.isLive"
+                  class="absolute flex left-1/2 translate-x-[-50%] whitespace-nowrap uppercase top-16 bg-red font-bold text-sm p-1.5 py-0.5 rounded-md"
+                >{{ $t('main.live') }}</span>
+              </div>
+              <div class="ml-3 content-between">
+                <div>
+                  <h1 class="text-2xl md:text-4xl font-bold inline-block">{{ data.username }}</h1>
+                  <a v-if="$route.query['audio-only'] !== 'true'" href="?audio-only=true">
+                    <v-icon name="bi-headphones" class="ml-1 w-8 h-8 inline-block"></v-icon>
+                  </a>
+                  <a v-else :href="$route.params.username.toString()">
+                    <v-icon name="bi-camera-video-fill" class="ml-1 w-8 h-8 inline-block"></v-icon>
+                  </a>
+                </div>
+                <div v-if="data.stream" class="w-full md:w-[17rem]">
+                  <p class="text-sm font-bold text-neutral self-end">
+                    {{ truncate(data.stream.title, 130) }}
+                  </p>
+                </div>
+              </div>
             </div>
-            <div v-if="data.stream" class="w-[14rem] md:w-[17rem]">
-              <p class="text-sm font-bold text-neutral self-end">
-                {{ truncate(data.stream.title, 130) }}
+          </div>
+          <div class="md:w-2/5 mt-4 md:mt-0">
+            <div v-if="!data.isLive" class="w-full">
+              <p class="font-bold bg-overlay0 p-3 py-2 rounded-lg w-min float-right border-2 border-red">
+                OFFLINE
               </p>
             </div>
+            <div v-else class="w-full">
+              <ul class="flex flex-wrap justify-end gap-2 text-xs font-bold" v-if="getSetting('streamTagsVisible')">
+                <li v-for="tag in data.stream!.tags" :key="tag" class="inline-flex bg-overlay0 p-1.5 px-2 rounded-md">
+                  {{ tag }}
+                </li>
+              </ul>
+            </div>
           </div>
         </div>
-
-        <div class="flex-col md:inline-flex md:w-1/5 float-right h-full text-right">
-          <div v-if="!data.isLive" class="w-full">
-            <p
-              class="font-bold bg-overlay0 p-3 py-2 rounded-lg w-min float-right border-2 border-red"
-            >
-              OFFLINE
-            </p>
-          </div>
-          <div v-else class="w-full">
-            <ul
-              class="text-xs font-bold text-left md:text-right space-x-1 space-y-1 overflow-y-auto"
-              v-if="getSetting('streamTagsVisible')"
-            >
-              <li
-                v-for="tag in data.stream!.tags"
-                :key="tag"
-                class="inline-flex bg-overlay0 p-1.5 px-2 rounded-md"
-              >
-                {{ tag }}
-              </li>
-            </ul>
-          </div>
-        </div>
-
-        <div class="flex justify-between items-center">
+        <div class="flex justify-between items-center mt-4">
           <div class="pt-2 inline-flex">
             <follow-button :username="data.login"></follow-button>
             <p class="align-baseline font-bold ml-3">
               {{ abbreviate(data.followers) }} {{ $t('main.followers') }}
             </p>
           </div>
-
           <action-buttons
             :showDownload="false"
             :showTheatreMode="true"
@@ -220,3 +209,4 @@ export default {
     ></twitch-chat>
   </div>
 </template>
+