From ac382d5131720b111affc139dff0503bf3a3a281 Mon Sep 17 00:00:00 2001 From: Ruud Date: Sat, 20 Dec 2014 10:49:01 +0100 Subject: [PATCH] Search and login --- .../core/media/_base/search/static/search.js | 62 ++++++++++--------- .../media/_base/search/static/search.scss | 38 ++++++++---- .../core/media/movie/_base/static/movie.scss | 33 ++++++++-- couchpotato/runner.py | 2 +- couchpotato/static/style/login.scss | 59 ++++++++++++++++++ couchpotato/static/style/main.scss | 61 +++++++++++++----- couchpotato/static/style/mixins.scss | 6 +- couchpotato/static/style/settings.scss | 1 - couchpotato/templates/login.html | 14 +++-- 9 files changed, 206 insertions(+), 70 deletions(-) create mode 100644 couchpotato/static/style/login.scss 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 %} +