Search and login

This commit is contained in:
Ruud
2014-12-20 10:49:01 +01:00
parent abc9e78027
commit ac382d5131
9 changed files with 206 additions and 70 deletions
@@ -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 = {};
@@ -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;
@@ -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;
}
}
}
}
+1 -1
View File
@@ -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')
+59
View File
@@ -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;
}
}
+46 -15
View File
@@ -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 {
+5 -1
View File
@@ -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";
-1
View File
@@ -262,7 +262,6 @@
padding: 5px 3px;
margin: 0;
width: 30%;
border-radius: 3px;
}
.page .input.xsmall { width: 5% }
.page .input.small { width: 10% }
+10 -4
View File
@@ -7,15 +7,21 @@
<meta name="mobile-web-app-capable" content="yes">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
{% for url in fireEvent('clientscript.get_styles', as_html = True, location = 'front', single = True) %}
<link rel="stylesheet" href="{{ Env.get('web_base') }}{{ url }}" type="text/css">{% 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) %}
<link data-url="{{ url }}" rel="stylesheet" href="{{ Env.get('web_base') }}{{ url }}" type="text/css">{% end %}
{% for url in fireEvent('clientscript.get_scripts', location = 'front', single = True) %}
<script type="text/javascript" src="{{ Env.get('web_base') }}{{ url }}"></script>{% end %}
{% for url in fireEvent('clientscript.get_styles', location = 'head', single = True) %}
<link data-url="{{ url }}" rel="stylesheet" href="{{ Env.get('web_base') }}{{ url }}" type="text/css">{% end %}
<link href="{{ Env.get('static_path') }}images/favicon.ico" rel="icon" type="image/x-icon" />
<link rel="apple-touch-icon" href="{{ Env.get('static_path') }}images/homescreen.png" />
{% if Env.get('dev') %}
<script src="//localhost:35729/livereload.js?snipver=1"></script>
{% end %}
<script type="text/javascript">
window.addEvent('domready', function(){