added sync job database

dashboard-ui/advanced.html

@@ -34,10 +34,11 @@
                     <div data-role="collapsible">
                         <h2>${HeaderAutomaticUpdates}</h2>
                         <div>
+                            <br />   
                             <ul data-role="listview" class="ulForm">
                                 <li>
                                     <label for="selectAutomaticUpdateLevel">${LabelAutomaticUpdateLevel}</label>
-                                    <select name="selectAutomaticUpdateLevel" id="selectAutomaticUpdateLevel" data-mini="true">
+                                    <select name="selectAutomaticUpdateLevel" id="selectAutomaticUpdateLevel">
                                         <option value="Release">${OptionRelease}</option>
                                         <option value="Beta">${OptionBeta}</option>
                                         <option value="Dev">${OptionDev}</option>
@@ -59,6 +60,7 @@
                     <div data-role="collapsible">
                         <h2>${HeaderResumeSettings}</h2>
                         <div>
+                            <br />
                             <ul data-role="listview" class="ulForm">
                                 <li>
                                     <label for="txtMinResumePct">${LabelMinResumePercentage}</label>
@@ -87,10 +89,10 @@
                     <br />
                     <ul data-role="listview" class="ulForm">
                         <li>
-                            <button type="submit" data-theme="b" data-icon="check" data-mini="true">
+                            <button type="submit" data-theme="b" data-icon="check">
                                 ${ButtonSave}
                             </button>
-                            <button type="button" onclick="Dashboard.navigate('dashboard.html');" data-icon="delete" data-mini="true">
+                            <button type="button" onclick="Dashboard.navigate('dashboard.html');" data-icon="delete">
                                 ${ButtonCancel}
                             </button>
                         </li>

dashboard-ui/css/card.css

@@ -0,0 +1,224 @@
+.card {
+    display: inline-block;
+    text-align: left;
+    -webkit-transition: all 500ms ease;
+    -moz-transition: all 500ms ease;
+    -o-transition: all 500ms ease;
+    -ms-transition: all 500ms ease;
+    transition: all 500ms ease;
+    position: relative;
+}
+
+.cardBox {
+    margin: 4px 4px;
+}
+
+.visualCardBox {
+    padding: 5px;
+    -moz-border-radius: 2px;
+    -webkit-border-radius: 2px;
+    border-radius: 2px;
+    -moz-box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    -ms-box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    background: #fff;
+}
+
+.cardScalable {
+    position: relative;
+}
+
+.card-16-9 .cardPadder {
+    padding-bottom: 56.25%;
+}
+
+.card-1-1 .cardPadder {
+    padding-bottom: 100%;
+}
+
+.card-4-3 .cardPadder {
+    padding-bottom: 75%;
+}
+
+.card-3-2 .cardPadder {
+    padding-bottom: 66.666666666667%;
+}
+
+.cardContent {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
+
+    .cardContent:hover {
+        -moz-box-shadow: 0 0 0 5px #38c;
+        -webkit-box-shadow: 0 0 0 5px #38c;
+        box-shadow: 0 0 0 5px #38c;
+    }
+
+.cardBox .cardContent:hover {
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+
+.cardContent:hover .cardImage {
+    opacity: .5;
+}
+
+/*.preview-overlay-container {
+    -moz-border-radius: 2px;
+    -webkit-border-radius: 2px;
+    border-radius: 2px;
+    -moz-opacity: 0;
+    opacity: 0;
+    filter: alpha(opacity=0);
+    -webkit-transition: all .25s ease;
+    -moz-transition: all .25s ease;
+    -o-transition: all .25s ease;
+    transition: all .25s ease;
+    background: rgba(0,0,0,0.4);
+    cursor: pointer;
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+}*/
+
+.cardFooter {
+}
+
+.cardContent .cardFooter {
+    position: absolute;
+    bottom: 0;
+    background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%); /* FF3.6+ */
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.7))); /* Chrome,Safari4+ */
+    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 100%); /* Chrome10+,Safari5.1+ */
+    background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 100%); /* Opera 11.10+ */
+    background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 100%); /* IE10+ */
+    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 100%); /* W3C */
+    left: 0;
+    right: 0;
+    color: #fff;
+}
+
+.cardText {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    text-wrap: none;
+    white-space: nowrap;
+    padding: 5px 4px 4px;
+    text-shadow: none;
+    font-size: 13px;
+    font-weight: 400;
+}
+
+.cardContent .cardText {
+    padding-left: 5px;
+    padding: 0 5px 4px;
+}
+
+@media all and (max-width: 600px) {
+
+    .packageReviewText {
+        display: none;
+    }
+}
+
+.cardImage {
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center bottom;
+    width: 100%;
+    height: 100%;
+}
+
+.card-1-1 {
+    width: 50%;
+}
+
+.card-16-9:not(.manualSize) {
+    width: 50%;
+}
+
+@media all and (min-width: 500px) {
+
+    .card-1-1 {
+        width: 33.3%;
+    }
+}
+
+
+@media all and (min-width: 540px) {
+
+    .card-16-9:not(.manualSize) {
+        width: 33.3%;
+    }
+}
+
+
+@media all and (min-width: 800px) {
+
+    .card-1-1 {
+        width: 25%;
+    }
+}
+
+
+@media all and (min-width: 1000px) {
+
+    .card-1-1 {
+        width: 20%;
+    }
+
+    .card-16-9:not(.manualSize) {
+        width: 25%;
+    }
+}
+
+
+@media all and (min-width: 1200px) {
+
+    .card-1-1 {
+        width: 16.666666666666666666666666666667%;
+    }
+}
+
+
+@media all and (min-width: 1400px) {
+
+    .card-1-1 {
+        width: 14.285714285714285714285714285714%;
+    }
+
+    .card-16-9:not(.manualSize) {
+        width: 20%;
+    }
+}
+
+
+@media all and (min-width: 1600px) {
+
+    .card-1-1 {
+        width: 12.5%;
+    }
+
+    .card-16-9:not(.manualSize) {
+        width: 16.666666666666666666666666666667%;
+    }
+}
+
+.detailPage169Card {
+    width: 50%;
+}
+
+@media all and (min-width: 540px) {
+
+    .detailPage169Card {
+        width: 33.3%;
+    }
+}

