mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update drawer
This commit is contained in:
Luke Pulverenti
parent
f503b46422
commit
82bcca376f
10 changed files with 111 additions and 162 deletions
|
|
@ -1,5 +1,4 @@
|
|||
.touch-menu-la {
|
||||
width: 260px;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
|
|
|
|||
|
|
@ -116,62 +116,8 @@ progress {
|
|||
background: #fff !important;
|
||||
}
|
||||
|
||||
.dashboardDocument .mainDrawerPanelContent {
|
||||
transition: left ease-in-out 0.3s, padding ease-in-out 0.3s;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.adminDrawer {
|
||||
background: #fff !important;
|
||||
}
|
||||
|
||||
.dashboardDocument .mainDrawerPanelContent {
|
||||
transition: left ease-in-out 0.3s, padding ease-in-out 0.3s;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
@media all and (min-width: 640px) {
|
||||
|
||||
.dashboardDocument .mainDrawer {
|
||||
z-index: inherit !important;
|
||||
top: 58px !important;
|
||||
left: 0 !important;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
.dashboardDocument .tmla-mask {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.dashboardDocument .mainDrawerButton {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.dashboardDocument .mainDrawerPanelContent {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 260px;
|
||||
}
|
||||
|
||||
.dashboardDocument .adminDrawerLogo {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.adminDrawer .sidebarLink {
|
||||
color: #333 !important;
|
||||
font-weight: 400 !important;
|
||||
padding: .7em 0 .7em 2em;
|
||||
}
|
||||
|
||||
.adminDrawer .sidebarHeader {
|
||||
|
|
@ -179,11 +125,6 @@ progress {
|
|||
font-weight: 500 !important;
|
||||
}
|
||||
|
||||
.adminDrawer .sidebarLinkIcon {
|
||||
color: #666;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.adminDrawer .sidebarLink:hover {
|
||||
color: #00897B !important;
|
||||
}
|
||||
|
|
@ -193,10 +134,6 @@ progress {
|
|||
color: #fff !important;
|
||||
}
|
||||
|
||||
.adminDrawer .sidebarLink.selectedSidebarLink .sidebarLinkIcon {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.adminDrawerLogo {
|
||||
padding: 1.5em 1em 1.2em;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 9.7 KiB After Width: | Height: | Size: 10 KiB |
|
|
@ -520,13 +520,6 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
|
|||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 800px) {
|
||||
|
||||
.mainDetailButtons, .itemDetailPage .recordingFields button {
|
||||
font-size: 110%;
|
||||
}
|
||||
}
|
||||
|
||||
.detailImageProgressContainer {
|
||||
position: absolute;
|
||||
bottom: 4px;
|
||||
|
|
|
|||
|
|
@ -213,6 +213,29 @@
|
|||
}
|
||||
}
|
||||
|
||||
.sidebarLink {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: #111 !important;
|
||||
font-weight: normal !important;
|
||||
vertical-align: middle;
|
||||
padding: 1em 0 1em 2.4em;
|
||||
}
|
||||
|
||||
.sidebarLink:hover {
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
.sidebarLink.selectedSidebarLink {
|
||||
background: #f2f2f2 !important;
|
||||
}
|
||||
|
||||
.sidebarHeader {
|
||||
padding-left: 1.4em;
|
||||
margin: 1.2em 0 .7em;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
body:not(.dashboardDocument) .btnNotifications {
|
||||
display: none !important;
|
||||
}
|
||||
|
|
@ -224,36 +247,26 @@ body:not(.dashboardDocument) .btnNotifications {
|
|||
backdrop-filter: blur(5px);*/
|
||||
}
|
||||
|
||||
.darkDrawer .sidebarLinkIcon {
|
||||
color: #bbb !important;
|
||||
margin-left: 1.6em;
|
||||
.darkDrawer .sidebarLinkText, .darkDrawer .sidebarLink {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.darkDrawer i.sidebarLinkIcon {
|
||||
margin-left: 1.9em;
|
||||
}
|
||||
|
||||
.darkDrawer .sidebarLinkText, .darkDrawer .sidebarLink {
|
||||
color: #fff !important;
|
||||
font-weight: normal !important;
|
||||
}
|
||||
|
||||
.darkDrawer .sidebarHeader {
|
||||
.darkDrawer .sidebarHeader {
|
||||
color: #bbb !important;
|
||||
}
|
||||
}
|
||||
|
||||
.darkDrawer .sidebarDivider {
|
||||
background: #282828 !important;
|
||||
}
|
||||
.darkDrawer .sidebarDivider {
|
||||
background: #262626 !important;
|
||||
}
|
||||
|
||||
.darkDrawer .sidebarLink:hover {
|
||||
.darkDrawer .sidebarLink:hover {
|
||||
background: #252528;
|
||||
}
|
||||
}
|
||||
|
||||
.darkDrawer .sidebarLink.selectedSidebarLink, .darkDrawer .selectedMediaFolder {
|
||||
.darkDrawer .sidebarLink.selectedSidebarLink, .darkDrawer .selectedMediaFolder {
|
||||
background: #252528 !important;
|
||||
color: #52B54B !important;
|
||||
}
|
||||
}
|
||||
|
||||
body:not(.dashboardDocument) .headerAppsButton {
|
||||
display: none;
|
||||
|
|
@ -263,6 +276,15 @@ body:not(.dashboardDocument) .headerAppsButton {
|
|||
padding-bottom: 10vh;
|
||||
}
|
||||
|
||||
.dashboardDocument .mainDrawerPanelContent {
|
||||
transition: left ease-in-out 0.3s, padding ease-in-out 0.3s;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
@media all and (min-width: 640px) {
|
||||
|
||||
.mainDrawerPanel .viewMenuBarTabs {
|
||||
|
|
@ -273,4 +295,47 @@ body:not(.dashboardDocument) .headerAppsButton {
|
|||
.viewMenuBarTabs .libraryViewNav {
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.dashboardDocument .sidebarLink {
|
||||
padding: .7em 0 .7em 2.4em;
|
||||
}
|
||||
|
||||
.dashboardDocument .mainDrawer {
|
||||
z-index: inherit !important;
|
||||
left: 0 !important;
|
||||
top: 0 !important;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
.dashboardDocument .mainDrawer-scrollContainer {
|
||||
margin-top: 50px !important;
|
||||
}
|
||||
|
||||
.dashboardDocument.withTallToolbar .mainDrawer-scrollContainer {
|
||||
margin-top: 98px !important;
|
||||
}
|
||||
|
||||
.dashboardDocument .tmla-mask {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.dashboardDocument .mainDrawerButton {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.dashboardDocument .mainDrawerPanelContent {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 260px;
|
||||
}
|
||||
|
||||
.dashboardDocument .adminDrawerLogo {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.dashboardDocument .darkDrawer {
|
||||
background-color: rgba(28,28,31,.3) !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -211,46 +211,6 @@ div[data-role='page'] {
|
|||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
.sidebarLinks {
|
||||
margin-top: 1.5em;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
.sidebarLink {
|
||||
display: block;
|
||||
padding: .8em 20px .8em 0;
|
||||
text-decoration: none;
|
||||
color: #111 !important;
|
||||
font-weight: 500 !important;
|
||||
vertical-align: middle;
|
||||
font-size: 110%;
|
||||
}
|
||||
|
||||
.sidebarLink:hover {
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
.sidebarLink.selectedSidebarLink {
|
||||
background: #f2f2f2 !important;
|
||||
}
|
||||
|
||||
.sidebarLinkIcon {
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
margin-right: 1.2em;
|
||||
}
|
||||
|
||||
.sidebarLinkIcon + span {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.sidebarHeader {
|
||||
padding-left: 20px;
|
||||
margin: 15px 0 10px;
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.ui-content {
|
||||
border-width: 0;
|
||||
overflow: visible;
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
<div class="backdropContainer"></div>
|
||||
<div class="backgroundContainer"></div>
|
||||
<div class="mainDrawerPanel">
|
||||
<div class="mainDrawer hide"><div class="mainDrawer-scrollContainer scrollContainer"></div></div>
|
||||
<div class="mainDrawer hide"><div class="mainDrawer-scrollContainer scrollContainer darkScroller"></div></div>
|
||||
<div class="mainDrawerPanelContent">
|
||||
<div class="skinHeader"></div>
|
||||
<div class="mainAnimatedPages skinBody"></div>
|
||||
|
|
|
|||
|
|
@ -269,7 +269,7 @@
|
|||
IncludeItemTypes: "Audio",
|
||||
PersonTypes: "",
|
||||
ArtistIds: "",
|
||||
Limit: 30
|
||||
Limit: 40
|
||||
}, {
|
||||
playFromHere: true,
|
||||
action: 'playallfromhere',
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
define(['layoutManager', 'viewManager', 'libraryBrowser', 'embyRouter', 'playbackManager', 'paper-icon-button-light', 'material-icons'], function (layoutManager, viewManager, libraryBrowser, embyRouter, playbackManager) {
|
||||
define(['layoutManager', 'viewManager', 'libraryBrowser', 'embyRouter', 'playbackManager', 'paper-icon-button-light', 'material-icons', 'scrollStyles'], function (layoutManager, viewManager, libraryBrowser, embyRouter, playbackManager) {
|
||||
'use strict';
|
||||
|
||||
var enableBottomTabs = AppInfo.isNativeApp;
|
||||
|
|
@ -290,12 +290,9 @@
|
|||
|
||||
var homeHref = window.ApiClient ? 'home.html' : 'selectserver.html?showuser=1';
|
||||
|
||||
html += '<a class="lnkMediaFolder sidebarLink" href="' + homeHref + '" onclick="return LibraryMenu.onLinkClicked(event, this);">';
|
||||
html += '<div style="background-image:url(\'css/images/mblogoicon.png\');width:' + 28 + 'px;height:' + 28 + 'px;background-size:contain;background-repeat:no-repeat;background-position:center center;border-radius:1000px;vertical-align:middle;margin:0 1.25em 0 1.55em;display:inline-block;"></div>';
|
||||
html += Globalize.translate('ButtonHome');
|
||||
html += '</a>';
|
||||
html += '<a class="sidebarLink lnkMediaFolder" href="' + homeHref + '" onclick="return LibraryMenu.onLinkClicked(event, this);"><span class="sidebarLinkText">' + Globalize.translate('ButtonHome') + '</span></a>';
|
||||
|
||||
html += '<a class="sidebarLink lnkMediaFolder" data-itemid="remote" href="nowplaying.html" onclick="return LibraryMenu.onLinkClicked(event, this);"><i class="md-icon sidebarLinkIcon">tablet_android</i><span class="sidebarLinkText">' + Globalize.translate('ButtonRemote') + '</span></a>';
|
||||
html += '<a class="sidebarLink lnkMediaFolder" data-itemid="remote" href="nowplaying.html" onclick="return LibraryMenu.onLinkClicked(event, this);"><span class="sidebarLinkText">' + Globalize.translate('ButtonRemote') + '</span></a>';
|
||||
|
||||
html += '<div class="sidebarDivider"></div>';
|
||||
|
||||
|
|
@ -312,11 +309,11 @@
|
|||
html += Globalize.translate('HeaderAdmin');
|
||||
html += '</div>';
|
||||
|
||||
html += '<a class="sidebarLink lnkMediaFolder lnkManageServer" data-itemid="dashboard" href="#"><i class="md-icon sidebarLinkIcon">dashboard</i><span class="sidebarLinkText">' + Globalize.translate('ButtonManageServer') + '</span></a>';
|
||||
html += '<a class="sidebarLink lnkMediaFolder editorViewMenu" data-itemid="editor" onclick="return LibraryMenu.onLinkClicked(event, this);" href="edititemmetadata.html"><i class="md-icon sidebarLinkIcon">mode_edit</i><span class="sidebarLinkText">' + Globalize.translate('MetadataManager') + '</span></a>';
|
||||
html += '<a class="sidebarLink lnkMediaFolder lnkManageServer" data-itemid="dashboard" href="#"><span class="sidebarLinkText">' + Globalize.translate('ButtonManageServer') + '</span></a>';
|
||||
html += '<a class="sidebarLink lnkMediaFolder editorViewMenu" data-itemid="editor" onclick="return LibraryMenu.onLinkClicked(event, this);" href="edititemmetadata.html"><span class="sidebarLinkText">' + Globalize.translate('MetadataManager') + '</span></a>';
|
||||
|
||||
if (!browserInfo.mobile) {
|
||||
html += '<a class="sidebarLink lnkMediaFolder" data-itemid="reports" onclick="return LibraryMenu.onLinkClicked(event, this);" href="reports.html"><i class="md-icon sidebarLinkIcon">insert_chart</i><span class="sidebarLinkText">' + Globalize.translate('ButtonReports') + '</span></a>';
|
||||
html += '<a class="sidebarLink lnkMediaFolder" data-itemid="reports" onclick="return LibraryMenu.onLinkClicked(event, this);" href="reports.html"><span class="sidebarLinkText">' + Globalize.translate('ButtonReports') + '</span></a>';
|
||||
}
|
||||
html += '</div>';
|
||||
}
|
||||
|
|
@ -326,19 +323,19 @@
|
|||
html += '<div class="sidebarDivider"></div>';
|
||||
|
||||
if (user.localUser && (AppInfo.isNativeApp && browserInfo.android)) {
|
||||
html += '<a class="sidebarLink lnkMediaFolder lnkMySettings" onclick="return LibraryMenu.onLinkClicked(event, this);" href="mypreferencesmenu.html"><i class="md-icon sidebarLinkIcon">settings</i><span class="sidebarLinkText">' + Globalize.translate('ButtonSettings') + '</span></a>';
|
||||
html += '<a class="sidebarLink lnkMediaFolder lnkMySettings" onclick="return LibraryMenu.onLinkClicked(event, this);" href="mypreferencesmenu.html"><span class="sidebarLinkText">' + Globalize.translate('ButtonSettings') + '</span></a>';
|
||||
}
|
||||
|
||||
html += '<a class="sidebarLink lnkMediaFolder lnkManageOffline" data-itemid="manageoffline" onclick="return LibraryMenu.onLinkClicked(event, this);" href="mysync.html?mode=offline"><i class="md-icon sidebarLinkIcon">file_download</i><span class="sidebarLinkText">' + Globalize.translate('ManageOfflineDownloads') + '</span></a>';
|
||||
html += '<a class="sidebarLink lnkMediaFolder lnkManageOffline" data-itemid="manageoffline" onclick="return LibraryMenu.onLinkClicked(event, this);" href="mysync.html?mode=offline"><span class="sidebarLinkText">' + Globalize.translate('ManageOfflineDownloads') + '</span></a>';
|
||||
|
||||
html += '<a class="sidebarLink lnkMediaFolder lnkSyncToOtherDevices" data-itemid="syncotherdevices" onclick="return LibraryMenu.onLinkClicked(event, this);" href="mysync.html"><i class="md-icon sidebarLinkIcon">sync</i><span class="sidebarLinkText">' + Globalize.translate('SyncToOtherDevices') + '</span></a>';
|
||||
html += '<a class="sidebarLink lnkMediaFolder lnkSyncToOtherDevices" data-itemid="syncotherdevices" onclick="return LibraryMenu.onLinkClicked(event, this);" href="mysync.html"><span class="sidebarLinkText">' + Globalize.translate('SyncToOtherDevices') + '</span></a>';
|
||||
|
||||
if (Dashboard.isConnectMode()) {
|
||||
html += '<a class="sidebarLink lnkMediaFolder" data-itemid="selectserver" onclick="return LibraryMenu.onLinkClicked(event, this);" href="selectserver.html?showuser=1"><i class="md-icon sidebarLinkIcon">wifi</i><span class="sidebarLinkText">' + Globalize.translate('ButtonSelectServer') + '</span></a>';
|
||||
html += '<a class="sidebarLink lnkMediaFolder" data-itemid="selectserver" onclick="return LibraryMenu.onLinkClicked(event, this);" href="selectserver.html?showuser=1"><span class="sidebarLinkText">' + Globalize.translate('ButtonSelectServer') + '</span></a>';
|
||||
}
|
||||
|
||||
if (user.localUser) {
|
||||
html += '<a class="sidebarLink lnkMediaFolder" data-itemid="logout" onclick="return LibraryMenu.onLogoutClicked(this);" href="#"><i class="md-icon sidebarLinkIcon">lock</i><span class="sidebarLinkText">' + Globalize.translate('ButtonSignOut') + '</span></a>';
|
||||
html += '<a class="sidebarLink lnkMediaFolder" data-itemid="logout" onclick="return LibraryMenu.onLogoutClicked(this);" href="#"><span class="sidebarLinkText">' + Globalize.translate('ButtonSignOut') + '</span></a>';
|
||||
}
|
||||
|
||||
html += '</div>';
|
||||
|
|
@ -558,7 +555,7 @@
|
|||
icon = i.icon || icon;
|
||||
|
||||
var onclick = i.onclick ? ' function(){' + i.onclick + '}' : 'null';
|
||||
return '<a data-itemid="' + itemId + '" class="lnkMediaFolder sidebarLink" onclick="return LibraryMenu.onLinkClicked(event, this, ' + onclick + ');" href="' + getItemHref(i, i.CollectionType) + '"><i class="md-icon sidebarLinkIcon" style="color:' + color + '">' + icon + '</i><span class="sectionName">' + i.Name + '</span></a>';
|
||||
return '<a data-itemid="' + itemId + '" class="lnkMediaFolder sidebarLink" onclick="return LibraryMenu.onLinkClicked(event, this, ' + onclick + ');" href="' + getItemHref(i, i.CollectionType) + '"><span class="sectionName">' + i.Name + '</span></a>';
|
||||
|
||||
}).join('');
|
||||
|
||||
|
|
@ -851,6 +848,12 @@
|
|||
|
||||
if (!page.classList.contains('withTabs')) {
|
||||
LibraryMenu.setTabs(null);
|
||||
|
||||
if (page.classList.contains('pageWithAbsoluteTabs')) {
|
||||
document.body.classList.add('withTallToolbar');
|
||||
} else {
|
||||
document.body.classList.remove('withTallToolbar');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -383,14 +383,6 @@ var Dashboard = {
|
|||
pageIds = pageIds ? (' data-pageids="' + pageIds + '"') : '';
|
||||
menuHtml += '<a class="sidebarLink" href="' + item.href + '"' + pageIds + '>';
|
||||
|
||||
var icon = item.icon;
|
||||
|
||||
if (icon) {
|
||||
var style = item.color ? ' style="color:' + item.color + '"' : '';
|
||||
|
||||
menuHtml += '<i class="md-icon sidebarLinkIcon"' + style + '>' + icon + '</i>';
|
||||
}
|
||||
|
||||
menuHtml += '<span class="sidebarLinkText">';
|
||||
menuHtml += item.name;
|
||||
menuHtml += '</span>';
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue