dockeruser
/
CouchPotatoServer
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Big search

pull/5287/head
Ruud 10 years ago
parent
47bca3398f
commit
3e4e1a530e
8 changed files with 301 additions and 48 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 34
      couchpotato/core/media/_base/search/static/search.js
  2. 169
      couchpotato/core/media/_base/search/static/search.scss
  3. 10
      couchpotato/core/media/movie/_base/static/movie.scss
  4. 9
      couchpotato/static/scripts/combined.base.min.js
  5. 31
      couchpotato/static/scripts/combined.plugins.min.js
  6. 11
      couchpotato/static/scripts/page/home.js
  7. 31
      couchpotato/static/style/_mixins.scss
  8. 54
      couchpotato/static/style/combined.min.css

34
couchpotato/core/media/_base/search/static/search.js
View File

@ -2,6 +2,10 @@ var BlockSearch = new Class({
Extends: BlockBase,
options: {
'animate': true
},
cache: {},
create: function(){
@ -72,20 +76,24 @@ var BlockSearch = new Class({
self.el.removeClass('filled');
// Animate in
dynamics.css(self.wrapper, {
opacity: 0,
scale: 0.1
});
if(self.options.animate){
dynamics.animate(self.wrapper, {
opacity: 1,
scale: 1
}, {
type: dynamics.spring,
frequency: 200,
friction: 270,
duration: 800
});
dynamics.css(self.wrapper, {
opacity: 0,
scale: 0.1
});
dynamics.animate(self.wrapper, {
opacity: 1,
scale: 1
}, {
type: dynamics.spring,
frequency: 200,
friction: 270,
duration: 800
});
}
}
},

169
couchpotato/core/media/_base/search/static/search.scss
View File

@ -66,11 +66,28 @@
width : 0;
height: 0;
}
&:focus {
background: rgba($theme_off, .2);
&::-webkit-input-placeholder {
color: $text_color;
opacity: .7;
}
&::-moz-placeholder {
color: $text_color;
opacity: .7;
}
&:-ms-input-placeholder {
color: $text_color;
opacity: .7;
}
}
}
}
&.filled .input input {
background: $theme_off;
background: rgba($theme_off, .4);
}
&.focused,
@ -181,6 +198,10 @@
.add {
width: 42px;
flex: 1 auto;
a {
color: #FFF;
}
}
.button {
@ -307,17 +328,63 @@
}
.page.home & {
height: 100px;
$input_height: 66px;
$input_height_mobile: 44px;
display: block;
padding: $padding;
width: 100%;
max-width: 500px;
margin: 0 auto;
height: $input_height + 2*$padding;
position: relative;
margin-top: $padding;
@include media-phablet {
margin-top: $padding/2;
height: $input_height_mobile + $padding;
}
.icon-search {
display: block;
color: #000;
right: $padding;
top: $padding;
width: $input_height;
height: $input_height;
line-height: $input_height;
left: auto;
transform: none;
font-size: 2em;
opacity: .5;
pointer-events: none;
@include media-phablet {
right: $padding/2;
width: $input_height_mobile;
height: $input_height_mobile;
line-height: $input_height_mobile;
right: $padding/2;
top: $padding/2;
font-size: 1.5em;
}
}
.wrapper {
border-radius: 0;
box-shadow: 0;
box-shadow: none;
bottom: auto;
top: 0;
top: $padding;
left: $padding;
right: $padding;
position: absolute;
width: auto;
@include media-phablet {
right: $padding/2;
top: $padding/2;
left: $padding/2;
}
&:before {
display: none;
@ -326,6 +393,96 @@
.input {
border-radius: 0;
left: 0;
position: absolute;
top: 0;
height: $input_height;
@include media-phablet {
height: $input_height_mobile;
}
input {
box-shadow: 0;
font-size: 2em;
font-weight: 400;
@include media-phablet {
font-size: 1em;
}
}
}
.results_container {
min-height: $input_height;
position: absolute;
top: $input_height;
left: 0;
right: 0;
border: 1px solid #b7b7b7;
border-top: 0;
@include media-phablet {
top: $input_height_mobile;
min-height: $input_height_mobile;
}
@include media-phablet-and-up {
.results {
max-height: 400px;
.media_result {
height: $input_height;
@include media-phablet {
height: $input_height_mobile;
}
.thumbnail {
width: 40px;
}
.options {
left: 40px;
.title {
margin-right: 5px;
width: 320px;
@include media-phablet {
width: 140px;
margin-right: 2px;
}
}
}
.data {
left: 40px;
}
}
}
}
@include media-phablet {
.results {
.media_result {
height: $input_height_mobile;
.options {
.title {
width: 140px;
margin-right: 2px;
}
}
}
}
}
}
}
@ -334,3 +491,7 @@
}
}
.big_search {
background: $theme_off;
}

