[web-src] Fix wrong sizing of cover artwork on iOS

This commit is contained in:
chme 2020-05-01 09:29:30 +02:00
parent 329c0620fc
commit f4539cac20
2 changed files with 38 additions and 12 deletions

View File

@ -122,18 +122,42 @@ section.fd-tabs-section + section.fd-content {
overflow: hidden; overflow: hidden;
flex-grow: 1; flex-grow: 1;
flex-shrink: 1; flex-shrink: 1;
/* Use flex box to properly size children */
display: flex;
} }
.fd-cover-image { .fd-cover-image {
height: 100%; display: flex;
flex-grow: 1;
flex-shrink: 1;
/* Allow flex item to shrink smaller than its content size: https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size */
min-width: 0;
min-height: 0;
overflow: hidden;
} }
.fd-cover-image img { .fd-cover-image img {
width: 100%; /* Use object-fit to properly size the cover artwork: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit */
height: 100%;
object-fit: contain; object-fit: contain;
object-position: bottom; object-position: center bottom;
filter: drop-shadow(0px 0px 1px rgba(0,0,0,.3)) drop-shadow(0px 0px 10px rgba(0,0,0,.3)); filter: drop-shadow(0px 0px 1px rgba(0,0,0,.3)) drop-shadow(0px 0px 10px rgba(0,0,0,.3));
/* Allow flex item to grow/shrink to fill the whole container size */
flex-grow: 1;
flex-shrink: 1;
/* Unset height/width to allow flex sizing */
height: unset;
width: unset;
max-width: unset;
max-height: unset;
/* Allow flex item to shrink smaller than its content size: https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size */
min-width: 0;
min-height: 0;
overflow: hidden;
} }

View File

@ -43,16 +43,18 @@
</div> </div>
</div> </div>
</div> </div>
<div v-else class="fd-is-fullheight" style="justify-content: center;"> <div v-else class="fd-is-fullheight">
<div class="fd-is-expanded fd-has-padding-left-right has-text-centered"> <div class="fd-is-expanded fd-has-padding-left-right" style="flex-direction: column;">
<div class="content has-text-centered">
<h1 class="title is-5"> <h1 class="title is-5">
You play queue is empty Your play queue is empty
</h1> </h1>
<p class="content"> <p>
Add some tracks by browsing your library Add some tracks by browsing your library
</p> </p>
</div> </div>
</div> </div>
</div>
<modal-dialog-queue-item :show="show_details_modal" :item="selected_item" @close="show_details_modal = false" /> <modal-dialog-queue-item :show="show_details_modal" :item="selected_item" @close="show_details_modal = false" />
</section> </section>
</template> </template>