mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
Merge pull request #667 from Nickbert7/update-remotecontrol
Update remotecontrol layout
This commit is contained in:
dkanada
GitHub
commit
6c56234171
4 changed files with 86 additions and 68 deletions
|
|
@ -7,6 +7,26 @@
|
||||||
text-align: center
|
text-align: center
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.btnArrowUp{
|
||||||
|
border-radius: 40% 40% 10% 10%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btnArrowLeft{
|
||||||
|
border-radius: 40% 10% 10% 40%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btnArrowRight{
|
||||||
|
border-radius: 10% 40% 40% 10%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btnArrowDown{
|
||||||
|
border-radius: 10% 10% 40% 40%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btnOk{
|
||||||
|
border-radius: 10%;
|
||||||
|
}
|
||||||
|
|
||||||
.nowPlayingPageTitle {
|
.nowPlayingPageTitle {
|
||||||
margin: 0 0 .5em .5em
|
margin: 0 0 .5em .5em
|
||||||
}
|
}
|
||||||
|
|
@ -151,6 +171,9 @@
|
||||||
.nowPlayingInfoButtons .nowPlayingPageUserDataButtons {
|
.nowPlayingInfoButtons .nowPlayingPageUserDataButtons {
|
||||||
display: none !important
|
display: none !important
|
||||||
}
|
}
|
||||||
|
.navigationSection .collapseContent i{
|
||||||
|
font-size: 4em;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-width:47em) {
|
@media all and (max-width:47em) {
|
||||||
|
|
|
||||||
|
|
@ -215,23 +215,12 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
|
||||||
context.querySelector(".sendTextSection").classList.add("hide");
|
context.querySelector(".sendTextSection").classList.add("hide");
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!currentPlayer.isLocalPlayer) {
|
if (-1 != supportedCommands.indexOf("Select") && !currentPlayer.isLocalPlayer) {
|
||||||
context.querySelector(".navigationSection").classList.remove("hide");
|
context.querySelector(".navigationSection").classList.remove("hide");
|
||||||
} else {
|
} else {
|
||||||
context.querySelector(".navigationSection").classList.add("hide");
|
context.querySelector(".navigationSection").classList.add("hide");
|
||||||
}
|
}
|
||||||
|
|
||||||
buttonVisible(context.querySelector(".btnArrowUp"), -1 != supportedCommands.indexOf("MoveUp"));
|
|
||||||
buttonVisible(context.querySelector(".btnArrowLeft"), -1 != supportedCommands.indexOf("MoveDown"));
|
|
||||||
buttonVisible(context.querySelector(".btnArrowRight"), -1 != supportedCommands.indexOf("MoveRight"));
|
|
||||||
buttonVisible(context.querySelector(".btnArrowDown"), -1 != supportedCommands.indexOf("MoveLeft"));
|
|
||||||
buttonVisible(context.querySelector(".btnOk"), -1 != supportedCommands.indexOf("Select"));
|
|
||||||
buttonVisible(context.querySelector(".btnBack"), -1 != supportedCommands.indexOf("Back"));
|
|
||||||
buttonVisible(context.querySelector(".btnContextMenu"), -1 != supportedCommands.indexOf("ToggleContextMenu"));
|
|
||||||
buttonVisible(context.querySelector(".btnShowSearch"), -1 != supportedCommands.indexOf("GoToSearch"));
|
|
||||||
buttonVisible(context.querySelector(".bthShowSettings"), -1 != supportedCommands.indexOf("GoToSettings"));
|
|
||||||
buttonVisible(context.querySelector(".btnGoHome"), -1 != supportedCommands.indexOf("GoHome"));
|
|
||||||
|
|
||||||
buttonVisible(context.querySelector(".btnStop"), null != item);
|
buttonVisible(context.querySelector(".btnStop"), null != item);
|
||||||
buttonVisible(context.querySelector(".btnNextTrack"), null != item);
|
buttonVisible(context.querySelector(".btnNextTrack"), null != item);
|
||||||
buttonVisible(context.querySelector(".btnPreviousTrack"), null != item);
|
buttonVisible(context.querySelector(".btnPreviousTrack"), null != item);
|
||||||
|
|
|
||||||
|
|
@ -72,67 +72,72 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="navigationSection">
|
<div>
|
||||||
<br />
|
<div class="navigationSection">
|
||||||
<div>
|
<div is="emby-collapse" title="${HeaderNavigation}">
|
||||||
<button is="paper-icon-button-light" class="btnArrowUp btnCommand autoSize raised" title="${ButtonArrowUp}" data-command="MoveUp">
|
<div class="collapseContent">
|
||||||
<i class="md-icon">keyboard_arrow_up</i>
|
<div>
|
||||||
</button>
|
<button is="paper-icon-button-light" class="btnArrowUp btnCommand autoSize button-submit" title="${ButtonArrowUp}" data-command="MoveUp">
|
||||||
</div>
|
<i class="md-icon">keyboard_arrow_up</i>
|
||||||
<br />
|
</button>
|
||||||
<div>
|
</div>
|
||||||
<button is="paper-icon-button-light" class="btnArrowLeft btnCommand autoSize raised" title="${ButtonArrowLeft}" data-command="MoveLeft">
|
<br />
|
||||||
<i class="md-icon">keyboard_arrow_left</i>
|
<div>
|
||||||
</button>
|
<button is="paper-icon-button-light" class="btnArrowLeft btnCommand autoSize button-submit" title="${ButtonArrowLeft}" data-command="MoveLeft">
|
||||||
<button is="paper-icon-button-light" class="btnOk btnCommand autoSize raised" title="${ButtonOk}" data-command="Select">
|
<i class="md-icon">keyboard_arrow_left</i>
|
||||||
<i class="md-icon">keyboard_return</i>
|
</button>
|
||||||
</button>
|
<button is="paper-icon-button-light" class="btnOk btnCommand autoSize button-submit" title="${ButtonOk}" data-command="Select">
|
||||||
<button is="paper-icon-button-light" class="btnArrowRight btnCommand autoSize raised" title="${ButtonArrowRight}" data-command="MoveRight">
|
<i class="md-icon">keyboard_return</i>
|
||||||
<i class="md-icon">keyboard_arrow_right</i>
|
</button>
|
||||||
</button>
|
<button is="paper-icon-button-light" class="btnArrowRight btnCommand autoSize button-submit" title="${ButtonArrowRight}" data-command="MoveRight">
|
||||||
</div>
|
<i class="md-icon">keyboard_arrow_right</i>
|
||||||
<br />
|
</button>
|
||||||
<div>
|
</div>
|
||||||
<button is="paper-icon-button-light" class="btnBack btnCommand autoSize" title="${ButtonBack}" data-command="Back">
|
<br />
|
||||||
<i class="md-icon">arrow_back</i>
|
<div>
|
||||||
</button>
|
<button is="paper-icon-button-light" class="btnBack btnCommand autoSize" title="${ButtonBack}" data-command="Back">
|
||||||
<button is="paper-icon-button-light" class="btnArrowDown btnCommand autoSize raised" title="${ButtonArrowDown}" data-command="MoveDown">
|
<i class="md-icon">arrow_back</i>
|
||||||
<i class="md-icon">keyboard_arrow_down</i>
|
</button>
|
||||||
</button>
|
<button is="paper-icon-button-light" class="btnArrowDown btnCommand autoSize button-submit" title="${ButtonArrowDown}" data-command="MoveDown">
|
||||||
<button is="paper-icon-button-light" class="btnContextMenu btnCommand autoSize" title="${ButtonInfo}" data-command="ToggleContextMenu">
|
<i class="md-icon">keyboard_arrow_down</i>
|
||||||
<i class="md-icon">menu</i>
|
</button>
|
||||||
</button>
|
<button is="paper-icon-button-light" class="btnContextMenu btnCommand autoSize" title="${ButtonInfo}" data-command="ToggleContextMenu">
|
||||||
</div>
|
<i class="md-icon">menu</i>
|
||||||
<br />
|
</button>
|
||||||
<div>
|
</div>
|
||||||
<button is="paper-icon-button-light" class="btnGoHome btnCommand autoSize" title="${ButtonHome}" data-command="GoHome">
|
<br />
|
||||||
<i class="md-icon">home</i>
|
<div>
|
||||||
</button>
|
<button is="paper-icon-button-light" class="btnGoHome btnCommand autoSize" title="${ButtonHome}" data-command="GoHome">
|
||||||
<button is="paper-icon-button-light" class="btnShowSearch btnCommand autoSize" title="${ButtonSearch}" data-command="GoToSearch">
|
<i class="md-icon">home</i>
|
||||||
<i class="md-icon">search</i>
|
</button>
|
||||||
</button>
|
<button is="paper-icon-button-light" class="btnShowSearch btnCommand autoSize" title="${ButtonSearch}" data-command="GoToSearch">
|
||||||
<button is="paper-icon-button-light" class="bthShowSettings btnCommand autoSize" title="${ButtonSettings}" data-command="GoToSettings">
|
<i class="md-icon">search</i>
|
||||||
<i class="md-icon">settings</i>
|
</button>
|
||||||
</button>
|
<button is="paper-icon-button-light" class="bthShowSettings btnCommand autoSize" title="${ButtonSettings}" data-command="GoToSettings">
|
||||||
|
<i class="md-icon">settings</i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<div class="sendMessageSection">
|
<div class="sendMessageSection">
|
||||||
<div is="emby-collapse" title="${HeaderSendMessage}">
|
<div is="emby-collapse" title="${HeaderSendMessage}">
|
||||||
<div class="collapseContent" style="text-align: left;">
|
<div class="collapseContent" style="text-align: left;">
|
||||||
<form class="sendMessageForm">
|
<form class="sendMessageForm">
|
||||||
<div class="inputContainer">
|
<div class="inputContainer">
|
||||||
<input is="emby-input" class="sendMessageElement" type="text" id="txtMessageTitle" label="${LabelMessageTitle}" required />
|
<input is="emby-input" class="sendMessageElement" type="text" id="txtMessageTitle" label="${LabelMessageTitle}" required />
|
||||||
</div>
|
</div>
|
||||||
<br />
|
<br />
|
||||||
<div class="inputContainer">
|
<div class="inputContainer">
|
||||||
<input is="emby-input" class="sendMessageElement" type="text" id="txtMessageText" label="${LabelMessageText}" required />
|
<input is="emby-input" class="sendMessageElement" type="text" id="txtMessageText" label="${LabelMessageText}" required />
|
||||||
</div>
|
</div>
|
||||||
<p>
|
<p>
|
||||||
<button is="emby-button" class="sendMessageElement button-submit block raised" type="submit" raised>${ButtonSend}</button>
|
<button is="emby-button" class="sendMessageElement button-submit block raised" type="submit" raised>${ButtonSend}</button>
|
||||||
</p>
|
</p>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="sendTextSection">
|
<div class="sendTextSection">
|
||||||
|
|
|
||||||
|
|
@ -408,6 +408,7 @@
|
||||||
"HeaderMyDevice": "My Device",
|
"HeaderMyDevice": "My Device",
|
||||||
"HeaderMyMedia": "My Media",
|
"HeaderMyMedia": "My Media",
|
||||||
"HeaderMyMediaSmall": "My Media (small)",
|
"HeaderMyMediaSmall": "My Media (small)",
|
||||||
|
"HeaderNavigation": "Navigation",
|
||||||
"HeaderNewApiKey": "New API Key",
|
"HeaderNewApiKey": "New API Key",
|
||||||
"HeaderNewDevices": "New Devices",
|
"HeaderNewDevices": "New Devices",
|
||||||
"HeaderNextEpisodePlayingInValue": "Next Episode Playing in {0}",
|
"HeaderNextEpisodePlayingInValue": "Next Episode Playing in {0}",
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue