Search and login
This commit is contained in:
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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')
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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 {
|
||||
|
||||
@@ -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";
|
||||
|
||||
@@ -262,7 +262,6 @@
|
||||
padding: 5px 3px;
|
||||
margin: 0;
|
||||
width: 30%;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.page .input.xsmall { width: 5% }
|
||||
.page .input.small { width: 10% }
|
||||
|
||||
@@ -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(){
|
||||
|
||||
Reference in New Issue
Block a user