mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Fix layout issues on mobile item details

Browse source
This commit is contained in:
Bill Thornton 2020-12-18 10:09:45 -05:00
parent 898704d9b0
commit e9d956f5f1
3 changed files with 48 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/controllers/itemDetails/index.html
View file

@ -5,6 +5,10 @@
<div class="detailLogo"></div>
<div class="detailPageWrapperContainer">
<div class="detailPagePrimaryContainer padded-left padded-right">
<div class="primaryImageWrapper">
<img id="primaryImage" />
</div>
<div class="infoWrapper infoText">
<div class="nameContainer"></div>
<div class="itemMiscInfo itemMiscInfo-primary" style="margin-bottom: 0.6em;"></div>

20
src/controllers/itemDetails/index.js
View file

@ -552,7 +552,7 @@ function renderDetailPageBackdrop(page, item, apiClient) {
let hasbackdrop = false;
const itemBackdropElement = page.querySelector('#itemBackdrop');
if (!layoutManager.mobile && !userSettings.detailsBanner()) {
if (layoutManager.mobile || !userSettings.detailsBanner()) {
return false;
}
@ -589,6 +589,19 @@ function renderDetailPageBackdrop(page, item, apiClient) {
return hasbackdrop;
}
function renderPrimaryImage(page, item, apiClient) {
if (item?.ImageTags?.Primary) {
const imageUrl = apiClient.getScaledImageUrl(item.Id, {
type: 'Primary',
maxWidth: dom.getScreenWidth(),
tag: item.ImageTags.Primary
});
page.querySelector('#primaryImage').src = imageUrl;
page.querySelector('.primaryImageWrapper')?.classList.remove('hide');
}
}
function reloadFromItem(instance, page, params, item, user) {
const apiClient = ServerConnections.getApiClient(item.ServerId);
@ -601,6 +614,9 @@ function reloadFromItem(instance, page, params, item, user) {
renderLogo(page, item, apiClient);
renderDetailPageBackdrop(page, item, apiClient);
}
if (layoutManager.mobile) {
renderPrimaryImage(page, item, apiClient);
}
renderBackdrop(item);
// Render the main information for the item
@ -2073,7 +2089,7 @@ export default function (view, params) {
view.addEventListener('viewshow', function (e) {
const page = this;
libraryMenu.setTransparentMenu(true);
libraryMenu.setTransparentMenu(!layoutManager.mobile);
if (e.detail.isRestored) {
if (currentItem) {