Merge pull request #196 from yazninja/upcoming

Fix Overlapping items in playback-info/ Resize Queue in fs

src/renderer/index.js

@@ -3373,7 +3373,16 @@ const app = new Vue({
            //this.modals.qrcode = true;
            
         }
-
+    function checkMarquee(){
+        if(isElementOverflowing('#app-main > div.app-chrome > div.app-chrome--center > div > div > div.playback-info > div.song-artist') == true) {
+            document.getElementsByClassName('song-artist')[0].classList.add('marquee');
+            document.getElementsByClassName('song-artist')[1].classList.add('marquee-after');
+        }
+        if(isElementOverflowing('#app-main > div.app-chrome > div.app-chrome--center > div > div > div.playback-info > div.song-name') == true) {
+            document.getElementsByClassName('song-name')[0].classList.add('marquee');
+            document.getElementsByClassName('song-name')[1].classList.add('marquee-after');
+        } 
+    }    
     }
 })
 
@@ -3663,4 +3672,4 @@ document.addEventListener('keydown', function(event) {
             ipcRenderer.send('detachDT','')
         } catch (e) { }
     }
-});
+});

src/renderer/style.less

@@ -1112,27 +1112,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
 }
 
 
-.app-chrome .app-chrome-item > .app-playback-controls .song-artist {
-  font-weight: 400;
-  font-size: 12px;
-  text-align: center;
-  /*height: 1.2em;
-  line-height: 1.2em;*/
 
-  z-index: 1;
-  max-width: 360px;
-  
-
-  .song-artist-normal {
-    height: inherit;
-  }
-
-  &.song-artist-marquee {
-    > marquee {
-      margin-bottom: -3px;
-    }
-  }
-}
 
 .app-chrome .app-chrome-item > .app-playback-controls .song-progress {
   @bgColor: transparent;
@@ -1256,7 +1236,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
   overflow: hidden;
 }
 
-.app-chrome .app-chrome-item > .app-playback-controls .playback-info > div {
+.app-chrome .app-chrome-item > .app-playback-controls .playback-info > .song-progress{
   width: 100%;
 }
 
@@ -1267,6 +1247,31 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
   display: flex;
   position: relative;
 }
+.app-chrome .app-chrome-item > .app-playback-controls .song-artist-album {
+  font-weight: 400;
+  font-size: 12px;
+  text-align: center;
+  /*height: 1.2em;
+  line-height: 1.2em;*/
+
+  z-index: 1;
+  align-items: center;
+  justify-content: center;
+  width: 80%;
+  max-width: 340px;
+  overflow: hidden;
+  
+
+  .song-artist-normal {
+    height: inherit;
+  }
+
+  &.song-artist-marquee {
+    > marquee {
+      margin-bottom: -3px;
+    }
+  }
+}
 
 .display--small {
   display: none !important;
@@ -4570,7 +4575,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   .queue-col {
 
     width: 60vh;
-    height: 50vh;
+    height: 62vh;
 
     .queue-title {
       opacity: 0.6;

src/renderer/views/main.ejs

@@ -96,7 +96,7 @@
                                              style="display: inline-block"></div>
                                     </div>
                                     <!-- :class="[isElementOverflowing('#app-main > div.app-chrome > div.app-chrome--center > div > div > div.playback-info > div.song-artist') ? 'marquee' : '']" -->
-                                    <div class="song-artist"
+                                    <div class="song-artist-album"
                                          style="display: inline-block; -webkit-box-orient: horizontal; white-space: nowrap;">
                                         <div class="item-navigate song-artist" style="display: inline-block"
                                              @click="getNowPlayingItemDetailed(`artist`)">
@@ -806,4 +806,4 @@
         src="./js/WSAPI_Interop.js"></script>
 </body>
 
-</html>
+</html>