dinislage/CouchPotatoServer
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Menu

Browse Source
This commit is contained in:
Ruud committed 2014-12-18 13:31:12 +01:00
1 parent 80cf144e8b
commit f4a486c47b
13 files changed
+290 -148
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

couchpotato/core/media/_base/search/static/search.js
+6 -6
View File
@@ -9,6 +9,12 @@ var BlockSearch = new Class({
var focus_timer = 0;
self.el = new Element('div.search_form').adopt(
new Element('a.icon-search', {
'events': {
'click': self.clear.bind(self),
'touchend': self.clear.bind(self)
}
}),
new Element('div.input').adopt(
self.input = new Element('input', {
'placeholder': 'Search & add a new media',
@@ -29,12 +35,6 @@ var BlockSearch = new Class({
}).delay(100);
}
}
}),
new Element('a.icon2', {
'events': {
'click': self.clear.bind(self),
'touchend': self.clear.bind(self)
}
})
),
self.result_container = new Element('div.results_container', {
couchpotato/core/media/_base/search/static/search.scss
+60 -83
View File
@@ -1,101 +1,78 @@
@import "couchpotato/static/style/mixins";
.search_form {
display: inline-block;
vertical-align: middle;
text-align: right;
transition: all .4s cubic-bezier(0.9,0,0.1,1);
z-index: 20;
border: 0 solid transparent;
border-bottom-width: 4px;
}
.search_form:hover {
border-color: #047792;
}
z-index: 200;
width: 44px;
@media all and (max-width: 480px) {
.search_form {
right: 44px;
}
}
.search_form.focused,
.search_form.shown {
border-color: #04bce6;
}
.search_form .input {
height: 100%;
overflow: hidden;
width: 45px;
transition: all .4s cubic-bezier(0.9,0,0.1,1);
}
.search_form.focused .input,
.search_form.shown .input {
width: 380px;
background: #4e5969;
}
.search_form .input input {
border-radius: 0;
display: block;
border: 0;
background: none;
color: #FFF;
font-size: 25px;
height: 100%;
width: 100%;
opacity: 0;
padding: 0 40px 0 10px;
transition: all .4s ease-in-out .2s;
}
.search_form.focused .input input,
.search_form.shown .input input {
opacity: 1;
}
.search_form input::-ms-clear {
width : 0;
height: 0;
}
@media all and (max-width: 480px) {
.search_form .input input {
font-size: 15px;
}
.search_form.focused .input,
.search_form.shown .input {
width: 277px;
}
}
.search_form .input a {
a {
position: absolute;
top: 0;
right: 0;
width: 44px;
z-index: 2;
top: 50%;
left: 0;
height: 100%;
cursor: pointer;
vertical-align: middle;
text-align: center;
line-height: 66px;
font-size: 15px;
color: #FFF;
font-size: 20px;
@include translateY(-50%);
}
.search_form .input a:after {
content: "\e03e";
.input {
position: relative;
height: 100%;
&:before {
@include transform(rotate(45deg) translateY(-60%));
content: '';
display: block;
position: absolute;
height: 20px;
width: 20px;
background: $background_color;
left: 33px;
top: 50%;
z-index: 1;
opacity: 0;
}
.search_form.shown.filled .input a:after {
content: "\e04e";
}
input {
opacity: 0;
position: absolute;
top: 0;
left: 44px;
height: 100%;
width: 100%;
z-index: 1;
box-shadow: 0 0 4px rgba(0,0,0,.1);
@media all and (max-width: 480px) {
.search_form .input a {
line-height: 44px;
&::-ms-clear {
width : 0;
height: 0;
}
}
}
&.focused,
&.shown {
border-color: #04bce6;
.input {
width: 380px;
&:before {
opacity: 1;
}
input {
opacity: 1;
}
}
}
}
.search_form .results_container {
text-align: left;
couchpotato/core/media/movie/_base/static/movie.scss
+15 -42
View File
@@ -6,7 +6,7 @@
}
.page.movies_wanted, .page.movies_manage {
top: $header-height;
top: $header_height;
padding: 0;
}
@@ -20,7 +20,7 @@
.movie {
display: block;
border-top: 1px solid #f2f2f2;
border-top: 1px solid $theme_off;
position: relative;
cursor: pointer;
@@ -146,14 +146,14 @@
.page.movie_details {
$gab-width: $header-width/3;
$gab-width: $header_width/3;
.overlay {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: $header-width;
left: $header_width;
background: rgba(0,0,0,.6);
border-radius: 3px 0 0 3px;
@@ -161,7 +161,7 @@
display: inline-block;
text-align: center;
font-size: 60px;
line-height: $header-height;
line-height: $header_height;
color: #FFF;
width: $gab-width;
cursor: pointer;
@@ -174,7 +174,7 @@
top: 0;
bottom: 0;
right: 0;
left: $header-width + $gab-width;
left: $header_width + $gab-width;
background: $background_color;
z-index: 200;
border-radius: 3px 0 0 3px;
@@ -183,7 +183,7 @@
margin: 0;
padding: 0 $padding;
font-size: 24px;
line-height: $header-height;
line-height: $header_height;
color: rgba(0,0,0,.5);
font-weight: 300;
}
@@ -207,10 +207,8 @@
.button {
padding: 0 $padding/2;
line-height: $header-height;
font-size: 24px;
line-height: $header_height;
color: rgba(0, 0, 0, 0.5);
cursor: pointer;
}
.counter, .more_menu, .actions {
@@ -218,7 +216,7 @@
}
.counter {
line-height: $header-height;
line-height: $header_height;
}
.actions {
@@ -253,7 +251,7 @@
padding: $padding/2 $padding/2 $padding/2 $padding*1.5;
background: $background_color;
border: none;
border-bottom: 1px solid #f2f2f2;
border-bottom: 1px solid $theme_off;
}
}
@@ -270,7 +268,7 @@
cursor: default;
&.active {
background: #f2f2f2;
background: $theme_off;
}
&.available {
@@ -278,41 +276,16 @@
cursor: pointer;
&:hover {
background: #f2f2f2;
background: $theme_off;
}
}
}
}
}
.more_menu {
position: relative;
line-height: 1em;
.wrapper {
display: none;
position: absolute;
width: 320px;
right: 0;
top: $header-height;
background: $background_color;
ul {
overflow: hidden;
}
li {
display: block;
}
}
&.show {
background: #f2f2f2;
.wrapper {
display: block;
}
}
.more_menu .wrapper {
width: 320px;
top: $header_height;
}
}