adjustements to home screen
This commit is contained in:
parent
b1ebc25870
commit
a7a7350b01
5 changed files with 63 additions and 69 deletions
|
@ -2746,11 +2746,13 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
||||||
padding: var(--contentInnerPadding);
|
padding: var(--contentInnerPadding);
|
||||||
box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
|
box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
|
||||||
margin-top: 16px;
|
margin-top: 16px;
|
||||||
|
|
||||||
|
|
||||||
|
&.itemContainer {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: wrap;
|
flex-flow: wrap;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
.cd-mediaitem-square {
|
||||||
> .cd-mediaitem-square {
|
|
||||||
width: 220px;
|
width: 220px;
|
||||||
height: 260px;
|
height: 260px;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
|
@ -2764,6 +2766,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Library - Songs page
|
// Library - Songs page
|
||||||
.library-page {
|
.library-page {
|
||||||
|
|
|
@ -1,11 +1,8 @@
|
||||||
<script type="text/x-template" id="mediaitem-scroller-horizontal">
|
<script type="text/x-template" id="mediaitem-scroller-horizontal">
|
||||||
<template>
|
|
||||||
<vue-horizontal>
|
<vue-horizontal>
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
<mediaitem-square :kind="kind" :item="item"
|
<mediaitem-square :kind="kind" :item="item" v-for="item in items"></mediaitem-square>
|
||||||
v-for="item in items"></mediaitem-square>
|
|
||||||
</vue-horizontal>
|
</vue-horizontal>
|
||||||
</template>
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<script type="text/x-template" id="cider-collection-list">
|
<script type="text/x-template" id="cider-collection-list">
|
||||||
<div class="content-inner collection-page">
|
<div class="content-inner collection-page">
|
||||||
<h3 class="header-text" v-observe-visibility="{callback: headerVisibility}">{{ title }}</h3>
|
<h3 class="header-text" v-observe-visibility="{callback: headerVisibility}">{{ title }}</h3>
|
||||||
<div v-if="data['data'] != 'null'" class="well">
|
<div v-if="data['data'] != 'null'" class="well itemContainer">
|
||||||
<template v-for="(item, key) in data.data">
|
<template v-for="(item, key) in data.data">
|
||||||
<template v-if="item.type == 'artists'">
|
<template v-if="item.type == 'artists'">
|
||||||
<mediaitem-square :item="item"></mediaitem-square>
|
<mediaitem-square :item="item"></mediaitem-square>
|
||||||
|
@ -14,8 +14,7 @@
|
||||||
<mediaitem-square v-else :item="item" :type="getKind(item)"></mediaitem-square>
|
<mediaitem-square v-else :item="item" :type="getKind(item)"></mediaitem-square>
|
||||||
</template>
|
</template>
|
||||||
</template>
|
</template>
|
||||||
<button v-if="triggerEnabled" style="opacity:0;height: 32px;"
|
<button v-if="triggerEnabled" style="opacity:0;height: 32px;" v-observe-visibility="{callback: visibilityChanged}">{{this.app.getLz('term.showMore')}}
|
||||||
v-observe-visibility="{callback: visibilityChanged}">{{this.app.getLz('term.showMore')}}
|
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<transition name="fabfade">
|
<transition name="fabfade">
|
||||||
|
@ -23,7 +22,9 @@
|
||||||
<%- include("../svg/arrow-up.svg") %>
|
<%- include("../svg/arrow-up.svg") %>
|
||||||
</button>
|
</button>
|
||||||
</transition>
|
</transition>
|
||||||
<div class="well" v-show="loading"><div class="spinner"></div></div>
|
<div class="well itemContainer" v-show="loading">
|
||||||
|
<div class="spinner"></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</script>
|
</script>
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -53,9 +53,8 @@
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<h3>{{app.getLz('home.madeForYou')}}</h3>
|
<h3>{{app.getLz('home.madeForYou')}}</h3>
|
||||||
<div class="well">
|
<div class="well">
|
||||||
<vue-horizontal v-if="isSectionReady('madeForYou')">
|
<mediaitem-scroller-horizontal :items="madeForYou" v-if="isSectionReady('madeForYou')">
|
||||||
<mediaitem-square kind="small" v-for="item in madeForYou" :item="item"></mediaitem-square>
|
</mediaitem-scroller-horizontal>
|
||||||
</vue-horizontal>
|
|
||||||
<div class="spinner" v-else></div>
|
<div class="spinner" v-else></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -71,9 +70,8 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="well">
|
<div class="well">
|
||||||
<vue-horizontal v-if="isSectionReady('friendsListeningTo')">
|
<mediaitem-scroller-horizontal :items="friendsListeningTo" v-if="isSectionReady('friendsListeningTo')">
|
||||||
<mediaitem-square kind="small" v-for="item in friendsListeningTo" :item="item"></mediaitem-square>
|
</mediaitem-scroller-horizontal>
|
||||||
</vue-horizontal>
|
|
||||||
<div class="spinner" v-else></div>
|
<div class="spinner" v-else></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -9,12 +9,7 @@
|
||||||
<div class="col" style="padding:0;">
|
<div class="col" style="padding:0;">
|
||||||
<div class="search-input-container" style="width:100%;margin: 16px 0;">
|
<div class="search-input-container" style="width:100%;margin: 16px 0;">
|
||||||
<div class="search-input--icon"></div>
|
<div class="search-input--icon"></div>
|
||||||
<input type="search"
|
<input type="search" style="width:100%;" spellcheck="false" :placeholder="$root.getLz('term.search') + '...'" @input="searchLibraryArtists" v-model="library.artists.search" class="search-input">
|
||||||
style="width:100%;"
|
|
||||||
spellcheck="false"
|
|
||||||
:placeholder="$root.getLz('term.search') + '...'"
|
|
||||||
@input="searchLibraryArtists"
|
|
||||||
v-model="library.artists.search" class="search-input">
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-auto flex-center">
|
<div class="col-auto flex-center">
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue