Made modals table look better
authorRemixDev <deezloaderremix@gmail.com>
Fri, 1 Mar 2019 20:16:33 +0000 (21:16 +0100)
committerRemixDev <deezloaderremix@gmail.com>
Fri, 1 Mar 2019 20:16:33 +0000 (21:16 +0100)
app/public/index.html
app/public/js/frontend.js

index 8683d1f5d4d237ed062d1716a28cb262e1d55b43..d356a0b32c5ae4e7687e8d46c6f37e6de34db9ec 100644 (file)
                        <table class="highlight col s12">
                                <thead>
                                <tr>
-                                       <td v-for="data in head" v-html="data.title"></td>
+                                       <td v-for="data in head" v-html="data.title" v-bind:style = "{ 'width': `${data.width ? data.width : 'auto'}`}"></td>
                                </tr>
                                </thead>
                                <tbody id="modal_trackList_table_trackList_tbody_loadingIndicator" class="hide">
                        <table class="highlight col s12">
                                <thead>
                                <tr>
-                                       <td v-for="data in head" v-html="data.title"></td>
+                                       <td v-for="data in head" v-html="data.title" v-bind:style = "{ 'width': `${data.width ? data.width : 'auto'}`}"></td>
                                </tr>
                                </thead>
                                <tbody id="modal_trackListSelective_table_trackList_tbody_loadingIndicator" class="hide">
index 407d527b647e12612bd6ec4dbb8d3c80db31cfb8..8bb1df29bb590bc5a4ae1ddf71864994cdb3cab5 100644 (file)
@@ -673,18 +673,16 @@ socket.on("getTrackList", function (data) {
                        trackListModalApp.link = `https://www.deezer.com/${data.reqType}/${data.id}`
                        trackListModalApp.head = [
                                {title: '#'},
-                               {title: ''},
                                {title: 'Album Title'},
                                {title: 'Release Date'},
                                {title: 'Record Type'},
-                               {title: 'Download Album'}
+                               {title: '', width: "56px"}
                        ]
                        for (var i = 0; i < trackList.length; i++) {
                                $(tableBody).append(
                                        `<tr>
                                        <td>${(i + 1)}</td>
-                                       <td>${(trackList[i].explicit_lyrics ? '<i class="material-icons valignicon tiny materialize-red-text tooltipped" data-tooltip="Explicit">explicit</i>' : '')}</td>
-                                       <td><a href="#" class="album_chip" data-link="${trackList[i].link}"><div class="chip"><img src="${trackList[i].cover_small}"/>${trackList[i].title}</div></a></td>
+                                       <td><a href="#" class="album_chip" data-link="${trackList[i].link}"><div class="chip"><img src="${trackList[i].cover_small}"/>${(trackList[i].explicit_lyrics ? '<i class="material-icons valignicon tiny materialize-red-text tooltipped" data-tooltip="Explicit">explicit</i> ' : '')}${trackList[i].title}</div></a></td>
                                        <td>${trackList[i].release_date}</td>
                                        <td>${trackList[i].record_type[0].toUpperCase() + trackList[i].record_type.substring(1)}</td>
                                        </tr>`
@@ -702,12 +700,12 @@ socket.on("getTrackList", function (data) {
                        trackListSelectiveModalApp.release_date = data.response.creation_date.substring(0,10)
                        trackListSelectiveModalApp.metadata = `by ${data.response.creator.name} • ${trackList.length == 1 ? "1 song" : `${trackList.length} songs`}`
                        trackListSelectiveModalApp.head = [
-                               {title: '<i class="material-icons">music_note</i>'},
+                               {title: '<i class="material-icons">music_note</i>', width: "24px"},
                                {title: '#'},
                                {title: 'Song'},
                                {title: 'Artist'},
-                               {title: '<i class="material-icons">timer</i>'},
-                               {title: '<div class="valign-wrapper"><label><input class="selectAll" type="checkbox" id="selectAll"><span></span></label></div>'}
+                               {title: '<i class="material-icons">timer</i>', width: "40px"},
+                               {title: '<div class="valign-wrapper"><label><input class="selectAll" type="checkbox" id="selectAll"><span></span></label></div>', width: "56px"}
                        ]
                        $('.selectAll').prop('checked', false)
                        let totalDuration = 0
@@ -741,12 +739,12 @@ socket.on("getTrackList", function (data) {
                        trackListSelectiveModalApp.release_date = data.response.release_date.substring(0,10)
                        trackListSelectiveModalApp.image = data.response.cover_xl
                        trackListSelectiveModalApp.head = [
-                               {title: '<i class="material-icons">music_note</i>'},
+                               {title: '<i class="material-icons">music_note</i>', width: "24px"},
                                {title: '#'},
                                {title: 'Song'},
                                {title: 'Artist'},
-                               {title: '<i class="material-icons">timer</i>'},
-                               {title: '<div class="valign-wrapper"><label><input class="selectAll" type="checkbox" id="selectAll"><span></span></label></div>'}
+                               {title: '<i class="material-icons">timer</i>', width: "40px"},
+                               {title: '<div class="valign-wrapper"><label><input class="selectAll" type="checkbox" id="selectAll"><span></span></label></div>', width: "56px"}
                        ]
                        $('.selectAll').prop('checked', false)
                        if (trackList[trackList.length-1].disk_number != 1){
@@ -789,11 +787,11 @@ socket.on("getTrackList", function (data) {
                        trackListModalApp.image = data.response.image
                        trackListModalApp.metadata = `by ${data.response.owner} • ${trackList.length == 1 ? "1 song" : `${trackList.length} songs`}`
                        trackListModalApp.head = [
-                               {title: '<i class="material-icons">music_note</i>'},
+                               {title: '<i class="material-icons">music_note</i>', width: "24px"},
                                {title: '#'},
                                {title: 'Song'},
                                {title: 'Artist'},
-                               {title: '<i class="material-icons">timer</i>'}
+                               {title: '<i class="material-icons">timer</i>', width: "40px"}
                        ]
                        let totalDuration = 0
                        for (var i = 0; i < trackList.length; i++) {