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;