Add compact artist header option (#1308)
* Support compact artist header (optional) * Add required term
This commit is contained in:
parent
8cf2ddf8dd
commit
19b486e676
6 changed files with 31 additions and 13 deletions
|
@ -521,3 +521,7 @@ Update 03/07/2022 20:00 UTC
|
||||||
|
|
||||||
* `term.plugins`: Added to `en_US`
|
* `term.plugins`: Added to `en_US`
|
||||||
* `settings.header.visual.styles`: Added to `en_US`
|
* `settings.header.visual.styles`: Added to `en_US`
|
||||||
|
|
||||||
|
Update 25/07/2022 00:22 UTC
|
||||||
|
|
||||||
|
* `settings.option.visual.compactArtistHeader`: Added to `en_US`
|
||||||
|
|
|
@ -565,6 +565,7 @@
|
||||||
"settings.option.visual.customAccentColor": "Custom Accent Color",
|
"settings.option.visual.customAccentColor": "Custom Accent Color",
|
||||||
"settings.option.visual.accentColor": "Accent Color",
|
"settings.option.visual.accentColor": "Accent Color",
|
||||||
"settings.option.visual.purplePodcastPlaybackBar": "Purple Playback Bar for Podcasts",
|
"settings.option.visual.purplePodcastPlaybackBar": "Purple Playback Bar for Podcasts",
|
||||||
|
"settings.option.visual.compactArtistHeader": "Compact Artist Header",
|
||||||
"settings.option.visual.windowColor": "Window Tint Color",
|
"settings.option.visual.windowColor": "Window Tint Color",
|
||||||
"settings.header.visual.windowBackgroundStyle.color": "Color Tint",
|
"settings.header.visual.windowBackgroundStyle.color": "Color Tint",
|
||||||
"settings.header.advanced": "Advanced",
|
"settings.header.advanced": "Advanced",
|
||||||
|
|
|
@ -563,6 +563,7 @@
|
||||||
"settings.option.visual.customAccentColor": "Custom Accent Color",
|
"settings.option.visual.customAccentColor": "Custom Accent Color",
|
||||||
"settings.option.visual.accentColor": "Accent Color",
|
"settings.option.visual.accentColor": "Accent Color",
|
||||||
"settings.option.visual.purplePodcastPlaybackBar": "Purple Playback Bar for Podcasts",
|
"settings.option.visual.purplePodcastPlaybackBar": "Purple Playback Bar for Podcasts",
|
||||||
|
"settings.option.visual.compactArtistHeader": "Compact Artist Header",
|
||||||
"settings.option.visual.windowColor": "Window Tint Color",
|
"settings.option.visual.windowColor": "Window Tint Color",
|
||||||
"settings.header.visual.windowBackgroundStyle.color": "Color Tint",
|
"settings.header.visual.windowBackgroundStyle.color": "Color Tint",
|
||||||
"settings.header.advanced": "Advanced",
|
"settings.header.advanced": "Advanced",
|
||||||
|
|
|
@ -1240,6 +1240,10 @@
|
||||||
min-height: 80vh;
|
min-height: 80vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.animated .artist-header-compact {
|
||||||
|
min-height: 40vh;
|
||||||
|
}
|
||||||
|
|
||||||
.artist-header {
|
.artist-header {
|
||||||
//background: linear-gradient(45deg, var(--keyColor), #0e0e0e);
|
//background: linear-gradient(45deg, var(--keyColor), #0e0e0e);
|
||||||
color: white;
|
color: white;
|
||||||
|
|
|
@ -547,6 +547,14 @@
|
||||||
:disabled="app.cfg.visual.customAccentColor" switch/>
|
:disabled="app.cfg.visual.customAccentColor" switch/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="md-option-line">
|
||||||
|
<div class="md-option-segment">
|
||||||
|
{{$root.getLz('settings.option.visual.compactArtistHeader')}}
|
||||||
|
</div>
|
||||||
|
<div class="md-option-segment_auto">
|
||||||
|
<input type="checkbox" v-model="app.cfg.visual.compactArtistHeader" switch/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div class="md-option-line">
|
<div class="md-option-line">
|
||||||
<div class="md-option-segment">
|
<div class="md-option-segment">
|
||||||
{{$root.getLz('settings.option.visual.hardwareAcceleration')}}<br>
|
{{$root.getLz('settings.option.visual.hardwareAcceleration')}}<br>
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<script type="text/x-template" id="cider-artist">
|
<script type="text/x-template" id="cider-artist">
|
||||||
<div class="content-inner artist-page"
|
<div class="content-inner artist-page"
|
||||||
:class="[(data.attributes.editorialVideo && (data.attributes.editorialVideo.motionArtistWide16x9 || data.attributes.editorialVideo.motionArtistFullscreen16x9) || hasHero()) ? 'animated' : '']">
|
:class="[(data.attributes.editorialVideo && (data.attributes.editorialVideo.motionArtistWide16x9 || data.attributes.editorialVideo.motionArtistFullscreen16x9) || hasHero()) ? 'animated' : '']">
|
||||||
<div class="artist-header" :key="data.id" v-observe-visibility="{callback: isHeaderVisible}">
|
<div :class="['artist-header', { 'artist-header-compact': app.cfg.visual.compactArtistHeader }]" :key="data.id" v-observe-visibility="{callback: isHeaderVisible}">
|
||||||
<animatedartwork-view
|
<animatedartwork-view
|
||||||
:priority="true"
|
:priority="true"
|
||||||
v-if="hasAnimated()"
|
v-if="hasAnimated()"
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue