Support compact artist header (optional)

This commit is contained in:
Pedro Galhardo 2022-07-25 00:17:58 +01:00
parent a155bacf6d
commit 497ea0f645
No known key found for this signature in database
GPG key ID: 4740524CD85770A9
3 changed files with 24 additions and 12 deletions

View file

@ -109,7 +109,7 @@
background: var(--color2); background: var(--color2);
padding: 0px; padding: 0px;
overflow-y: overlay; overflow-y: overlay;
.list-group-item { .list-group-item {
border-radius: 0px; border-radius: 0px;
} }
@ -193,11 +193,11 @@
.list-group-item { .list-group-item {
padding: 12px 6px; padding: 12px 6px;
&:hover { &:hover {
filter: brightness(1.2); filter: brightness(1.2);
} }
&:active { &:active {
filter: brightness(0.8); filter: brightness(0.8);
} }
@ -210,7 +210,7 @@
padding: 0px; padding: 0px;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
.stylestack-editor { .stylestack-editor {
padding-bottom: 16px; padding-bottom: 16px;
} }
@ -1233,6 +1233,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;
@ -2248,7 +2252,7 @@
.settings-tab-content { .settings-tab-content {
height:100%; height:100%;
} }
&.no-sidebar { &.no-sidebar {
.gh-header { .gh-header {
>.row { >.row {

View file

@ -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>
@ -771,19 +779,19 @@
<option value='afrikaans'>Afrikaans</option> <option value='afrikaans'>Afrikaans</option>
<option value='albanian'>Albanian</option> <option value='albanian'>Albanian</option>
<option value='arab'>Arabic</option> <option value='arab'>Arabic</option>
<option value='armenian'>Armenian</option> <option value='armenian'>Armenian</option>
<option value='azerbaijani'>Azerbaijani</option> <option value='azerbaijani'>Azerbaijani</option>
<option value='bengali'>Bengali</option> <option value='bengali'>Bengali</option>
<option value='bosnian'>Bosnian</option> <option value='bosnian'>Bosnian</option>
<option value='brazilian'>Brazilian</option> <option value='brazilian'>Brazilian</option>
<option value='bulgarian'>Bulgarian</option> <option value='bulgarian'>Bulgarian</option>
<option value='chinese'>Chinese (Simplified)</option> <option value='chinese'>Chinese (Simplified)</option>
<option value='chinese-trad'>Chinese (Traditional)</option> <option value='chinese-trad'>Chinese (Traditional)</option>
<option value='chinese-romaji'>Romanized Chinese</option> <option value='chinese-romaji'>Romanized Chinese</option>
<option value='croatian'>Croatian</option> <option value='croatian'>Croatian</option>
<option value='czech'>Czech</option> <option value='czech'>Czech</option>
<option value='danish'>Danish</option> <option value='danish'>Danish</option>
<option value='dutch'>Dutch</option> <option value='dutch'>Dutch</option>
<option value='estonian'>Estonian</option> <option value='estonian'>Estonian</option>
<option value='english'>English</option> <option value='english'>English</option>
<option value='farsi'>Farsi</option> <option value='farsi'>Farsi</option>

View file

@ -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()"