Merge pull request #151 from ciderapp/fuck-git
Add main branch renderer edits.
This commit is contained in:
commit
aa89f8ec4e
6 changed files with 88 additions and 26 deletions
|
@ -863,6 +863,13 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
}
|
||||
|
||||
.app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
border-radius: 50%;
|
||||
background: rgb(50 50 50);
|
||||
cursor: default;
|
||||
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.4);
|
||||
transition: all var(--appleTransition);
|
||||
}
|
||||
|
||||
|
@ -876,10 +883,6 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
transform: scale(1);
|
||||
}
|
||||
|
||||
.app-chrome .app-chrome-item.volume > input[type=range] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.app-chrome .app-chrome-item.volume > input[type=range] {
|
||||
-webkit-appearance: none;
|
||||
height: 4px;
|
||||
|
@ -887,16 +890,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
border-radius: 5px;
|
||||
background-size: 70% 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
border-radius: 50%;
|
||||
background: rgb(50 50 50);
|
||||
cursor: default;
|
||||
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.4);
|
||||
width: 100%,
|
||||
}
|
||||
|
||||
.app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-runnable-track {
|
||||
|
@ -1014,6 +1008,15 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
//margin-bottom: -3px;
|
||||
}
|
||||
}
|
||||
|
||||
.explicit-icon {
|
||||
background-image: url("./assets/explicit.svg");
|
||||
height: 12px;
|
||||
width: 36px;
|
||||
filter: contrast(0);
|
||||
background-repeat: no-repeat;
|
||||
margin-left: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.app-chrome .app-chrome-item > .app-playback-controls .song-duration p {
|
||||
|
@ -1201,7 +1204,57 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
/* Window is smaller <= 1023px width */
|
||||
@media only screen and (max-width: 1023px) {
|
||||
.display--small {
|
||||
display: inherit !important;
|
||||
display: inherit !important;;
|
||||
|
||||
.slider {
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
input[type=range] {
|
||||
-webkit-appearance: none;
|
||||
height: 4px;
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
border-radius: 5px;
|
||||
background-size: 70% 100%;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
border-radius: 50%;
|
||||
background: rgb(50 50 50);
|
||||
cursor: default;
|
||||
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.4);
|
||||
transition: all var(--appleTransition);
|
||||
}
|
||||
|
||||
&::-webkit-slider-thumb:hover {
|
||||
background-image: radial-gradient(var(--keyColor) 2px, transparent 3px, transparent 10px);
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
&::-webkit-slider-thumb:active {
|
||||
background-image: radial-gradient(var(--keyColor) 3px, transparent 4px, transparent 10px);
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
&::-webkit-slider-runnable-track {
|
||||
-webkit-appearance: none;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.display--large {
|
||||
|
|
|
@ -2,8 +2,7 @@
|
|||
<div tabindex="0"
|
||||
class="cd-mediaitem-square" :class="getClasses()" @contextmenu="contextMenu"
|
||||
v-observe-visibility="{callback: visibilityChanged}"
|
||||
:style="{'--spcolor': getBgColor()}"
|
||||
@click.self='app.routeView(item)'>
|
||||
:style="{'--spcolor': getBgColor()}">
|
||||
<template v-if="isVisible">
|
||||
<div class="artwork-container">
|
||||
<div class="artwork" @click='app.routeView(item)'>
|
||||
|
|
|
@ -72,10 +72,10 @@
|
|||
style["top"] = this.event.clientY + "px";
|
||||
// make sure the menu panel isnt off the screen
|
||||
if (this.event.clientX + this.size[0] > window.innerWidth) {
|
||||
style["left"] = (window.innerWidth - this.size[0]) + "px";
|
||||
style["left"] = (this.event.clientX - this.size[0]) + "px";
|
||||
}
|
||||
if (this.event.clientY + this.size[1] > window.innerHeight) {
|
||||
style["top"] = (window.innerHeight - this.size[1]) + "px";
|
||||
style["top"] = (this.event.clientY - this.size[1]) + "px";
|
||||
}
|
||||
}
|
||||
return style
|
||||
|
|
|
@ -82,8 +82,10 @@
|
|||
<mediaitem-artwork :url="currentArtUrl"></mediaitem-artwork>
|
||||
</div>
|
||||
<div class="playback-info">
|
||||
<div class="song-name">
|
||||
<div class="song-name" style="-webkit-box-orient: horizontal;"
|
||||
:style="[mk.nowPlayingItem['attributes']['contentRating'] == 'explicit' ? {'margin-left' : '23px'} : {'margin-left' : '0px'} ]">
|
||||
{{ mk.nowPlayingItem["attributes"]["name"] }}
|
||||
<div class="explicit-icon" v-if="mk.nowPlayingItem['attributes']['contentRating'] == 'explicit'" style="display: inline-block"></div>
|
||||
</div>
|
||||
<div class="song-artist"
|
||||
style="display: inline-block; -webkit-box-orient: horizontal; white-space: nowrap;">
|
||||
|
@ -92,7 +94,7 @@
|
|||
{{ mk.nowPlayingItem["attributes"]["artistName"] }}
|
||||
</div>
|
||||
<div class="song-artist item-navigate" style="display: inline-block;"
|
||||
@click="getNowPlayingItemDetailed('album')">
|
||||
@click="getNowPlayingItemDetailed('album')" v-if="mk.nowPlayingItem['attributes']['albumName'] != ''">
|
||||
<div class="separator" style="display: inline-block;">{{"—"}}</div>
|
||||
{{(mk.nowPlayingItem["attributes"]["albumName"]) ?
|
||||
(mk.nowPlayingItem["attributes"]["albumName"]) : "" }}
|
||||
|
@ -288,8 +290,8 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="app-chrome-item volume">
|
||||
<div class="app-chrome-item volume-icon"></div>
|
||||
<div class="input-container">
|
||||
<div class="app-chrome-item volume-icon"></div>
|
||||
<input type="range" class="" @wheel="volumeWheel" step="0.01" min="0" max="1"
|
||||
v-model="mk.volume"
|
||||
v-if="typeof mk.volume != 'undefined'">
|
||||
|
|
|
@ -132,6 +132,10 @@
|
|||
<h3>{{ data.attributes.isGroup ? "Formed" : "Born" }}</h3>
|
||||
{{ data.attributes.bornOrFormed }}
|
||||
</div>
|
||||
<div v-if="data.attributes.genreNames">
|
||||
<h3>Genre</h3>
|
||||
{{ data.attributes.genreNames.join(', ') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -8,6 +8,10 @@
|
|||
<mediaitem-square :item="getTopResult()"></mediaitem-square>
|
||||
</template>
|
||||
</div>
|
||||
<div v-else style="text-align: center">
|
||||
<h3>No Results</h3>
|
||||
<p>Try a new search.</p>
|
||||
</div>
|
||||
<div class="col" v-if="search.results.song">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
|
@ -108,10 +112,10 @@
|
|||
},
|
||||
methods: {
|
||||
getTopResult() {
|
||||
if (this.search.results["meta"]) {
|
||||
try {
|
||||
return this.search.results[this.search.results.meta.results.order[0]]["data"][0]
|
||||
} else {
|
||||
return false;
|
||||
} catch( error ) {
|
||||
return false
|
||||
}
|
||||
},
|
||||
async getCategories() {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue