mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
updated mobile and tablet layouts in web client
This commit is contained in:
parent
722c5a92f3
commit
2861ff68c9
11 changed files with 58 additions and 52 deletions
|
@ -176,8 +176,11 @@
|
|||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.labelPageSize, .selectPageSize {
|
||||
display: none;
|
||||
|
||||
@media all and (max-width: 650px) {
|
||||
.labelPageSize, .selectPageSize {
|
||||
display: none!important;
|
||||
}
|
||||
}
|
||||
|
||||
.galleryImageContainer {
|
||||
|
@ -559,11 +562,11 @@ a.itemTag:hover {
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
.detailImageProgressContainer progress {
|
||||
.detailImageProgressContainer progress {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
height: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 550px) {
|
||||
|
||||
|
@ -696,10 +699,6 @@ a.itemTag:hover {
|
|||
.viewControls + .listTopPaging {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.labelPageSize, .selectPageSize {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 750px) {
|
||||
|
@ -846,9 +845,9 @@ a.itemTag:hover {
|
|||
background: rgba(82, 181, 75, .8);
|
||||
}
|
||||
|
||||
.unplayedIndicator div:after {
|
||||
.unplayedIndicator div:after {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
.itemProgress {
|
||||
vertical-align: top;
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
/* Now playing bar */
|
||||
.nowPlayingBar {
|
||||
padding: 6px 0 6px 0;
|
||||
padding: 6px 0 24px 0;
|
||||
border-top: 2px solid green;
|
||||
}
|
||||
|
||||
|
@ -17,7 +17,7 @@
|
|||
.nowPlayingBar .barBackground {
|
||||
border-top: 2px solid green;
|
||||
position: absolute;
|
||||
margin: -8px -0.5em !important;
|
||||
margin: -8px -0.5em -26px !important;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
|
@ -113,11 +113,11 @@
|
|||
}
|
||||
|
||||
.squarePosterItem {
|
||||
width: 154px;
|
||||
width: 142px;
|
||||
}
|
||||
|
||||
.squarePosterItem .posterItemImage {
|
||||
height: 150px;
|
||||
height: 138px;
|
||||
}
|
||||
|
||||
.storeReviewCount {
|
||||
|
@ -126,27 +126,27 @@
|
|||
|
||||
|
||||
.backdropPosterItem {
|
||||
width: 292px;
|
||||
width: 142px;
|
||||
}
|
||||
|
||||
.backdropPosterItem .posterItemImage {
|
||||
height: 162px;
|
||||
height: 77.625px;
|
||||
}
|
||||
|
||||
.smallBackdropPosterItem {
|
||||
width: 172px;
|
||||
width: 160px;
|
||||
}
|
||||
|
||||
.smallBackdropPosterItem .posterItemImage {
|
||||
height: 94.5px;
|
||||
height: 87.75px;
|
||||
}
|
||||
|
||||
.portraitPosterItem {
|
||||
width: 106px;
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
.portraitPosterItem .posterItemImage {
|
||||
height: 153px;
|
||||
height: 129px;
|
||||
}
|
||||
|
||||
.posterItemProgress .itemProgressBar {
|
||||
|
@ -155,13 +155,6 @@
|
|||
opacity: .6;
|
||||
}
|
||||
|
||||
@media all and (max-width: 400px) {
|
||||
|
||||
.backdropPosterItem {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 540px) {
|
||||
|
||||
.backdropPosterItem {
|
||||
|
@ -171,9 +164,6 @@
|
|||
.backdropPosterItem .posterItemImage {
|
||||
height: 144px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 540px) {
|
||||
|
||||
.smallBackdropPosterItem {
|
||||
width: 188px;
|
||||
|
@ -184,6 +174,26 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 600px) {
|
||||
|
||||
|
||||
.squarePosterItem {
|
||||
width: 164px;
|
||||
}
|
||||
|
||||
.squarePosterItem .posterItemImage {
|
||||
height: 160px;
|
||||
}
|
||||
|
||||
.portraitPosterItem {
|
||||
width: 122px;
|
||||
}
|
||||
|
||||
.portraitPosterItem .posterItemImage {
|
||||
height: 177px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 650px) {
|
||||
|
||||
.backdropPosterItem {
|
||||
|
|
|
@ -59,7 +59,7 @@
|
|||
|
||||
.searchHintSecondaryText {
|
||||
font-size: 13px;
|
||||
color: #bbb;
|
||||
color: #ddd;
|
||||
margin-top: 3px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
|
|
|
@ -408,7 +408,7 @@ h1 .imageLink {
|
|||
|
||||
@media all and (min-width: 900px) {
|
||||
|
||||
.header {
|
||||
.page:not(.wizardPage) .header {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -24,7 +24,7 @@
|
|||
<p><strong>A new version of Media Browser Server is available!</strong></p>
|
||||
<p id="newVersionNumber"></p>
|
||||
<div id="btnUpdateApplicationContainer">
|
||||
<button id="btnUpdateApplication" type="button" data-icon="arrow-d" data-theme="b" onclick="DashboardPage.updateApplication();">Update Now</button>
|
||||
<button id="btnUpdateApplication" type="button" data-icon="arrow-d" data-theme="b">Update Now</button>
|
||||
</div>
|
||||
<div id="btnManualUpdateContainer">
|
||||
Please shutdown the server and <a href="http://www.mediabrowser3.com/download" target="_blank">update manually.</a>
|
||||
|
|
|
@ -34,7 +34,7 @@ $.fn.checked = function (value) {
|
|||
|
||||
$.fn.buttonEnabled = function(enabled) {
|
||||
|
||||
return this;
|
||||
return enabled ? this.attr('disabled', '').removeAttr('disabled') : this.attr('disabled', 'disabled');
|
||||
};
|
||||
|
||||
if (!Array.prototype.filter) {
|
||||
|
|
|
@ -1108,18 +1108,15 @@
|
|||
|
||||
getPlayedIndicatorHtml: function (item) {
|
||||
|
||||
if (item.Type == "Series" || item.Type == "Season" || item.Type == "BoxSet") {
|
||||
if (item.Type == "Series" || item.Type == "Season" || item.Type == "BoxSet" || item.MediaType == "Video") {
|
||||
if (item.RecursiveUnplayedItemCount) {
|
||||
return '<div class="unplayedIndicator">' + item.RecursiveUnplayedItemCount + '</div>';
|
||||
}
|
||||
}
|
||||
|
||||
if (item.PlayedPercentage == 100) {
|
||||
return '<div class="unplayedIndicator"><div class="ui-icon-check ui-btn-icon-notext"></div></div>';
|
||||
}
|
||||
|
||||
if (item.MediaType == "Video") {
|
||||
|
||||
var userData = item.UserData || {};
|
||||
|
||||
if (userData.Played) {
|
||||
|
|
|
@ -20,7 +20,9 @@
|
|||
items: result.Items,
|
||||
useAverageAspectRatio: true,
|
||||
showUnplayedIndicator: false,
|
||||
shape: "square"
|
||||
shape: "square",
|
||||
showTitle: true,
|
||||
showParentTitle: true
|
||||
}));
|
||||
|
||||
});
|
||||
|
|
|
@ -117,7 +117,6 @@ var Dashboard = {
|
|||
showError: function (message) {
|
||||
|
||||
$.mobile.loading('show', {
|
||||
theme: "e",
|
||||
text: message,
|
||||
textonly: true,
|
||||
textVisible: true
|
||||
|
@ -135,7 +134,6 @@ var Dashboard = {
|
|||
var message = options;
|
||||
|
||||
$.mobile.loading('show', {
|
||||
theme: "b",
|
||||
text: message,
|
||||
textonly: true,
|
||||
textVisible: true
|
||||
|
|
|
@ -17,7 +17,7 @@
|
|||
</div>
|
||||
<div data-role="content">
|
||||
<div class="ehsContent">
|
||||
<br />
|
||||
<h1 class="listHeader">Next Up</h1>
|
||||
<div id="nextUpItems">
|
||||
</div>
|
||||
</div>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue