diff --git a/couchpotato/core/_base/clientscript.py b/couchpotato/core/_base/clientscript.py
index 92bc419e..ec8a51b2 100644
--- a/couchpotato/core/_base/clientscript.py
+++ b/couchpotato/core/_base/clientscript.py
@@ -28,7 +28,6 @@ class ClientScript(Plugin):
'scripts/vendor/form_replacement/form_radio.js',
'scripts/vendor/form_replacement/form_dropdown.js',
'scripts/vendor/form_replacement/form_selectoption.js',
- 'scripts/vendor/spin.js',
'scripts/vendor/Array.stableSort.js',
'scripts/vendor/history.js',
'scripts/library/uniform.js',
diff --git a/couchpotato/core/media/_base/search/static/search.scss b/couchpotato/core/media/_base/search/static/search.scss
index d9d16756..a53783db 100644
--- a/couchpotato/core/media/_base/search/static/search.scss
+++ b/couchpotato/core/media/_base/search/static/search.scss
@@ -239,13 +239,4 @@
}
}
- .mask,
- .media_result .mask {
- position: absolute;
- height: 100%;
- width: 100%;
- left: 0;
- top: 0;
- }
-
}
diff --git a/couchpotato/core/media/movie/_base/static/details.js b/couchpotato/core/media/movie/_base/static/details.js
index 88cd69f2..b00b1525 100644
--- a/couchpotato/core/media/movie/_base/static/details.js
+++ b/couchpotato/core/media/movie/_base/static/details.js
@@ -12,7 +12,11 @@ var MovieDetails = new Class({
self.el = new Element('div',{
'class': 'page active movie_details level_' + (options.level || 0)
}).adopt(
- self.overlay = new Element('div.overlay').grab(
+ self.overlay = new Element('div.overlay', {
+ 'events': {
+ 'click': self.close.bind(self)
+ }
+ }).grab(
new Element('a.close.icon-left-arrow')
),
self.content = new Element('div.content').grab(
@@ -36,6 +40,12 @@ var MovieDetails = new Class({
'class': 'section section_' + name
}).grab(section_el)
);
+ },
+
+ close: function(){
+ var self = this;
+
+ self.el.dispose();
}
-});
\ No newline at end of file
+});
diff --git a/couchpotato/core/media/movie/_base/static/movie.actions.js b/couchpotato/core/media/movie/_base/static/movie.actions.js
index b21d0e02..e84d7598 100644
--- a/couchpotato/core/media/movie/_base/static/movie.actions.js
+++ b/couchpotato/core/media/movie/_base/static/movie.actions.js
@@ -138,8 +138,6 @@ MA.Release = new Class({
getDetails: function(refresh){
var self = this;
- p('test');
-
if(!self.options_container || refresh){
self.options_container = new Element('div.options').grab(
self.release_container = new Element('div.releases.table')
@@ -181,7 +179,7 @@ MA.Release = new Class({
'id': 'release_'+release._id
}).adopt(
new Element('span.name', {'text': release_name, 'title': release_name}),
- new Element('span.status', {'text': release.status, 'class': 'release_status '+release.status}),
+ new Element('span.status', {'text': release.status, 'class': 'status '+release.status}),
new Element('span.quality', {'text': quality.label + (release.is_3d ? ' 3D' : '') || 'n/a'}),
new Element('span.size', {'text': info.size ? Math.floor(self.get(release, 'size')) : 'n/a'}),
new Element('span.age', {'text': self.get(release, 'age')}),
@@ -533,7 +531,8 @@ MA.Edit = new Class({
create: function(){
var self = this;
- self.el = new Element('a.edit', {
+ self.button = new Element('a.edit', {
+ 'text': 'Edit',
'title': 'Change movie information, like title and quality.',
'events': {
'click': self.editMovie.bind(self)
@@ -656,7 +655,8 @@ MA.Refresh = new Class({
create: function(){
var self = this;
- self.el = new Element('a.refresh', {
+ self.button = new Element('a.refresh', {
+ 'text': 'Refresh',
'title': 'Refresh the movie info and do a forced search',
'events': {
'click': self.doRefresh.bind(self)
@@ -667,7 +667,7 @@ MA.Refresh = new Class({
doRefresh: function(e){
var self = this;
- (e).preventDefault();
+ (e).stop();
Api.request('media.refresh', {
'data': {
diff --git a/couchpotato/core/media/movie/_base/static/movie.js b/couchpotato/core/media/movie/_base/static/movie.js
index 23c7513d..40c439a4 100644
--- a/couchpotato/core/media/movie/_base/static/movie.js
+++ b/couchpotato/core/media/movie/_base/static/movie.js
@@ -38,16 +38,15 @@ var Movie = new Class({
'level': 3
});
- App.getPageContainer().grab(self.details);
-
// Add action items
self.actions.each(function(action, nr){
var details = action.getDetails();
- p(action, action.getLabel(), details);
if(details)
self.details.addSection(action.getLabel(), details);
});
}
+
+ App.getPageContainer().grab(self.details);
},
addEvents: function(){
@@ -60,7 +59,6 @@ var Movie = new Class({
if(self.data._id != notification.data._id) return;
self.busy(false);
- self.removeView();
self.update.delay(2000, self, notification);
};
App.on('movie.update', self.global_events['movie.update']);
@@ -132,7 +130,7 @@ var Movie = new Class({
if(self.mask)
self.mask.destroy();
if(self.spinner)
- self.spinner.el.destroy();
+ self.spinner.destroy();
self.spinner = null;
self.mask = null;
}, timeout || 400);
@@ -160,7 +158,6 @@ var Movie = new Class({
self.data = notification.data;
self.el.empty();
- self.removeView();
self.profile = Quality.getProfile(self.data.profile_id) || {};
self.category = CategoryList.getCategory(self.data.category_id) || {};
@@ -225,7 +222,13 @@ var Movie = new Class({
}
})
),
- self.actions_el = new Element('div.actions')
+ self.actions_el = new Element('div.actions', {
+ 'events': {
+ 'click': function(e){
+ (e).stopPropagation();
+ }
+ }
+ })
)
);
diff --git a/couchpotato/core/media/movie/_base/static/movie.scss b/couchpotato/core/media/movie/_base/static/movie.scss
index d0651ebd..c22580c6 100644
--- a/couchpotato/core/media/movie/_base/static/movie.scss
+++ b/couchpotato/core/media/movie/_base/static/movie.scss
@@ -72,6 +72,7 @@
@include span(6);
float: left;
margin-bottom: $padding;
+ position: relative;
&:nth-child(4n+4){
@include span(last);
@@ -82,7 +83,7 @@
}
.poster {
- border-radius: 2px;
+ border-radius: $border_radius;
overflow: hidden;
width: 100%;
float: left;
@@ -92,6 +93,7 @@
clear: both;
.info {
+ height: 44px;
.title {
@include flexbox();
@@ -126,6 +128,32 @@
}
}
}
+
+ .actions {
+ position: absolute;
+ top: $padding / 2;
+ right: $padding / 2;
+ display: none;
+
+ a {
+ display: block;
+ background: $background_color;
+ padding: $padding / 3;
+ width: auto;
+ margin-bottom: 1px;
+ clear: both;
+ float: right;
+ }
+ }
+
+ &:hover .actions {
+ display: block;
+ }
+
+ .mask {
+ bottom: 44px;
+ border-radius: $border_radius;
+ }
}
}
@@ -190,6 +218,28 @@
border-bottom: 1px solid rgba(0,0,0,.1);
}
}
+
+ .releases {
+
+ .item span {
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ text-align: center;
+ }
+
+ .item .name {
+ @include flex(1 auto);
+ text-align: left;
+ }
+ .status { min-width: 70px; max-width: 70px; }
+ .quality { min-width: 60px; max-width: 60px; }
+ .size { min-width: 40px; max-width: 40px; }
+ .age { min-width: 40px; max-width: 40px; }
+ .score { min-width: 45px; max-width: 45px; }
+ .provider { min-width: 100px; max-width: 100px; }
+
+ }
}
diff --git a/couchpotato/core/notifications/core/static/notification.js b/couchpotato/core/notifications/core/static/notification.js
index 2a67e78e..73eadb72 100644
--- a/couchpotato/core/notifications/core/static/notification.js
+++ b/couchpotato/core/notifications/core/static/notification.js
@@ -174,7 +174,7 @@ var NotificationBase = new Class({
var new_message = new Element('div', {
'class': 'message' + (sticky ? ' sticky' : ''),
- 'html': message
+ 'html': '' + message + '
'
}).inject(self.message_container, 'top');
setTimeout(function(){
diff --git a/couchpotato/static/scripts/vendor/mootools_tween_css3.js b/couchpotato/static/scripts/vendor/mootools_tween_css3.js
deleted file mode 100644
index 8f6460b4..00000000
--- a/couchpotato/static/scripts/vendor/mootools_tween_css3.js
+++ /dev/null
@@ -1,141 +0,0 @@
-/*
----
-name: Fx.Tween.CSS3.Replacement
-script: Fx.Tween.CSS3.Replacement.js
-license: MIT-style license.
-description: Same behavior like Fx.Tween but tries to use native CSS3 transition if possible (Overwrites Fx.Tween).
-copyright: Copyright (c) 2010, Dipl.-Ing. (FH) André Fiedler , based on code by eskimoblood (mootools users group)
-authors: [André Fiedler, eskimoblood]
-
-requires: [Core/Class.Extras, Core/Element.Event, Core/Element.Style, Core/Fx.Tween]
-
-provides: [Fx.Tween]
-...
-*/
-
-Element.NativeEvents.transitionend = 2;
-Element.NativeEvents.webkitTransitionEnd = 2;
-Element.NativeEvents.oTransitionEnd = 2;
-Element.NativeEvents.msTransitionEnd = 2;
-
-Element.Events.transitionend = {
- base: Browser.safari || Browser.chrome ? 'webkitTransitionEnd' : (Browser.opera ? 'oTransitionEnd' : (Browser.ie && Browser.version > 8 ? 'msTransitionEnd' : 'transitionend'))
-};
-
-Event.implement({
-
- getPropertyName: function(){
- return this.event.propertyName;
- },
-
- getElapsedTime: function(nativeTime){
- return nativeTime ? this.event.elapsedTime : (this.event.elapsedTime * 1000).toInt();
- }
-
-});
-
-Element.implement({
-
- supportStyle: function(style){
- var value = this.style[style];
- return !!(value || value === '');
- },
-
- supportVendorStyle: function(style){
- var prefixedStyle = null;
- return this.supportStyle(style) ? style : ['webkit', 'Moz', 'o', 'ms'].some(function(prefix){
- prefixedStyle = prefix + style.capitalize();
- return this.supportStyle(prefixedStyle);
- }, this) ? prefixedStyle : null;
- }
-
-});
-
-Fx.TweenCSS2 = Fx.Tween;
-
-Fx.Tween = new Class({
-
- Extends: Fx.TweenCSS2,
-
- transitionTimings: {
- 'linear' : '0,0,1,1',
- 'expo:in' : '0.71,0.01,0.83,0',
- 'expo:out' : '0.14,1,0.32,0.99',
- 'expo:in:out' : '0.85,0,0.15,1',
- 'circ:in' : '0.34,0,0.96,0.23',
- 'circ:out' : '0,0.5,0.37,0.98',
- 'circ:in:out' : '0.88,0.1,0.12,0.9',
- 'sine:in' : '0.22,0.04,0.36,0',
- 'sine:out' : '0.04,0,0.5,1',
- 'sine:in:out' : '0.37,0.01,0.63,1',
- 'quad:in' : '0.14,0.01,0.49,0',
- 'quad:out' : '0.01,0,0.43,1',
- 'quad:in:out' : '0.47,0.04,0.53,0.96',
- 'cubic:in' : '0.35,0,0.65,0',
- 'cubic:out' : '0.09,0.25,0.24,1',
- 'cubic:in:out' : '0.66,0,0.34,1',
- 'quart:in' : '0.69,0,0.76,0.17',
- 'quart:out' : '0.26,0.96,0.44,1',
- 'quart:in:out' : '0.76,0,0.24,1',
- 'quint:in' : '0.64,0,0.78,0',
- 'quint:out' : '0.22,1,0.35,1',
- 'quint:in:out' : '0.9,0,0.1,1'
- },
-
- initialize: function(element, options){
- options.transition = options.transition || 'sine:in:out';
- this.parent(element, options);
- if (typeof this.options.transition != 'string') alert('Only short notated transitions (like \'sine:in\') are supported by Fx.Tween.CSS3');
- this.options.transition = this.options.transition.toLowerCase();
- this.transition = this.element.supportVendorStyle('transition');
- this.css3Supported = !!this.transition && !!this.transitionTimings[this.options.transition];
- },
-
- check: function(){
- if (!this.boundComplete) return true;
- return this.parent();
- },
-
- start: function(property, from, to){
- if (this.css3Supported){
- if (!this.check(property, from, to)) return this;
- var args = Array.flatten(arguments);
- this.property = this.options.property || args.shift();
- var parsed = this.prepare(this.element, this.property, args);
- this.from = parsed.from;
- this.to = parsed.to;
- this.boundComplete = function(event){
- if (event.getPropertyName() == this.property /* && event.getElapsedTime() == this.options.duration */ ){
- this.element.removeEvent('transitionend', this.boundComplete);
- this.boundComplete = null;
- this.fireEvent('complete', this);
- }
- }.bind(this);
- this.element.addEvent('transitionend', this.boundComplete);
- var trans = function(){
- this.element.setStyle(this.transition, this.property + ' ' + this.options.duration + 'ms cubic-bezier(' + this.transitionTimings[this.options.transition] + ')');
- this.element.setStyle(this.property, this.to[0].value + this.options.unit);
- }.bind(this);
- if (args[1]){
- this.element.setStyle(this.transition, 'none');
- this.element.setStyle(this.property, this.from[0].value + this.options.unit);
- trans.delay(0.1);
- } else
- trans();
- this.fireEvent('start', this);
- return this;
- }
- return this.parent(property, from, to);
- },
-
- cancel: function(){
- if (this.css3Supported){
- this.element.setStyle(this.transition, 'none');
- this.element.removeEvent('transitionend', this.boundComplete);
- this.boundComplete = null;
- }
- this.parent();
- return this;
- }
-
-});
diff --git a/couchpotato/static/scripts/vendor/spin.js b/couchpotato/static/scripts/vendor/spin.js
deleted file mode 100644
index 6c2d0d59..00000000
--- a/couchpotato/static/scripts/vendor/spin.js
+++ /dev/null
@@ -1,301 +0,0 @@
-//fgnass.github.com/spin.js#v1.2.4
-(function(window, document, undefined) {
-
-/**
- * Copyright (c) 2011 Felix Gnass [fgnass at neteye dot de]
- * Licensed under the MIT license
- */
-
- var prefixes = ['webkit', 'Moz', 'ms', 'O']; /* Vendor prefixes */
- var animations = {}; /* Animation rules keyed by their name */
- var useCssAnimations;
-
- /**
- * Utility function to create elements. If no tag name is given,
- * a DIV is created. Optionally properties can be passed.
- */
- function createEl(tag, prop) {
- var el = document.createElement(tag || 'div');
- var n;
-
- for(n in prop) {
- el[n] = prop[n];
- }
- return el;
- }
-
- /**
- * Appends children and returns the parent.
- */
- function ins(parent /* child1, child2, ...*/) {
- for (var i=1, n=arguments.length; i> 1) : o.left+mid) + 'px',
- top: (o.top == 'auto' ? tp.y-ep.y + (target.offsetHeight >> 1) : o.top+mid) + 'px'
- });
- }
-
- el.setAttribute('aria-role', 'progressbar');
- self.lines(el, self.opts);
-
- if (!useCssAnimations) {
- // No CSS animation support, use setTimeout() instead
- var i = 0;
- var fps = o.fps;
- var f = fps/o.speed;
- var ostep = (1-o.opacity)/(f*o.trail / 100);
- var astep = f/o.lines;
-
- !function anim() {
- i++;
- for (var s=o.lines; s; s--) {
- var alpha = Math.max(1-(i+s*astep)%f * ostep, o.opacity);
- self.opacity(el, o.lines-s, alpha, o);
- }
- self.timeout = self.el && setTimeout(anim, ~~(1000/fps));
- }();
- }
- return self;
- },
- stop: function() {
- var el = this.el;
- if (el) {
- clearTimeout(this.timeout);
- if (el.parentNode) el.parentNode.removeChild(el);
- this.el = undefined;
- }
- return this;
- },
- lines: function(el, o) {
- var i = 0;
- var seg;
-
- function fill(color, shadow) {
- return css(createEl(), {
- position: 'absolute',
- width: (o.length+o.width) + 'px',
- height: o.width + 'px',
- background: color,
- boxShadow: shadow,
- transformOrigin: 'left',
- transform: 'rotate(' + ~~(360/o.lines*i) + 'deg) translate(' + o.radius+'px' +',0)',
- borderRadius: (o.width>>1) + 'px'
- });
- }
- for (; i < o.lines; i++) {
- seg = css(createEl(), {
- position: 'absolute',
- top: 1+~(o.width/2) + 'px',
- transform: o.hwaccel ? 'translate3d(0,0,0)' : '',
- opacity: o.opacity,
- animation: useCssAnimations && addAnimation(o.opacity, o.trail, i, o.lines) + ' ' + 1/o.speed + 's linear infinite'
- });
- if (o.shadow) ins(seg, css(fill('#000', '0 0 4px ' + '#000'), {top: 2+'px'}));
- ins(el, ins(seg, fill(o.color, '0 0 1px rgba(0,0,0,.1)')));
- }
- return el;
- },
- opacity: function(el, i, val) {
- if (i < el.childNodes.length) el.childNodes[i].style.opacity = val;
- }
- };
-
- /////////////////////////////////////////////////////////////////////////
- // VML rendering for IE
- /////////////////////////////////////////////////////////////////////////
-
- /**
- * Check and init VML support
- */
- !function() {
- var s = css(createEl('group'), {behavior: 'url(#default#VML)'});
- var i;
-
- if (!vendor(s, 'transform') && s.adj) {
-
- // VML support detected. Insert CSS rules ...
- for (i=4; i--;) sheet.addRule(['group', 'roundrect', 'fill', 'stroke'][i], 'behavior:url(#default#VML)');
-
- Spinner.prototype.lines = function(el, o) {
- var r = o.length+o.width;
- var s = 2*r;
-
- function grp() {
- return css(createEl('group', {coordsize: s +' '+s, coordorigin: -r +' '+-r}), {width: s, height: s});
- }
-
- var margin = -(o.width+o.length)*2+'px';
- var g = css(grp(), {position: 'absolute', top: margin, left: margin});
-
- var i;
-
- function seg(i, dx, filter) {
- ins(g,
- ins(css(grp(), {rotation: 360 / o.lines * i + 'deg', left: ~~dx}),
- ins(css(createEl('roundrect', {arcsize: 1}), {
- width: r,
- height: o.width,
- left: o.radius,
- top: -o.width>>1,
- filter: filter
- }),
- createEl('fill', {color: o.color, opacity: o.opacity}),
- createEl('stroke', {opacity: 0}) // transparent stroke to fix color bleeding upon opacity change
- )
- )
- );
- }
-
- if (o.shadow) {
- for (i = 1; i <= o.lines; i++) {
- seg(i, -2, 'progid:DXImageTransform.Microsoft.Blur(pixelradius=2,makeshadow=1,shadowopacity=.3)');
- }
- }
- for (i = 1; i <= o.lines; i++) seg(i);
- return ins(el, g);
- };
- Spinner.prototype.opacity = function(el, i, val, o) {
- var c = el.firstChild;
- o = o.shadow && o.lines || 0;
- if (c && i+o < c.childNodes.length) {
- c = c.childNodes[i+o]; c = c && c.firstChild; c = c && c.firstChild;
- if (c) c.opacity = val;
- }
- };
- }
- else {
- useCssAnimations = vendor(s, 'animation');
- }
- }();
-
- window.Spinner = Spinner;
-
-})(window, document);
diff --git a/couchpotato/static/style/main.scss b/couchpotato/static/style/main.scss
index add298f8..b0146728 100644
--- a/couchpotato/static/style/main.scss
+++ b/couchpotato/static/style/main.scss
@@ -356,11 +356,76 @@ input, textarea, select {
}
}
+/* Messages */
+.messages {
+ position: fixed;
+ right: 0;
+ bottom: 0;
+ width: 320px;
+ z-index: 20;
+ overflow: hidden;
+ font-size: 14px;
+ font-weight: bold;
+ padding: 5px;
+
+ .message {
+ overflow: hidden;
+ transition: all .6s cubic-bezier(0.9,0,0.1,1);
+ width: 100%;
+ position: relative;
+ max-height: 0;
+ font-size: 1.1em;
+ font-weight: normal;
+ transform: scale(0);
+ background: $primary_color;
+ margin-bottom: 4px;
+ border-radius: $border_radius;
+ box-shadow: 0 0 15px 2px rgba(0,0,0,.15);
+
+ .inner {
+ padding: 15px 30px 15px 20px;
+ background: $background_color;
+ margin-bottom: 4px;
+ border-radius: $border_radius;
+ }
+
+ &.sticky {
+ background-color: $primary_color;
+ }
+
+ &.show {
+ max-height: 100px;
+ transform: scale(1);
+ }
+
+ &.hide {
+ max-height: 0;
+ padding: 0 20px;
+ margin: 0;
+ transform: scale(0);
+ }
+ }
+
+ .close {
+ position: absolute;
+ padding: 10px 8px;
+ top: 0;
+ right: 0;
+ color: #FFF;
+ }
+}
+
+/* Mask */
.mask{
- background: rgba(0,0,0, 0.9);
+ background: rgba(0,0,0, .8);
z-index: 100;
text-align: center;
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
$spinner_size: 22px;
@@ -375,24 +440,51 @@ input, textarea, select {
margin-top: -($spinner_size/2);
margin-left: -($spinner_size/2);
outline: 1px solid transparent;
- border: 1px solid #FFF;
- @include animation(rotating 4.4s $cubic infinite normal);
+ @include animation(rotating 2.5s $cubic infinite normal);
}
}
@keyframes rotating {
0% {
- @include transform(rotate(0deg) scale(1.4));
- border-radius: 2px;
+ @include transform(rotate(0deg) scale(1.6));
+ border-radius: 1px;
}
- 45% {
+ 48% {
@include transform(rotate(360deg) scale(1));
border-radius: 50%;
}
- 55% {}
+ 52% {}
100% {
- @include transform(rotate(720deg) scale(1.4));
- border-radius: 2px;
+ @include transform(rotate(720deg) scale(1.6));
+ border-radius: 1px;
+ }
+}
+
+.table {
+
+ .head {
+ font-weight: bold;
+ }
+
+ .item {
+ @include flexbox();
+ border-bottom: 1px solid rgba(0,0,0,.2);
+
+ &:last-child {
+ border-bottom: none;
+ }
+
+ span {
+ padding: 1px 2px;
+
+ &:first-child {
+ padding-left: 0;
+ }
+
+ &:last-child {
+ padding-right: 0;
+ }
+ }
}
}