Fix song title overflow

itsjustaplant · Dec 8, 2020 · e906244 · e906244
1 parent 08dff71
commit e906244
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 122 deletions.
diff --git a/app/app.css b/app/app.css
@@ -1,7 +1,5 @@
-#close-button{
+.ui-button{
     margin-top: 1.5vw;
-    margin-left: 2vw;
-    background: #ff5c5c;
     border: 1px solid #e33e41;
     border-radius: 50%;
     display: inline-block;
@@ -15,26 +13,18 @@
     vertical-align: center;
     -webkit-transition: all 0.2s ease;
 }
-#cover:hover > #close-button {
-    opacity: 100;
+#close-button{
+    margin-left: 2vw;
+    background: #ff5c5c;
 }
 #minimize-button{
-    margin-top: 1.5vw;
     margin-left: 6vw;
     background: #ffd60a;
-    border: 1px solid #e33e41;
-    border-radius: 50%;
-    display: inline-block;
-    z-index: 3;
-    position: fixed;
-    height: 12px;
-    width: 12px;
-    opacity: 0;
-    font-size: 8pt;
-    text-align: center;
-    vertical-align: center;
-    -webkit-transition: all 0.2s ease;
 }
+#cover:hover > #close-button {
+    opacity: 100;
+}
+
 #cover:hover > #minimize-button {
     opacity: 100;
 }
@@ -75,6 +65,11 @@ body{
     margin-top: 100vw;
     font-size: 18px;
 }
+#track_name{
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+}
 #lyrics{
     text-align: center;
     display: block;

diff --git a/app/app.html b/app/app.html
@@ -3,121 +3,25 @@
 <head>
     <link rel="icon">
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+    <link rel="stylesheet" href="app.css">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <script defer src="remote.js"></script>
+    <script defer src="app.js"></script>
     <script defer src="window.js"></script>
     <meta charset="UTF-8">
     <title>SPOFLY</title>
 </head>
 <body id="body">
 <div id="cover">
     <a> <img id="cover_art" alt="cover-art" src=""> </a>
-    <a id="close-button"></a>
-    <a id="minimize-button"></a>
+    <a class="ui-button" id="close-button"></a>
+    <a class="ui-button" id="minimize-button"></a>
 </div>
 
 <div id='lyric_section'>
     <div id="song_title">
-        <a id="artist_name" >justaplant</a>
-        <a id="dash">-</a>
-        <a id="track_name">justaplant</a>
+        <span id="track_name">justaplant</span>
     </div>
     <pre id="lyrics"><span></span></pre>
 </div>
 </body>
-</html>
-<style>
-    #close-button{
-        margin-top: 1.5vw;
-        margin-left: 2vw;
-        background: #ff5c5c;
-        border: 1px solid #e33e41;
-        border-radius: 50%;
-        display: inline-block;
-        z-index: 3;
-        position: fixed;
-        height: 12px;
-        width: 12px;
-        opacity: 0;
-        font-size: 8pt;
-        text-align: center;
-        vertical-align: center;
-        -webkit-transition: all 0.2s ease;
-    }
-    #cover:hover > #close-button {
-        opacity: 100;
-    }
-    #minimize-button{
-        margin-top: 1.5vw;
-        margin-left: 6vw;
-        background: #ffd60a;
-        border: 1px solid #e33e41;
-        border-radius: 50%;
-        display: inline-block;
-        z-index: 3;
-        position: fixed;
-        height: 12px;
-        width: 12px;
-        opacity: 0;
-        font-size: 8pt;
-        text-align: center;
-        vertical-align: center;
-        -webkit-transition: all 0.2s ease;
-    }
-    #cover:hover > #minimize-button {
-        opacity: 100;
-    }
-
-    body::-webkit-scrollbar {
-        display: none;
-    }
-    body{
-        -ms-overflow-style: none;
-        scrollbar-width: none;
-    }
-    #cover_art{
-        width: 100%;
-        height: 100vw;
-        position: fixed;
-        alignment: center;
-        z-index: 2;
-        -webkit-user-drag: none;
-        user-select: none;
-        -moz-user-select: none;
-        -webkit-user-select: none;
-        -ms-user-select: none;
-        -webkit-app-region: drag;
-    }
-    #lyric_section{
-        margin: auto;
-        text-align: center;
-        -webkit-user-select: none;
-    }
-    #song_title{
-        text-align: center;
-        display: block;
-        z-index: 2;
-        width: 100vw;
-        height: 5vw;
-        position: fixed;
-        font-weight: bold;
-        margin-top: 100vw;
-        font-size: 18px;
-    }
-    #lyrics{
-        text-align: center;
-        display: block;
-        position: absolute;
-        width: 100vw;
-        margin-top: 105vw;
-        font-size: 16px;
-        overflow: hidden;
-    }
-    pre{
-        overflow-x: auto;
-        white-space: pre-wrap;
-        white-space: -moz-pre-wrap;
-        white-space: -o-pre-wrap;
-        word-wrap: break-word;
-    }
-</style>
+</html>
diff --git a/app/app.js b/app/app.js
@@ -42,8 +42,7 @@ const renderPage = () =>{
             getColor(api_url)
             getLyrics(lyrics_base_url, options)
             document.getElementById('cover_art').src = image_url
-            document.getElementById('track_name').textContent = track_name
-            document.getElementById('artist_name').textContent = artist_name
+            document.getElementById('track_name').textContent = artist_name + " - " + track_name
         }
     })
 }

diff --git a/app/window.js b/app/window.js
@@ -14,3 +14,4 @@ minimizeBtn.addEventListener("click", function (event){
     const window = remote.getCurrentWindow();
     window.minimize()
 })
+
Original file line number	Diff line number	Diff line change
Expand Up		@@ -14,3 +14,4 @@ minimizeBtn.addEventListener("click", function (event){
		const window = remote.getCurrentWindow();
		window.minimize()
		})