diff --git a/dashboard-ui/channels.html b/dashboard-ui/channels.html index 49a902d41b..d33071b75f 100644 --- a/dashboard-ui/channels.html +++ b/dashboard-ui/channels.html @@ -8,6 +8,8 @@
+

${HeaderChannels}

+
diff --git a/dashboard-ui/collections.html b/dashboard-ui/collections.html index da08a7855b..e3d8dcde56 100644 --- a/dashboard-ui/collections.html +++ b/dashboard-ui/collections.html @@ -10,6 +10,9 @@
+ +

${HeaderCollections}

+
diff --git a/dashboard-ui/css/images/items/folders/books.png b/dashboard-ui/css/images/items/folders/books.png new file mode 100644 index 0000000000..a8c3b7916f Binary files /dev/null and b/dashboard-ui/css/images/items/folders/books.png differ diff --git a/dashboard-ui/css/images/items/folders/channels.png b/dashboard-ui/css/images/items/folders/channels.png new file mode 100644 index 0000000000..1ca1e62577 Binary files /dev/null and b/dashboard-ui/css/images/items/folders/channels.png differ diff --git a/dashboard-ui/css/images/items/folders/games.png b/dashboard-ui/css/images/items/folders/games.png new file mode 100644 index 0000000000..d2e450afd8 Binary files /dev/null and b/dashboard-ui/css/images/items/folders/games.png differ diff --git a/dashboard-ui/css/images/items/folders/homevideos.png b/dashboard-ui/css/images/items/folders/homevideos.png new file mode 100644 index 0000000000..46a3f3f086 Binary files /dev/null and b/dashboard-ui/css/images/items/folders/homevideos.png differ diff --git a/dashboard-ui/css/images/items/folders/movies.png b/dashboard-ui/css/images/items/folders/movies.png new file mode 100644 index 0000000000..2a999490ed Binary files /dev/null and b/dashboard-ui/css/images/items/folders/movies.png differ diff --git a/dashboard-ui/css/images/items/folders/music.png b/dashboard-ui/css/images/items/folders/music.png new file mode 100644 index 0000000000..dc6b8bf176 Binary files /dev/null and b/dashboard-ui/css/images/items/folders/music.png differ diff --git a/dashboard-ui/css/images/items/folders/photos.png b/dashboard-ui/css/images/items/folders/photos.png new file mode 100644 index 0000000000..ea98e5e430 Binary files /dev/null and b/dashboard-ui/css/images/items/folders/photos.png differ diff --git a/dashboard-ui/css/images/items/folders/tv.png b/dashboard-ui/css/images/items/folders/tv.png new file mode 100644 index 0000000000..362bd11708 Binary files /dev/null and b/dashboard-ui/css/images/items/folders/tv.png differ diff --git a/dashboard-ui/css/librarybrowser.css b/dashboard-ui/css/librarybrowser.css index efca7aea69..e6ca05bdfd 100644 --- a/dashboard-ui/css/librarybrowser.css +++ b/dashboard-ui/css/librarybrowser.css @@ -961,6 +961,17 @@ a.itemTag:hover { margin-left: .5em; } +@media all and (min-width: 750px) { + + .lnkSibling:not(.hide) { + display: block; + } + + .itemBackdrop:not(.noBackdrop) { + border-bottom: 1px solid #111; + } +} + @media all and (min-height: 500px) { .alphabetPicker { diff --git a/dashboard-ui/css/librarymenu.css b/dashboard-ui/css/librarymenu.css index 7058999af3..d54208b213 100644 --- a/dashboard-ui/css/librarymenu.css +++ b/dashboard-ui/css/librarymenu.css @@ -1,11 +1,35 @@ .libraryPage { - padding-top: 48px !important; + padding-top: 54px !important; } .libraryPage:not(.metadataEditorPage):not(.noSecondaryNavPage) { - padding-top: 91px !important; + padding-top: 97px !important; } +.desktopLibraryMenu { + position: fixed; + left: 0; + z-index: 1001; + top: 54px; + background-color: #181818; + width: 200px; + min-height: 100px; + border-bottom-right-radius: 5px; +} + +.itemDetailPage .desktopLibraryMenu { + background-color: rgba(24,24,24,.6); +} + +.metadataEditorPage .desktopLibraryMenu { + display: none; +} + +.desktopLibraryMenuDivider { + height: 1px; + background: #333; + margin: .5em 0; +} .viewMenuBar { font-weight: bold; @@ -14,13 +38,9 @@ left: 0; z-index: 1000; top: 0; - padding-left: 10px; background: #181818; - border-bottom: 1px solid #080808; -} - -.viewMenuLink { - font-size: 90%; + padding: 3px .25em 3px 1em; + border-bottom: 1px solid #101010; } .viewMenuLink { @@ -31,6 +51,10 @@ vertical-align: middle; } + .viewMenuLink:hover { + background-color: #555; + } + .viewMenuBar .btnCurrentUser { padding: 7px 1em 6px; } @@ -48,49 +72,84 @@ vertical-align: top; } -.selectedMediaFolder { - color: #fff!important; +.viewMenuTextLink { + display: block; + padding: .6em .5em .6em 35px!important; + font-size: 15px; + font-weight: 300!important; + font-family: Roboto; } -.viewMenuBar .selectedMediaFolder:before { - content: '\25BA'; - color: #fff; +.musicViewMenu { + background-image: url(images/items/folders/music.png); + background-repeat: no-repeat; + background-size: 18px 18px; + background-position: 8px 8px; +} + +.tvshowsViewMenu { + background-image: url(images/items/folders/tv.png); + background-repeat: no-repeat; + background-size: 18px 18px; + background-position: 8px 8px; +} + +.moviesViewMenu { + background-image: url(images/items/folders/movies.png); + background-repeat: no-repeat; + background-size: 18px 18px; + background-position: 8px center; +} + +.gamesViewMenu { + background-image: url(images/items/folders/games.png); + background-repeat: no-repeat; + background-size: 18px 18px; + background-position: 8px 8px; +} + +.channelsViewMenu { + background-image: url(images/items/folders/channels.png); + background-repeat: no-repeat; + background-size: 18px 18px; + background-position: 8px center; +} + +.booksViewMenu { + background-image: url(images/items/folders/books.png); + background-repeat: no-repeat; + background-size: 18px 18px; + background-position: 8px center; +} + +.collectionsViewMenu, .generalViewMenu, .homeVideosViewMenu { + background-image: url(images/items/folders/homevideos.png); + background-repeat: no-repeat; + background-size: 18px 18px; + background-position: 8px center; } .viewMenuSecondary { float: right; } -.viewMenuTextLink { - display: none; - height: 20px; - padding-top: 9px; - text-transform: uppercase; - font-size: 14px; - font-weight: 400!important; -} - -.viewMenuTextLink { - display: inline-block; -} - -.viewName { - vertical-align: middle; -} - -.selectedViewLink { +.selectedMediaFolder { + background-color: #38c!important; color: #fff!important; } +.itemDetailPage .selectedMediaFolder { + background-color: rgba(51,136,204,.8)!important; +} .libraryViewNav { height: 42px; overflow: hidden; border-bottom: 1px solid #333; position: fixed; - left: 0; right: 0; - top: 48px; + left: 0; + top: 54px; z-index: 1000; background-color: #252525; } @@ -130,49 +189,51 @@ color: #ddd; } +.desktopHomeLink { + color: #ddd !important; + margin-right: 2em; + text-decoration: none; + font-weight: 400!important; +} -@media all and (min-width: 950px) { + .desktopHomeLink span { + vertical-align: middle; + } + +@media all and (min-width: 1280px) { .libraryMenuButton { display: none; } -} -@media all and (max-width: 950px) { - - .desktopHomeLink { - display: none; + .libraryPage:not(.itemDetailPage):not(.metadataEditorPage) { + left: 215px !important; + width: auto !important; + right: 0 !important; } - .desktopViewMenuLink { + .libraryPage:not(.itemDetailPage) .libraryViewNav { + } +} + +@media all and (max-width: 1280px) { + + .desktopHomeLink { display: none; } .libraryViewNavInner { text-align: left; } + + .desktopLibraryMenu { + display: none; + } } @media all and (min-width: 750px) { - .viewMenuLink { - padding-left: .8em; - padding-right: .8em; - } - - .libraryMenuButton + .viewMenuTextLink { - padding-left: .6em !important; - } - .viewMenuBar .btnCurrentUser { padding-right: 1.5em; } - - .lnkSibling:not(.hide) { - display: block; - } - - .itemBackdrop:not(.noBackdrop) { - border-bottom: 1px solid #111; - } } diff --git a/dashboard-ui/css/metadataeditor.css b/dashboard-ui/css/metadataeditor.css index 97bd17fcdc..5e7cf01310 100644 --- a/dashboard-ui/css/metadataeditor.css +++ b/dashboard-ui/css/metadataeditor.css @@ -233,7 +233,7 @@ .editPageSidebar { position: fixed; - top: 48px; + top: 54px; bottom: 0; left: 0; width: 30%; diff --git a/dashboard-ui/index.html b/dashboard-ui/index.html index 43c0490458..d53d63ec6d 100644 --- a/dashboard-ui/index.html +++ b/dashboard-ui/index.html @@ -4,12 +4,17 @@ ${TitleMediaBrowser} -
+
+

${HeaderMyLibrary}

+ +
+
+