scale app to fix error on 4k screens

This commit is contained in:
vapormusic 2021-12-26 21:26:07 +07:00
parent 7bba73f147
commit 46fb100394
16 changed files with 761 additions and 107 deletions

View file

@ -49,8 +49,12 @@
</div>
</div>
<div class="well">
<mediaitem-square v-if="library.albums.viewAs == 'covers'" :item="item" v-for="item in library.albums.displayListing">
</mediaitem-square>
<div class="albums-square-container">
<div>
<mediaitem-square v-if="library.albums.viewAs == 'covers'" :size="'150'" :item="item" v-for="item in library.albums.displayListing">
</mediaitem-square>
</div>
</div>
<mediaitem-list-item v-if="library.albums.viewAs == 'list'" :show-duration="false" :show-meta-data="true" :show-library-status="false" :item="item" v-for="item in library.albums.displayListing">
</mediaitem-list-item>
</div>

View file

@ -0,0 +1,54 @@
<div class="content-inner">
<div class="row">
<div class="col" style="padding:0px;">
<h1 class="header-text">Artists</h1>
</div>
</div>
<div class="row">
<div class="col" style="padding:0px;">
<div class="search-input-container" style="width:100%;margin: 16px 0px;">
<div class="search-input--icon"></div>
<input type="search"
style="width:100%;"
spellcheck="false"
placeholder="Search..."
@input="searchLibraryAlbums"
v-model="library.artists.search" class="search-input">
</div>
</div>
<div class="col-auto flex-center">
<div class="row">
<div class="col">
<select class="md-select" v-model="library.artists.sorting[1]" @change="searchLibraryAlbums(1)">
<optgroup label="Sort By">
<option v-for="(sort, index) in library.artists.sortingOptions" :value="index">{{ sort }}</option>
</optgroup>
</select>
</div>
<div class="col">
<select class="md-select" v-model="library.artists.sortOrder[1]" @change="searchLibraryAlbums(1)">
<optgroup label="Sort Order">
<option value="asc">Ascending</option>
<option value="desc">Descending</option>
</optgroup>
</select>
</div>
<div class="col">
<select class="md-select" v-model="library.artists.viewAs">
<optgroup label="View As">
<option value="covers">Cover Art</option>
<option value="list">List</option>
</optgroup>
</select>
</div>
</div>
</div>
</div>
<div class="well">
<!-- <mediaitem-square v-if="library.artists.viewAs == 'covers'" :item="item" v-for="item in library.artists.displayListing">
</mediaitem-square> -->
<libraryartist-item :show-duration="false" :show-meta-data="true" :show-library-status="false" :item="item" v-for="item in library.artists.displayListing">
</libraryartist-item>
</div>
</div>

View file

@ -2,24 +2,7 @@
<div class="content-inner">
<h1 class="header-text">Listen Now</h1>
<template v-for="recom in data.data">
<div class="row">
<div class="col">
<h3>{{ recom.attributes.title ? recom.attributes.title.stringForDisplay : ""}}</h3>
</div>
<div class="col-auto flex-center" v-if="recom.relationships.contents.data.length >= 10">
<button class="cd-btn-seeall" @click="app.showCollection(recom.relationships.contents, recom.attributes.title ? recom.attributes.title.stringForDisplay : '', 'listen_now')" >See All</button>
</div>
</div>
<template v-if="recom.attributes.display.kind == 'MusicCoverShelf'">
<mediaitem-scroller-horizontal-large
:items="recom.relationships.contents.data.limit(10)"></mediaitem-scroller-horizontal-large>
</template>
<template v-else-if="recom.attributes.display.kind == 'MusicSuperHeroShelf'">
</template>
<template v-else>
<mediaitem-scroller-horizontal-sp
:items="recom.relationships.contents.data.limit(10)"></mediaitem-scroller-horizontal-sp>
</template>
<listennow-child :recom="recom"></listennow-child>
</template>
</div>
</script>