MyFavMirrors/owntone-server
1
0
Fork 0
mirror of https://github.com/owntone/owntone-server.git synced 2025-01-14 08:15:02 -05:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
web-src/src/mystyles.css
View File

@ -122,18 +122,42 @@ section.fd-tabs-section + section.fd-content {
overflow: hidden;
flex-grow: 1;
flex-shrink: 1;
/* Use flex box to properly size children */
display: flex;
}
.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 {
width: 100%;
height: 100%;
/* Use object-fit to properly size the cover artwork: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit */
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));
/* 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;
}

10
web-src/src/pages/PageNowPlaying.vue
View File

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