From 0155c8de2db7490c4379b0c434c3f47de7f57ff5 Mon Sep 17 00:00:00 2001 From: Ruud Date: Tue, 16 Dec 2014 23:55:26 +0100 Subject: [PATCH] Movie lists --- couchpotato/core/_base/clientscript.py | 1 + .../core/media/movie/_base/static/movie.js | 3 - .../core/media/movie/_base/static/movie.scss | 1150 ++--------------- .../core/media/movie/_base/static/page.js | 33 +- couchpotato/static/scripts/block/header.js | 66 + .../static/scripts/block/navigation.js | 65 +- couchpotato/static/scripts/couchpotato.js | 35 +- couchpotato/static/scripts/page.js | 29 +- couchpotato/static/style/main.scss | 57 +- couchpotato/static/style/mixins.scss | 48 + 10 files changed, 348 insertions(+), 1139 deletions(-) create mode 100644 couchpotato/static/scripts/block/header.js diff --git a/couchpotato/core/_base/clientscript.py b/couchpotato/core/_base/clientscript.py index c6b1e46e..fb21cb3f 100644 --- a/couchpotato/core/_base/clientscript.py +++ b/couchpotato/core/_base/clientscript.py @@ -40,6 +40,7 @@ class ClientScript(Plugin): 'scripts/page.js', 'scripts/block.js', 'scripts/block/navigation.js', + 'scripts/block/header.js', 'scripts/block/footer.js', 'scripts/block/menu.js', 'scripts/page/home.js', diff --git a/couchpotato/core/media/movie/_base/static/movie.js b/couchpotato/core/media/movie/_base/static/movie.js index 4a786e95..e83a7d94 100644 --- a/couchpotato/core/media/movie/_base/static/movie.js +++ b/couchpotato/core/media/movie/_base/static/movie.js @@ -181,9 +181,6 @@ var Movie = new Class({ 'text': self.data.info.year || 'n/a' }) ), - self.description = new Element('div.description.tiny_scroll', { - 'text': self.data.info.plot - }), self.eta = eta_date && (now+8035200 > eta) ? new Element('div.eta', { 'text': eta_date, 'title': 'ETA' diff --git a/couchpotato/core/media/movie/_base/static/movie.scss b/couchpotato/core/media/movie/_base/static/movie.scss index 311b111d..d9f3cc89 100644 --- a/couchpotato/core/media/movie/_base/static/movie.scss +++ b/couchpotato/core/media/movie/_base/static/movie.scss @@ -1,1074 +1,138 @@ +@import "couchpotato/static/style/mixins"; + .movies { - padding: 10px 0 20px; - position: relative; - z-index: 3; - width: 100%; -} - .movies > div { - clear: both; - } + .list_list { + font-size: 15px; + font-weight: 300; + background: #f2f2f2; - .movies > div .message { - display: block; - padding: 20px; - font-size: 20px; - color: white; - text-align: center; - } - .movies > div .message a { - padding: 20px; - display: block; - } - - .movies.thumbs_list > div:not(.description) { - margin-right: -4px; - } - - .movies .loading { - display: block; - padding: 20px 0 0 0; - width: 100%; - z-index: 3; - transition: all .4s cubic-bezier(0.9,0,0.1,1); - height: 40px; - opacity: 1; - position: absolute; - text-align: center; - } - .movies .loading.hide { - height: 0; - padding: 0; - opacity: 0; - margin-top: -20px; - overflow: hidden; - } - - .movies .loading .spinner { - display: inline-block; - } - - .movies .loading .message { - margin: 0 20px; - } - - .movies h2 { - margin-bottom: 20px; - } - - @media all and (max-width: 480px) { - .movies h2 { - font-size: 25px; - margin-bottom: 10px; - } - } - - .movies > .description { - position: absolute; - top: 30px; - right: 0; - font-style: italic; - opacity: 0.8; - } - .movies:hover > .description { - opacity: 1; - } - - @media all and (max-width: 860px) { - .movies > .description { - display: none; - } - } - - .movies.thumbs_list { - padding: 20px 0 20px; - } - - .home .movies { - padding-top: 6px; - } - - .movies .movie { - position: relative; - margin: 10px 0; - padding-left: 20px; - overflow: hidden; - width: 100%; - height: 180px; - transition: all 0.6s cubic-bezier(0.9,0,0.1,1); - transition-property: width, height; - background: rgba(0,0,0,.2); - } - - .movies.mass_edit_list .movie { - padding-left: 22px; - background: none; - } - - .movies.details_list .movie { - padding-left: 120px; - } - - .movies.list_list .movie:not(.details_view), - .movies.mass_edit_list .movie { - height: 30px; - border-bottom: 1px solid rgba(255,255,255,.15); - } - - .movies.list_list .movie:last-child, - .movies.mass_edit_list .movie:last-child { - border: none; - } - - .movies.thumbs_list .movie { - width: 16.66667%; - height: auto; - min-height: 200px; - display: inline-block; - margin: 0; - padding: 0; - vertical-align: top; - line-height: 0; - } - - @media all and (max-width: 800px) { - .movies.thumbs_list .movie { - width: 25%; - min-height: 100px; - } - } - - .movies .movie .mask { - position: absolute; - top: 0; - left: 0; - height: 100%; - width: 100%; - } - - .movies.list_list .movie:not(.details_view), - .movies.mass_edit_list .movie { - margin: 0; - } - - .movies .data { - padding: 20px; - height: 100%; - width: 100%; - position: relative; - transition: all .6s cubic-bezier(0.9,0,0.1,1); - right: 0; - } - .movies.list_list .movie:not(.details_view) .data, - .movies.mass_edit_list .movie .data { - padding: 0 0 0 10px; - border: 0; - background: #4e5969; - } - .movies.mass_edit_list .movie .data { - padding-left: 8px; - } - - .movies.thumbs_list .data { - position: absolute; - left: 0; - top: 0; - width: 100%; - padding: 10px; - height: 100%; - background: none; - transition: none; - } - - .movies.thumbs_list .movie:hover .data { - background: rgba(0,0,0,0.9); - } - - .movies .data.hide_right { - right: -100%; - } - - .movies .movie .check { + .poster { display: none; } - .movies.mass_edit_list .movie .check { - position: absolute; - left: 0; - top: 0; - display: block; - margin: 7px 0 0 5px; + .movie { + border-bottom: 1px solid #e6e6e6; + position: relative; + cursor: pointer; + + &:last-child { + border-bottom: none; } - .movies .poster { - position: absolute; - left: 0; - width: 120px; - line-height: 0; - overflow: hidden; - height: 100%; - transition: all .6s cubic-bezier(0.9,0,0.1,1); - background: rgba(0,0,0,.1); - } - .movies.thumbs_list .poster { - position: relative; - } - .movies.list_list .movie:not(.details_view) .poster, - .movies.mass_edit_list .poster { - width: 20px; - height: 30px; - } - .movies.mass_edit_list .poster { - display: none; + &:hover { + background: rgba(0,0,0,.1); } - .movies.thumbs_list .poster { - width: 100%; - height: 100%; - transition: none; - background: no-repeat center; - background-size: cover; - } - .movies.thumbs_list .no_thumbnail .empty_file { - width: 100%; - height: 100%; - } + .data { + padding: $padding/2 $padding; - .movies .poster img, - .options .poster img { - width: 100%; - height: 100%; - } - .movies.thumbs_list .poster img { - height: auto; - width: 100%; - top: 0; - bottom: 0; - opacity: 0; - } + .info { - .movies .info { - position: relative; - height: 100%; - width: 100%; - } + @include flexbox(); + flex-flow: row nowrap; - .movies .info .title { - font-size: 28px; - font-weight: bold; - margin-bottom: 10px; - margin-top: 2px; - width: 100%; - padding-right: 80px; - transition: all 0.2s linear; - height: 35px; - top: -5px; - position: relative; - } - .movies.list_list .info .title, - .movies.mass_edit_list .info .title { - height: 100%; - top: 0; - margin: 0; - } - .touch_enabled .movies.list_list .info .title { - display: inline-block; - padding-right: 55px; - } + .title { + @include flex(1 auto); - .movies .info .title span { - display: inline-block; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - width: 100%; - height: 100%; - line-height: 30px; - } - - .movies.thumbs_list .info .title span { - white-space: normal; - overflow: auto; - height: auto; - text-align: left; - } - - @media all and (max-width: 480px) { - .movies.thumbs_list .movie .info .title span, - .movies.thumbs_list .movie .info .year { - font-size: 15px; - line-height: 15px; - overflow: hidden; + .year { + display: inline-block; + margin-left: 10px; + opacity: .5; } } - .movies.list_list .movie:not(.details_view) .info .title, - .movies.mass_edit_list .info .title { - font-size: 16px; - font-weight: normal; - width: auto; - } + .quality { - .movies.thumbs_list .movie:not(.no_thumbnail) .info { - display: none; - } - .movies.thumbs_list .movie:hover .info { - display: block; + span { + color: #FFF; + font-size: .8em; + padding: 2px 4px; + background: rgba(0,0,0,.2); + border-radius: 1px; + } } - - .movies.thumbs_list .info .title { - font-size: 21px; - word-wrap: break-word; - padding: 0; - height: 100%; - } - - .movies .info .year { - position: absolute; - color: #bbb; - right: 0; - top: 6px; - text-align: right; - transition: all 0.2s linear; - font-weight: normal; + } } - .movies.list_list .movie:not(.details_view) .info .year, - .movies.mass_edit_list .info .year { - font-size: 1.25em; - right: 10px; - } + } + } - .movies.thumbs_list .info .year { - font-size: 23px; - margin: 0; - bottom: 0; - left: 0; - top: auto; - right: auto; - color: #FFF; - line-height: 18px; - } + .thumb_list { - .touch_enabled .movies.list_list .movie .info .year { - font-size: 1em; - } + font-size: 12px; + padding: $padding/2 $padding; - .movies .info .description { - top: 30px; + .movie { + @include span(6); + float: left; + margin-bottom: $padding; + + &:nth-child(4n+4){ + @include span(last); + } + + &:nth-child(4n+5){ clear: both; - bottom: 30px; - position: absolute; - } - .movies.list_list .movie:not(.details_view) .info .description, - .movies.mass_edit_list .info .description, - .movies.thumbs_list .info .description { - display: none; - } - - .movies .data .eta { - display: none; - } - - .movies.details_list .data .eta { - position: absolute; - bottom: 0; - right: 0; - display: block; - min-height: 20px; - text-align: right; - font-style: italic; - opacity: .8; - font-size: 11px; - } - - .movies.details_list .movie:hover .data .eta { - display: none; } - .movies.thumbs_list .data .eta { - display: block; - position: absolute; - bottom: 40px; - } - - .movies .data .quality { - position: absolute; - bottom: 2px; - display: block; - min-height: 20px; - } - - .movies.list_list .movie:hover .data .quality { - display: none; - } - - .touch_enabled .movies.list_list .movie .data .quality { - position: relative; - display: inline-block; - margin: 0; - top: -4px; - } - - @media all and (max-width: 480px) { - .movies .data .quality { - display: none; - } - } - - .movies .status_suggest .data .quality, - .movies.thumbs_list .data .quality { - display: none; - } - - .movies .data .quality span { - padding: 2px 3px; - opacity: 0.5; - font-size: 10px; - height: 16px; - line-height: 12px; - vertical-align: middle; - display: inline-block; - text-transform: uppercase; - font-weight: normal; - margin: 0 4px 0 0; + .poster { border-radius: 2px; - background-color: rgba(255,255,255,0.1); - } - .movies.list_list .data .quality, - .movies.mass_edit_list .data .quality { - text-align: right; - right: 0; - margin-right: 60px; - z-index: 1; - top: 5px; - } - - .movies .data .quality .available, - .movies .data .quality .snatched, - .movies .data .quality .seeding { - opacity: 1; - cursor: pointer; - } - - .movies .data .quality .available { background-color: #578bc3; } - .movies .data .quality .failed, - .movies .data .quality .missing, - .movies .data .quality .ignored { background-color: #a43d34; } - .movies .data .quality .snatched { background-color: #a2a232; } - .movies .data .quality .done { - background-color: #369545; - opacity: 1; - } - .movies .data .quality .seeding { background-color: #0a6819; } - .movies .data .quality .finish { - background-image: url('../../images/sprite.png'); - background-repeat: no-repeat; - background-position: 0 2px; - padding-left: 14px; - background-size: 14px - } - - .movies .data .actions { - position: absolute; - bottom: 17px; - right: 20px; - line-height: 0; - top: 0; - width: auto; - opacity: 0; - display: none; - } - @media all and (max-width: 480px) { - .movies .data .actions { - display: none !important; - } - } - - .movies .movie:hover .data .actions, - .touch_enabled .movies .movie .data .actions { - opacity: 1; - display: inline-block; - } - - .movies.details_list .data .actions { - top: auto; - bottom: 18px; - } - - .movies .movie:hover .actions { - opacity: 1; - display: inline-block; - } - .movies.thumbs_list .data .actions { - bottom: 12px; - right: 10px; - top: auto; - } - - .movies .movie:hover .action { opacity: 0.6; } - .movies .movie:hover .action:hover { opacity: 1; } - - .movies .data .action { - display: inline-block; - height: 22px; - min-width: 33px; - padding: 0 5px; - line-height: 26px; - text-align: center; - font-size: 13px; - color: #FFF; - margin-left: 1px; - } - .movies .data .action.trailer { color: #FFF; } - .movies .data .action.download { color: #b9dec0; } - .movies .data .action.edit { color: #c6b589; } - .movies .data .action.refresh { color: #cbeecc; } - .movies .data .action.delete { color: #e9b0b0; } - .movies .data .action.directory { color: #ffed92; } - .movies .data .action.readd { color: #c2fac5; } - - .movies.mass_edit_list .movie .data .actions { - display: none; - } - - .movies.list_list .movie:not(.details_view):hover .actions, - .movies.mass_edit_list .movie:hover .actions, - .touch_enabled .movies.list_list .movie:not(.details_view) .actions { - margin: 0; - background: #4e5969; - top: 2px; - bottom: 2px; - right: 5px; - z-index: 3; - } - - .movies .delete_container { - clear: both; - text-align: center; - font-size: 20px; - position: absolute; - padding: 80px 0 0; - left: 120px; - right: 0; - } - .movies .delete_container .or { - padding: 10px; - } - .movies .delete_container .delete { - background-color: #ff321c; - font-weight: normal; - } - .movies .delete_container .delete:hover { - color: #fff; - background-color: #d32917; - } - - .movies .options { - position: absolute; - right: 0; - left: 120px; - } - - .movies .options .form { - margin: 80px 0 0; - font-size: 20px; - text-align: center; - } - - .movies .options .form select { - margin-right: 20px; - } - - .movies .options .table { - height: 180px; - overflow: auto; - line-height: 2em; - } - .movies .options .table .item { - border-bottom: 1px solid rgba(255,255,255,0.1); - } - .movies .options .table .item.ignored span, - .movies .options .table .item.failed span { - text-decoration: line-through; - color: rgba(255,255,255,0.4); - } - .movies .options .table .item.ignored .delete:before, - .movies .options .table .item.failed .delete:before { - display: inline-block; - content: "\e04b"; - transform: scale(-1, 1); - } - - .movies .options .table .item:last-child { border: 0; } - .movies .options .table .item:nth-child(even) { - background: rgba(255,255,255,0.05); - } - .movies .options .table .item:not(.head):hover { - background: rgba(255,255,255,0.03); - } - - .movies .options .table .item > * { - display: inline-block; - padding: 0 5px; - width: 60px; - min-height: 24px; - white-space: nowrap; - text-overflow: ellipsis; - text-align: center; - vertical-align: top; - border-left: 1px solid rgba(255, 255, 255, 0.1); - } - .movies .options .table .item > *:first-child { - border: 0; - } - .movies .options .table .provider { - width: 120px; - text-overflow: ellipsis; - overflow: hidden; - } - .movies .options .table .name { - width: 340px; - overflow: hidden; - text-align: left; - padding: 0 10px; - } - .movies .options .table.files .name { width: 590px; } - .movies .options .table .type { width: 130px; } - .movies .options .table .is_available { width: 90px; } - .movies .options .table .age, - .movies .options .table .size { width: 40px; } - - .movies .options .table a { - width: 30px !important; - height: 20px; - opacity: 0.8; - line-height: 25px; - } - .movies .options .table a:hover { opacity: 1; } - .movies .options .table a.download { color: #a7fbaf; } - .movies .options .table a.delete { color: #fda3a3; } - .movies .options .table .ignored a.delete, - .movies .options .table .failed a.delete { color: #b5fda3; } - - .movies .options .table .head > * { - font-weight: bold; - font-size: 14px; - padding-top: 4px; - padding-bottom: 4px; - height: auto; - } - - .trailer_container { - width: 100%; - background: #000; - text-align: center; - transition: all .6s cubic-bezier(0.9,0,0.1,1); - overflow: hidden; - left: 0; - position: absolute; - z-index: 10; - } - @media only screen and (device-width: 768px) { - .trailer_container iframe { - margin-top: 25px; - } - } - - .trailer_container.hide { - height: 0 !important; - } - - .hide_trailer { - position: absolute; - top: 0; - left: 50%; - margin-left: -50px; - width: 100px; - text-align: center; - padding: 3px 10px; - background: #4e5969; - transition: all .2s cubic-bezier(0.9,0,0.1,1) .2s; - z-index: 11; - } - .hide_trailer.hide { - top: -30px; - } - - .movies .movie .try_container { - padding: 5px 10px; - text-align: center; - } - - .movies .movie .try_container a { - margin: 0 5px; - padding: 2px 5px; - } - - .movies .movie .releases .next_release { - border-left: 6px solid #2aa300; - } - - .movies .movie .releases .next_release > :first-child { - margin-left: -6px; - } - - .movies .movie .releases .last_release { - border-left: 6px solid #ffa200; - } - - .movies .movie .releases .last_release > :first-child { - margin-left: -6px; - } - .movies .movie .trynext { - display: inline; - position: absolute; - right: 180px; - z-index: 2; - opacity: 0; - background: #4e5969; - text-align: right; - height: 100%; - top: 0; - } - .touch_enabled .movies .movie .trynext { - display: none; - } - - @media all and (max-width: 480px) { - .movies .movie .trynext { - display: none; - } - } - .movies.mass_edit_list .trynext { display: none; } - .wanted .movies .movie .trynext { - padding-right: 30px; - } - .movies .movie:hover .trynext, - .touch_enabled .movies.details_list .movie .trynext { - opacity: 1; - } - - .movies.details_list .movie .trynext { - background: #47515f; - padding: 0; - right: 0; - height: 25px; - } - - .movies .movie .trynext a { - background-position: 5px center; - padding: 0 5px 0 25px; - margin-right: 10px; - color: #FFF; - height: 100%; - line-height: 27px; - font-family: OpenSans, "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif; - } - .movies .movie .trynext a:before { - margin: 2px 0 0 -20px; - position: absolute; - font-family: 'Elusive-Icons'; - } - .movies.details_list .movie .trynext a { - line-height: 23px; - } - .movies .movie .trynext a:last-child { - margin: 0; - } - .movies .movie .trynext a:hover, - .touch_enabled .movies .movie .trynext a { - background-color: #369545; - } - - .movies .load_more { - display: block; - padding: 10px; - text-align: center; - font-size: 20px; - } - .movies .load_more.loading { - opacity: .5; - } - -.movies .alph_nav { - height: 44px; -} - - @media all and (max-width: 480px) { - .movies .alph_nav { - display: none; - } - } - - .movies .alph_nav .menus { - display: inline-block; - float: right; - } - -.movies .alph_nav .numbers, -.movies .alph_nav .counter, -.movies .alph_nav .actions { - list-style: none; - padding: 0 0 1px; - margin: 0; - user-select: none; -} - - .movies .alph_nav .counter { - display: inline-block; - text-align: right; - padding: 0 10px; - height: 100%; - line-height: 43px; - border-right: 1px solid rgba(255,255,255,.07); - } - - .movies .alph_nav .numbers li, - .movies .alph_nav .actions li { - display: inline-block; - vertical-align: top; - height: 100%; - line-height: 30px; - text-align: center; - border: 1px solid transparent; - transition: all 0.1s ease-in-out; - } - - .movies .alph_nav .numbers li { - width: 30px; - height: 30px; - opacity: 0.3; - } - .movies .alph_nav .numbers li.letter_all { - width: 60px; - } - - .movies .alph_nav li.available { - font-weight: bold; - cursor: pointer; - opacity: 1; - - } - .movies .alph_nav li.active.available, - .movies .alph_nav li.available:hover { - background: rgba(0,0,0,.1); - } - - .movies .alph_nav .search input { - width: 100%; - height: 44px; - display: inline-block; - border: 0; - background: none; - color: #444; - font-size: 14px; - padding: 0 10px 0 30px; - border-bottom: 1px solid rgba(0,0,0,.08); - } - .movies .alph_nav .search input:focus { - background: rgba(0,0,0,.08); - } - - .movies .alph_nav .search input::-webkit-input-placeholder { - color: #444; - opacity: .6; - } - - .movies .alph_nav .search:before { - font-family: 'Elusive-Icons'; - content: "\e03e"; - position: absolute; - height: 20px; - line-height: 45px; - font-size: 12px; - margin: 0 0 0 10px; - opacity: .6; - color: #444; - } - - .movies .alph_nav .actions { - -moz-user-select: none; - width: 44px; - height: 44px; - display: inline-block; - vertical-align: top; - z-index: 200; - position: relative; - border: 1px solid rgba(255,255,255,.07); - border-width: 0 1px; - } - .movies .alph_nav .actions:hover { - box-shadow: 0 100px 20px -10px rgba(0,0,0,0.55); - } - .movies .alph_nav .actions li { - width: 100%; - height: 45px; - line-height: 40px; - position: relative; - z-index: 20; - display: none; - cursor: pointer; - } - .movies .alph_nav .actions:hover li:not(.active) { - display: block; - background: #FFF; - color: #444; - } - .movies .alph_nav .actions li:hover:not(.active) { - background: #ccc; - } - .movies .alph_nav .actions li.active { - display: block; - } - - .movies .alph_nav .actions li.mass_edit:before { - content: "\e070"; - } - - .movies .alph_nav .actions li.list:before { - content: "\e0d8"; - } - - .movies .alph_nav .actions li.details:before { - content: "\e022"; - } - - .movies .alph_nav .mass_edit_form { - clear: both; - text-align: center; - display: none; - overflow: hidden; - float: left; - height: 44px; - line-height: 44px; - } - .movies.mass_edit_list .mass_edit_form { - display: inline-block; - } - .movies.mass_edit_list .mass_edit_form .select { - font-size: 14px; - display: inline-block; - } - .movies.mass_edit_list .mass_edit_form .select .check { - display: inline-block; - vertical-align: middle; - margin: -4px 0 0 5px; - } - .movies.mass_edit_list .mass_edit_form .select span { - opacity: 0.7; - } - .movies.mass_edit_list .mass_edit_form .select .count { - font-weight: bold; - margin: 0 3px 0 10px; - } - - .movies .alph_nav .mass_edit_form .quality { - display: inline-block; - margin: 0 0 0 16px; - } - .movies .alph_nav .mass_edit_form .quality select { - width: 120px; - margin-right: 5px; - } - .movies .alph_nav .mass_edit_form .button { - padding: 3px 7px; - } - - .movies .alph_nav .mass_edit_form .refresh, - .movies .alph_nav .mass_edit_form .delete { - display: inline-block; - margin-left: 8px; - } - - .movies .alph_nav .mass_edit_form .refresh span, - .movies .alph_nav .mass_edit_form .delete span { - margin: 0 10px 0 0; - } - - .movies .alph_nav .more_menu > a { - background: none; - } - - .movies .alph_nav .more_menu.extra > a:before { - content: '...'; - font-size: 1.7em; - line-height: 23px; - text-align: center; - display: block; - } - - .movies .alph_nav .more_menu.filter { - } - - .movies .alph_nav .more_menu.filter > a:before { - content: "\e0e8"; - font-family: 'Elusive-Icons'; - line-height: 33px; - display: block; - text-align: center; - } - - .movies .alph_nav .more_menu.filter .wrapper { - right: 88px; - width: 300px; - } - -.movies .empty_wanted { - background-image: url('../../images/emptylist.png'); - background-position: 80% 0; - height: 750px; - width: 100%; - max-width: 900px; - padding-top: 260px; -} - -.movies .empty_manage { - text-align: center; - font-size: 25px; - line-height: 150%; - padding: 40px 0; -} - - .movies .empty_manage .after_manage { - margin-top: 30px; - font-size: 16px; - } - - .movies .progress { - padding: 10px; - margin: 5px 0; - text-align: left; - } - - .movies .progress > div { - padding: 5px 10px; - font-size: 12px; - line-height: 12px; - text-align: left; - display: inline-block; - width: 49%; - background: rgba(255, 255, 255, 0.05); - margin: 2px 0.5%; - } - - .movies .progress > div .folder { - display: inline-block; - padding: 5px 20px 5px 0; - white-space: nowrap; - text-overflow: ellipsis; overflow: hidden; - width: 85%; - direction: ltr; - vertical-align: middle; + width: 100%; + float: left; } - .movies .progress > div .percentage { - display: inline-block; - text-transform: uppercase; - font-weight: normal; - font-size: 20px; - border-left: 1px solid rgba(255, 255, 255, .2); - width: 15%; - text-align: right; - vertical-align: middle; + .data { + clear: both; + + .info { + + .title { + @include flexbox(); + padding: 3px 0; + + span { + @include flex(1 auto); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .year { + display: inline-block; + margin-left: 5px; + opacity: .5; + } + } + + .quality { + white-space: nowrap; + overflow: hidden; + + span { + color: #FFF; + font-size: .8em; + padding: 2px 4px; + background: rgba(0,0,0,.2); + border-radius: 1px; + margin-right: 2px; + } + } + } } + } + + } + + .check { + position: absolute; + top: 0; + left: $padding; + display: none; + } + + .eta { + display: none; + } + +} diff --git a/couchpotato/core/media/movie/_base/static/page.js b/couchpotato/core/media/movie/_base/static/page.js index 00736aba..6cd043c5 100644 --- a/couchpotato/core/media/movie/_base/static/page.js +++ b/couchpotato/core/media/movie/_base/static/page.js @@ -4,9 +4,38 @@ Page.Movies = new Class({ name: 'movies', sub_pages: ['Wanted', 'Manage'], + default_page: 'Wanted', + current_page: null, + + initialize: function(parent, options){ + var self = this; + self.parent(parent, options); + + self.navigation = new BlockNavigation(); + $(self.navigation).inject(self.el, 'top'); + + }, + + defaultAction: function(action, params){ + var self = this; + + if(self.current_page) + self.current_page.hide(); + + var route = new Route(); + route.parse(action); + + var page_name = route.getPage() != 'index' ? route.getPage().capitalize() : self.default_page; + + var page = self.sub_pages.filter(function(page){ + return page.name == page_name; + }).pick()['class']; + + page.open(route.getAction() || 'index', params); + page.show(); + + self.current_page = page; - indexAction: function(){ - p('test'); } }); diff --git a/couchpotato/static/scripts/block/header.js b/couchpotato/static/scripts/block/header.js new file mode 100644 index 00000000..46f0296d --- /dev/null +++ b/couchpotato/static/scripts/block/header.js @@ -0,0 +1,66 @@ +var BlockHeader = new Class({ + + Extends: BlockNavigation, + + create: function(){ + var self = this; + + self.parent(); + + self.el.adopt( + self.foldout = new Element('a.foldout.icon2.menu', { + 'events': { + 'click': self.toggleMenu.bind(self) + } + }).grab(new Element('span.overlay')), + self.logo = new Element('a.logo', { + 'html': 'CouchPotato', + 'href': App.createUrl('') + }), + self.nav + ); + + new ScrollSpy({ + min: 400, + onLeave: function(){ + self.backtotop.fade('out'); + }, + onEnter: function(){ + self.backtotop.fade('in'); + } + }); + + self.nav.addEvents({ + 'click:relay(a)': function(){ + if($(document.body).getParent().hasClass('menu_shown')) + self.toggleMenu(); + } + }); + + }, + + toggleMenu: function(){ + var self = this, + body = $(document.body), + html = body.getParent(); + + // Copy over settings menu + if(!self.added){ + + new Element('li.separator').inject(self.nav); + body.getElements('.header .more_menu.menu li a, .header .more_menu.menu li span.separator').each(function(el, nr){ + if(nr <= 2) return; + if(el.get('tag') == 'a') + self.nav.grab(new Element('li').grab(el.clone().cloneEvents(el))); + else + self.nav.grab(new Element('li.separator')); + }); + + self.added = true; + } + + html.toggleClass('menu_shown'); + + } + +}); diff --git a/couchpotato/static/scripts/block/navigation.js b/couchpotato/static/scripts/block/navigation.js index 43d48e4e..12010854 100644 --- a/couchpotato/static/scripts/block/navigation.js +++ b/couchpotato/static/scripts/block/navigation.js @@ -5,47 +5,10 @@ var BlockNavigation = new Class({ create: function(){ var self = this; - self.el = new Element('div.navigation').adopt( - self.foldout = new Element('a.foldout.icon2.menu', { - 'events': { - 'click': self.toggleMenu.bind(self) - } - }).grab(new Element('span.overlay')), - self.logo = new Element('a.logo', { - 'html': 'CouchPotato', - 'href': App.createUrl('') - }), - self.nav = new Element('ul'), - self.backtotop = new Element('a.backtotop', { - 'text': 'back to top', - 'events': { - 'click': function(){ - window.scroll(0,0); - } - }, - 'tween': { - 'duration': 100 - } - }) + self.el = new Element('div.navigation').grab( + self.nav = new Element('ul') ); - new ScrollSpy({ - min: 400, - onLeave: function(){ - self.backtotop.fade('out'); - }, - onEnter: function(){ - self.backtotop.fade('in'); - } - }); - - self.nav.addEvents({ - 'click:relay(a)': function(){ - if($(document.body).getParent().hasClass('menu_shown')) - self.toggleMenu(); - } - }); - }, addTab: function(name, tab){ @@ -57,30 +20,6 @@ var BlockNavigation = new Class({ }, - toggleMenu: function(){ - var self = this, - body = $(document.body), - html = body.getParent(); - - // Copy over settings menu - if(!self.added){ - - new Element('li.separator').inject(self.nav); - body.getElements('.header .more_menu.menu li a, .header .more_menu.menu li span.separator').each(function(el, nr){ - if(nr <= 2) return; - if(el.get('tag') == 'a') - self.nav.grab(new Element('li').grab(el.clone().cloneEvents(el))); - else - self.nav.grab(new Element('li.separator')); - }); - - self.added = true; - } - - html.toggleClass('menu_shown'); - - }, - activate: function(name){ var self = this; diff --git a/couchpotato/static/scripts/couchpotato.js b/couchpotato/static/scripts/couchpotato.js index 98915489..8e500327 100644 --- a/couchpotato/static/scripts/couchpotato.js +++ b/couchpotato/static/scripts/couchpotato.js @@ -23,8 +23,6 @@ self.c = $(document.body); - self.route = new Route(self.defaults); - self.createLayout(); self.createPages(); @@ -79,7 +77,7 @@ self.c.adopt( $(self.block.header).addClass('header').adopt( - self.block.navigation = new BlockNavigation(self, {}), + self.block.navigation = new BlockHeader(self, {}), self.block.search = new BlockSearch(self, {}), self.block.more = new BlockMenu(self, {'button_class': 'icon2.cog'}) ), @@ -170,13 +168,15 @@ }, openPage: function(url) { - var self = this; + var self = this, + route = new Route(self.defaults); - self.route.parse(); - var page_name = self.route.getPage().capitalize(), - action = self.route.getAction(), - params = self.route.getParams(), - current_url = self.route.getCurrentUrl(), + route.parse(rep(History.getPath())); + + var page_name = route.getPage().capitalize(), + action = route.getAction(), + params = route.getParams(), + current_url = route.getCurrentUrl(), page; if(current_url == self.current_url) @@ -439,24 +439,19 @@ window.App = new CouchPotato(); var Route = new Class({ - defaults: {}, + defaults: null, page: '', action: 'index', params: {}, initialize: function(defaults){ var self = this; - self.defaults = defaults; + self.defaults = defaults || {}; }, - parse: function(){ + parse: function(path){ var self = this; - var rep = function (pa) { - return pa.replace(Api.getOption('url'), '/').replace(App.getOption('base_url'), '/'); - }; - - var path = rep(History.getPath()); if(path == '/' && location.hash){ path = rep(location.hash.replace('#', '/')); } @@ -464,7 +459,7 @@ var Route = new Class({ var url = self.current.split('/'); self.page = (url.length > 0) ? url.shift() : self.defaults.page; - self.action = (url.length > 0) ? url.shift() : self.defaults.action; + self.action = (url.length > 0) ? url.join('/') : self.defaults.action; self.params = Object.merge({}, self.defaults.params); if(url.length > 1){ @@ -624,3 +619,7 @@ var createSpinner = function(target, options){ return new Spinner(opts).spin(target); }; + +var rep = function (pa) { + return pa.replace(Api.getOption('url'), '/').replace(App.getOption('base_url'), '/'); +}; diff --git a/couchpotato/static/scripts/page.js b/couchpotato/static/scripts/page.js index b4530fa2..99220092 100644 --- a/couchpotato/static/scripts/page.js +++ b/couchpotato/static/scripts/page.js @@ -10,11 +10,13 @@ var PageBase = new Class({ has_tab: true, name: '', + parent_page: null, sub_pages: null, - initialize: function(options) { + initialize: function(parent_page, options) { var self = this; + self.parent_page = parent_page; self.setOptions(options); // Create main page container @@ -26,9 +28,17 @@ var PageBase = new Class({ // Create tab for page if(self.has_tab){ - var nav = App.getBlock('navigation'); + var nav; + + if(self.parent_page && self.parent_page.navigation){ + nav = self.parent_page.navigation; + } + else { + nav = App.getBlock('navigation'); + } + self.tab = nav.addTab(self.name, { - 'href': App.createUrl(self.name), + 'href': App.createUrl(self.getPageUrl()), 'title': self.title, 'text': self.name.capitalize() }); @@ -73,7 +83,13 @@ var PageBase = new Class({ //p('Opening: ' +self.getName() + ', ' + action + ', ' + Object.toQueryString(params)); try { - var elements = self[action+'Action'](params); + var elements + if(!self[action+'Action']){ + elements = self['defaultAction'](action, params); + } + else { + elements = self[action+'Action'](params); + } if(elements !== undefined){ self.el.empty(); self.el.adopt(elements); @@ -93,6 +109,11 @@ var PageBase = new Class({ History.push(url); }, + getPageUrl: function(){ + var self = this; + return (self.parent_page && self.parent_page.getPageUrl ? self.parent_page.getPageUrl() + '/' : '') + self.name; + }, + errorAction: function(e){ p('Error, action not found', e); }, diff --git a/couchpotato/static/style/main.scss b/couchpotato/static/style/main.scss index 2bd4fe2e..fca649b9 100644 --- a/couchpotato/static/style/main.scss +++ b/couchpotato/static/style/main.scss @@ -43,8 +43,8 @@ a { font-family: Lobster, serif; color: #FFF; font-size: 38px; - line-height: 80px; - height: 80px; + line-height: $header-height; + height: $header-height; span:nth-child(odd){ display: block; @@ -60,7 +60,7 @@ a { margin: 0; li a { - padding: 10px 20px; + padding: $padding/2 $padding; display: block; } } @@ -83,23 +83,68 @@ a { .pages { height: 100%; width: 100%; + overflow: auto; + overflow-x: hidden; } .footer { position: fixed; bottom: 0; - height: 20px; + height: $padding; width: 100%; } } .page { - + position: relative; display: none; - padding: 20px; + padding: $padding 0; + + .page { + margin-top: $header-height - $padding; + z-index: 10; + padding: 0; + } &.active { display: block; } + .navigation { + @include flexbox(); + position: fixed; + top: 0; + height: $header-height; + left: 130px; + right: 0; + background: $background_color; + z-index: 100; + + ul { + @include flex(1 auto); + list-style: none; + + li { + display: inline-block; + + a { + font-size: 24px; + line-height: $header-height; + padding: $padding; + color: rgba(0,0,0,.5); + font-weight: 300; + + &.active { + color: rgba(0,0,0,1); + } + } + } + } + + } + + .alph_nav { + display: none; // Hide for now + } + } diff --git a/couchpotato/static/style/mixins.scss b/couchpotato/static/style/mixins.scss index 16cbc23f..040c0afc 100644 --- a/couchpotato/static/style/mixins.scss +++ b/couchpotato/static/style/mixins.scss @@ -3,6 +3,54 @@ $background_color: #FFF; $menu_color: #111; $theme_off: #f2f2f2; +$header-height: 80px; +$padding: 20px; + +@import "susy"; +@import "compass/css3/transition"; +@import "compass/css3/transform"; + +$susy: ( + columns: 24, + gutters: 70px/70px +); + +$mq-phone: 320px !default; +$mq-phablet: 480px !default; +$mq-tablet: 768px !default; +$mq-desktop: 1024px !default; +$mq-desktop-plus: 1382px !default; + +@mixin media-phone { + @media (max-width : $mq-phone) { + @content; + } +} + +@mixin media-phablet { + @media (max-width : $mq-phablet) { + @content; + } +} + +@mixin media-tablet { + @media (max-width : $mq-tablet) { + @content; + } +} + +@mixin media-desktop { + @media (max-width : $mq-desktop) { + @content; + } +} + +@mixin media-desktop-plus { + @media (max-width : $mq-desktop-plus) { + @content; + } +} + @mixin flexbox() { display: -webkit-box; display: -moz-box;