From f406d850e8ae3e3cf25b2b6b9190458f64829258 Mon Sep 17 00:00:00 2001 From: Ruud Date: Fri, 12 Jun 2015 17:25:01 +0200 Subject: [PATCH] Actions --- .../core/media/movie/_base/static/movie.actions.js | 9 ++- couchpotato/core/media/movie/_base/static/movie.js | 14 ++--- .../core/media/movie/_base/static/movie.scss | 70 +++++++++++++++------- couchpotato/static/scripts/page/home.js | 9 +-- couchpotato/static/style/combined.min.css | 36 ++++++----- couchpotato/static/style/main.scss | 2 +- couchpotato/static/style/settings.scss | 9 ++- 7 files changed, 94 insertions(+), 55 deletions(-) diff --git a/couchpotato/core/media/movie/_base/static/movie.actions.js b/couchpotato/core/media/movie/_base/static/movie.actions.js index e447c1a..0f0144f 100644 --- a/couchpotato/core/media/movie/_base/static/movie.actions.js +++ b/couchpotato/core/media/movie/_base/static/movie.actions.js @@ -23,8 +23,13 @@ var MovieAction = new Class({ }) self.button.inject(wrapper); - if(self.icon) - new Element('span.icon.icon-'+self.icon).inject(self.button); + //if(self.icon){ + // 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; } diff --git a/couchpotato/core/media/movie/_base/static/movie.js b/couchpotato/core/media/movie/_base/static/movie.js index 56d3e51..6f5c9c2 100644 --- a/couchpotato/core/media/movie/_base/static/movie.js +++ b/couchpotato/core/media/movie/_base/static/movie.js @@ -240,6 +240,13 @@ var Movie = new Class({ } }), 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.info_container = new Element('div.info').adopt( new Element('div.title').adopt( @@ -248,13 +255,6 @@ var Movie = new Class({ }), self.year = new Element('div.year', { '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', { diff --git a/couchpotato/core/media/movie/_base/static/movie.scss b/couchpotato/core/media/movie/_base/static/movie.scss index b76430a..bd5716a 100644 --- a/couchpotato/core/media/movie/_base/static/movie.scss +++ b/couchpotato/core/media/movie/_base/static/movie.scss @@ -52,11 +52,22 @@ } } + &.status_suggested { + .quality { + display: none; + } + } + } -.list_list, .thumb_list { +.movies { position: relative; + .no_movies { + text-align: center; + padding: $padding; + } + > .description { position: absolute; top: 0; @@ -170,6 +181,10 @@ bottom: 0; display: none; + .action { + display: inline-block; + } + a { height: 100%; display: block; @@ -186,6 +201,10 @@ &:hover { color: $primary_color; } + + .icon { + display: none; + } } } @@ -202,7 +221,10 @@ .thumb_list { font-size: 12px; - padding: 0 $padding/2; + + > div:last-child { + padding: 0 $padding/2; + } @include media-tablet { padding: 0 $padding/4; @@ -261,7 +283,6 @@ clear: both; .info { - height: 44px; .title { display: flex; @@ -294,43 +315,46 @@ } .actions { + background-image: linear-gradient(25deg, rgba($primary_color,0) 0%, rgba($primary_color,.9) 100%); + transition: all 250ms; + opacity: 0; position: absolute; - top: $padding / 2; - right: $padding / 2; + top: 0; + right: 0; + bottom: 24px; + left: 0; text-align: right; + border-radius: $border_radius; .action { position: relative; display: block; margin-bottom: 1px; width: auto; - + margin-right: $padding/2; + + &:first-child { + margin-top: $padding/2; + } a { + transition: all 150ms $cubic; display: inline-block; width: auto; - background: $background_color; padding: $padding / 3; - opacity: 0; - } - - - .icon { color: #FFF; - position: absolute; - height: 100%; - width: 33px; - top: 0; - bottom: 0; - right: 0; - font-size: 20px; - text-align: center; + border-radius: $border_radius - 1px; + + &:hover { + background: #FFF; + color: $primary_color; + } } } } &:hover .actions { - display: block; + opacity: 1; @include media-phablet { display: none; @@ -366,7 +390,7 @@ right: 0; left: $header_width; background: rgba(0,0,0,.6); - border-radius: 3px 0 0 3px; + border-radius: $border_radius 0 0 $border_radius; opacity: 0; transition: opacity 800ms; @@ -399,7 +423,7 @@ right: 0; left: $header_width + $gab-width; background: $background_color; - border-radius: 3px 0 0 3px; + border-radius: $border_radius 0 0 $border_radius; overflow-y: auto; transform: translateX(100%); transition: transform 250ms $cubic; diff --git a/couchpotato/static/scripts/page/home.js b/couchpotato/static/scripts/page/home.js index 0ffacf9..72cf867 100644 --- a/couchpotato/static/scripts/page/home.js +++ b/couchpotato/static/scripts/page/home.js @@ -45,11 +45,12 @@ Page.Home = new Class({ 'description': 'These movies have been snatched or have finished downloading', 'on_empty_element': new Element('div').adopt( new Element('h2', {'text': 'Snatched & Available'}), - new Element('span', { - 'html': 'No snatched movies or anything!? Damn.. Maybe add a movie.', + new Element('span.no_movies', { + 'html': 'No snatched movies or anything!? Damn.. Maybe add a movie.', 'events': { - 'click': function(){ - $(document.body).getElement('.search_form input').focus(); + 'click': function(e){ + (e).preventDefault(); + $(document.body).getElement('.search_form .icon-search').click(); } } }) diff --git a/couchpotato/static/style/combined.min.css b/couchpotato/static/style/combined.min.css index b3a7e98..b448443 100644 --- a/couchpotato/static/style/combined.min.css +++ b/couchpotato/static/style/combined.min.css @@ -45,12 +45,14 @@ .movie .quality span.available{background:#2f8199} .movie .quality span.snatched{background:#41997f} .movie .quality span.downloaded{background:#54994a} -.list_list,.thumb_list{position:relative} -.list_list>.description,.thumb_list>.description{position:absolute;top:0;right:20px;width:auto;line-height:80px} -@media (max-width:768px){.list_list>.description,.thumb_list>.description{display:none}} -.list_list>.loading,.thumb_list>.loading{background:#FFF} -.list_list>.loading .message,.thumb_list>.loading .message{color:#000} -.list_list>.loading .spinner,.thumb_list>.loading .spinner{background-color:#000} +.movie.status_suggested .quality{display:none} +.movies{position:relative} +.movies .no_movies{text-align:center;padding:20px} +.movies>.description{position:absolute;top:0;right:20px;width:auto;line-height:80px} +@media (max-width:768px){.movies>.description{display:none}} +.movies>.loading{background:#FFF} +.movies>.loading .message{color:#000} +.movies>.loading .spinner{background-color:#000} .list_list{font-weight:300} .list_list .poster{display:none} .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} @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 .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:before{display:none} .list_list .movie .actions a:hover{color:#ac0000} +.list_list .movie .actions a .icon{display:none} .list_list .movie:hover .actions{display:block} @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: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} @@ -85,17 +90,17 @@ @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 .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 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 .quality{white-space:nowrap;overflow:hidden} .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 .action{position:relative;display:block;margin-bottom:1px;width:auto} -.thumb_list .movie .actions .action a{display:inline-block;width:auto;background:#FFF;padding:6.67px;opacity:0} -.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:hover .actions{display:block} +.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;margin-right:10px} +.thumb_list .movie .actions .action:first-child{margin-top:10px} +.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 .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}} .thumb_list .movie .mask{bottom:44px;-webkit-border-radius:3px;border-radius:3px;-webkit-transition:opacity 30ms;transition:opacity 30ms} .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: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: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 li{display:block;line-height:1em;border-top:1px solid #eaeaea} .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 span{padding:1px 2px} .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}} .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} diff --git a/couchpotato/static/style/main.scss b/couchpotato/static/style/main.scss index f727285..bc9f09a 100644 --- a/couchpotato/static/style/main.scss +++ b/couchpotato/static/style/main.scss @@ -442,7 +442,7 @@ input, textarea, select { bottom: 11px; z-index: 1; opacity: 0; - border-radius: 2px; + border-radius: $border_radius; // border: 8px solid $primary_color; // border-color: transparent $primary_color transparent transparent; } diff --git a/couchpotato/static/style/settings.scss b/couchpotato/static/style/settings.scss index c571f12..4c5bbe1 100644 --- a/couchpotato/static/style/settings.scss +++ b/couchpotato/static/style/settings.scss @@ -2,7 +2,10 @@ .page.settings { top: $header_height; - display: flex; + + &.active { + display: flex; + } @include media-phablet { display: block; @@ -227,7 +230,7 @@ padding: 2px; transition: all 250ms; cursor: pointer; - border-radius: 3px; + border-radius: $border_radius; input { display: none; @@ -239,7 +242,7 @@ width: 40%; transition: transform 250ms; transform: translateX(150%); - border-radius: 2px; + border-radius: $border_radius - 1px; } }