10
couchpotato/core/media/movie/_base/static/movie.scss
View File

@ -112,8 +112,16 @@ $mass_edit_height: 44px;
position: relative;
.no_movies {
text-align: center;
display: block;
padding: $padding;
@include media-phablet {
padding: $padding/2;
}
a {
color: $primary_color;
}
}
> .description {

9
couchpotato/static/scripts/combined.base.min.js
View File

@ -977,13 +977,14 @@ Page.Home = new Class({
return;
}
self.chain = new Chain();
self.chain.chain(self.createBigsearch.bind(self), self.createAvailable.bind(self), self.createSoon.bind(self), self.createSuggestions.bind(self), self.createCharts.bind(self), self.createLate.bind(self));
self.chain.chain(self.createAvailable.bind(self), self.createBigsearch.bind(self), self.createSoon.bind(self), self.createSuggestions.bind(self), self.createCharts.bind(self), self.createLate.bind(self));
self.chain.callChain();
},
createBigsearch: function() {
var self = this;
var search = new BlockSearch(self, {});
$(search).inject(self.content);
new Element(".big_search").grab(new BlockSearch(self, {
animate: false
})).inject(self.content);
self.chain.callChain();
},
createAvailable: function() {
@ -1003,7 +1004,7 @@ Page.Home = new Class({
events: {
click: function(e) {
e.preventDefault();
$(document.body).getElement(".search_form .icon-search").click();
$(document.body).getElement(".big_search input").focus();
}
}
})),

31
couchpotato/static/scripts/combined.plugins.min.js
View File

@ -178,6 +178,9 @@ window.addEvent("domready", function() {
var BlockSearch = new Class({
Extends: BlockBase,
options: {
animate: true
},
cache: {},
create: function() {
var self = this;
@ -226,19 +229,21 @@ var BlockSearch = new Class({
self.media = {};
self.results.empty();
self.el.removeClass("filled");
dynamics.css(self.wrapper, {
opacity: 0,
scale: .1
});
dynamics.animate(self.wrapper, {
opacity: 1,
scale: 1
}, {
type: dynamics.spring,
frequency: 200,
friction: 270,
duration: 800
});
if (self.options.animate) {
dynamics.css(self.wrapper, {
opacity: 0,
scale: .1
});
dynamics.animate(self.wrapper, {
opacity: 1,
scale: 1
}, {
type: dynamics.spring,
frequency: 200,
friction: 270,
duration: 800
});
}
}
},
hideResults: function(bool) {

11
couchpotato/static/scripts/page/home.js
View File

@ -22,8 +22,8 @@ Page.Home = new Class({
self.chain = new Chain();
self.chain.chain(
self.createBigsearch.bind(self),
self.createAvailable.bind(self),
self.createBigsearch.bind(self),
self.createSoon.bind(self),
self.createSuggestions.bind(self),
self.createCharts.bind(self),
@ -37,8 +37,11 @@ Page.Home = new Class({
createBigsearch: function(){
var self = this;
var search = new BlockSearch(self, {});
$(search).inject(self.content);
new Element('.big_search').grab(
new BlockSearch(self, {
'animate': false
})
).inject(self.content);
self.chain.callChain();
},
@ -61,7 +64,7 @@ Page.Home = new Class({
'events': {
'click': function(e){
(e).preventDefault();
$(document.body).getElement('.search_form .icon-search').click();
$(document.body).getElement('.big_search input').focus();
}
}
})

31
couchpotato/static/style/_mixins.scss
View File

@ -49,3 +49,34 @@ $mq-desktop-plus: 1382px !default;
@content;
}
}
@mixin media-phone-and-up {
@media (min-width : $mq-phone) {
@content;
}
}
@mixin media-phablet-and-up {
@media (min-width : $mq-phablet) {
@content;
}
}
@mixin media-tablet-and-up {
@media (min-width : $mq-tablet) {
@content;
}
}
@mixin media-desktop-and-up {
@media (min-width : $mq-desktop) {
@content;
}
}
@mixin media-desktop-plus-and-up {
@media (min-width : $mq-desktop-plus) {
@content;
}
}

54
couchpotato/static/style/combined.min.css
View File

@ -7,7 +7,11 @@
.search_form .input{background:#FFF;border-radius:3px 0 0 3px;position:relative;left:4px;height:44px;overflow:hidden;width:100%}
.search_form .input input{position:absolute;top:0;left:0;height:100%;width:100%;z-index:1}
.search_form .input input::-ms-clear{width:0;height:0}
.search_form.filled .input input{background:#eaeaea}
.search_form .input input:focus{background:rgba(234,234,234,.2)}
.search_form .input input:focus::-webkit-input-placeholder{color:#000;opacity:.7}
.search_form .input input:focus::-moz-placeholder{color:#000;opacity:.7}
.search_form .input input:focus:-ms-input-placeholder{color:#000;opacity:.7}
.search_form.filled .input input{background:rgba(234,234,234,.4)}
.page.home .search_form,.search_form.focused,.search_form.shown{border-color:#04bce6}
.page.home .search_form .wrapper,.search_form.focused .wrapper,.search_form.shown .wrapper{display:block;width:380px;-webkit-transform-origin:0 90%;transform-origin:0 90%}
.page.home .search_form .input input,.search_form.focused .input input,.search_form.shown .input input{opacity:1}
@ -32,6 +36,7 @@
@media (max-width:480px){.search_form .results_container .results .media_result .options .category,.search_form .results_container .results .media_result .options .profile{margin-right:2px}
}
.search_form .results_container .results .media_result .options .add{width:42px;-webkit-flex:1 auto;-ms-flex:1 auto;flex:1 auto}
.search_form .results_container .results .media_result .options .add a{color:#FFF}
.search_form .results_container .results .media_result .options .button{display:block;background:#ac0000;text-align:center;margin:0}
.search_form .results_container .results .media_result .options .message{font-size:20px;color:#fff}
.search_form .results_container .results .media_result .thumbnail{width:30px;min-height:100%;display:block;margin:0;vertical-align:top}
@ -51,12 +56,40 @@
.search_form .results_container .results .media_result:last-child .data{border-bottom:0}
.search_form.focused.filled .results_container,.search_form.shown.filled .results_container{display:block}
.search_form.focused.filled .input,.search_form.shown.filled .input{border-radius:0 0 0 3px}
.page.home .search_form{height:100px}
.page.home .search_form .icon-search{color:#000}
.page.home .search_form .wrapper{border-radius:0;box-shadow:0;bottom:auto;top:0}
.directory_list,.messages .message,.more_menu .wrapper{box-shadow:0 0 15px 2px rgba(0,0,0,.15)}
.page.home .search_form{display:block;padding:20px;width:100%;max-width:500px;margin:20px auto 0;height:106px;position:relative}
@media (max-width:480px){.page.home .search_form{margin-top:10px;height:64px}
}
.page.home .search_form .icon-search{display:block;color:#000;right:20px;top:20px;width:66px;height:66px;line-height:66px;left:auto;-webkit-transform:none;transform:none;font-size:2em;opacity:.5;pointer-events:none}
@media (max-width:480px){.page.home .search_form .icon-search{width:44px;height:44px;line-height:44px;right:10px;top:10px;font-size:1.5em}
}
.page.home .search_form .wrapper{border-radius:0;box-shadow:none;bottom:auto;top:20px;left:20px;right:20px;position:absolute;width:auto}
@media (max-width:480px){.page.home .search_form .wrapper{right:10px;top:10px;left:10px}
}
.page.home .search_form .wrapper:before{display:none}
.page.home .search_form .wrapper .input{border-radius:0;left:0}
.page.home .search_form .wrapper .input{border-radius:0;left:0;position:absolute;top:0;height:66px}
.page.home .search_form .wrapper .input input{box-shadow:0;font-size:2em;font-weight:400}
.directory_list,.messages .message,.more_menu .wrapper{box-shadow:0 0 15px 2px rgba(0,0,0,.15)}
.page.home .search_form .wrapper .results_container{min-height:66px;position:absolute;top:66px;left:0;right:0;border:1px solid #b7b7b7;border-top:0}
@media (max-width:480px){.page.home .search_form .wrapper .input{height:44px}
.page.home .search_form .wrapper .input input{font-size:1em}
.page.home .search_form .wrapper .results_container{top:44px;min-height:44px}
}
@media (min-width:480px){.page.home .search_form .wrapper .results_container .results{max-height:400px}
.page.home .search_form .wrapper .results_container .results .media_result{height:66px}
}
@media (min-width:480px){.page.home .search_form .wrapper .results_container .results .media_result .thumbnail{width:40px}
.page.home .search_form .wrapper .results_container .results .media_result .options{left:40px}
.page.home .search_form .wrapper .results_container .results .media_result .options .title{margin-right:5px;width:320px}
}
@media (min-width:480px) and (max-width:480px){.page.home .search_form .wrapper .results_container .results .media_result{height:44px}
.page.home .search_form .wrapper .results_container .results .media_result .options .title{width:140px;margin-right:2px}
}
@media (min-width:480px){.page.home .search_form .wrapper .results_container .results .media_result .data{left:40px}
}
@media (max-width:480px){.page.home .search_form .wrapper .results_container .results .media_result{height:44px}
.page.home .search_form .wrapper .results_container .results .media_result .options .title{width:140px;margin-right:2px}
}
.big_search{background:#eaeaea}
.page.movies{bottom:auto;z-index:21;height:80px}
.page.movies_manage,.page.movies_wanted{top:80px;padding:0;transition:top 300ms cubic-bezier(.9,0,.1,1)}
@media (max-width:480px){.page.movies{height:44px}
@ -80,7 +113,8 @@
.movie .rating .votes{opacity:.7;margin-left:4px}
.movie.status_suggested .quality{display:none}
.movies{position:relative}
.movies .no_movies{text-align:center;padding:20px}
.movies .no_movies{display:block;padding:20px}
.movies .no_movies a{color:#ac0000}
.movies>.description{position:absolute;top:0;right:20px;width:auto;line-height:80px}
@media (max-width:768px){.movies>.description{display:none}
}
@ -89,6 +123,9 @@
.movies>.loading .message{color:#000}
.movies>.loading .spinner{background-color:#000}
.movies .actions{-webkit-transform:rotateY(360deg);transform:rotateY(360deg)}
@media (max-width:480px){.movies .no_movies{padding:10px}
.movies .actions{pointer-events:none}
}
.list_list{font-weight:300}
.list_list .movie{display:block;border-bottom:1px solid #eaeaea;position:relative;cursor:pointer}
.list_list .movie:last-child{border-bottom:none}
@ -99,8 +136,7 @@
.list_list .movie .info{padding:10px 20px;display:flex;-webkit-flex-flow:row nowrap;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-webkit-align-items:center;-ms-flex-align:center;align-items:center}
.list_list .movie .info .title{-webkit-flex:1 auto;-ms-flex:1 auto;flex:1 auto}
.list_list .movie .info .title span{transition:margin 200ms cubic-bezier(.9,0,.1,1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:480px){.movies .actions{pointer-events:none}
.list_list .movie .info{display:block;padding:10px}
@media (max-width:480px){.list_list .movie .info{display:block;padding:10px}
.list_list .movie .info .title{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:row nowrap;-ms-flex-flow:row nowrap;flex-flow:row nowrap}
.list_list .movie .info .title span{width:100%}
}

Write Preview
Loading…
Cancel
Save