From db02b6a66750ec3c951b2b37c347852914513cf0 Mon Sep 17 00:00:00 2001
From: Will Toohey <will@mon.im>
Date: Thu, 22 Oct 2015 13:50:37 +1000
Subject: [PATCH] Fix modern UI text sizing

---
 css/hues-m.css |  4 ++--
 js/HuesUI.js   | 53 +++++++++++++++++++++++++++++++++-----------------
 2 files changed, 37 insertions(+), 20 deletions(-)

diff --git a/css/hues-m.css b/css/hues-m.css
index 7f8d3ff..efab1e8 100644
--- a/css/hues-m.css
+++ b/css/hues-m.css
@@ -193,14 +193,14 @@
 }
 
 .hues-m-songtitle > a:link, .hues-m-songtitle > a:visited, .hues-m-imagename > a:link, .hues-m-imagename > a:visited {
-    display: block;
     color: inherit;
     text-decoration: none;
-    overflow: hidden;
 }
+
 .hues-m-songtitle > a.small, .hues-m-imagename > a.small {
     font-size: 10px;
 }
+
 .hues-m-songtitle > a.x-small, .hues-m-imagename > a.x-small {
     font-size: 8px;
 }
diff --git a/js/HuesUI.js b/js/HuesUI.js
index d291728..07ab106 100644
--- a/js/HuesUI.js
+++ b/js/HuesUI.js
@@ -139,12 +139,20 @@ HuesUI.prototype.initUI = function() {
     }
     
     this.listContainer = document.createElement("div");
+    
+    var that = this;
+    this.resizeHandler = function() {
+        that.resize();
+    }
 }
 
 HuesUI.prototype.connectCore = function(core) {
     this.core = core;
     this.root.style.display = "block";
     this.listContainer.appendChild(core.resourceManager.listView);
+    
+    window.addEventListener('resize', this.resizeHandler);
+    this.resizeHandler();
 }
 
 HuesUI.prototype.disconnect = function() {
@@ -153,6 +161,8 @@ HuesUI.prototype.disconnect = function() {
     while (this.listContainer.firstElementChild) {
         this.listContainer.removeChild(this.listContainer.firstElementChild);
     }
+
+    window.removeEventListener('resize', this.resizeHandler);
 }
 
 // ONLY FOR CHANGING UI, NOT FOR "HIDE" FEATURE
@@ -699,21 +709,36 @@ ModernUI.prototype.beat = function() {
     this.beatCount.textContent = "B=" + this.intToHex4(this.core.getSafeBeatIndex());
 }
 
+ModernUI.prototype.resize = function() {
+    this.resizeSong();
+    this.resizeImage();
+}
+
+ModernUI.prototype.resizeElement = function(el, parent) {
+    el.className = ""
+    if (el.offsetWidth > parent.clientWidth) {
+        el.className = "small"
+    }
+    if (el.offsetWidth > parent.clientWidth) {
+        el.className = "x-small"
+    }
+}
+
+ModernUI.prototype.resizeSong = function() {
+    this.resizeElement(this.songLink, this.songName);
+}
+
+ModernUI.prototype.resizeImage = function() {
+    this.resizeElement(this.imageLink, this.imageName);
+}
+
 ModernUI.prototype.setSongText = function() {
     HuesUI.prototype.setSongText.call(this);
     
     if(!this.core.currentSong)
         return;
-    
-    var name = this.songName;
 
-    name.className = "hues-m-songtitle"
-    if (name.offsetWidth > name.clientWidth) {
-        name.className = "hues-m-songtitle small"
-    }
-    if (name.offsetWidth > name.clientWidth) {
-        name.className = "hues-m-songtitle x-small"
-    }
+    this.resizeSong();
 }
 
 ModernUI.prototype.setImageText = function() {
@@ -722,15 +747,7 @@ ModernUI.prototype.setImageText = function() {
     if(!this.core.currentImage)
         return;
     
-    var name = this.imageName
-
-    name.className = "hues-m-imagename"
-    if (name.offsetWidth > name.clientWidth) {
-        name.className = "hues-m-imagename small"
-    }
-    if (name.offsetWidth > name.clientWidth) {
-        name.className = "hues-m-imagename x-small"
-    }
+    this.resizeImage();
 }
 
 function XmasUI() {