CSS Changes to mediaitem-square, updated to do with code for playlist sorting

This commit is contained in:
booploops 2021-12-21 16:09:59 -08:00
parent 05f97ad4a1
commit e38ddced69
5 changed files with 75 additions and 14 deletions

View file

@ -1,7 +1,7 @@
<script type="text/x-template" id="mediaitem-square">
<template>
<div tabindex="0"
class="cd-mediaitem-square" @contextmenu="contextMenu" v-observe-visibility="{callback: visibilityChanged}">
class="cd-mediaitem-square" :class="getClasses()" @contextmenu="contextMenu" v-observe-visibility="{callback: visibilityChanged}">
<template v-if="isVisible">
<div class="artwork-container">
<div class="artwork" @click='app.routeView(item)'>
@ -37,6 +37,16 @@
}
},
methods: {
getClasses() {
switch(this.item.type) {
default:
return []
break;
case "uploaded-videos":
return "mediaitem-video";
break;
}
},
visibilityChanged: function (isVisible, entry) {
this.isVisible = isVisible
},

View file

@ -48,9 +48,11 @@
</div>
</div>
</div>
<mediaitem-square v-if="library.albums.viewAs == 'covers'" :item="item" v-for="item in library.albums.displayListing">
</mediaitem-square>
<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 class="well">
<mediaitem-square v-if="library.albums.viewAs == 'covers'" :item="item" v-for="item in library.albums.displayListing">
</mediaitem-square>
<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>
</div>
</template>

View file

@ -5,7 +5,8 @@
<h1 class="header-text">Recently Added</h1>
</div>
<div class="col-auto">
<button v-if="library.albums.downloadState == 2" @click="getLibraryAlbumsFull(true, 0)" class="reload-btn"><%- include('../svg/redo.svg') %></button>
<button v-if="library.albums.downloadState == 2" @click="getLibraryAlbumsFull(true, 0)"
class="reload-btn"><%- include('../svg/redo.svg') %></button>
</div>
</div>
<div class="row">
@ -23,7 +24,8 @@
<div class="col-auto flex-center">
<div class="row">
<div class="col">
<select class="md-select" v-model="library.albums.sortOrder[0]" @change="searchLibraryAlbums(0)">
<select class="md-select" v-model="library.albums.sortOrder[0]"
@change="searchLibraryAlbums(0)">
<optgroup label="Sort Order">
<option value="asc">Ascending</option>
<option value="desc">Descending</option>
@ -41,9 +43,14 @@
</div>
</div>
</div>
<mediaitem-square v-if="library.albums.viewAs == 'covers'" :item="item" v-for="item in library.albums.displayListing">
</mediaitem-square>
<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 class="well">
<mediaitem-square v-if="library.albums.viewAs == 'covers'" :item="item"
v-for="item in library.albums.displayListing">
</mediaitem-square>
<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>
</div>
</template>