okseby/orchard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

adjustements to home screen

Browse source
This commit is contained in:
booploops 2022-02-10 20:51:41 -08:00
parent b1ebc25870
commit a7a7350b01
5 changed files with 63 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

31
src/renderer/style.less
View file

@ -2746,22 +2746,25 @@ 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;
display: flex;
flex-flow: wrap;
justify-content: center;
> .cd-mediaitem-square {
width: 220px; &.itemContainer {
height: 260px; display: flex;
display: inline-flex; flex-flow: wrap;
flex: 0 0 auto;
flex-direction: column;
font-size: 14px;
justify-content: center; justify-content: center;
align-items: center; .cd-mediaitem-square {
border-radius: 6px; width: 220px;
max-width: 240px; height: 260px;
flex-grow: 1; display: inline-flex;
flex: 0 0 auto;
flex-direction: column;
font-size: 14px;
justify-content: center;
align-items: center;
border-radius: 6px;
max-width: 240px;
flex-grow: 1;
}
} }
} }

13
src/renderer/views/components/mediaitem-scroller-horizontal.ejs
View file

@ -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" v-for="item in items"></mediaitem-square>
<mediaitem-square :kind="kind" :item="item" </vue-horizontal>
v-for="item in items"></mediaitem-square>
</vue-horizontal>
</template>
</script> </script>
<script> <script>
@ -22,7 +19,7 @@
defualt: "" defualt: ""
} }
}, },
data: function () { data: function() {
return { return {
app: this.$root, app: this.$root,
} }

21
src/renderer/views/pages/collection-list.ejs
View file

@ -1,12 +1,12 @@
<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>
</template> </template>
<template v-else> <template v-else>
<mediaitem-list-item <mediaitem-list-item
v-if="getKind(item) == 'song'" v-if="getKind(item) == 'song'"
:index="key" :index="key"
@ -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>
@ -44,7 +45,7 @@
default: "artists" default: "artists"
} }
}, },
data: function () { data: function() {
return { return {
triggerEnabled: true, triggerEnabled: true,
canSeeTrigger: false, canSeeTrigger: false,
@ -92,8 +93,8 @@
this.triggerEnabled = true; this.triggerEnabled = true;
} }
this.loading = false this.loading = false
}else{ } else {
if(!response.data.results[app.collectionList.response.groups]) { if (!response.data.results[app.collectionList.response.groups]) {
this.loading = false this.loading = false
return return
} }
@ -106,14 +107,14 @@
} }
}) })
}, },
headerVisibility: function (isVisible, entry) { headerVisibility: function(isVisible, entry) {
if (isVisible) { if (isVisible) {
this.showFab = false; this.showFab = false;
} else { } else {
this.showFab = true; this.showFab = true;
} }
}, },
visibilityChanged: function (isVisible, entry) { visibilityChanged: function(isVisible, entry) {
if (isVisible) { if (isVisible) {
this.canSeeTrigger = true; this.canSeeTrigger = true;
this.getNext(); this.getNext();

10
src/renderer/views/pages/home.ejs
View file

@ -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>

57
src/renderer/views/pages/library-artists.ejs
View file

@ -1,40 +1,35 @@
<div class="content-inner"> <div class="content-inner">
<div class="row"> <div class="row">
<div class="col" style="padding:0;"> <div class="col" style="padding:0;">
<h1 class="header-text">{{$root.getLz('term.artists')}}</h1> <h1 class="header-text">{{$root.getLz('term.artists')}}</h1>
</div>
</div> </div>
<div class="row">
<div class="col" style="padding:0;"> </div>
<div class="search-input-container" style="width:100%;margin: 16px 0;"> <div class="row">
<div class="search-input--icon"></div> <div class="col" style="padding:0;">
<input type="search" <div class="search-input-container" style="width:100%;margin: 16px 0;">
style="width:100%;" <div class="search-input--icon"></div>
spellcheck="false" <input type="search" style="width:100%;" spellcheck="false" :placeholder="$root.getLz('term.search') + '...'" @input="searchLibraryArtists" v-model="library.artists.search" class="search-input">
:placeholder="$root.getLz('term.search') + '...'"
@input="searchLibraryArtists"
v-model="library.artists.search" class="search-input">
</div>
</div> </div>
<div class="col-auto flex-center"> </div>
<div class="row"> <div class="col-auto flex-center">
<!-- <div class="col"> <div class="row">
<!-- <div class="col">
<select class="md-select" v-model="library.artists.sorting[1]" @change="searchLibraryArtists(1)"> <select class="md-select" v-model="library.artists.sorting[1]" @change="searchLibraryArtists(1)">
<optgroup label="Sort By"> <optgroup label="Sort By">
<option v-for="(sort, index) in library.artists.sortingOptions" :value="index">{{ sort }}</option> <option v-for="(sort, index) in library.artists.sortingOptions" :value="index">{{ sort }}</option>
</optgroup> </optgroup>
</select> </select>
</div> --> </div> -->
<div class="col"> <div class="col">
<select class="md-select" v-model="library.artists.sortOrder[1]" @change="searchLibraryArtists(1)"> <select class="md-select" v-model="library.artists.sortOrder[1]" @change="searchLibraryArtists(1)">
<optgroup :label="$root.getLz('term.sortOrder')"> <optgroup :label="$root.getLz('term.sortOrder')">
<option value="asc">{{$root.getLz('term.sortOrder.ascending')}}</option> <option value="asc">{{$root.getLz('term.sortOrder.ascending')}}</option>
<option value="desc">{{$root.getLz('term.sortOrder.descending')}}</option> <option value="desc">{{$root.getLz('term.sortOrder.descending')}}</option>
</optgroup> </optgroup>
</select> </select>
</div> </div>
<!-- <div class="col"> <!-- <div class="col">
<select class="md-select" v-model="library.artists.viewAs"> <select class="md-select" v-model="library.artists.viewAs">
<optgroup label="View As"> <optgroup label="View As">
<option value="covers">Cover Art</option> <option value="covers">Cover Art</option>
@ -42,13 +37,13 @@
</optgroup> </optgroup>
</select> </select>
</div> --> </div> -->
</div>
</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> </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>