danolo
/
deemix-webui
mirror of https://gitlab.com/RemixDev/deemix-webui.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

style: uniformed Artist page table columns

This commit is contained in:
Roberto Tonino 2020-11-19 19:29:46 +01:00
parent 15397670e5
commit 07a879a4dd
2 changed files with 16 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
public/js/bundle.js
View File

@ -1738,6 +1738,10 @@
width: 4rem
}
.w-20 {
width: 5rem
}
.w-32 {
width: 8rem
}
@ -1890,6 +1894,13 @@
}
@media (min-width: 1280px) {
.xl\\:w-32 {
width: 8rem
}
.xl\\:w-40 {
width: 10rem
}
}\r
`;styleInject(css_248z$2);var css_248z$3=`* {
box-sizing: border-box;
@ -2729,9 +2740,9 @@ PERFORMANCE OF THIS SOFTWARE.
`+e._s(e.$tc("globals.listTabs."+i,2))+`
`)])}),1),e._v(" "),a("table",{staticClass:"table"},[a("thead",[a("tr",e._l(e.head,function(r){return a("th",{key:r.title,staticClass:"uppercase-first-letter",class:{"sort-asc":r.sortKey===e.sortKey&&e.sortOrder=="asc","sort-desc":r.sortKey===e.sortKey&&e.sortOrder=="desc",sortable:r.sortKey,clickable:r.sortKey},style:{width:r.width?r.width:"auto"},on:{click:function(i){r.sortKey&&e.sortBy(r.sortKey)}}},[e._v(`
`+e._s(r.title)+`
`)])}),0)]),e._v(" "),a("tbody",e._l(e.sortedData,function(r){return a("tr",{key:r.releaseID},[a("RouterLink",{staticClass:"flex items-center clickable",attrs:{tag:"td",to:{name:"Album",params:{id:r.releaseID}}}},[a("img",{staticClass:"mr-4 rounded coverart",staticStyle:{width:"56px",height:"56px"},attrs:{src:r.releaseCover}}),e._v(" "),r.isReleaseExplicit?a("i",{staticClass:"material-icons title-icon title-icon--explicit"},[e._v("explicit")]):e._e(),e._v(" "),a("span",{staticClass:"hover:text-primary"},[e._v(e._s(r.releaseTitle))]),e._v(" "),e.checkNewRelease(r.releaseDate)?a("i",{staticClass:"material-icons title-icon title-icon--right title-icon--new"},[e._v(`
`)])}),0)]),e._v(" "),a("tbody",e._l(e.sortedData,function(r){return a("tr",{key:r.releaseID},[a("RouterLink",{staticClass:"flex items-center clickable",attrs:{tag:"td","data-cm-link":r.releaseLink,to:{name:"Album",params:{id:r.releaseID}}}},[a("img",{staticClass:"mr-4 rounded coverart",staticStyle:{width:"56px",height:"56px"},attrs:{src:r.releaseCover}}),e._v(" "),r.isReleaseExplicit?a("i",{staticClass:"material-icons title-icon title-icon--explicit"},[e._v("explicit")]):e._e(),e._v(" "),a("span",{staticClass:"hover:text-primary"},[e._v(e._s(r.releaseTitle))]),e._v(" "),e.checkNewRelease(r.releaseDate)?a("i",{staticClass:"material-icons title-icon title-icon--right title-icon--new"},[e._v(`
fiber_new
`)]):e._e()]),e._v(" "),a("td",{staticClass:"text-center"},[e._v(e._s(r.releaseDate))]),e._v(" "),a("td",{staticClass:"text-center"},[e._v(e._s(r.releaseTracksNumber))]),e._v(" "),a("td",{staticClass:"w-8 cursor-pointer",attrs:{"data-cm-link":r.releaseLink},on:{click:function(i){return i.stopPropagation(),e.sendAddToQueue(r.releaseLink)}}},[a("i",{staticClass:"material-icons hover:text-primary",attrs:{title:e.$t("globals.download_hint")}},[e._v("file_download")])])],1)}),0)])],1)},__vue_staticRenderFns__$e=[];const __vue_inject_styles__$e=void 0,__vue_scope_id__$e=void 0,__vue_is_functional_template__$e=!1;function __vue_normalize__$e(e,n,a,r,i,s,l,c){const o=(typeof a=="function"?a.options:a)||{};return o.__file="Artist.vue",o.render||(o.render=e.render,o.staticRenderFns=e.staticRenderFns,o._compiled=!0,i&&(o.functional=!0)),o._scopeId=r,o}var Artist=__vue_normalize__$e({render:__vue_render__$e,staticRenderFns:__vue_staticRenderFns__$e},__vue_inject_styles__$e,__vue_script__$c,__vue_scope_id__$e,__vue_is_functional_template__$e);let chartsData={},cached$1=!1;function getChartsData(){return cached$1?chartsData:(socket.emit("get_charts_data"),new Promise((e,n)=>{socket.on("init_charts",a=>{chartsData=a,cached$1=!0,socket.off("init_charts"),e(a)})}))}var script$d={methods:{previewMouseEnter(e){EventBus.$emit("trackPreview:previewMouseEnter",e)},previewMouseLeave(e){EventBus.$emit("trackPreview:previewMouseLeave",e)}}};const __vue_script__$d=script$d;var __vue_render__$f=function(){var e=this,n=e.$createElement,a=e._self._c||n;return a("i",{staticClass:"absolute top-0 right-0 flex items-center justify-center w-full h-full text-center text-white transition-opacity duration-200 ease-in-out bg-black bg-opacity-50 rounded opacity-0 material-icons preview_controls",attrs:{title:e.$t("globals.play_hint")},on:{mouseenter:e.previewMouseEnter,mouseleave:e.previewMouseLeave}},[e._v(`
`)]):e._e()]),e._v(" "),a("td",{staticClass:"w-32 text-center xl:w-40"},[e._v(e._s(r.releaseDate))]),e._v(" "),a("td",{staticClass:"w-20 text-center xl:w-32"},[e._v(e._s(r.releaseTracksNumber))]),e._v(" "),a("td",{staticClass:"w-8 cursor-pointer",attrs:{"data-cm-link":r.releaseLink},on:{click:function(i){return i.stopPropagation(),e.sendAddToQueue(r.releaseLink)}}},[a("i",{staticClass:"material-icons hover:text-primary",attrs:{title:e.$t("globals.download_hint")}},[e._v("file_download")])])],1)}),0)])],1)},__vue_staticRenderFns__$e=[];const __vue_inject_styles__$e=void 0,__vue_scope_id__$e=void 0,__vue_is_functional_template__$e=!1;function __vue_normalize__$e(e,n,a,r,i,s,l,c){const o=(typeof a=="function"?a.options:a)||{};return o.__file="Artist.vue",o.render||(o.render=e.render,o.staticRenderFns=e.staticRenderFns,o._compiled=!0,i&&(o.functional=!0)),o._scopeId=r,o}var Artist=__vue_normalize__$e({render:__vue_render__$e,staticRenderFns:__vue_staticRenderFns__$e},__vue_inject_styles__$e,__vue_script__$c,__vue_scope_id__$e,__vue_is_functional_template__$e);let chartsData={},cached$1=!1;function getChartsData(){return cached$1?chartsData:(socket.emit("get_charts_data"),new Promise((e,n)=>{socket.on("init_charts",a=>{chartsData=a,cached$1=!0,socket.off("init_charts"),e(a)})}))}var script$d={methods:{previewMouseEnter(e){EventBus.$emit("trackPreview:previewMouseEnter",e)},previewMouseLeave(e){EventBus.$emit("trackPreview:previewMouseLeave",e)}}};const __vue_script__$d=script$d;var __vue_render__$f=function(){var e=this,n=e.$createElement,a=e._self._c||n;return a("i",{staticClass:"absolute top-0 right-0 flex items-center justify-center w-full h-full text-center text-white transition-opacity duration-200 ease-in-out bg-black bg-opacity-50 rounded opacity-0 material-icons preview_controls",attrs:{title:e.$t("globals.play_hint")},on:{mouseenter:e.previewMouseEnter,mouseleave:e.previewMouseLeave}},[e._v(`
play_arrow
`)])},__vue_staticRenderFns__$f=[];const __vue_inject_styles__$f=void 0,__vue_scope_id__$f=void 0,__vue_is_functional_template__$f=!1;function __vue_normalize__$f(e,n,a,r,i,s,l,c){const o=(typeof a=="function"?a.options:a)||{};return o.__file="PreviewControls.vue",o.render||(o.render=e.render,o.staticRenderFns=e.staticRenderFns,o._compiled=!0,i&&(o.functional=!0)),o._scopeId=r,o}var PreviewControls=__vue_normalize__$f({render:__vue_render__$f,staticRenderFns:__vue_staticRenderFns__$f},__vue_inject_styles__$f,__vue_script__$d,__vue_scope_id__$f,__vue_is_functional_template__$f),script$e={components:{PreviewControls},data(){return{country:"",id:0,countries:[],chart:[]}},computed:{worldwideRelease(){let e=this.countries.filter(n=>n.title==="Worldwide");return e[0]}},async created(){socket.on("setChartTracks",this.setTracklist),this.$on("hook:destroyed",()=>{socket.off("setChartTracks")});let e=await getChartsData(),n;e=e.filter(a=>(a.title==="Worldwide"&&(n=a),a.title!=="Worldwide")),e.unshift(n),this.initCharts(e)},methods:{convertDuration,playPausePreview(e){EventBus.$emit("trackPreview:playPausePreview",e)},addToQueue(e){e.stopPropagation(),sendAddToQueue(e.currentTarget.dataset.link)},getTrackList(e){document.getElementById("content").scrollTo(0,0);const{currentTarget:{dataset:{title:n}},currentTarget:{dataset:{id:a}}}=e;this.country=n,localStorage.setItem("chart",this.country),this.id=a,socket.emit("getChartTracks",this.id)},setTracklist(e){this.chart=e},onChangeCountry(){this.country="",this.id=0},initCharts(e){if(this.countries=e,this.country=localStorage.getItem("chart")||"",!this.country)return;let n=0;for(;n<this.countries.length&&!(this.countries[n].title==this.country);n++);n!==this.countries.length?(this.id=this.countries[n].id,socket.emit("getChartTracks",this.id)):(this.country="",localStorage.setItem("chart",this.country))}}};const __vue_script__$e=script$e;var __vue_render__$g=function(){var e=this,n=e.$createElement,a=e._self._c||n;return a("div",[a("h1",{staticClass:"mb-8 text-5xl"},[e._v(e._s(e.$t("charts.title")))]),e._v(" "),e.country===""?a("div",[a("div",{staticClass:"release-grid"},e._l(e.countries,function(r){return a("div",{key:r.id,staticClass:"w-40 h-40 release clickable",attrs:{role:"button","aria-label":r.title,"data-title":r.title,"data-id":r.id},on:{click:e.getTrackList}},[a("img",{staticClass:"w-full rounded coverart",attrs:{src:r.picture_medium}})])}),0)]):a("div",[a("button",{staticClass:"btn btn-primary",on:{click:e.onChangeCountry}},[e._v(e._s(e.$t("charts.changeCountry")))]),e._v(" "),a("button",{staticClass:"btn btn-primary",attrs:{"data-link":"https://www.deezer.com/playlist/"+e.id},on:{click:function(r){return r.stopPropagation(),e.addToQueue(r)}}},[e._v(`
`+e._s(e.$t("charts.download"))+`

5
src/components/pages/Artist.vue
View File

@ -50,6 +50,7 @@
<RouterLink
tag="td"
class="flex items-center clickable"
:data-cm-link="release.releaseLink"
:to="{ name: 'Album', params: { id: release.releaseID } }"
>
<img class="mr-4 rounded coverart" :src="release.releaseCover" style="width: 56px; height: 56px" />
@ -62,8 +63,8 @@
fiber_new
</i>
</RouterLink>
<td class="text-center">{{ release.releaseDate }}</td>
<td class="text-center">{{ release.releaseTracksNumber }}</td>
<td class="w-32 text-center xl:w-40">{{ release.releaseDate }}</td>
<td class="w-20 text-center xl:w-32">{{ release.releaseTracksNumber }}</td>
<td
@click.stop="sendAddToQueue(release.releaseLink)"
:data-cm-link="release.releaseLink"