diff --git a/couchpotato/core/media/_base/search/static/search.js b/couchpotato/core/media/_base/search/static/search.js
index 760155f4..10c4316a 100644
--- a/couchpotato/core/media/_base/search/static/search.js
+++ b/couchpotato/core/media/_base/search/static/search.js
@@ -15,39 +15,40 @@ var BlockSearch = new Class({
'touchend': self.clear.bind(self)
}
}),
- new Element('div.input').adopt(
- self.input = new Element('input', {
- 'placeholder': 'Search & add a new media',
+ new Element('div.wrapper').adopt(
+ new Element('div.input').grab(
+ self.input = new Element('input', {
+ 'placeholder': 'Search & add a new media',
+ 'events': {
+ 'input': self.keyup.bind(self),
+ 'paste': self.keyup.bind(self),
+ 'change': self.keyup.bind(self),
+ 'keyup': self.keyup.bind(self),
+ 'focus': function(){
+ if(focus_timer) clearTimeout(focus_timer);
+ if(this.get('value'))
+ self.hideResults(false);
+ },
+ 'blur': function(){
+ focus_timer = (function(){
+ self.el.removeClass('focused');
+ }).delay(100);
+ }
+ }
+ })
+ ),
+ self.result_container = new Element('div.results_container', {
+ 'tween': {
+ 'duration': 200
+ },
'events': {
- 'input': self.keyup.bind(self),
- 'paste': self.keyup.bind(self),
- 'change': self.keyup.bind(self),
- 'keyup': self.keyup.bind(self),
- 'focus': function(){
- if(focus_timer) clearTimeout(focus_timer);
- self.el.addClass('focused');
- if(this.get('value'))
- self.hideResults(false);
- },
- 'blur': function(){
- focus_timer = (function(){
- self.el.removeClass('focused');
- }).delay(100);
+ 'mousewheel': function(e){
+ (e).stopPropagation();
}
}
- })
- ),
- self.result_container = new Element('div.results_container', {
- 'tween': {
- 'duration': 200
- },
- 'events': {
- 'mousewheel': function(e){
- (e).stopPropagation();
- }
- }
- }).adopt(
- self.results = new Element('div.results')
+ }).grab(
+ self.results = new Element('div.results')
+ )
)
);
@@ -67,6 +68,7 @@ var BlockSearch = new Class({
self.last_q = '';
self.input.set('value', '');
+ self.el.addClass('focused');
self.input.focus();
self.media = {};
diff --git a/couchpotato/core/media/_base/search/static/search.scss b/couchpotato/core/media/_base/search/static/search.scss
index 5084f380..013c6ace 100644
--- a/couchpotato/core/media/_base/search/static/search.scss
+++ b/couchpotato/core/media/_base/search/static/search.scss
@@ -20,33 +20,45 @@
}
- .input {
+ .wrapper {
position: relative;
+ left: 44px;
height: 100%;
+ background: $primary_color;
+ border-radius: $border_radius 0 0 $border_radius;
+ display: none;
+ box-shadow: 0 0 15px 2px rgba(0,0,0,.15);
&:before {
@include transform(rotate(45deg) translateY(-60%));
content: '';
display: block;
position: absolute;
- height: 20px;
- width: 20px;
- background: $background_color;
- left: 33px;
+ height: 10px;
+ width: 10px;
+ background: $primary_color;
+ left: -8px;
top: 50%;
z-index: 1;
- opacity: 0;
}
+ }
+
+ .input {
+ background: $background_color;
+ border-radius: $border_radius 0 0 $border_radius;
+ position: relative;
+ left: 4px;
+ height: 100%;
+ overflow: hidden;
+ width: 100%;
input {
- opacity: 0;
position: absolute;
top: 0;
- left: 44px;
+ left: 0;
height: 100%;
width: 100%;
z-index: 1;
- box-shadow: 0 0 4px rgba(0,0,0,.1);
&::-ms-clear {
width : 0;
@@ -59,12 +71,12 @@
&.shown {
border-color: #04bce6;
- .input {
+ .wrapper {
+ display: block;
width: 380px;
+ }
- &:before {
- opacity: 1;
- }
+ .input {
input {
opacity: 1;
diff --git a/couchpotato/core/media/movie/_base/static/movie.scss b/couchpotato/core/media/movie/_base/static/movie.scss
index 910dfbf7..653155c3 100644
--- a/couchpotato/core/media/movie/_base/static/movie.scss
+++ b/couchpotato/core/media/movie/_base/static/movie.scss
@@ -11,7 +11,6 @@
}
.list_list {
- font-size: 15px;
font-weight: 300;
.poster {
@@ -232,7 +231,13 @@
}
.filter {
- margin-top: -2px;
+ .wrapper {
+ width: 320px;
+ }
+
+ .button {
+ margin-top: -2px;
+ }
.search {
position: relative;
@@ -283,9 +288,27 @@
}
}
- .more_menu .wrapper {
- width: 320px;
- top: $header_height;
+ .more_menu {
+
+ &.show .button {
+ color: rgba(0, 0, 0, 1);
+ }
+
+ .wrapper {
+ top: $header_height - 10px;
+ padding-top: 4px;
+ border-radius: $border_radius $border_radius 0 0;
+
+ &:before {
+ top: 0;
+ left: auto;
+ right: 22px;
+ }
+
+ ul {
+ border-radius: $border_radius $border_radius 0 0;
+ }
+ }
}
}
diff --git a/couchpotato/runner.py b/couchpotato/runner.py
index d79352e8..fcb87acf 100644
--- a/couchpotato/runner.py
+++ b/couchpotato/runner.py
@@ -333,7 +333,7 @@ def runCouchPotato(options, base_path, args, data_dir = None, log_dir = None, En
while try_restart:
try:
server.listen(config['port'], config['host'])
-
+
try: server.listen(config['port'], config['host6'])
except: log.info2('Tried to bind to IPV6 but failed')
diff --git a/couchpotato/static/style/login.scss b/couchpotato/static/style/login.scss
new file mode 100644
index 00000000..60c518bf
--- /dev/null
+++ b/couchpotato/static/style/login.scss
@@ -0,0 +1,59 @@
+@import "mixins";
+
+/*** Login ***/
+.page.login {
+ display: block;
+ background: $primary_color;
+
+ h1 {
+ padding: 0 0 10px;
+ font-size: 60px;
+ font-family: Lobster;
+ font-weight: normal;
+ color: #FFF;
+ text-align: center;
+ }
+
+ form {
+ padding: 0;
+ height: 300px;
+ width: 400px;
+ position: fixed;
+ left: 50%;
+ top: 50%;
+ margin: -200px 0 0 -200px;
+ }
+
+ .ctrlHolder {
+ padding: 0;
+ margin: 0 0 20px;
+
+ &:hover {
+ background: none;
+ }
+ }
+
+ input[type=text],
+ input[type=password] {
+ width: 100% !important;
+ font-size: 25px;
+ padding: 14px !important;
+ }
+
+ .remember_me {
+ font-size: 15px;
+ float: left;
+ width: 150px;
+ padding: 20px 0;
+
+ .check {
+ margin: 5px 5px 0 0;
+ }
+ }
+
+ .button {
+ font-size: 25px;
+ padding: 20px;
+ float: right;
+ }
+}
diff --git a/couchpotato/static/style/main.scss b/couchpotato/static/style/main.scss
index 0d7d2025..12d295bf 100644
--- a/couchpotato/static/style/main.scss
+++ b/couchpotato/static/style/main.scss
@@ -44,9 +44,10 @@ input, textarea, select {
.navigation {
.logo {
- background: $couch_color;
+ background: $primary_color;
display: block;
text-align: center;
+ position: relative;
font-family: Lobster, serif;
color: #FFF;
@@ -54,12 +55,30 @@ input, textarea, select {
line-height: $header_height;
height: $header_height;
- span:nth-child(odd){
+ span {
+ position: absolute;
display: block;
- }
- span:nth-child(even){
- display: none;
+ height: 100%;
+ left: 50%;
+ @include transition(all 200ms $cubic);
+ @include translateX(-50%);
+ &:nth-child(even){
+ @include translateX(45%);
+ opacity: 0;
+ }
+ }
+
+ &:hover {
+ span{
+ @include translateX(-153%);
+ opacity: 0;
+
+ &:nth-child(even){
+ @include translateX(-50%);
+ opacity: 1;
+ }
+ }
}
}
@@ -101,6 +120,10 @@ input, textarea, select {
top: -2px;
}
+ .wrapper {
+ width: 320px;
+ }
+
ul {
min-height: 60px;
max-height: 300px;
@@ -148,6 +171,7 @@ input, textarea, select {
bottom: 0;
left: 44px;
right: auto;
+ padding-left: 4px;
}
}
@@ -158,7 +182,7 @@ input, textarea, select {
@include flex(1 auto);
background: $background_color;
- border-radius: 3px 0 0 3px;
+ border-radius: $border_radius 0 0 $border_radius;
overflow: hidden;
h1, h2, h3 {
@@ -204,7 +228,7 @@ input, textarea, select {
left: $header_width;
right: 0;
background: $background_color;
- border-radius: 3px 0 0 3px;
+ border-radius: $border_radius 0 0 0;
z-index: 100;
ul {
@@ -257,30 +281,36 @@ input, textarea, select {
.wrapper {
display: none;
position: absolute;
- width: 320px;
right: 0;
- background: $background_color;
+ background: $primary_color;
z-index: 5000;
- box-shadow: 0 0 4px rgba(0,0,0,.1);
+ box-shadow: 0 0 15px 2px rgba(0,0,0,.15);
+ border-radius: $border_radius 0 0 $border_radius;
&:before {
@include transform(rotate(45deg) translateY(-60%));
content: '';
display: block;
position: absolute;
- height: 20px;
- width: 20px;
- background: $background_color;
- left: -10px;
- bottom: 2px;
+ background: $primary_color;
+ height: 10px;
+ width: 10px;
+ left: -9px;
+ bottom: 11px;
z-index: 1;
opacity: 0;
+ border-radius: 2px;
+// border: 8px solid $primary_color;
+// border-color: transparent $primary_color transparent transparent;
}
ul {
+ @include transform(translateZ(0));
+ background: $background_color;
position: relative;
z-index: 2;
overflow: hidden;
+ border-radius: $border_radius 0 0 $border_radius;
}
ul li {
@@ -293,6 +323,7 @@ input, textarea, select {
padding: $padding/4 $padding/2;
font-size: 1em;
line-height: 22px;
+ white-space: nowrap;
}
&:first-child a {
diff --git a/couchpotato/static/style/mixins.scss b/couchpotato/static/style/mixins.scss
index a139ec98..a77ef16b 100644
--- a/couchpotato/static/style/mixins.scss
+++ b/couchpotato/static/style/mixins.scss
@@ -1,4 +1,5 @@
-$couch_color: #ac0000;
+$primary_color: #ac0000;
+$secondary_color: #00d2c2;
$background_color: #FFF;
$menu_color: #111;
$theme_off: #eaeaea;
@@ -7,6 +8,9 @@ $text_color: #000;
$header_height: 80px;
$header_width: 132px;
$padding: 20px;
+$border_radius: 3px;
+
+$cubic: cubic-bezier(0.9,0,0.1,1);
@import "susy";
@import "compass/css3/transition";
diff --git a/couchpotato/static/style/settings.scss b/couchpotato/static/style/settings.scss
index e84d3814..7ea4a575 100644
--- a/couchpotato/static/style/settings.scss
+++ b/couchpotato/static/style/settings.scss
@@ -262,7 +262,6 @@
padding: 5px 3px;
margin: 0;
width: 30%;
- border-radius: 3px;
}
.page .input.xsmall { width: 5% }
.page .input.small { width: 10% }
diff --git a/couchpotato/templates/login.html b/couchpotato/templates/login.html
index e33db2d7..61c12dcc 100644
--- a/couchpotato/templates/login.html
+++ b/couchpotato/templates/login.html
@@ -7,15 +7,21 @@
- {% for url in fireEvent('clientscript.get_styles', as_html = True, location = 'front', single = True) %}
- {% end %}
-
- {% for url in fireEvent('clientscript.get_scripts', as_html = True, location = 'front', single = True) %}
+ {% for url in fireEvent('clientscript.get_styles', location = 'front', single = True) %}
+ {% end %}
+ {% for url in fireEvent('clientscript.get_scripts', location = 'front', single = True) %}
{% end %}
+ {% for url in fireEvent('clientscript.get_styles', location = 'head', single = True) %}
+ {% end %}
+
+ {% if Env.get('dev') %}
+
+ {% end %}
+