dashboard-ui/css/chromecast.css

@@ -28,8 +28,7 @@
     margin-right: .5em;
     height: 100%;
     position: relative;
-    top: -19px;
+    top: -20px;
-    font-family: "Open Sans";
 }
 
 @media all and (max-width: 800px) {

dashboard-ui/css/librarybrowser.css

@@ -541,10 +541,6 @@ a.itemTag:hover {
 }
 
 .lblDetailTab {
-    font-size: 14px !important;
-    font-weight: 400 !important;
-    font-family: 'Open Sans';
-    padding: .5em 1em;
     border-color: #1f1f1f !important;
 }
 
@@ -577,22 +573,6 @@ a.itemTag:hover {
     color: #52B54B !important;
 }
 
-.libraryPanelCollapsibleHeader a {
-    font-size: 16px;
-    font-weight: 300 !important;
-    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
-}
-
-.selectedLibraryPanelLink {
-    background: #38c !important;
-}
-
-.libraryPanelLink {
-    font-size: 14px;
-    font-weight: 300 !important;
-    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
-}
-
 .detailImageProgressContainer {
     position: absolute;
     bottom: 10px;
@@ -1237,7 +1217,6 @@ a.itemTag:hover {
         right: 1.3em;
         font-weight: normal;
         font-size: 13px;
-        font-family: "Open Sans";
     }
 
     .itemsListview .ui-li-count {

dashboard-ui/css/librarymenu.css

@@ -248,7 +248,7 @@
 }
 
 .ui-panel.ui-body-b {
-    background-color: #181818;
+    background-color: #222;
 }
 
 .libraryViewNavInner {
@@ -260,30 +260,35 @@
     height: 61px;
 }
 
-.libraryViewNav .ui-btn-active .libraryViewNavLinkContent {
+.libraryViewNav .ui-btn-active {
     border-bottom-color: #38c;
-    color: #fff;
+    color: #fff !important;
 }
 
 .libraryViewNav a {
     display: inline-block;
-    padding: 12px 0 0;
+    padding: 12px 0 9px;
-    color: #eee!important;
+    color: #ddd !important;
     text-decoration: none;
     margin: 0 0;
     position: relative;
     font-weight: normal;
+    border-bottom: 5px solid transparent;
 }
 
     .libraryViewNav a:hover {
-        color: #bbb!important;
+        color: #2ad !important;
     }
 
 .libraryViewNavLinkContent {
-    border-bottom: 5px solid transparent;
     display: inline-block;
-    padding: 2px 1em 11px;
+    padding: 2px 15px 2px 17px;
-    color: #ddd;
+}
+
+.libraryViewNav a+a .libraryViewNavLinkContent {
+    border-left: 1px solid #333;
+    position: relative;
+    left: -2px;
 }
 
 @media all and (max-width: 500px) {

dashboard-ui/css/notifications.css

@@ -30,7 +30,6 @@
     background-image: linear-gradient(top,#444,#313131);
     color: #fff;
     font-size: 12px;
-    font-family: "Open Sans";
     font-weight: normal;
 }
 

dashboard-ui/css/posteritem.css

@@ -283,13 +283,6 @@
     top: 42%;
 }
 
-@media all and (max-width: 600px) {
-
-    .packageReviewText {
-        display: none;
-    }
-}
-
 @media all and (max-width: 1200px) {
 
     .portraitPosterItem .posterItemOverlayInner {
@@ -506,3 +499,8 @@
             height: 240px;
         }
 }
+
+
+.scalableItem {
+    
+}

dashboard-ui/css/site.css

@@ -53,6 +53,12 @@
     font-weight: 500;
     src: local('Roboto Medium'), local('Roboto-Medium'), url(fonts/RobotoMedium.woff) format('woff');
 }
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Roboto Bold'), local('Roboto-Bold'), url(fonts/RobotoBold.woff) format('woff');
+}
 
 * {
     text-shadow: none!important;
@@ -61,7 +67,7 @@
 body {
     overflow-y: scroll!important;
     font-size: 13px;
-    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
+    font-family: Roboto, Arial, Helvetica, sans-serif;
 }
 
 .bodyWithPopupOpen {
@@ -83,7 +89,7 @@ h1, h1 a {
 }
 
 .ui-loader h1 {
-    font-family: 'Open Sans';
+    font-family: Roboto;
     font-weight: bold!important;
     font-size: 18px;
 }
@@ -105,6 +111,15 @@ h2 {
     font-weight: bold;
 }*/
 
+.ui-btn {
+    font-family: Roboto;
+    font-weight: 500!important;
+}
+
+.ui-listview li h3 {
+    font-weight: 500;
+}
+
 h1 a {
     text-decoration: none;
 }
@@ -217,7 +232,7 @@ h1 .imageLink {
 
 .pageTitle {
     margin-top: 0;
-    font-family: "Open Sans";
+    font-family: Roboto;
 }
 
 .imageButton {
@@ -276,12 +291,10 @@ h1 .imageLink {
 
 .content-secondary {
     z-index: 1000;
-    background: #333;
     border: 0;
-    border-right: 1px solid #ddd;
     display: none;
     text-align: left;
-    width: 25%;
+    width: 220px;
     position: fixed;
     top: 51px;
     left: 0;
@@ -289,25 +302,25 @@ h1 .imageLink {
     margin: 0;
 }
 
-    .content-secondary h1 {
+.sidebarLinks {
-        margin: 0;
+    margin-top: 2.75em;
-        padding: 20px 0 25px 20px;
+    margin-left: 1em;
-        color: #fff;
 }
 
 .sidebarLinks a {
     display: block;
     padding: .6em 20px .6em 20px;
     text-decoration: none;
-    color: #eee!important;
+    color: #333!important;
     text-shadow: none!important;
-    font-weight: 400!important;
+    font-weight: 500!important;
     font-size: 14px;
+    border-radius: 2px;
 }
 
     .sidebarLinks a:hover {
-        background: #f2f2f2;
+        background: #52B54B;
-        color: #000!important;
+        color: #fff!important;
     }
 
     .sidebarLinks a.selectedSidebarLink {
@@ -318,7 +331,7 @@ h1 .imageLink {
 
 .sidebarDivider {
     height: 1px;
-    background: #444;
+    background: #ddd;
     margin: .25em 0;
 }
 
@@ -341,21 +354,21 @@ h1 .imageLink {
 
 .dashboardPanelDivider {
     height: 1px;
-    background: #444;
+    background: #ddd;
     margin: .25em 0;
 }
 
 .dashboardPanelLink {
-    padding: .6em .5em .6em 1.25em;
+    padding: .7em .5em .7em 1.25em;
     display: block;
     text-decoration: none;
-    color: #fff!important;
+    color: #000!important;
     font-weight: normal !important;
 }
 
     .dashboardPanelLink:hover {
-        background: #f2f2f2;
+        background: #52B54B;
-        color: #000!important;
+        color: #fff!important;
     }
 
 .selectedDashboardPanelLink {
@@ -367,10 +380,6 @@ h1 .imageLink {
     padding: 0;
 }
 
-.dashboardPanel {
-    background: #262626!important;
-}
-
 .appLinks a {
     margin: 0 2px;
 }
@@ -427,10 +436,8 @@ h1 .imageLink {
     }
 
     .content-primary {
-        width: 65%;
+        padding: 80px 0 3em 0;
-        float: right;
+        margin: 0 0 0 270px;
-        padding: 80px 6% 3em 0;
-        margin: 0;
     }
 
         .content-primary ul:first-child {
@@ -445,42 +452,6 @@ h1 .imageLink {
     }
 }
 
-@media all and (min-width: 1200px) {
-
-
-    .content-secondary {
-        width: 20%;
-    }
-
-    .content-primary {
-        width: 70%;
-    }
-}
-
-@media all and (min-width: 1440px) {
-
-
-    .content-secondary {
-        width: 17%;
-    }
-
-    .content-primary {
-        width: 74%;
-    }
-}
-
-@media all and (min-width: 1920px) {
-
-
-    .content-secondary {
-        width: 20%;
-    }
-
-    .content-primary {
-        width: 71%;
-    }
-}
-
 /*
     Media Library Page
     */
@@ -881,11 +852,7 @@ progress {
     }
 
 .activeSession {
-    display: inline-block;
+    width: 50%;
-    position: relative;
-    margin: 4px;
-    width: 275px;
-    height: 154.6875px;
 }
 
 .sessionNowPlayingContent {
@@ -979,12 +946,6 @@ progress {
     bottom: 0;
 }
 
-.activeSession:hover {
-    -moz-box-shadow: 0 0 10px 3px #38c;
-    -webkit-box-shadow: 0 0 10px 3px #38c;
-    box-shadow: 0 0 10px 3px #38c;
-}
-
 .sessionNowPlayingTime {
     color: #fff;
     position: absolute;
@@ -1042,21 +1003,8 @@ progress {
     background-image: -o-linear-gradient( center bottom, rgb(221, 73, 25) 37%, rgb(221, 73, 25) 69% )!important;
 }
 
-@media all and (max-width: 1000px) {
-
-    .activeSession {
-        width: 230px;
-        height: 129.375px;
-    }
-}
-
 @media all and (max-width: 550px) {
 
-    .activeSession {
-        width: 210px;
-        height: 118.125px;
-    }
-
     .sessionAppName {
         max-width: 160px;
     }
@@ -1064,20 +1012,11 @@ progress {
 
 @media all and (max-width: 500px) {
 
-    .activeSession {
-        width: 200px;
-        height: 112.5px;
-    }
-
     .sessionAppName {
         max-width: 150px;
     }
-}
-
-@media all and (max-width: 400px) {
 
     .activeSession {
-        width: 250px;
+        width: 100%;
-        height: 140.625px;
     }
 }

dashboard-ui/dashboard.html

@@ -11,9 +11,9 @@
 
                 <div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
                     <a href="#" data-role="button" class="ui-btn-active">${TabDashboard}</a>
-                    <a href="userprofiles.html" data-role="button">${TabUsers}</a>
                     <a href="dashboardgeneral.html" data-role="button">${TabSettings}</a>
                     <a href="serversecurity.html" data-role="button">${TabSecurity}</a>
+                    <a href="dashboardsync.html" data-role="button">${TabSync}</a>
                 </div>
                 <div class="dashboardContent">
                     <div class="readOnlyContent dashboardHomeLeftColumn">

dashboard-ui/dashboardgeneral.html

@@ -11,9 +11,9 @@
 
                 <div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
                     <a href="dashboard.html" data-role="button">${TabDashboard}</a>
-                    <a href="userprofiles.html" data-role="button">${TabUsers}</a>
                     <a href="#" data-role="button" class="ui-btn-active">${TabSettings}</a>
                     <a href="serversecurity.html" data-role="button">${TabSecurity}</a>
+                    <a href="dashboardsync.html" data-role="button">${TabSync}</a>
                 </div>
 
                 <form class="dashboardGeneralForm">

dashboard-ui/dashboardsync.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>${TitleServer}</title>
+</head>
+<body>
+    <div id="dashboardSyncPage" data-role="page" class="page type-interior dashboardHomePage">
+
+        <div data-role="content">
+            <div class="content-primary">
+
+                <div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
+                    <a href="dashboard.html" data-role="button">${TabDashboard}</a>
+                    <a href="dashboardgeneral.html" data-role="button">${TabSettings}</a>
+                    <a href="serversecurity.html" data-role="button">${TabSecurity}</a>
+                    <a href="#" data-role="button" class="ui-btn-active">${TabSync}</a>
+                </div>
+
+                <div class="syncActivity">
+
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+</html>

dashboard-ui/itemdetails.html

@@ -206,7 +206,7 @@
                     <div class="detailSectionHeader">
                         ${HeaderAdditionalParts}
                     </div>
-                    <div id="additionalPartsContent" class="detailSectionContent"></div>
+                    <div id="additionalPartsContent" class="detailSectionContent smallItemsContainer"></div>
                 </div>
                 <div id="castCollapsible" style="display: none;" class="detailSection">
                     <div id="peopleHeader" class="detailSectionHeader">
@@ -218,13 +218,13 @@
                     <div class="detailSectionHeader">
                         ${HeaderSpecialFeatures}
                     </div>
-                    <div id="specialsContent" class="detailSectionContent"></div>
+                    <div id="specialsContent" class="detailSectionContent smallItemsContainer"></div>
                 </div>
                 <div id="musicVideosCollapsible" style="display: none;" class="detailSection">
                     <div class="detailSectionHeader">
                         ${HeaderMusicVideos}
                     </div>
-                    <div id="musicVideosContent" class="detailSectionContent"></div>
+                    <div id="musicVideosContent" class="detailSectionContent smallItemsContainer"></div>
                 </div>
                 <div id="soundtracksCollapsible" style="display: none;" class="detailSection">
                     <div id="soundtracksHeader" class="detailSectionHeader">
@@ -259,7 +259,7 @@
                         ${HeaderScenes}
                         <a class="detailSectionHeaderButton" href="metadataadvanced.html" data-role="button" data-icon="gear" data-iconpos="notext" data-inline="true" title="${ButtonSettings}">${ButtonSettings}</a>
                     </div>
-                    <div id="scenesContent" class="detailSectionContent"></div>
+                    <div id="scenesContent" class="detailSectionContent smallItemsContainer"></div>
                 </div>
                 <div id="themeSongsCollapsible" style="display: none;" class="detailSection">
                     <div class="detailSectionHeader">
@@ -272,7 +272,7 @@
                     <div class="detailSectionHeader">
                         ${HeaderThemeVideos}
                     </div>
-                    <div id="themeVideosContent" class="detailSectionContent"></div>
+                    <div id="themeVideosContent" class="detailSectionContent smallItemsContainer"></div>
                 </div>
             </div>
         </div>

dashboard-ui/login.html

@@ -30,7 +30,7 @@
             </form>
 
             <div class="visualLoginForm" style="display: none; text-align: center;">
-                <div id="divUsers"></div>
+                <div id="divUsers" class="itemsContainer"></div>
 
                 <p class="localhostMessage" style="text-align: center; display: none;">${PasswordLocalhostMessage}</p>
                 

dashboard-ui/notificationlist.html

@@ -20,7 +20,7 @@
                     <div class="notificationsList" style="margin-top: 1em;">
                     </div>
                     
-                    <p style="display:none;" class="btnMarkReadContainer"><button class="btnMarkRead" type="button" data-icon="check" data-mini="true">${ButtonMarkRead}</button></p>
+                    <p style="display:none;" class="btnMarkReadContainer"><button class="btnMarkRead" type="button" data-icon="check">${ButtonMarkRead}</button></p>
 
                 </div>
             </div>

dashboard-ui/plugincatalog.html

@@ -38,7 +38,7 @@
                     <div style="text-align: center; margin: 10px;">${MessageNoAvailablePlugins}</div>
                 </div>
 
-                <div id="pluginTiles"></div>
+                <div id="pluginTiles" class="itemsContainer" style="text-align:left;"></div>
 
             </div>
         </div>

dashboard-ui/scripts/dashboardpage.js

@@ -227,7 +227,7 @@
 
         var parentElement = $('.activeDevices', page);
 
-        $('.activeSession', parentElement).addClass('deadSession');
+        $('.card', parentElement).addClass('deadSession');
 
         for (var i = 0, length = sessions.length; i < length; i++) {
 
@@ -244,7 +244,7 @@
 
             var nowPlayingItem = session.NowPlayingItem;
 
-            var className = nowPlayingItem ? 'playingSession activeSession' : 'activeSession';
+            var className = nowPlayingItem ? 'card card-16-9 activeSession manualSize' : 'card card-16-9 activeSession manualSize';
 
             if (session.TranscodingInfo && session.TranscodingInfo.CompletionPercentage) {
                 className += ' transcodingSession';
@@ -252,6 +252,12 @@
 
             html += '<div class="' + className + '" id="' + rowId + '">';
 
+            html += '<div class="cardBox">';
+            html += '<div class="cardScalable">';
+
+            html += '<div class="cardPadder"></div>';
+            html += '<div class="cardContent">';
+
             html += '<div class="sessionNowPlayingContent"';
 
             var imgUrl = DashboardPage.getNowPlayingImageUrl(nowPlayingItem);
@@ -332,9 +338,17 @@
             } else {
                 html += '<div class="sessionTranscodingFramerate"></div>';
             }
+            html += '</div>';
 
             html += '</div>';
 
+            // cardScalable
+            html += '</div>';
+
+            // cardBox
+            html += '</div>';
+
+            // card
             html += '</div>';
 
         }

dashboard-ui/scripts/dashboardsync.js

@@ -0,0 +1,57 @@
+(function () {
+
+    function getSyncTargetName(targets, id) {
+
+        var target = targets.filter(function (t) {
+
+            return t.Id == id;
+        })[0];
+
+        return target ? target.Name : 'Unknown Device';
+    }
+
+    function loadData(page, jobs, targets) {
+
+        var html = '';
+        var lastTargetName = '';
+
+        for (var i = 0, length = jobs.length; i < length; i++) {
+
+            var job = jobs[i];
+            var targetName = getSyncTargetName(targets, job.TargetId);
+
+            if (targetName != lastTargetName) {
+                html += '<p style="font-size: 24px; border-bottom: 1px solid #ddd; margin: .5em 0; font-weight:300;">' + targetName + '</p>';
+
+                lastTargetName = targetName;
+            }
+        }
+
+        $('.syncActivity', page).html(html).trigger('create');
+    }
+
+    $(document).on('pageshow', "#dashboardSyncPage", function () {
+
+        Dashboard.showLoadingMsg();
+
+        var page = this;
+
+        var promise1 = ApiClient.getJSON(ApiClient.getUrl('Sync/Jobs'));
+
+        var promise2 = ApiClient.getJSON(ApiClient.getUrl('Sync/Targets'));
+
+        $.when(promise1, promise2).done(function (response1, response2) {
+
+            loadData(page, response1[0].Items, response2[0]);
+
+            Dashboard.hideLoadingMsg();
+
+        });
+
+    }).on('pageinit', "#dashboardSyncPage", function () {
+
+        var page = this;
+
+    });
+
+})();

dashboard-ui/scripts/itemdetailpage.js

@@ -1101,7 +1101,10 @@
 
             var onclick = item.PlayAccess == 'Full' ? ' onclick="ItemDetailPage.play(' + chapter.StartPositionTicks + ');"' : '';
 
-            html += '<a class="posterItem smallBackdropPosterItem" href="#play-Chapter-' + i + '"' + onclick + '>';
+            html += '<a class="card card-16-9 manualSize detailPage169Card" href="#play-Chapter-' + i + '"' + onclick + '>';
+
+            html += '<div class="cardBox">';
+            html += '<div class="cardScalable">';
 
             var imgUrl;
 
@@ -1117,15 +1120,27 @@
                 imgUrl = "css/images/items/list/chapter.png";
             }
 
-            html += '<div class="posterItemImage" style="background-image:url(\'' + imgUrl + '\');"></div>';
+            html += '<div class="cardPadder"></div>';
 
-            html += '<div class="posterItemTextOverlay">';
+            html += '<div class="cardContent">';
-            html += '<div class="posterItemText">' + chapterName + '</div>';
+            html += '<div class="cardImage" style="background-image:url(\'' + imgUrl + '\');"></div>';
-            html += '<div class="posterItemText">';
 
+            html += '<div class="cardFooter">';
+            html += '<div class="cardText">' + chapterName + '</div>';
+            html += '<div class="cardText">';
             html += Dashboard.getDisplayTime(chapter.StartPositionTicks);
-
             html += '</div>';
+
+            //cardFooter
+            html += "</div>";
+
+            // cardContent
+            html += '</div>';
+
+            // cardScalable
+            html += '</div>';
+
+            // cardBox
             html += '</div>';
 
             html += '</a>';
@@ -1291,7 +1306,7 @@
 
             var item = items[i];
 
-            var cssClass = "posterItem smallBackdropPosterItem";
+            var cssClass = "card card-16-9 manualSize detailPage169Card";
 
             var href = "itemdetails.html?id=" + item.Id;
 
@@ -1299,6 +1314,9 @@
 
             html += '<a class="' + cssClass + '" href="' + href + '"' + onclick + '>';
 
+            html += '<div class="cardBox">';
+            html += '<div class="cardScalable">';
+
             var imageTags = item.ImageTags || {};
 
             var imgUrl;
@@ -1315,12 +1333,14 @@
                 imgUrl = "css/images/items/detail/video.png";
             }
 
-            html += '<div class="posterItemImage" style="background-image:url(\'' + imgUrl + '\');"></div>';
+            html += '<div class="cardPadder"></div>';
 
-            html += '<div class="posterItemTextOverlay">';
+            html += '<div class="cardContent">';
-            html += '<div class="posterItemText">' + item.Name + '</div>';
+            html += '<div class="cardImage" style="background-image:url(\'' + imgUrl + '\');"></div>';
-            html += '<div class="posterItemText">';
 
+            html += '<div class="cardFooter">';
+            html += '<div class="cardText">' + item.Name + '</div>';
+            html += '<div class="cardText">';
             if (item.RunTimeTicks != "") {
                 html += Dashboard.getDisplayTime(item.RunTimeTicks);
             }
@@ -1328,10 +1348,20 @@
                 html += "&nbsp;";
             }
             html += '</div>';
+
+            //cardFooter
+            html += "</div>";
+
+            // cardContent
+            html += '</div>';
+
+            // cardScalable
+            html += '</div>';
+
+            // cardBox
             html += '</div>';
 
             html += '</a>';
-
         }
 
         if (limit && items.length > limit) {

dashboard-ui/scripts/librarybrowser.js

@@ -564,11 +564,15 @@
             return '';
         },
 
+        getUserDataCssClass: function(key) {
+            return 'libraryItemUserData' + key;
+        },
+
         getListViewHtml: function (options) {
 
             var outerHtml = "";
 
-            outerHtml += '<ul data-role="listview" data-inset="true" class="itemsListview">';
+            outerHtml += '<ul data-role="listview" class="itemsListview">';
 
             var index = 0;
             var groupTitle = '';
@@ -593,7 +597,7 @@
                 var cssClass = 'ui-li-has-thumb listItem';
 
                 if (item.UserData) {
-                    cssClass += ' libraryItemUserData' + item.UserData.Key;
+                    cssClass += ' ' + LibraryBrowser.getUserDataCssClass(item.UserData.Key);
                 }
 
                 var href = LibraryBrowser.getHref(item, options.context);
@@ -987,7 +991,7 @@
                 var href = options.linkItem === false ? '#' : LibraryBrowser.getHref(item, options.context);
 
                 if (item.UserData) {
-                    cssClass += ' libraryItemUserData' + item.UserData.Key;
+                    cssClass += ' ' + LibraryBrowser.getUserDataCssClass(item.UserData.Key);
                 }
 
                 if (options.showChildCountIndicator && item.ChildCount) {

dashboard-ui/scripts/librarylist.js

@@ -688,7 +688,9 @@
 
     function onUserDataChanged(userData) {
 
-        $('.libraryItemUserData' + userData.Key).each(function () {
+        var cssClass = LibraryBrowser.getUserDataCssClass(userData.Key);
+
+        $('.' + cssClass).each(function () {
 
             this.setAttribute('data-positionticks', (userData.PlaybackPositionTicks || 0));
 

dashboard-ui/scripts/loginpage.js

@@ -126,30 +126,37 @@
         for (var i = 0, length = users.length; i < length; i++) {
             var user = users[i];
 
-            var linkId = "lnkUser" + i;
+            html += '<div class="card card-1-1"><div class="cardBox visualCardBox">';
 
-            html += "<a class='posterItem squarePosterItem' id='" + linkId + "' data-haspw='" + user.HasPassword + "' data-username='" + user.Name + "' data-userid='" + user.Id + "' href='#' data-ajax='false' \">";
+            html += '<div class="cardScalable">';
+
+            html += '<div class="cardPadder"></div>';
+            html += '<a class="cardContent" href="#" data-ajax="false" data-haspw="' + user.HasPassword + '" data-username="' + user.Name + '" data-userid="' + user.Id + '">';
 
             if (user.PrimaryImageTag) {
 
                 var imgUrl = ApiClient.getUserImageUrl(user.Id, {
-                    width: 500,
+                    width: 300,
                     tag: user.PrimaryImageTag,
                     type: "Primary"
                 });
 
-                html += '<div class="posterItemImage" style="background-image:url(\'' + imgUrl + '\');"></div>';
+                html += '<div class="cardImage" style="background-image:url(\'' + imgUrl + '\');"></div>';
             }
             else {
 
                 var background = LibraryBrowser.getMetroColor(user.Id);
 
-                html += '<div class="posterItemImage" style="background-color:' + background + ';"></div>';
+                html += '<div class="cardImage" style="background-color:' + background + ';"></div>';
             }
 
-            html += '<div class="posterItemText" style="color:#000;">' + user.Name + '</div>';
+            html += '</a>';
+            html += '</div>';
 
-            html += '<div class="posterItemText" style="color:#000;">';
+            html += '<div class="cardFooter">';
+            html += '<div class="cardText">' + user.Name + '</div>';
+
+            html += '<div class="cardText">';
             var lastSeen = LoginPage.getLastSeenText(user.LastActivityDate);
             if (lastSeen != "") {
                 html += lastSeen;
@@ -158,13 +165,15 @@
                 html += "&nbsp;";
             }
             html += '</div>';
+            html += '</div>';
+            html += '</div>';
 
-            html += '</a>';
+            html += '</div>';
         }
 
         var elem = $('#divUsers', '#loginPage').html(html);
 
-        $('.posterItem', elem).on('click', function () {
+        $('a', elem).on('click', function () {
 
             var name = this.getAttribute('data-username');
             var haspw = this.getAttribute('data-haspw');

dashboard-ui/scripts/mypreferencesdisplay.js

@@ -24,7 +24,7 @@
                 var isChecked = user.Configuration.ExcludeFoldersFromGrouping.indexOf(i.Id) == -1;
                 var checkedHtml = isChecked ? ' checked="checked"' : '';
 
-                currentHtml += '<input class="chkGroupFolder" data-folderid="' + i.Id + '" type="checkbox" data-mini="true" id="' + id + '"' + checkedHtml + ' />';
+                currentHtml += '<input class="chkGroupFolder" data-folderid="' + i.Id + '" type="checkbox" id="' + id + '"' + checkedHtml + ' />';
 
                 return currentHtml;
 
@@ -57,7 +57,7 @@
                 var isChecked = user.Configuration.DisplayChannelsWithinViews.indexOf(i.Id) != -1;
                 var checkedHtml = isChecked ? ' checked="checked"' : '';
 
-                currentHtml += '<input class="chkGroupChannel" data-channelid="' + i.Id + '" type="checkbox" data-mini="true" id="' + id + '"' + checkedHtml + ' />';
+                currentHtml += '<input class="chkGroupChannel" data-channelid="' + i.Id + '" type="checkbox" id="' + id + '"' + checkedHtml + ' />';
 
                 return currentHtml;
 

dashboard-ui/scripts/plugincatalogpage.js

@@ -59,12 +59,18 @@
             var href = plugin.externalUrl ? plugin.externalUrl : "addplugin.html?name=" + encodeURIComponent(plugin.name) + "&guid=" + plugin.guid;
             var target = plugin.externalUrl ? ' target="_blank"' : '';
 
-            html += "<a class='backdropPosterItem posterItem' style='margin: .75em 5px 1em;' href='" + href + "' " + target + ">";
+            html += "<div class='card card-16-9'>";
 
+            html += '<div class="cardBox visualCardBox">';
+            html += '<div class="cardScalable">';
+
+            html += '<div class="cardPadder"></div>';
+
+            html += '<a class="cardContent" href="' + href + '"' + target + '>';
             if (plugin.thumbImage) {
-                html += '<div class="posterItemImage" style="background-image:url(\'' + plugin.thumbImage + '\');background-size:cover;">';
+                html += '<div class="cardImage" style="background-image:url(\'' + plugin.thumbImage + '\');">';
             } else {
-                html += '<div class="posterItemImage defaultPosterItemImage" style="background-image:url(\'css/images/items/list/collection.png\');">';
+                html += '<div class="cardImage" style="background-image:url(\'css/images/items/list/collection.png\');">';
             }
 
             if (plugin.isPremium) {
@@ -76,14 +82,20 @@
             }
             html += "</div>";
 
-            html += "<div class='posterItemText' style='color:#000;'>";
+            // cardContent
+            html += "</a>";
 
+            // cardScalable
+            html += "</div>";
+
+            html += '<div class="cardFooter">';
+
+            html += "<div class='cardText'>";
             html += plugin.name;
-
             html += "</div>";
 
             if (!plugin.isExternal) {
-                html += "<div class='posterItemText packageReviewText' style='color:#000;'>";
+                html += "<div class='cardText packageReviewText'>";
                 html += plugin.price > 0 ? "$" + plugin.price.toFixed(2) : Globalize.translate('LabelFree');
                 html += RatingHelpers.getStoreRatingHtml(plugin.avgRating, plugin.id, plugin.name);
 
@@ -98,7 +110,7 @@
                 return ip.Name == plugin.name;
             })[0];
 
-            html += "<div class='posterItemText' style='color:#000;'>";
+            html += "<div class='cardText'>";
 
             if (installedPlugin) {
                 html += Globalize.translate('LabelVersionInstalled').replace("{0}", installedPlugin.Version);
@@ -107,7 +119,14 @@
             }
             html += "</div>";
 
-            html += "</a>";
+            // cardFooter
+            html += "</div>";
+
+            // cardBox
+            html += "</div>";
+
+            // card
+            html += "</div>";
 
             pluginhtml += html;
 

dashboard-ui/scripts/site.js

@@ -601,9 +601,7 @@ var Dashboard = {
 
         if (!sidebar.length) {
 
-            var html = '<div class="content-secondary ui-bar-a toolsSidebar">';
+            var html = '<div class="content-secondary toolsSidebar">';
-
-            html += '<br/>';
 
             html += '<div class="sidebarLinks">';
 
@@ -640,9 +638,9 @@ var Dashboard = {
             // content-secondary
             html += '</div>';
 
-            html += '<div data-role="panel" id="dashboardPanel" class="dashboardPanel" data-position="left" data-display="overlay" data-position-fixed="true" data-theme="b">';
+            html += '<div data-role="panel" id="dashboardPanel" class="dashboardPanel" data-position="left" data-display="overlay" data-position-fixed="true" data-theme="a">';
 
-            html += '<p class="libraryPanelHeader" style="margin: 15px 0 15px 15px;"><a href="index.html" class="imageLink"><img src="css/images/mblogoicon.png" /><span>MEDIA</span><span class="mediaBrowserAccent">BROWSER</span></a></p>';
+            html += '<p class="libraryPanelHeader" style="margin: 15px 0 15px 15px;"><a href="index.html" class="imageLink"><img src="css/images/mblogoicon.png" /><span style="color:#333;">MEDIA</span><span class="mediaBrowserAccent">BROWSER</span></a></p>';
 
             for (i = 0, length = links.length; i < length; i++) {
 
@@ -669,7 +667,8 @@ var Dashboard = {
 
             html += '</div>';
 
-            $(page).append(html).trigger('create');
+            $('.content-primary', page).before(html);
+            $(page).trigger('create');
         }
     },
 
@@ -681,6 +680,10 @@ var Dashboard = {
             name: Globalize.translate('TabServer'),
             href: "dashboard.html",
             selected: page.hasClass("dashboardHomePage")
+        }, {
+            name: Globalize.translate('TabUsers'),
+            href: "userprofiles.html",
+            selected: page.hasClass("userProfilesPage")
         }, {
             name: Globalize.translate('TabLibrary'),
             divider: true,

dashboard-ui/scripts/sync.js

@@ -2,21 +2,22 @@
 
     function submitJob(userId, items, form) {
 
-        var targets = $('.chkSyncTarget:checked', form).get().map(function (c) {
+        var target = $('.radioSync:checked', form).get().map(function (c) {
 
             return c.getAttribute('data-targetid');
-        });
 
-        if (!targets.length) {
+        })[0];
 
-            Dashboard.alert('Please select one or more sync targets.');
+        if (!target) {
+
+            Dashboard.alert('Please select a device to sync to.');
             return;
         }
 
         var options = {
 
             userId: userId,
-            TargetIds: targets.join(','),
+            TargetId: target,
 
             ItemIds: items.map(function (i) {
                 return i.Id;
@@ -34,7 +35,6 @@
 
         }).done(function () {
 
-            $('.syncPanel').panel('close');
         });
     }
 
@@ -61,8 +61,8 @@
 
             html += targets.map(function (t) {
 
-                var targetHtml = '<label for="chkSync' + t.Id + '">' + t.Name + '</label>';
+                var targetHtml = '<label for="radioSync' + t.Id + '">' + t.Name + '</label>';
-                targetHtml += '<input class="chkSyncTarget" data-targetid="' + t.Id + '" type="checkbox" id="chkSync' + t.Id + '" />';
+                targetHtml += '<input class="radioSync" data-targetid="' + t.Id + '" type="radio" id="radioSync' + t.Id + '" />';
 
                 return targetHtml;
 
@@ -109,6 +109,7 @@
     }
 
     function isAvailable(item, user) {
+
         return item.SupportsSync;
     }
 

dashboard-ui/serversecurity.html

@@ -11,9 +11,9 @@
 
                 <div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
                     <a href="dashboard.html" data-role="button">${TabDashboard}</a>
-                    <a href="userprofiles.html" data-role="button">${TabUsers}</a>
                     <a href="dashboardgeneral.html" data-role="button">${TabSettings}</a>
                     <a href="#" data-role="button" class="ui-btn-active">${TabSecurity}</a>
+                    <a href="dashboardsync.html" data-role="button">${TabSync}</a>
                 </div>
 
                 <h2 style="margin-top: -10px;">

dashboard-ui/useredit.html

@@ -4,16 +4,16 @@
     <title></title>
 </head>
 <body>
-    <div id="editUserPage" data-role="page" class="page type-interior dashboardHomePage publicUserPage">
+    <div id="editUserPage" data-role="page" class="page type-interior userProfilesPage publicUserPage">
 
         <div data-role="content">
             <div class="content-primary">
 
                 <div data-role="controlgroup" data-type="horizontal" class="localnav serverNavigation" data-mini="true" style="display: none;">
                     <a href="dashboard.html" data-role="button">${TabDashboard}</a>
-                    <a href="userprofiles.html" data-role="button" class="ui-btn-active">${TabUsers}</a>
                     <a href="dashboardgeneral.html" data-role="button">${TabSettings}</a>
                     <a href="serversecurity.html" data-role="button">${TabSecurity}</a>
+                    <a href="dashboardsync.html" data-role="button">${TabSync}</a>
                 </div>
 
                 <div data-role="controlgroup" data-type="horizontal" class="localnav" id="userProfileNavigation" style="display: none;" data-mini="true">

dashboard-ui/userimage.html

@@ -4,7 +4,7 @@
     <title></title>
 </head>
 <body>
-    <div id="userImagePage" data-role="page" class="page type-interior userProfilesConfigurationPage publicUserPage">
+    <div id="userImagePage" data-role="page" class="page type-interior userProfilesPage publicUserPage">
 
         <div data-role="content">
             <div class="content-primary">

dashboard-ui/userparentalcontrol.html

@@ -4,7 +4,7 @@
     <title></title>
 </head>
 <body>
-    <div id="userParentalControlPage" data-role="page" class="page type-interior userProfilesConfigurationPage">
+    <div id="userParentalControlPage" data-role="page" class="page type-interior userProfilesPage">
 
         <div data-role="content">
             <div class="content-primary">

dashboard-ui/userpassword.html

@@ -4,7 +4,7 @@
     <title></title>
 </head>
 <body>
-    <div id="updatePasswordPage" data-role="page" class="page type-interior userProfilesConfigurationPage publicUserPage">
+    <div id="updatePasswordPage" data-role="page" class="page type-interior userProfilesPage publicUserPage">
 
         <div data-role="content">
             <div class="content-primary">

dashboard-ui/userprofiles.html

@@ -1,19 +1,16 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>${TitleServer}</title>
+    <title>${TitleUsers}</title>
 </head>
 <body>
-    <div id="userProfilesPage" data-role="page" class="page type-interior dashboardHomePage">
+    <div id="userProfilesPage" data-role="page" class="page type-interior userProfilesPage">
 
         <div data-role="content">
             <div class="content-primary">
 
                 <div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
-                    <a href="dashboard.html" data-role="button">${TabDashboard}</a>
                     <a href="#" data-role="button" class="ui-btn-active">${TabUsers}</a>
-                    <a href="dashboardgeneral.html" data-role="button">${TabSettings}</a>
-                    <a href="serversecurity.html" data-role="button">${TabSecurity}</a>
                 </div>
 
                 <div class="readOnlyContent">