cotugno/jellyfin-web
2
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web.git synced 2024-11-17 19:08:18 -07:00
Code Issues Packages Projects Releases Wiki Activity

improve landscape remote controls

Browse Source
This commit is contained in:
Luke Pulverenti 2015-06-13 14:04:00 -04:00
parent 1a0ca75287
commit 5187a0d558
3 changed files with 119 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
dashboard-ui/css/nowplaying.css
View File

@ -1,16 +1,36 @@
.nowPlayingPage .btnCommand, .nowPlayingPage .btnPlayStateCommand {
font-size: 30px;
text-align: center;
font-size: 24px;
padding: 14px 0;
margin: 3px 1px;
width: 70px;
background: #383838;
border-radius: 5px;
}
.nowPlayingPageImage img {
max-height: 250px;
max-width: 250px;
max-height: 220px;
max-width: 220px;
}
.nowPlayingTimeContainer {
max-width: 280px;
margin: 1.5em auto;
}
.nowPlayingPage .positionSliderContainer {
width: 350px;
width: 100%;
min-width: 200px;
}
.nowPlayingPage .positionSliderContainer .ui-slider-track {
margin: 0 0 !important;
}
.nowPlayingPage .positionSliderContainer .ui-slider {
height: 20px;
}
.nowPlayingNavButtonContainer {
width: 400px;
}
@ -47,12 +67,12 @@
}
.chapterPosterItem {
width: 240px!important;
width: 240px !important;
cursor: pointer;
}
.chapterPosterItem .posterItemImage {
height: 135px!important;
height: 135px !important;
}
.currentChapter {
@ -61,49 +81,63 @@
box-shadow: 0 0 12px 7px #cc3333;
}
@media all and (max-width: 600px) {
.nowPlayingPage .btnCommand, .nowPlayingPage .btnPlayStateCommand {
font-size: 26px;
}
@media all and (max-width: 700px) {
.nowPlayingPageImage img {
max-height: 160px;
max-width: 250px;
max-width: 220px;
}
}
.nowPlayingPage .positionSliderContainer {
width: 300px;
@media all and (max-width: 600px) {
.nowPlayingPageImage img {
max-height: 160px;
max-width: 220px;
}
}
@media all and (max-height: 600px) {
.nowPlayingPage .btnCommand, .nowPlayingPage .btnPlayStateCommand {
margin: 2px 0;
}
.nowPlayingPageImage img {
max-height: 160px;
max-width: 250px;
max-width: 220px;
}
}
@media all and (max-height: 500px) {
@media all and (max-width: 500px) {
.nowPlayingPage .btnCommand, .nowPlayingPage .btnPlayStateCommand {
font-size: 24px;
.nowPlayingPageImage img {
max-height: 120px;
}
}
@media all and (max-width: 400px) {
.nowPlayingPage .btnCommand, .nowPlayingPage .btnPlayStateCommand {
font-size: 19px;
}
.nowPlayingPage .positionSliderContainer {
width: 220px;
}
.nowPlayingNavButtonContainer {
width: 300px;
}
}
.nowPlayingPageTitle {
margin: 1em 0;
}
.nowPlayingInfoButtons {
padding-top: 1em;
}
@media (orientation: landscape) {
.nowPlayingInfoMetadata, .nowPlayingInfoButtons {
display: inline-block;
vertical-align: top;
}
.nowPlayingInfoButtons {
margin-left: 3em;
}
}

103
dashboard-ui/nowplaying.html
View File

@ -13,71 +13,84 @@
<a href="#" class="tabButton tabButtonPlaylist" data-tab="tabPlaylist">${TabPlaylist}</a>
</div>
<div data-role="content" style="padding: 1em 0;">
<div data-role="content">
<div style="text-align: center;">
<div class="tabNowPlaying tabContent" style="display:none;">
<div class="itemName" style="line-height: normal;"></div>
<div class="nowPlayingPageImage" style="margin: 1em 0;"></div>
<div>
<div class="positionTime" style="display: inline-block; vertical-align: top; padding-top: 1px;"></div>
<div class="positionSliderContainer sliderContainer" style="margin: 0 auto;">
<input type="range" style="display: none;" class="mediaSlider positionSlider slider" step=".001" min="0" max="100" value="0" data-mini="true" data-theme="a" data-highlight="true" />
</div>
<div class="runtime" style="display: inline-block; vertical-align: top; padding-top: 1px;"></div>
<div class="nowPlayingPageTitle">
<div class="itemName" style="line-height: normal;"></div>
</div>
<div data-role="controlgroup" data-type="horizontal">
<button data-icon="previous-track" data-inline="true" data-iconpos="notext" title="${ButtonPreviousTrack}" class="btnPreviousTrack btnPlayStateCommand">${ButtonPreviousTrack}</button>
<button data-icon="pause" data-inline="true" data-iconpos="notext" title="${ButtonPause}" class="btnPause btnPlayStateCommand">${ButtonPause}</button>
<button data-icon="play" data-inline="true" data-iconpos="notext" title="${ButtonPlay}" class="btnPlay btnPlayStateCommand">${ButtonPlay}</button>
<button data-icon="stop" data-inline="true" data-iconpos="notext" title="${ButtonStop}" class="btnStop btnPlayStateCommand">${ButtonStop}</button>
<button data-icon="next-track" data-inline="true" data-iconpos="notext" title="${ButtonNextTrack}" class="btnNextTrack btnPlayStateCommand">${ButtonNextTrack}</button>
<div class="nowPlayingInfoMetadata">
<div class="nowPlayingPageImage" style="margin: 1em 0;"></div>
<div class="nowPlayingTimeContainer">
<div>
<div class="positionSliderContainer sliderContainer" style="margin: 0 auto;">
<input type="range" style="display: none;" class="mediaSlider positionSlider slider" step=".001" min="0" max="100" value="0" data-mini="true" data-theme="a" data-highlight="true" />
</div>
</div>
<div style="text-align:left;">
<div class="positionTime" style="float:left;"></div>
<div class="runtime" style="float: right;"></div>
</div>
</div>
</div>
<div data-role="controlgroup" data-type="horizontal">
<button data-icon="volume-up" data-inline="true" data-iconpos="notext" title="${ButtonVolumeUp}" class="btnCommand" data-command="VolumeUp">${ButtonVolumeUp}</button>
<button data-icon="volume-off" data-inline="true" data-iconpos="notext" title="${ButtonMute}" class="btnCommand" data-command="ToggleMute">${ButtonMute}</button>
<button data-icon="grid" data-inline="true" data-iconpos="notext" title="${ButtonOsd}" class="btnCommand videoButton" data-command="ToggleOsdMenu">${ButtonOsd}</button>
<button data-icon="expand" data-inline="true" data-iconpos="notext" title="${ButtonFullscreen}" class="btnToggleFullscreen videoButton btnPlayStateCommand" data-command="ToggleFullscreen">${ButtonFullscreen}</button>
</div>
<div data-role="controlgroup" data-type="horizontal">
<button data-icon="volume-down" data-inline="true" data-iconpos="notext" title="${ButtonVolumeDown}" class="btnCommand" data-command="VolumeDown">${ButtonVolumeDown}</button>
<button data-icon="audiocd" data-inline="true" data-iconpos="notext" title="${ButtonAudioTracks}" class="btnAudioTracks videoButton btnPlayStateCommand" data-command="GoToSearch">${ButtonAudioTracks}</button>
<button data-icon="subtitles" data-inline="true" data-iconpos="notext" title="${ButtonSubtitles}" class="btnSubtitles videoButton btnPlayStateCommand" data-command="GoToSearch">${ButtonSubtitles}</button>
<button data-icon="video" data-inline="true" data-iconpos="notext" title="${ButtonScenes}" class="btnChapters videoButton btnPlayStateCommand" data-command="GoToSearch">${ButtonScenes}</button>
<div class="nowPlayingInfoButtons">
<div>
<button type="button" data-role="none" title="${ButtonPreviousTrack}" class="btnPreviousTrack btnPlayStateCommand imageButton"><i class="fa fa-step-backward"></i></button>
<button type="button" data-role="none" title="${ButtonPause}" class="btnPause btnPlayStateCommand imageButton"><i class="fa fa-pause"></i></button>
<button type="button" data-role="none" title="${ButtonPlay}" class="btnPlay btnPlayStateCommand imageButton"><i class="fa fa-play"></i></button>
<button type="button" data-role="none" title="${ButtonStop}" class="btnStop btnPlayStateCommand imageButton"><i class="fa fa-stop"></i></button>
<button type="button" data-role="none" title="${ButtonNextTrack}" class="btnNextTrack btnPlayStateCommand imageButton"><i class="fa fa-step-forward"></i></button>
</div>
<div>
<button type="button" data-role="none" title="${ButtonVolumeUp}" class="btnCommand imageButton" data-command="VolumeUp"><i class="fa fa-volume-up"></i></button>
<button type="button" data-role="none" title="${ButtonMute}" class="btnCommand imageButton" data-command="ToggleMute"><i class="fa fa-volume-off"></i></button>
<button type="button" data-role="none" title="${ButtonOsd}" class="btnCommand videoButton imageButton" data-command="ToggleOsdMenu"><i class="fa fa-info-circle"></i></button>
<button type="button" data-role="none" title="${ButtonFullscreen}" class="btnToggleFullscreen videoButton btnPlayStateCommand imageButton" data-command="ToggleFullscreen"><i class="fa fa-expand"></i></button>
</div>
<div>
<button type="button" data-role="none" title="${ButtonVolumeDown}" class="btnCommand imageButton" data-command="VolumeDown"><i class="fa fa-volume-down"></i></button>
<button type="button" data-role="none" title="${ButtonAudioTracks}" class="btnAudioTracks videoButton btnPlayStateCommand imageButton" data-command="GoToSearch"><i class="fa fa-music"></i></button>
<button type="button" data-role="none" title="${ButtonSubtitles}" class="btnSubtitles videoButton btnPlayStateCommand imageButton" data-command="GoToSearch"><i class="fa fa-text-width"></i></button>
<button type="button" data-role="none" title="${ButtonScenes}" class="btnChapters videoButton btnPlayStateCommand imageButton" data-command="GoToSearch"><i class="fa fa-video-camera"></i></button>
</div>
</div>
</div>
<div class="tabNavigation tabContent" style="display: none;">
<div data-role="controlgroup" data-type="horizontal">
<button data-icon="arrow-u" data-inline="true" data-iconpos="notext" title="${ButtonArrowUp}" class="btnArrowUp btnCommand" data-command="MoveUp">${ButtonArrowUp}</button>
<div>
<button type="button" data-role="none" title="${ButtonArrowUp}" class="btnArrowUp btnCommand imageButton" data-command="MoveUp"><i class="fa fa-arrow-up"></i></button>
</div>
<div data-role="controlgroup" data-type="horizontal">
<button data-icon="arrow-l" data-inline="true" data-iconpos="notext" title="${ButtonArrowLeft}" class="btnArrowLeft btnCommand" data-command="MoveLeft">${ButtonArrowLeft}</button>
<button data-icon="check" data-inline="true" data-iconpos="notext" title="${ButtonOk}" class="btnOk btnCommand" data-command="Select">${ButtonOk}</button>
<button data-icon="arrow-r" data-inline="true" data-iconpos="notext" title="${ButtonArrowRight}" class="btnArrowRight btnCommand" data-command="MoveRight">${ButtonArrowRight}</button>
<div>
<button type="button" data-role="none" title="${ButtonArrowLeft}" class="btnArrowLeft btnCommand imageButton" data-command="MoveLeft"><i class="fa fa-arrow-left"></i></button>
<button type="button" data-role="none" title="${ButtonOk}" class="btnOk btnCommand imageButton" data-command="Select"><i class="fa fa-check"></i></button>
<button type="button" data-role="none" title="${ButtonArrowRight}" class="btnArrowRight btnCommand imageButton" data-command="MoveRight"><i class="fa fa-arrow-right"></i></button>
</div>
<div data-role="controlgroup" data-type="horizontal">
<button data-icon="arrow-d" data-inline="true" data-iconpos="notext" title="${ButtonArrowDown}" class="btnArrowDown btnCommand" data-command="MoveDown">${ButtonArrowDown}</button>
<div>
<button type="button" data-role="none" title="${ButtonArrowDown}" class="btnArrowDown btnCommand imageButton" data-command="MoveDown"><i class="fa fa-arrow-down"></i></button>
</div>
<div data-role="controlgroup" data-type="horizontal">
<div>
<button data-icon="back" data-inline="true" data-iconpos="notext" title="${ButtonBack}" class="btnBack btnCommand" data-command="Back">${ButtonBack}</button>
<button data-icon="info" data-inline="true" data-iconpos="notext" title="${ButtonInfo}" class="btnInfo btnCommand" data-command="ToggleContextMenu">${ButtonInfo}</button>
</div>
<br />
<div data-role="controlgroup" data-type="horizontal">
<button data-icon="home" data-inline="true" data-iconpos="notext" title="${ButtonHome}" class="btnGoHome btnCommand" data-command="GoHome">${ButtonHome}</button>
<button data-inline="true" data-iconpos="right" title="${ButtonPageUp}" data-icon="plus" class="btnPageUp btnCommand ui-nodisc-icon" data-command="PageUp">${PageButtonAbbreviation}</button>
<button data-inline="true" data-iconpos="right" title="${ButtonLetterUp}" data-icon="plus" class="btnLetterUp btnCommand ui-nodisc-icon" data-command="NextLetter">${LetterButtonAbbreviation}</button>
<button data-icon="search" data-inline="true" data-iconpos="notext" title="${ButtonSearch}" class="btnShowSearch btnCommand" data-command="GoToSearch">${ButtonSearch}</button>
<div>
<button type="button" data-role="none" title="${ButtonHome}" class="btnGoHome btnCommand imageButton" data-command="GoHome"><i class="fa fa-home"></i></button>
<!--<button data-inline="true" data-iconpos="right" title="${ButtonPageUp}" data-icon="plus" class="btnPageUp btnCommand ui-nodisc-icon" data-command="PageUp">${PageButtonAbbreviation}</button>
<button data-inline="true" data-iconpos="right" title="${ButtonLetterUp}" data-icon="plus" class="btnLetterUp btnCommand ui-nodisc-icon" data-command="NextLetter">${LetterButtonAbbreviation}</button>-->
<button type="button" data-role="none" title="${ButtonSearch}" class="btnShowSearch btnCommand imageButton" data-command="GoToSearch"><i class="fa fa-search"></i></button>
</div>
<div data-role="controlgroup" data-type="horizontal">
<button data-icon="gear" data-inline="true" data-iconpos="notext" title="${ButtonSettings}" class="bthShowSettings btnCommand" data-command="GoToSettings">${ButtonSettings}</button>
<button data-inline="true" data-iconpos="right" title="${ButtonPageDown}" data-icon="minus" class="btnPageDown btnCommand ui-nodisc-icon" data-command="PageDown">${PageButtonAbbreviation}</button>
<button data-inline="true" data-iconpos="right" title="${ButtonLetterDown}" data-icon="minus" class="btnLetterDown btnCommand ui-nodisc-icon" data-command="PreviousLetter">${LetterButtonAbbreviation}</button>
<button data-icon="camera" data-inline="true" data-iconpos="notext" title="${ButtonTakeScreenshot}" class="btnScreenshot btnCommand" data-command="TakeScreenshot">${ButtonTakeScreenshot}</button>
<div>
<button type="button" data-role="none" title="${ButtonSettings}" class="bthShowSettings btnCommand imageButton" data-command="GoToSettings"><i class="fa fa-gear"></i></button>
<!--<button data-inline="true" data-iconpos="right" title="${ButtonPageDown}" data-icon="minus" class="btnPageDown btnCommand ui-nodisc-icon" data-command="PageDown">${PageButtonAbbreviation}</button>
<button data-inline="true" data-iconpos="right" title="${ButtonLetterDown}" data-icon="minus" class="btnLetterDown btnCommand ui-nodisc-icon" data-command="PreviousLetter">${LetterButtonAbbreviation}</button>-->
<button type="button" data-role="none" title="${ButtonTakeScreenshot}" class="btnScreenshot btnCommand imageButton" data-command="TakeScreenshot"><i class="fa fa-video-camera"></i></button>
</div>
</div>
<div class="tabAdvanced tabContent" style="display: none;">

1
dashboard-ui/scripts/nowplayingpage.js
View File

@ -368,7 +368,6 @@
$(page).on('swipedown', function () {
document.title = new Date().getTime();
history.back();
});