Merge pull request #145 from JaxonTekk/main

misc improvements
This commit is contained in:
cryptofyre 2022-01-18 21:01:29 -06:00 committed by GitHub
commit 5c9b913cdb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 75 additions and 22 deletions

View file

@ -836,6 +836,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);
}
@ -849,10 +856,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;
@ -860,16 +863,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 {
@ -1155,7 +1149,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 {

View file

@ -82,7 +82,8 @@
<mediaitem-artwork :url="currentArtUrl"></mediaitem-artwork>
</div>
<div class="playback-info">
<div class="song-name" style="-webkit-box-orient: horizontal;">
<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>
@ -93,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"]) : "" }}
@ -289,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'">

View file

@ -31,7 +31,7 @@
</div>
<button class="artist-more" @click="artistMenu">
<div style=" margin-top: -1px;
margin-left: -5px;
margin-left: -6px;
width: 36px;
height: 36px;">
<%- include("../svg/more.svg") %>
@ -115,6 +115,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>

View file

@ -7,6 +7,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">
@ -91,10 +95,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
}
}
}