fixed sizing for long text

BeatBuzzer · Dec 9, 2024 · dd07a89 · dd07a89
1 parent e176918
commit dd07a89
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 26 deletions.
diff --git a/components/playlists/PlaylistBox.vue b/components/playlists/PlaylistBox.vue
@@ -15,7 +15,7 @@
 <template>
   <div
     :class="[
-      'bg-blue-600 rounded-3xl p-3 mr-3 mb-3 inline-block overflow-hidden'
+      'bg-blue-600 rounded-3xl p-3 mr-3 mb-3 inline-block w-20 md:w-24'
     ]"
   >
     <!-- Playlist Cover -->
@@ -29,7 +29,7 @@
 
     <!-- Horizontally Scrolling Text -->
     <div class="text-container">
-      <p :class="['text-center', props.name.length > 5 ? 'scrolling-text' : '']">{{ props.name }}</p>
+      <p :class="['text-center', props.name.length > 8 ? 'scrolling-text' : '']">{{ props.name }}</p>
     </div>
   </div>
 </template>
@@ -59,7 +59,7 @@
 
 .scrolling-text {
   display: inline-block;
-  animation: scrollText 10s linear infinite; /* Adjust speed with '10s' */
+  animation: scrollText 5s linear infinite; /* Adjust speed with '10s' */
   white-space: nowrap;
 }
 

diff --git a/components/playlists/PlaylistView.vue b/components/playlists/PlaylistView.vue
@@ -13,10 +13,10 @@ onMounted(async () => {
 
 async function getProfileInformation() {
     $fetch<GetPlaylistResponse[]>('http://localhost:3000/api/v1/playlist')
-      .then((data) => {
-        playlists.value = [...data]
-        console.log(playlists.value[1])
-      });
+        .then((data) => {
+            playlists.value = [...data]
+            console.log(playlists.value[1])
+        });
 }
 
 // Computed Classes
@@ -33,25 +33,41 @@ const containerClasses = computed(() => {
         : 'flex gap-1 md:gap-3 mt-6 md:mt-9'
 );*/
 
+function addPlaylist() {
+    const newFriend = {
+        friend_username: "sfsdf",
+    }
+    playlists.value.push(newFriend)
+}
+
 </script>
 
 <template>
-    <div :class="[
-                    containerClasses,
-                ]"
-    >
-        <!-- Fixed Header -->
-        <div class="mb-1 text-xs md:text-base bg-gray-200 mt-2">
-            <p> Genre</p>
-        </div>
-
-        <!-- Scrollable User Boxes -->
-        <div>
-            <PlaylistsPlaylistBox 
-                v-for="item in playlists" 
-                :key="item.id"
-                :name="item.name"
-                v-bind="item.cover ? { cover: item.cover } : {}"/>
-        </div>
+    <div :class="[containerClasses]">
+      <!-- Fixed Header -->
+      <div class="mb-1 text-xs md:text-base mt-2 pt-2">
+        <p>Genre</p>
+      </div>
+
+      <!-- Scrollable Playlist Boxes with constrained height -->
+      <div class="overflow-y-auto h-[calc(100%-5rem)]"> <!-- Adjust height based on parent header -->
+        <PlaylistsPlaylistBox
+          v-for="item in playlists"
+          :key="item.id"
+          :name="item.name"
+          v-bind="item.cover ? { cover: item.cover } : {}"
+        />
+      </div>
+
+      <!-- Add Playlist Button -->
+      <div class="mt-3">
+        <button
+          class="p-2 bg-blue-500 text-white rounded ml-2"
+          @click="addPlaylist"
+        >
+          Add Playlist
+        </button>
+      </div>
     </div>
-</template>
+  </template>
+
diff --git a/layouts/FooterView.vue b/layouts/FooterView.vue
@@ -7,7 +7,7 @@
     <!-- Wrapper div für die Breiten-Kontrolle -->
     <div class="w-full xl:w-1/2 2xl:w-1/4 flex flex-col h-full">
       <!-- Content -->
-      <div class="flex-1 border rounded-3xl">
+      <div class="flex-1 border rounded-3xl p-3">
           <slot name="content"/>
       </div>