#641 -- Automatically truncate long song/artist titles

app/templates/frontend/public/player_component.phtml

@@ -28,10 +28,10 @@ $vue_data_model = [
     </div>
 <?php endif; ?>
     <div class="media-body">
-        <h4 class="media-heading">
+        <h4 class="media-heading might-overflow nowplaying-title">
             {{ np.now_playing.song.title }}
         </h4>
-        <div>
+        <div class="nowplaying-artist might-overflow">
             {{ np.now_playing.song.artist }}
         </div>
         <div class="nowplaying-progress" v-if="time_display">
@@ -95,4 +95,4 @@ $(function() {
 
     setInterval(iterateTimer, 1000);
 });
-</script>
+</script>

web/static/assets.json

@@ -1,5 +1,5 @@
 {
-  "dist/app.min.js": "dist/app-00181489b8.min.js",
-  "dist/dark.css": "dist/dark-40b72754e4.css",
-  "dist/light.css": "dist/light-cbf9b4c9b6.css"
+  "dist/app.min.js": "dist/app-0bd230d4a5.min.js",
+  "dist/dark.css": "dist/dark-dcee7af86c.css",
+  "dist/light.css": "dist/light-70c58ca500.css"
 }

web/static/less/common/404.less

@@ -6,11 +6,7 @@
   background-size: cover;
 
   footer {
-    text-shadow:
-      -1px -1px 0 #000,
-      1px -1px 0 #000,
-      -1px 1px 0 #000,
-      1px 1px 0 #000;
+    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, 0 0 4px #000;
   }
 }
 

web/static/less/pages/public.less

@@ -46,4 +46,19 @@
   .stations {
     margin: 20px 0;
   }
-}
+}
+
+// Pulled from:
+// https://stackoverflow.com/questions/5474871/html-how-can-i-show-tooltip-only-when-ellipsis-is-activated
+
+.might-overflow {
+  text-overflow: ellipsis;
+  overflow : hidden;
+  white-space: nowrap;
+
+  &:hover {
+    text-overflow: clip;
+    white-space: normal;
+    word-break: break-all;
+  }
+}