use directive to add tooltip

+ change grid size for search page
+

src/App.vue

@@ -2,6 +2,7 @@
   <ContextMenu />
   <Modal />
   <Notification />
+  <div id="tooltip"></div>
   <div
     id="app-grid"
     :class="{

src/assets/scss/Global/app-grid.scss

@@ -87,7 +87,10 @@
   grid-area: l-sidebar;
   display: grid;
   grid-template-rows: 1fr max-content;
-  gap: 1rem;
+  background-color: $gray;
+  height: 100vh;
+  margin-top: -$small;
+  margin-left: -$small;
 }
 
 .b-bar {

src/assets/scss/Global/basic.scss

@@ -111,3 +111,13 @@ button {
 .card-dark {
   background-color: #fff;
 }
+
+#tooltip {
+  background-color: $darkestblue;
+  border-radius: $smaller;
+  padding: $smaller;
+  font-size: 0.85rem;
+  display: none;
+  position: absolute;
+  z-index: 300;
+}

src/components/AlbumView/Header.vue

@@ -25,7 +25,7 @@
             <span v-else-if="album.is_single">Single</span>
             <span v-else>Album</span>
           </div>
-          <div class="title ellip">
+          <div class="title ellip" v-tooltip="album.title">
             {{ album.title }}
           </div>
         </div>
@@ -141,6 +141,7 @@ useVisibility(albumheaderthing, handleVisibilityState);
       .title {
         font-size: 2.5rem;
         font-weight: 600;
+        width: fit-content;
       }
 
       .artist {

src/components/FolderView/SongList.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="table rounded border"
+    class="table rounded"
     v-if="tracks.length"
     ref="tracklistElem"
     :class="{

src/components/LeftSidebar/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="l-sidebar rounded border">
+  <div class="l-sidebar">
     <div class="withlogo">
       <Logo />
       <Navigation />

src/components/RightSideBar/Search/ArtistGrid.vue

@@ -51,7 +51,7 @@ defineProps<{
 
 .search-results-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
   gap: 0.75rem;
 }
 </style>

src/components/shared/AlbumCard.vue

@@ -8,7 +8,7 @@
   >
     <img class="rounded" :src="imguri + album.image" alt="" />
     <div>
-      <h4 class="title ellip">{{ album.title }}</h4>
+      <h4 class="title ellip" v-tooltip="album.title">{{ album.title }}</h4>
       <div class="artist ellip">{{ album.artist }}</div>
     </div>
   </router-link>
@@ -30,7 +30,7 @@ defineProps<{
   gap: $small;
   padding: $small;
   transition: all 0.5s ease;
-  border-radius: .7rem;
+  border-radius: 0.7rem;
 
   img {
     width: 100%;
@@ -44,12 +44,13 @@ defineProps<{
   .title {
     margin-bottom: $smaller;
     font-size: 0.9rem;
+    width: fit-content;
   }
 
   .artist {
     font-size: 0.8rem;
     text-align: left;
-    opacity: .75;
+    opacity: 0.75;
   }
 }
 </style>

src/components/shared/ArtistCard.vue

@@ -42,10 +42,10 @@ defineProps<{
     object-fit: cover;
   }
 
-  &:hover {
+  // &:hover {
-    .artist-image {
+  //   .artist-image {
-      border-radius: 20%;
+  //     border-radius: 10%;
-    }
+  //   }
-  }
+  // }
 }
 </style>

src/components/shared/ArtistName.vue

@@ -1,17 +1,29 @@
 <template>
-  <div class="ellip" v-if="artists[0] !== ''">
+  <div v-tooltip="returnArtists()" style="width: auto;">
-    <span v-for="artist in putCommas(artists)" :key="artist">{{ artist }}</span>
+    <div class="ellip" v-if="artists[0] !== '' && artists.length > 1">
+      <span v-for="artist in putCommas(artists)" :key="artist">{{
+        artist
+      }}</span>
     </div>
     <div class="ellip" v-else>
       <span>{{ albumartist }}</span>
     </div>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { putCommas } from "@/utils";
 
-defineProps<{
+const props = defineProps<{
   artists: string[];
   albumartist: string | undefined;
 }>();
+
+function returnArtists() {
+  if (props.artists[0] !== "" && props.artists.length > 1) {
+    return props.artists.join(", ");
+  } else {
+    return props.albumartist;
+  }
+}
 </script>

src/components/shared/SongItem.vue

@@ -20,7 +20,7 @@
           :class="{ last_played: !isPlaying }"
         ></div>
       </div>
-      <div @mouseover="showToolTip" @mouseleave="hideToolTip">
+      <div v-tooltip="track.title">
         <div class="title ellip" @click="emitUpdate(track)" ref="artisttitle">
           {{ track.title }}
         </div>
@@ -30,9 +30,6 @@
             :albumartist="track.albumartist"
           />
         </div>
-        <div class="tooltip" ref="tooltip">
-          {{ track.title }}
-        </div>
       </div>
     </div>
     <div class="song-artists">
@@ -40,6 +37,7 @@
     </div>
     <router-link
       class="song-album ellip"
+      v-tooltip="track.album"
       :to="{
         name: 'AlbumView',
         params: {
@@ -64,7 +62,6 @@
 
 <script setup lang="ts">
 import { ref } from "vue";
-import { createPopper } from "@popperjs/core";
 
 import OptionSvg from "@/assets/icons/more.svg";
 
@@ -99,38 +96,6 @@ function emitUpdate(track: Track) {
 function showMenu(e: Event) {
   showContext(e, props.track, options_button_clicked);
 }
-
-let isHovering = false;
-
-function showToolTip() {
-  isHovering = true;
-
-  setTimeout(() => {
-    if (isHovering) {
-      const ttip = tooltip.value as HTMLElement;
-      const atitle = artisttitle.value as HTMLElement;
-
-      ttip.style.display = "unset";
-
-      createPopper(atitle, ttip, {
-        placement: "top",
-        modifiers: [
-          {
-            name: "offset",
-            options: {
-              offset: [10, 10],
-            },
-          },
-        ],
-      });
-    }
-  }, 500);
-}
-
-function hideToolTip() {
-  (tooltip.value as HTMLElement).style.display = "none";
-  isHovering = false;
-}
 </script>
 
 <style lang="scss">
@@ -143,17 +108,6 @@ function hideToolTip() {
   gap: 1rem;
   user-select: none;
 
-  .tooltip {
-    background-color: $darkestblue;
-    border-radius: $smaller;
-    padding: $smaller;
-    font-size: 0.85rem;
-    display: none;
-    position: absolute;
-    margin: 1rem;
-    z-index: 300;
-  }
-
   &:hover {
     background-color: $gray4;
 
@@ -172,6 +126,9 @@ function hideToolTip() {
   }
 
   .song-artists {
+    width: fit-content;
+    max-width: 100%;
+
     .artist {
       cursor: pointer;
     }
@@ -181,7 +138,7 @@ function hideToolTip() {
     opacity: 0.5;
     font-size: 0.8rem;
     width: 100%;
-    margin-left: $small;
+    // margin-left: $small;
   }
 
   .song-duration {

src/components/shared/TrackItem.vue

@@ -19,7 +19,7 @@
       ></div>
     </div>
     <div class="tags">
-      <div class="title ellip">
+      <div class="title ellip" v-tooltip="track.title">
         {{ track.title }}
       </div>
       <hr />
@@ -94,6 +94,12 @@ const playThis = (track: Track) => {
   align-items: center;
   padding: $small 1rem;
 
+  .tags {
+    .title {
+      width: fit-content;
+    }
+  }
+
   .remove-track {
     opacity: 0;
     transition: all 0.25s ease;
@@ -139,7 +145,7 @@ const playThis = (track: Track) => {
 
   .artist {
     font-size: small;
-    opacity: .67;
+    opacity: 0.67;
   }
 }
 </style>

src/directives/vTooltip.ts

@@ -0,0 +1,42 @@
+import { Directive } from "vue";
+import { createPopper } from "@popperjs/core";
+
+export default {
+  mounted(el, binding) {
+    let isHovered = false;
+    const tooltip = document.getElementById("tooltip") as HTMLElement;
+
+    el.addEventListener("mouseenter", () => {
+      isHovered = true;
+
+      setTimeout(() => {
+        tooltip.innerText = binding.value;
+
+        if (isHovered) {
+          tooltip.style.display = "unset";
+
+          createPopper(el, tooltip, {
+            placement: "top",
+            modifiers: [
+              {
+                name: "offset",
+                options: {
+                  offset: [0, 10],
+                },
+              },
+            ],
+          });
+        }
+      }, 1000);
+    });
+
+    el.addEventListener("mouseleave", () => {
+      isHovered = false;
+      tooltip.style.display = "none";
+    });
+  },
+  beforeUnmount(el: HTMLElement) {
+    el.removeEventListener("mouseenter", () => {});
+    el.removeEventListener("mouseleave", () => {});
+  },
+} as Directive;

src/main.ts

@@ -3,6 +3,7 @@ import "./assets/scss/index.scss";
 import { createPinia } from "pinia";
 import { createApp } from "vue";
 import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
+import vTooltip from "./directives/vTooltip";
 
 import App from "./App.vue";
 import router from "./router";
@@ -13,5 +14,6 @@ pinia.use(piniaPluginPersistedstate);
 
 app.use(pinia);
 app.use(router);
+app.directive("tooltip", vTooltip);
 
 app.mount("#app");

src/views/PlaylistList.vue

@@ -1,7 +1,6 @@
 <template>
   <div id="p-view">
     <div class="grid">
-      <!-- <NewPlaylistCard /> -->
       <PlaylistCard
         v-for="p in pStore.playlists"
         :key="p.playlistid"
@@ -14,7 +13,6 @@
 <script setup lang="ts">
 import PlaylistCard from "@/components/PlaylistsList/PlaylistCard.vue";
 
-// import NewPlaylistCard from "@/components/PlaylistsList/NewPlaylistCard.vue";
 import usePStore from "@/stores/pages/playlists";
 const pStore = usePStore();
 </script>
@@ -27,14 +25,6 @@ const pStore = usePStore();
   .grid {
     grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
     gap: 1rem;
-
-    // @include for-desktop-down {
-    //   grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
-
-    //   .name {
-    //     font-size: 0.9rem;
-    //   }
-    // }
   }
 }
 </style>

src/views/Search.vue

@@ -13,12 +13,17 @@ import Main from "@/components/RightSideBar/Search/Main.vue";
 <style lang="scss">
 .search-view {
   height: 100%;
-  background-color: $black;
+  // background-color: $black;
   padding-top: 0;
+  margin-right: -1rem;
 
   .scrollable {
     height: 100%;
     overflow: auto;
   }
+
+  .search-results-grid {
+    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+  }
 }
 </style>