optimization for visibility
This commit is contained in:
parent
f003296bbf
commit
e596659542
3 changed files with 17 additions and 5 deletions
|
@ -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;
|
||||||
|
|
|
@ -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>
|
||||||
|
|
||||||
|
|
|
@ -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'"> </div>
|
<div class="subtitle" v-if="getSubtitle() == '' && kind != 'card'"> </div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</script>
|
</script>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue