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

new mobile web client menu

Browse source
This commit is contained in:
Luke Pulverenti 2013-12-27 16:10:06 -05:00
parent 946f2ff98e
commit 79a51f6b3a
16 changed files with 357 additions and 146 deletions
Download patch file Download diff file Expand all files Collapse all files

69
dashboard-ui/css/librarybrowser.css
View file

@ -17,8 +17,8 @@
}
.viewMenuBar {
background: #444;
background-image: linear-gradient(#444,#2d2d2d);
background: #404040;
background-image: linear-gradient(#404040,#2d2d2d);
font-weight: bold;
position: fixed;
right: 0;
@ -71,6 +71,8 @@
height: 20px;
padding-top: 9px;
text-transform: uppercase;
font-size: 14px;
font-weight: 400!important;
}
.viewMenuTextLink {
@ -113,7 +115,7 @@
.libraryViewNav {
text-align: center;
background-image: linear-gradient(#444,#2d2d2d);
background-image: linear-gradient(#404040,#2d2d2d);
border-bottom: 1px solid #111;
border-top: 0;
}
@ -125,7 +127,7 @@
.libraryViewNav a {
display: inline-block;
padding: .5em .25em;
padding: .6em 1em;
color: #eee!important;
text-decoration: none;
}
@ -503,6 +505,46 @@ a.itemTag:hover {
max-width: 100%;
}
.libraryPanelHeader {
margin: 10px 0 20px 0;
}
.libraryPanelHeader a {
text-decoration: none;
}
.libraryPanelHeader img {
height: 24px;
vertical-align: middle;
margin-right: 6px;
}
.libraryPanelHeader span {
color: #fff;
vertical-align: middle;
font-size: 14px;
font-weight: 300;
}
.mediaBrowserAccent {
color: #52B54B!important;
}
.libraryPanelCollapsibleHeader a {
font-size: 16px;
font-weight: 300!important;
}
.selectedLibraryPanelLink a {
background: #38c!important;
}
.desktopHomeLink img {
height: 24px;
vertical-align: middle;
margin-right: 5px;
}
@media all and (max-width: 550px) {
.desktopViewMenuLink {
@ -521,10 +563,21 @@ a.itemTag:hover {
}
}
@media all and (max-width: 750px) {
.libraryViewNav {
display: none !important;
}
.desktopHomeLink {
display: none;
}
}
@media all and (min-width: 750px) {
.libraryViewNav a {
padding: .5em 1em;
.libraryMenuButton {
display: none;
}
}
@ -595,6 +648,10 @@ a.itemTag:hover {
padding-right: .8em;
}
.libraryMenuButton + .viewMenuTextLink {
padding-left: .6em !important;
}
.viewMenuBar .btnCurrentUser {
padding-right: 1.5em;
}

13
dashboard-ui/css/search.css
View file

@ -1,11 +1,18 @@
.searchPanel {
min-width: 250px;
width: 250px;
}
@media all and (min-width: 60px) {
.ui-panel-dismiss-open.ui-panel-dismiss-position-right[data-panelid=searchPanel] {
right: 250px;
}
@media all and (min-width: 600px) {
.searchPanel {
min-width: 300px;
width: 300px;
}
.ui-panel-dismiss-open.ui-panel-dismiss-position-right[data-panelid=searchPanel] {
right: 300px;
}
}

10
dashboard-ui/css/site.css
View file

@ -33,6 +33,7 @@
body {
overflow-y: scroll!important;
font-size: 13px;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}
.textlink {
@ -44,24 +45,15 @@ body {
}
* {
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
text-shadow: none;
-webkit-font-smoothing: antialiased;
}
.ui-header .ui-btn-inner, .ui-footer .ui-btn-inner, .ui-mini .ui-btn-inner, .ui-li-desc {
font-size: 13px;
}
h1 {
font-weight: 300;
font-size: 2.22em;
}
.toolsSidebar h1 {
font-size: 40px;
}
.ui-loader h1 {
font-weight: bold;
}

2
dashboard-ui/episodes.html
View file

@ -13,7 +13,7 @@
<a href="tvshows.html">Shows</a>
<a href="episodes.html" class="ui-btn-active">Episodes</a>
<a href="tvgenres.html">Genres</a>
<a href="tvpeople.html">Actors</a>
<a href="tvpeople.html">People</a>
<a href="tvstudios.html">Networks</a>
</div>

4
dashboard-ui/itembynamedetails.html
View file

@ -46,7 +46,7 @@
<a href="tvshows.html">Shows</a>
<a href="episodes.html">Episodes</a>
<a href="tvgenres.html" class="ui-btn-active">Genres</a>
<a href="tvpeople.html">Actors</a>
<a href="tvpeople.html">People</a>
<a href="tvstudios.html">Networks</a>
</div>
</div>
@ -70,7 +70,7 @@
<a href="tvshows.html">Shows</a>
<a href="episodes.html">Episodes</a>
<a href="tvgenres.html">Genres</a>
<a href="tvpeople.html">Actors</a>
<a href="tvpeople.html">People</a>
<a href="tvstudios.html" class="ui-btn-active">Networks</a>
</div>
</div>

2
dashboard-ui/itemdetails.html
View file

@ -46,7 +46,7 @@
<a href="tvshows.html" class="ui-btn-active">Shows</a>
<a href="episodes.html">Episodes</a>
<a href="tvgenres.html">Genres</a>
<a href="tvpeople.html">Actors</a>
<a href="tvpeople.html">People</a>
<a href="tvstudios.html">Networks</a>
</div>
</div>

114
dashboard-ui/scripts/librarybrowser.js
View file

@ -2371,117 +2371,3 @@
};
})(window, document, jQuery, screen, localStorage);
(function (window, document, $) {
var itemCountsPromise;
var liveTvServicesPromise;
function renderHeader(page, user) {
var html = '<div class="viewMenuBar">';
html += '<a data-role="button" href="index.html" data-icon="bars" data-iconpos="notext" data-inline="true" title="Menu">Menu</a>';
html += '<button class="viewMenuRemoteControlButton" onclick="RemoteControl.showMenu();" type="button" data-icon="remote" data-inline="true" data-iconpos="notext" title="Remote Control">Remote Control</button>';
if (user.Configuration.IsAdministrator) {
html += '<a class="editorMenuLink" href="edititemmetadata.html" data-role="button" data-icon="edit" data-inline="true" data-iconpos="notext" title="Metadata Manager">Metadata Manager</a>';
}
html += '<div class="viewMenuSecondary">';
html += '<a class="viewMenuLink btnCurrentUser" href="#" onclick="Dashboard.showUserFlyout(this);">';
if (user.PrimaryImageTag) {
var url = ApiClient.getUserImageUrl(user.Id, {
height: 40,
tag: user.PrimaryImageTag,
type: "Primary"
});
html += '<img src="' + url + '" />';
} else {
html += '<img src="css/images/currentuserdefaultwhite.png" />';
}
html += '</a>';
html += '<button onclick="Search.showSearchPanel($.mobile.activePage);" type="button" data-icon="search" data-inline="true" data-iconpos="notext">Search</button>';
if (user.Configuration.IsAdministrator) {
html += '<a href="dashboard.html" data-role="button" data-icon="gear" data-inline="true" data-iconpos="notext">Dashboard</a>';
}
html += '</div>';
html += '</div>';
$(page).prepend(html);
$('.viewMenuBar', page).trigger('create');
}
function insertViews(page, user, counts, liveTvServices) {
var html = '';
var selectedCssClass = ' selectedViewLink';
var selectedHtml = "<span class='selectedViewIndicator'>&#9654;</span>";
var view = page.getAttribute('data-view') || getParameterByName('context');
if (counts.MovieCount || counts.TrailerCount) {
html += '<a class="viewMenuLink viewMenuTextLink desktopViewMenuLink' + (view == 'movies' ? selectedCssClass : '') + '" href="moviesrecommended.html">' + (view == 'movies' ? selectedHtml : '') + '<span class="viewName">Movies</span></a>';
}
if (counts.EpisodeCount || counts.SeriesCount) {
html += '<a class="viewMenuLink viewMenuTextLink desktopViewMenuLink' + (view == 'tv' ? selectedCssClass : '') + '" href="tvrecommended.html">' + (view == 'tv' ? selectedHtml : '') + '<span class="viewName">TV</span></a>';
}
if (liveTvServices.length) {
html += '<a class="viewMenuLink viewMenuTextLink desktopViewMenuLink' + (view == 'livetv' ? selectedCssClass : '') + '" href="livetvchannels.html">' + (view == 'livetv' ? selectedHtml : '') + '<span class="viewName">Live TV</span></a>';
}
if (counts.SongCount || counts.MusicVideoCount) {
html += '<a class="viewMenuLink viewMenuTextLink desktopViewMenuLink' + (view == 'music' ? selectedCssClass : '') + '" href="musicrecommended.html">' + (view == 'music' ? selectedHtml : '') + '<span class="viewName">Music</span></a>';
}
if (counts.GameCount) {
html += '<a class="viewMenuLink viewMenuTextLink desktopViewMenuLink' + (view == 'games' ? selectedCssClass : '') + '" href="gamesrecommended.html">' + (view == 'games' ? selectedHtml : '') + '<span class="viewName">Games</span></a>';
}
$('.viewMenuRemoteControlButton', page).before(html);
}
$(document).on('pagebeforeshow', ".libraryPage", function () {
var page = this;
if (!$('.viewMenuBar', page).length) {
Dashboard.getCurrentUser().done(function (user) {
renderHeader(page, user);
itemCountsPromise = itemCountsPromise || ApiClient.getItemCounts(Dashboard.getCurrentUserId());
liveTvServicesPromise = liveTvServicesPromise || ApiClient.getLiveTvServices();
$.when(itemCountsPromise, liveTvServicesPromise).done(function (response1, response2) {
var counts = response1[0];
var liveTvServices = response2[0];
insertViews(page, user, counts, liveTvServices);
});
});
}
});
})(window, document, jQuery);

267
dashboard-ui/scripts/librarymenu.js Normal file
View file

@ -0,0 +1,267 @@
(function (window, document, $) {
var itemCountsPromise;
var liveTvServicesPromise;
function ensurePromises() {
itemCountsPromise = itemCountsPromise || ApiClient.getItemCounts(Dashboard.getCurrentUserId());
liveTvServicesPromise = liveTvServicesPromise || ApiClient.getLiveTvServices();
}
function renderHeader(page, user) {
var html = '<div class="viewMenuBar">';
html += '<button type="button" data-icon="bars" data-iconpos="notext" data-inline="true" title="Menu" class="libraryMenuButton" onclick="LibraryMenu.showLibraryMenu($(this).parents(\'.page\'));">Menu</button>';
html += '<a class="desktopHomeLink" href="index.html"><img src="css/images/mblogoicon.png" /></a>';
html += '<button class="viewMenuRemoteControlButton" onclick="RemoteControl.showMenu();" type="button" data-icon="remote" data-inline="true" data-iconpos="notext" title="Remote Control">Remote Control</button>';
if (user.Configuration.IsAdministrator) {
html += '<a class="editorMenuLink" href="edititemmetadata.html" data-role="button" data-icon="edit" data-inline="true" data-iconpos="notext" title="Metadata Manager">Metadata Manager</a>';
}
html += '<div class="viewMenuSecondary">';
html += '<a class="viewMenuLink btnCurrentUser" href="#" onclick="Dashboard.showUserFlyout(this);">';
if (user.PrimaryImageTag) {
var url = ApiClient.getUserImageUrl(user.Id, {
height: 40,
tag: user.PrimaryImageTag,
type: "Primary"
});
html += '<img src="' + url + '" />';
} else {
html += '<img src="css/images/currentuserdefaultwhite.png" />';
}
html += '</a>';
html += '<button onclick="Search.showSearchPanel($.mobile.activePage);" type="button" data-icon="search" data-inline="true" data-iconpos="notext">Search</button>';
if (user.Configuration.IsAdministrator) {
html += '<a href="dashboard.html" data-role="button" data-icon="gear" data-inline="true" data-iconpos="notext">Dashboard</a>';
}
html += '</div>';
html += '</div>';
$(page).prepend(html);
$('.viewMenuBar', page).trigger('create');
}
function insertViews(page, user, counts, liveTvServices) {
var html = '';
var selectedCssClass = ' selectedViewLink';
var selectedHtml = "<span class='selectedViewIndicator'>&#9654;</span>";
var view = page.getAttribute('data-view') || getParameterByName('context');
if (counts.MovieCount) {
html += '<a class="viewMenuLink viewMenuTextLink desktopViewMenuLink' + (view == 'movies' ? selectedCssClass : '') + '" href="moviesrecommended.html">' + (view == 'movies' ? selectedHtml : '') + '<span class="viewName">Movies</span></a>';
}
if (counts.SeriesCount) {
html += '<a class="viewMenuLink viewMenuTextLink desktopViewMenuLink' + (view == 'tv' ? selectedCssClass : '') + '" href="tvrecommended.html">' + (view == 'tv' ? selectedHtml : '') + '<span class="viewName">TV</span></a>';
}
if (liveTvServices.length) {
html += '<a class="viewMenuLink viewMenuTextLink desktopViewMenuLink' + (view == 'livetv' ? selectedCssClass : '') + '" href="livetvchannels.html">' + (view == 'livetv' ? selectedHtml : '') + '<span class="viewName">Live TV</span></a>';
}
if (counts.SongCount || counts.MusicVideoCount) {
html += '<a class="viewMenuLink viewMenuTextLink desktopViewMenuLink' + (view == 'music' ? selectedCssClass : '') + '" href="musicrecommended.html">' + (view == 'music' ? selectedHtml : '') + '<span class="viewName">Music</span></a>';
}
if (counts.GameCount) {
html += '<a class="viewMenuLink viewMenuTextLink desktopViewMenuLink' + (view == 'games' ? selectedCssClass : '') + '" href="gamesrecommended.html">' + (view == 'games' ? selectedHtml : '') + '<span class="viewName">Games</span></a>';
}
$('.viewMenuRemoteControlButton', page).before(html);
}
function showLibraryMenu(page) {
ensurePromises();
$.when(itemCountsPromise, liveTvServicesPromise).done(function (response1, response2) {
var counts = response1[0];
var liveTvServices = response2[0];
var panel = getLibraryMenu(page, counts, liveTvServices);
$(panel).panel('toggle');
});
}
function getLibraryMenu(page, counts, liveTvServices) {
var panel = $('#libraryPanel', page);
if (!panel.length) {
var html = '';
html += '<div data-role="panel" id="libraryPanel" class="libraryPanel" data-position="left" data-display="overlay" data-position-fixed="true" data-theme="b">';
html += '<p class="libraryPanelHeader"><a href="index.html" class="imageLink"><img src="css/images/mblogoicon.png" /><span>MEDIA</span><span class="mediaBrowserAccent">BROWSER</span></a></p>';
html += '<div data-role="collapsible-set" data-inset="false" data-mini="true">';
if (counts.MovieCount) {
html += getCollapsibleHtml('Movies', [
{ text: 'Suggested', href: 'moviesrecommended.html' },
{ text: 'Movies', href: 'movies.html' },
{ text: 'Box Sets', href: 'boxsets.html' },
{ text: 'Trailers', href: 'movietrailers.html' },
{ text: 'Genres', href: 'moviegenres.html' },
{ text: 'People', href: 'moviepeople.html' },
{ text: 'Studios', href: 'moviestudios.html' }
]);
}
if (counts.SeriesCount) {
html += getCollapsibleHtml('TV', [
{ text: 'Suggested', href: 'tvrecommended.html' },
{ text: 'Next Up', href: 'tvnextup.html' },
{ text: 'Upcoming', href: 'tvupcoming.html' },
{ text: 'Shows', href: 'tvshows.html' },
{ text: 'Episodes', href: 'episodes.html' },
{ text: 'Genres', href: 'tvgenres.html' },
{ text: 'People', href: 'tvpeople.html' },
{ text: 'Networks', href: 'tvstudios.html' }
]);
}
if (liveTvServices.length) {
html += getCollapsibleHtml('Live TV', [
{ text: 'Guide', href: 'livetvguide.html' },
{ text: 'Channels', href: 'livetvchannels.html' },
{ text: 'Recordings', href: 'livetvrecordings.html' },
{ text: 'Scheduled', href: 'livetvtimers.html' },
{ text: 'Series', href: 'livetvseriestimers.html' }
]);
}
if (counts.SongCount || counts.MusicVideoCount) {
html += getCollapsibleHtml('Music', [
{ text: 'Suggested', href: 'musicrecommended.html' },
{ text: 'Songs', href: 'songs.html' },
{ text: 'Albums', href: 'musicalbums.html' },
{ text: 'Album Artists', href: 'musicalbumartists.html' },
{ text: 'Artists', href: 'musicartists.html' },
{ text: 'Music Videos', href: 'musicvideos.html' },
{ text: 'Genres', href: 'musicgenres.html' }
]);
}
if (counts.GameCount) {
html += getCollapsibleHtml('Games', [
{ text: 'Suggested', href: 'gamesrecommended.html' },
{ text: 'Games', href: 'games.html' },
{ text: 'Game Systems', href: 'gamesystems.html' },
{ text: 'Genres', href: 'gamegenres.html' },
{ text: 'Studios', href: 'gamestudios.html' }
]);
}
html += '</div>';
html += '</div>';
$(page).append(html);
panel = $('#libraryPanel', page).panel({}).trigger('create');
}
return panel;
}
function getCollapsibleHtml(title, links) {
var i, length;
var selectedIndex = -1;
var collapsed = 'true';
var currentUrl = window.location.toString().toLowerCase();
for (i = 0, length = links.length; i < length; i++) {
if (currentUrl.indexOf(links[i].href.toLowerCase()) != -1) {
collapsed = 'false';
selectedIndex = i;
break;
}
}
var html = '';
html += '<div data-role="collapsible" data-mini="true" data-collapsed="' + collapsed + '">';
html += '<h4 class="libraryPanelCollapsibleHeader">' + title + '</h4>';
html += '<ul data-role="listview" data-inset="false">';
for (i = 0, length = links.length; i < length; i++) {
var link = links[i];
if (selectedIndex == i) {
html += '<li class="selectedLibraryPanelLink">';
} else {
html += '<li>';
}
html += '<a href="' + link.href + '">' + link.text + '</a></li>';
}
html += '</ul>';
html += '</div>';
return html;
}
window.LibraryMenu = {
showLibraryMenu: showLibraryMenu
};
$(document).on('pagebeforeshow', ".libraryPage", function () {
var page = this;
if (!$('.viewMenuBar', page).length) {
Dashboard.getCurrentUser().done(function (user) {
renderHeader(page, user);
ensurePromises();
$.when(itemCountsPromise, liveTvServicesPromise).done(function (response1, response2) {
var counts = response1[0];
var liveTvServices = response2[0];
insertViews(page, user, counts, liveTvServices);
});
});
}
});
})(window, document, jQuery);

6
dashboard-ui/scripts/site.js
View file

@ -651,7 +651,9 @@ var Dashboard = {
var html = '<div class="content-secondary ui-bar-a toolsSidebar">';
html += '<h1><a href="index.html" class="imageLink" style="margin-left: 0;margin-right: 15px;"> <img src="css/images/mblogoicon.png" style="height:28px;" /></a>Tools</h1>';
html += '<p class="libraryPanelHeader" style="margin: 30px 0 30px 25px;"><a href="index.html" class="imageLink"><img src="css/images/mblogoicon.png" style="height:28px;" /><span>MEDIA</span><span class="mediaBrowserAccent">BROWSER</span></a></p>';
html += '<div style="position:absolute;top:20px;right:20px;"><a data-role="button" data-theme="b" data-icon="edit" data-iconpos="notext" href="edititemmetadata.html" title="Metadata Manager">Metadata Manager</a></div>';
html += '<div class="sidebarLinks">';
@ -686,7 +688,7 @@ var Dashboard = {
html += '<div data-role="panel" id="dashboardPanel" class="dashboardPanel" data-position="left" data-display="overlay" data-position-fixed="true" data-theme="b">';
html += '<a href="index.html" class="imageLink" style="display: inline-block;margin: 20px 0 20px 15px;"><img src="css/images/mblogoicon.png" style="height:24px;" /></a>';
html += '<p class="libraryPanelHeader" style="margin: 20px 0 20px 15px;"><a href="index.html" class="imageLink"><img src="css/images/mblogoicon.png" /><span>MEDIA</span><span class="mediaBrowserAccent">BROWSER</span></a></p>';
for (i = 0, length = links.length; i < length; i++) {

2
dashboard-ui/tvgenres.html
View file

@ -12,7 +12,7 @@
<a href="tvshows.html">Shows</a>
<a href="episodes.html">Episodes</a>
<a href="tvgenres.html" class="ui-btn-active">Genres</a>
<a href="tvpeople.html">Actors</a>
<a href="tvpeople.html">People</a>
<a href="tvstudios.html">Networks</a>
</div>
<div data-role="content">

2
dashboard-ui/tvnextup.html
View file

@ -12,7 +12,7 @@
<a href="tvshows.html">Shows</a>
<a href="episodes.html">Episodes</a>
<a href="tvgenres.html">Genres</a>
<a href="tvpeople.html">Actors</a>
<a href="tvpeople.html">People</a>
<a href="tvstudios.html">Networks</a>
</div>
<div data-role="content">

2
dashboard-ui/tvpeople.html
View file

@ -12,7 +12,7 @@
<a href="tvshows.html">Shows</a>
<a href="episodes.html">Episodes</a>
<a href="tvgenres.html">Genres</a>
<a href="tvpeople.html" class="ui-btn-active">Actors</a>
<a href="tvpeople.html" class="ui-btn-active">People</a>
<a href="tvstudios.html">Networks</a>
</div>

2
dashboard-ui/tvrecommended.html
View file

@ -12,7 +12,7 @@
<a href="tvshows.html">Shows</a>
<a href="episodes.html">Episodes</a>
<a href="tvgenres.html">Genres</a>
<a href="tvpeople.html">Actors</a>
<a href="tvpeople.html">People</a>
<a href="tvstudios.html">Networks</a>
</div>
<div data-role="content">

2
dashboard-ui/tvshows.html
View file

@ -12,7 +12,7 @@
<a href="tvshows.html" class="ui-btn-active">Shows</a>
<a href="episodes.html">Episodes</a>
<a href="tvgenres.html">Genres</a>
<a href="tvpeople.html">Actors</a>
<a href="tvpeople.html">People</a>
<a href="tvstudios.html">Networks</a>
</div>
<div class="alphabetPicker">

2
dashboard-ui/tvstudios.html
View file

@ -12,7 +12,7 @@
<a href="tvshows.html">Shows</a>
<a href="episodes.html">Episodes</a>
<a href="tvgenres.html">Genres</a>
<a href="tvpeople.html">Actors</a>
<a href="tvpeople.html">People</a>
<a href="tvstudios.html" class="ui-btn-active">Networks</a>
</div>
<div data-role="content">

2
dashboard-ui/tvupcoming.html
View file

@ -12,7 +12,7 @@
<a href="tvshows.html">Shows</a>
<a href="episodes.html">Episodes</a>
<a href="tvgenres.html">Genres</a>
<a href="tvpeople.html">Actors</a>
<a href="tvpeople.html">People</a>
<a href="tvstudios.html">Networks</a>
</div>
<div data-role="content">