optimization for visibility

This commit is contained in:
booploops 2022-06-10 05:32:45 -07:00
parent f003296bbf
commit e596659542
3 changed files with 17 additions and 5 deletions

View file

@ -398,6 +398,19 @@
border-radius: var(--mediaItemRadius); border-radius: var(--mediaItemRadius);
position: relative; position: relative;
.listitem-content {
width: 100%;
height: 60px;
display: flex;
flex: 0 0 auto;
flex-direction: row;
font-size: 14px;
justify-content: center-between;
align-items: center;
border-radius: var(--mediaItemRadius);
position: relative;
}
&:hover { &:hover {
.heart-icon { .heart-icon {
display: none; display: none;

View file

@ -16,7 +16,7 @@
@controller-click="route()" @controller-click="route()"
tabindex="0" tabindex="0"
:class="[{'mediaitem-selected': app.select_hasMediaItem(guid)}, addClasses]"> :class="[{'mediaitem-selected': app.select_hasMediaItem(guid)}, addClasses]">
<template v-show="isVisible"> <div v-show="isVisible" class="listitem-content">
<div class="popular" v-if="!showInLibrary && item?.meta?.popularity != null && item?.meta?.popularity > 0.7"></div> <div class="popular" v-if="!showInLibrary && item?.meta?.popularity != null && item?.meta?.popularity > 0.7"></div>
<div class="isLibrary" v-if="showLibraryStatus == true"> <div class="isLibrary" v-if="showLibraryStatus == true">
<div v-if="showInLibrary" :style="{display: (showInLibrary ? 'block' : 'none'), 'margin-left':'11px'}"> <div v-if="showInLibrary" :style="{display: (showInLibrary ? 'block' : 'none'), 'margin-left':'11px'}">
@ -87,7 +87,7 @@
<div class="duration" v-if="item.attributes.playCount" @dblclick="route()"> <div class="duration" v-if="item.attributes.playCount" @dblclick="route()">
{{ item.attributes.playCount }} {{ item.attributes.playCount }}
</div> </div>
</template> </div>
</div> </div>
</script> </script>

View file

@ -8,8 +8,7 @@
<div v-if="reasonShown" class="reasonSP ">{{item?.meta?.reason?.stringForDisplay ?? ''}}</div> <div v-if="reasonShown" class="reasonSP ">{{item?.meta?.reason?.stringForDisplay ?? ''}}</div>
<div style="{'--spcolor': getBgColor()}" <div style="{'--spcolor': getBgColor()}"
class="cd-mediaitem-square" :class="getClasses()" @contextmenu="getContextMenu"> class="cd-mediaitem-square" :class="getClasses()" @contextmenu="getContextMenu">
<template v-show="isVisible"> <div class="artwork-container" v-show="isVisible">
<div class="artwork-container">
<div class="unavailable-overlay" v-if="unavailable"> <div class="unavailable-overlay" v-if="unavailable">
<div class="codicon codicon-circle-slash"></div> <div class="codicon codicon-circle-slash"></div>
</div> </div>
@ -40,6 +39,7 @@
</div> </div>
</div> </div>
<div class="info-rect" :class="{'info-rect-card': kind == 'card'}" <div class="info-rect" :class="{'info-rect-card': kind == 'card'}"
v-show="isVisible"
:style="{'--bgartwork': getArtworkUrl(size, true)}"> :style="{'--bgartwork': getArtworkUrl(size, true)}">
<div class="title" <div class="title"
:title="item.attributes?.name ?? (item.relationships?.contents?.data[0]?.attributes?.name ?? (item.attributes?.editorialNotes?.name ?? ''))" :title="item.attributes?.name ?? (item.relationships?.contents?.data[0]?.attributes?.name ?? (item.attributes?.editorialNotes?.name ?? ''))"
@ -58,7 +58,6 @@
</div> </div>
<div class="subtitle" v-if="getSubtitle() == '' && kind != 'card'">&nbsp;</div> <div class="subtitle" v-if="getSubtitle() == '' && kind != 'card'">&nbsp;</div>
</div> </div>
</template>
</div> </div>
</div> </div>
</script> </script>