dockeruser
/
CouchPotatoServer
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Actions

pull/5180/head
Ruud 10 years ago
parent
8391656af9
commit
f406d850e8
7 changed files with 94 additions and 55 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 9
      couchpotato/core/media/movie/_base/static/movie.actions.js
  2. 14
      couchpotato/core/media/movie/_base/static/movie.js
  3. 66
      couchpotato/core/media/movie/_base/static/movie.scss
  4. 9
      couchpotato/static/scripts/page/home.js
  5. 36
      couchpotato/static/style/combined.min.css
  6. 2
      couchpotato/static/style/main.scss
  7. 7
      couchpotato/static/style/settings.scss

9
couchpotato/core/media/movie/_base/static/movie.actions.js
View File

@ -23,8 +23,13 @@ var MovieAction = new Class({
}) })
self.button.inject(wrapper); self.button.inject(wrapper);
if(self.icon) //if(self.icon){
new Element('span.icon.icon-'+self.icon).inject(self.button); // var label = self.button.get('text');
// self.button.addClass('with-icon').empty().adopt(
// new Element('span.inner').set('text', label),
// new Element('span.icon.icon-'+self.icon).inject(self.button)
// );
//}
self.button = wrapper; self.button = wrapper;
} }

14
couchpotato/core/media/movie/_base/static/movie.js
View File

@ -240,6 +240,13 @@ var Movie = new Class({
} }
}), }),
self.thumbnail = thumbnail, self.thumbnail = thumbnail,
self.actions_el = new Element('div.actions', {
'events': {
'click': function(e){
(e).stopPropagation();
}
}
}),
self.data_container = new Element('div.data.light').adopt( self.data_container = new Element('div.data.light').adopt(
self.info_container = new Element('div.info').adopt( self.info_container = new Element('div.info').adopt(
new Element('div.title').adopt( new Element('div.title').adopt(
@ -248,13 +255,6 @@ var Movie = new Class({
}), }),
self.year = new Element('div.year', { self.year = new Element('div.year', {
'text': self.data.info.year || 'n/a' 'text': self.data.info.year || 'n/a'
}),
self.actions_el = new Element('div.actions', {
'events': {
'click': function(e){
(e).stopPropagation();
}
}
}) })
), ),
self.eta = eta_date && (now+8035200 > eta) ? new Element('div.eta', { self.eta = eta_date && (now+8035200 > eta) ? new Element('div.eta', {

66
couchpotato/core/media/movie/_base/static/movie.scss
View File

@ -52,11 +52,22 @@
} }
} }
&.status_suggested {
.quality {
display: none;
}
}
} }
.list_list, .thumb_list { .movies {
position: relative; position: relative;
.no_movies {
text-align: center;
padding: $padding;
}
> .description { > .description {
position: absolute; position: absolute;
top: 0; top: 0;
@ -170,6 +181,10 @@
bottom: 0; bottom: 0;
display: none; display: none;
.action {
display: inline-block;
}
a { a {
height: 100%; height: 100%;
display: block; display: block;
@ -186,6 +201,10 @@
&:hover { &:hover {
color: $primary_color; color: $primary_color;
} }
.icon {
display: none;
}
} }
} }
@ -202,7 +221,10 @@
.thumb_list { .thumb_list {
font-size: 12px; font-size: 12px;
> div:last-child {
padding: 0 $padding/2; padding: 0 $padding/2;
}
@include media-tablet { @include media-tablet {
padding: 0 $padding/4; padding: 0 $padding/4;
@ -261,7 +283,6 @@
clear: both; clear: both;
.info { .info {
height: 44px;
.title { .title {
display: flex; display: flex;
@ -294,43 +315,46 @@
} }
.actions { .actions {
background-image: linear-gradient(25deg, rgba($primary_color,0) 0%, rgba($primary_color,.9) 100%);
transition: all 250ms;
opacity: 0;
position: absolute; position: absolute;
top: $padding / 2; top: 0;
right: $padding / 2; right: 0;
bottom: 24px;
left: 0;
text-align: right; text-align: right;
border-radius: $border_radius;
.action { .action {
position: relative; position: relative;
display: block; display: block;
margin-bottom: 1px; margin-bottom: 1px;
width: auto; width: auto;
margin-right: $padding/2;
&:first-child {
margin-top: $padding/2;
}
a { a {
transition: all 150ms $cubic;
display: inline-block; display: inline-block;
width: auto; width: auto;
background: $background_color;
padding: $padding / 3; padding: $padding / 3;
opacity: 0;
}
.icon {
color: #FFF; color: #FFF;
position: absolute; border-radius: $border_radius - 1px;
height: 100%;
width: 33px; &:hover {
top: 0; background: #FFF;
bottom: 0; color: $primary_color;
right: 0; }
font-size: 20px;
text-align: center;
} }
} }
} }
&:hover .actions { &:hover .actions {
display: block; opacity: 1;
@include media-phablet { @include media-phablet {
display: none; display: none;
@ -366,7 +390,7 @@
right: 0; right: 0;
left: $header_width; left: $header_width;
background: rgba(0,0,0,.6); background: rgba(0,0,0,.6);
border-radius: 3px 0 0 3px; border-radius: $border_radius 0 0 $border_radius;
opacity: 0; opacity: 0;
transition: opacity 800ms; transition: opacity 800ms;
@ -399,7 +423,7 @@
right: 0; right: 0;
left: $header_width + $gab-width; left: $header_width + $gab-width;
background: $background_color; background: $background_color;
border-radius: 3px 0 0 3px; border-radius: $border_radius 0 0 $border_radius;
overflow-y: auto; overflow-y: auto;
transform: translateX(100%); transform: translateX(100%);
transition: transform 250ms $cubic; transition: transform 250ms $cubic;

9
couchpotato/static/scripts/page/home.js
View File

@ -45,11 +45,12 @@ Page.Home = new Class({
'description': 'These movies have been snatched or have finished downloading', 'description': 'These movies have been snatched or have finished downloading',
'on_empty_element': new Element('div').adopt( 'on_empty_element': new Element('div').adopt(
new Element('h2', {'text': 'Snatched & Available'}), new Element('h2', {'text': 'Snatched & Available'}),
new Element('span', { new Element('span.no_movies', {
'html': 'No snatched movies or anything!? Damn.. <a>Maybe add a movie.</a>', 'html': 'No snatched movies or anything!? Damn.. <a href="#">Maybe add a movie.</a>',
'events': { 'events': {
'click': function(){ 'click': function(e){
$(document.body).getElement('.search_form input').focus(); (e).preventDefault();
$(document.body).getElement('.search_form .icon-search').click();
} }
} }
}) })

36
couchpotato/static/style/combined.min.css
View File

@ -45,12 +45,14 @@
.movie .quality span.available{background:#2f8199} .movie .quality span.available{background:#2f8199}
.movie .quality span.snatched{background:#41997f} .movie .quality span.snatched{background:#41997f}
.movie .quality span.downloaded{background:#54994a} .movie .quality span.downloaded{background:#54994a}
.list_list,.thumb_list{position:relative} .movie.status_suggested .quality{display:none}
.list_list>.description,.thumb_list>.description{position:absolute;top:0;right:20px;width:auto;line-height:80px} .movies{position:relative}
@media (max-width:768px){.list_list>.description,.thumb_list>.description{display:none}} .movies .no_movies{text-align:center;padding:20px}
.list_list>.loading,.thumb_list>.loading{background:#FFF} .movies>.description{position:absolute;top:0;right:20px;width:auto;line-height:80px}
.list_list>.loading .message,.thumb_list>.loading .message{color:#000} @media (max-width:768px){.movies>.description{display:none}}
.list_list>.loading .spinner,.thumb_list>.loading .spinner{background-color:#000} .movies>.loading{background:#FFF}
.movies>.loading .message{color:#000}
.movies>.loading .spinner{background-color:#000}
.list_list{font-weight:300} .list_list{font-weight:300}
.list_list .poster{display:none} .list_list .poster{display:none}
.list_list .movie{display:block;border-bottom:1px solid #eaeaea;position:relative;cursor:pointer} .list_list .movie{display:block;border-bottom:1px solid #eaeaea;position:relative;cursor:pointer}
@ -69,12 +71,15 @@
.list_list .movie .data .info .quality span{float:left;font-size:.7em;margin:2px 0 0 2px} .list_list .movie .data .info .quality span{float:left;font-size:.7em;margin:2px 0 0 2px}
@media (max-width:480px){.list_list .movie .data .info .quality span{margin:2px 2px 0 0}} @media (max-width:480px){.list_list .movie .data .info .quality span{margin:2px 2px 0 0}}
.list_list .movie .actions{position:absolute;right:10px;top:0;bottom:0;display:none} .list_list .movie .actions{position:absolute;right:10px;top:0;bottom:0;display:none}
.list_list .movie .actions .action{display:inline-block}
.list_list .movie .actions a{height:100%;display:block;background:#FFF;padding:10px;width:auto;float:right;color:#000} .list_list .movie .actions a{height:100%;display:block;background:#FFF;padding:10px;width:auto;float:right;color:#000}
.list_list .movie .actions a:before{display:none} .list_list .movie .actions a:before{display:none}
.list_list .movie .actions a:hover{color:#ac0000} .list_list .movie .actions a:hover{color:#ac0000}
.list_list .movie .actions a .icon{display:none}
.list_list .movie:hover .actions{display:block} .list_list .movie:hover .actions{display:block}
@media (max-width:480px){.list_list .movie:hover .actions{display:none}} @media (max-width:480px){.list_list .movie:hover .actions{display:none}}
.thumb_list{font-size:12px;padding:0 10px} .thumb_list{font-size:12px}
.thumb_list>div:last-child{padding:0 10px}
@media (max-width:768px){.thumb_list{padding:0 5px}} @media (max-width:768px){.thumb_list{padding:0 5px}}
@media (max-width:480px){.thumb_list{padding:0 3.33px}} @media (max-width:480px){.thumb_list{padding:0 3.33px}}
.thumb_list>div{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;-webkit-box-align:stretch;-webkit-align-items:stretch;-moz-box-align:stretch;-ms-flex-align:stretch;align-items:stretch} .thumb_list>div{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;-webkit-box-align:stretch;-webkit-align-items:stretch;-moz-box-align:stretch;-ms-flex-align:stretch;align-items:stretch}
@ -85,17 +90,17 @@
@media (max-width:480px){.thumb_list .movie{max-width:50%;border-width:0 4px}} @media (max-width:480px){.thumb_list .movie{max-width:50%;border-width:0 4px}}
.thumb_list .movie .poster{-webkit-border-radius:3px;border-radius:3px;background:center/cover no-repeat #eaeaea;-webkit-background-size:cover;overflow:hidden;width:100%;padding-bottom:150%} .thumb_list .movie .poster{-webkit-border-radius:3px;border-radius:3px;background:center/cover no-repeat #eaeaea;-webkit-background-size:cover;overflow:hidden;width:100%;padding-bottom:150%}
.thumb_list .movie .data{clear:both} .thumb_list .movie .data{clear:both}
.thumb_list .movie .data .info{height:44px}
.thumb_list .movie .data .info .title{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;padding:3px 0} .thumb_list .movie .data .info .title{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;padding:3px 0}
.thumb_list .movie .data .info .title span{-webkit-box-flex:1;-webkit-flex:1 auto;-moz-box-flex:1;-ms-flex:1 auto;flex:1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .thumb_list .movie .data .info .title span{-webkit-box-flex:1;-webkit-flex:1 auto;-moz-box-flex:1;-ms-flex:1 auto;flex:1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thumb_list .movie .data .info .title .year{display:inline-block;margin-left:5px;opacity:.5} .thumb_list .movie .data .info .title .year{display:inline-block;margin-left:5px;opacity:.5}
.thumb_list .movie .data .info .quality{white-space:nowrap;overflow:hidden} .thumb_list .movie .data .info .quality{white-space:nowrap;overflow:hidden}
.thumb_list .movie .data .info .quality span{font-size:.8em;margin-right:2px} .thumb_list .movie .data .info .quality span{font-size:.8em;margin-right:2px}
.thumb_list .movie .actions{position:absolute;top:10px;right:10px;text-align:right} .thumb_list .movie .actions{background-image:-webkit-linear-gradient(65deg,rgba(172,0,0,0) 0,rgba(172,0,0,.9) 100%);background-image:linear-gradient(25deg,rgba(172,0,0,0) 0,rgba(172,0,0,.9) 100%);-webkit-transition:all 250ms;transition:all 250ms;opacity:0;position:absolute;top:0;right:0;bottom:24px;left:0;text-align:right;-webkit-border-radius:3px;border-radius:3px}
.thumb_list .movie .actions .action{position:relative;display:block;margin-bottom:1px;width:auto} .thumb_list .movie .actions .action{position:relative;display:block;margin-bottom:1px;width:auto;margin-right:10px}
.thumb_list .movie .actions .action a{display:inline-block;width:auto;background:#FFF;padding:6.67px;opacity:0} .thumb_list .movie .actions .action:first-child{margin-top:10px}
.thumb_list .movie .actions .action .icon{color:#FFF;position:absolute;height:100%;width:33px;top:0;bottom:0;right:0;font-size:20px;text-align:center} .thumb_list .movie .actions .action a{-webkit-transition:all 150ms cubic-bezier(0.9,0,.1,1);transition:all 150ms cubic-bezier(0.9,0,.1,1);display:inline-block;width:auto;padding:6.67px;color:#FFF;-webkit-border-radius:2px;border-radius:2px}
.thumb_list .movie:hover .actions{display:block} .thumb_list .movie .actions .action a:hover{background:#FFF;color:#ac0000}
.thumb_list .movie:hover .actions{opacity:1}
@media (max-width:480px){.thumb_list .movie:hover .actions{display:none}} @media (max-width:480px){.thumb_list .movie:hover .actions{display:none}}
.thumb_list .movie .mask{bottom:44px;-webkit-border-radius:3px;border-radius:3px;-webkit-transition:opacity 30ms;transition:opacity 30ms} .thumb_list .movie .mask{bottom:44px;-webkit-border-radius:3px;border-radius:3px;-webkit-transition:opacity 30ms;transition:opacity 30ms}
.eta{display:none} .eta{display:none}
@ -500,7 +505,7 @@ input,select,textarea{font-size:1em;font-weight:300;padding:6.67px;background:#F
.more_menu .button{font-size:24px;cursor:pointer;display:inline-block} .more_menu .button{font-size:24px;cursor:pointer;display:inline-block}
.more_menu .button:before{position:relative} .more_menu .button:before{position:relative}
.more_menu .wrapper{display:none;position:absolute;right:0;background:#ac0000;z-index:5000;-webkit-box-shadow:0 0 15px 2px rgba(0,0,0,.15);box-shadow:0 0 15px 2px rgba(0,0,0,.15);-webkit-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px} .more_menu .wrapper{display:none;position:absolute;right:0;background:#ac0000;z-index:5000;-webkit-box-shadow:0 0 15px 2px rgba(0,0,0,.15);box-shadow:0 0 15px 2px rgba(0,0,0,.15);-webkit-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px}
.more_menu .wrapper:before{-webkit-transform:rotate(45deg) translateY(-60%);-ms-transform:rotate(45deg) translateY(-60%);transform:rotate(45deg) translateY(-60%);content:'';display:block;position:absolute;background:#ac0000;height:10px;width:10px;left:-9px;bottom:11px;z-index:1;opacity:0;-webkit-border-radius:2px;border-radius:2px} .more_menu .wrapper:before{-webkit-transform:rotate(45deg) translateY(-60%);-ms-transform:rotate(45deg) translateY(-60%);transform:rotate(45deg) translateY(-60%);content:'';display:block;position:absolute;background:#ac0000;height:10px;width:10px;left:-9px;bottom:11px;z-index:1;opacity:0;-webkit-border-radius:3px;border-radius:3px}
.more_menu .wrapper ul{-webkit-transform:translateZ(0);transform:translateZ(0);background:#FFF;position:relative;z-index:2;overflow:hidden;-webkit-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px} .more_menu .wrapper ul{-webkit-transform:translateZ(0);transform:translateZ(0);background:#FFF;position:relative;z-index:2;overflow:hidden;-webkit-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px}
.more_menu .wrapper ul li{display:block;line-height:1em;border-top:1px solid #eaeaea} .more_menu .wrapper ul li{display:block;line-height:1em;border-top:1px solid #eaeaea}
.more_menu .wrapper ul li:first-child{border-top:0} .more_menu .wrapper ul li:first-child{border-top:0}
@ -540,7 +545,8 @@ input,select,textarea{font-size:1em;font-weight:300;padding:6.67px;background:#F
.table .item:last-child{border-bottom:none} .table .item:last-child{border-bottom:none}
.table .item span{padding:1px 2px} .table .item span{padding:1px 2px}
.table .item span:first-child{padding-left:0} .table .item span:first-child{padding-left:0}
.table .item span:last-child{padding-right:0}.page.settings{top:80px;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex} .table .item span:last-child{padding-right:0}.page.settings{top:80px}
.page.settings.active{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex}
@media (max-width:480px){.page.settings{display:block}} @media (max-width:480px){.page.settings{display:block}}
.page.settings .navigation{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-moz-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between} .page.settings .navigation{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-moz-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}
.page.settings .navigation .advanced_toggle{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center;margin-right:20px} .page.settings .navigation .advanced_toggle{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center;margin-right:20px}

2
couchpotato/static/style/main.scss
View File

@ -442,7 +442,7 @@ input, textarea, select {
bottom: 11px; bottom: 11px;
z-index: 1; z-index: 1;
opacity: 0; opacity: 0;
border-radius: 2px; border-radius: $border_radius;
// border: 8px solid $primary_color; // border: 8px solid $primary_color;
// border-color: transparent $primary_color transparent transparent; // border-color: transparent $primary_color transparent transparent;
} }

7
couchpotato/static/style/settings.scss
View File

@ -2,7 +2,10 @@
.page.settings { .page.settings {
top: $header_height; top: $header_height;
&.active {
display: flex; display: flex;
}
@include media-phablet { @include media-phablet {
display: block; display: block;
@ -227,7 +230,7 @@
padding: 2px; padding: 2px;
transition: all 250ms; transition: all 250ms;
cursor: pointer; cursor: pointer;
border-radius: 3px; border-radius: $border_radius;
input { input {
display: none; display: none;
@ -239,7 +242,7 @@
width: 40%; width: 40%;
transition: transform 250ms; transition: transform 250ms;
transform: translateX(150%); transform: translateX(150%);
border-radius: 2px; border-radius: $border_radius - 1px;
} }
} }

Write Preview
Loading…
Cancel
Save