Search
This commit is contained in:
Ruud
@@ -16,6 +16,18 @@ var BlockSearch = new Class({
|
||||
}
|
||||
}),
|
||||
new Element('div.wrapper').adopt(
|
||||
self.result_container = new Element('div.results_container', {
|
||||
'tween': {
|
||||
'duration': 200
|
||||
},
|
||||
'events': {
|
||||
'mousewheel': function(e){
|
||||
(e).stopPropagation();
|
||||
}
|
||||
}
|
||||
}).grab(
|
||||
self.results = new Element('div.results')
|
||||
),
|
||||
new Element('div.input').grab(
|
||||
self.input = new Element('input', {
|
||||
'placeholder': 'Search & add a new media',
|
||||
@@ -36,18 +48,6 @@ var BlockSearch = new Class({
|
||||
}
|
||||
}
|
||||
})
|
||||
),
|
||||
self.result_container = new Element('div.results_container', {
|
||||
'tween': {
|
||||
'duration': 200
|
||||
},
|
||||
'events': {
|
||||
'mousewheel': function(e){
|
||||
(e).stopPropagation();
|
||||
}
|
||||
}
|
||||
}).grab(
|
||||
self.results = new Element('div.results')
|
||||
)
|
||||
)
|
||||
);
|
||||
@@ -162,7 +162,7 @@ var BlockSearch = new Class({
|
||||
if(typeOf(media) == 'array'){
|
||||
Object.each(media, function(me){
|
||||
|
||||
var m = new BlockSearch[me.type.capitalize() + 'Item'](me);
|
||||
var m = new window['BlockSearch' + me.type.capitalize() + 'Item'](me);
|
||||
$(m).inject(self.results);
|
||||
self.media[m.imdb || 'r-'+Math.floor(Math.random()*10000)] = m;
|
||||
|
||||
@@ -173,11 +173,6 @@ var BlockSearch = new Class({
|
||||
}
|
||||
});
|
||||
|
||||
// Calculate result heights
|
||||
var w = window.getSize(),
|
||||
rc = self.result_container.getCoordinates();
|
||||
|
||||
self.results.setStyle('max-height', (w.y - rc.top - 50) + 'px');
|
||||
self.mask.fade('out');
|
||||
|
||||
},
|
||||
|
||||
@@ -4,8 +4,9 @@
|
||||
display: inline-block;
|
||||
z-index: 200;
|
||||
width: 44px;
|
||||
position: relative;
|
||||
|
||||
a {
|
||||
.icon-search {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 50%;
|
||||
@@ -21,24 +22,24 @@
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
position: relative;
|
||||
position: absolute;
|
||||
left: 44px;
|
||||
height: 100%;
|
||||
bottom: 0;
|
||||
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%));
|
||||
@include transform(rotate(45deg));
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: $primary_color;
|
||||
left: -8px;
|
||||
top: 50%;
|
||||
left: -6px;
|
||||
bottom: 16px;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
@@ -48,7 +49,7 @@
|
||||
border-radius: $border_radius 0 0 $border_radius;
|
||||
position: relative;
|
||||
left: 4px;
|
||||
height: 100%;
|
||||
height: 44px;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
|
||||
@@ -84,179 +85,167 @@
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.search_form .results_container {
|
||||
text-align: left;
|
||||
position: absolute;
|
||||
background: #5c697b;
|
||||
margin: 4px 0 0;
|
||||
width: 470px;
|
||||
.results_container {
|
||||
min-height: 50px;
|
||||
box-shadow: 0 20px 20px -10px rgba(0,0,0,0.55);
|
||||
text-align: left;
|
||||
position: relative;
|
||||
left: 4px;
|
||||
display: none;
|
||||
}
|
||||
@media all and (max-width: 480px) {
|
||||
.search_form .results_container {
|
||||
width: 320px;
|
||||
background: $background_color;
|
||||
border-radius: $border_radius 0 0 0;
|
||||
overflow: hidden;
|
||||
|
||||
.results {
|
||||
max-height: 280px;
|
||||
overflow-x: hidden;
|
||||
|
||||
.media_result {
|
||||
overflow: hidden;
|
||||
height: 50px;
|
||||
position: relative;
|
||||
|
||||
.options {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 30px;
|
||||
right: 0;
|
||||
padding: 10px;
|
||||
background: rgba(0,0,0,.3);
|
||||
|
||||
> .in_library_wanted {
|
||||
margin-top: -7px;
|
||||
}
|
||||
|
||||
> div {
|
||||
border: 0;
|
||||
@include flexbox();
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
select {
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
min-width: 70px;
|
||||
@include flex(1 auto);
|
||||
}
|
||||
|
||||
.button {
|
||||
@include flex(1 auto);
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.message {
|
||||
height: 100%;
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
width: 30px;
|
||||
min-height: 100%;
|
||||
display: block;
|
||||
margin: 0;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.data {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 30px;
|
||||
right: 0;
|
||||
cursor: pointer;
|
||||
border-top: 1px solid rgba(255,255,255, 0.08);
|
||||
transition: all .4s cubic-bezier(0.9,0,0.1,1);
|
||||
@include translateX(0%);
|
||||
background: $background_color;
|
||||
|
||||
&.open {
|
||||
@include translateX(100%);
|
||||
}
|
||||
|
||||
.in_wanted,
|
||||
.in_library {
|
||||
position: absolute;
|
||||
bottom: 2px;
|
||||
left: 14px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.info {
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 15px;
|
||||
right: 7px;
|
||||
vertical-align: middle;
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-weight: 300;
|
||||
font-size: 1.25em;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
@include flexbox();
|
||||
|
||||
.title {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
@include flex(1 auto);
|
||||
}
|
||||
|
||||
.year {
|
||||
opacity: .4;
|
||||
padding: 0 5px;
|
||||
width: auto;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .info h2 .year {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&:last-child .data {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.search_form.focused.filled .results_container,
|
||||
.search_form.shown.filled .results_container {
|
||||
}
|
||||
|
||||
&.focused.filled,
|
||||
&.shown.filled {
|
||||
.results_container {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.search_form .results {
|
||||
max-height: 570px;
|
||||
overflow-x: hidden;
|
||||
.input {
|
||||
border-radius: 0 0 0 $border_radius;
|
||||
}
|
||||
}
|
||||
|
||||
.media_result {
|
||||
overflow: hidden;
|
||||
height: 50px;
|
||||
position: relative;
|
||||
.mask,
|
||||
.media_result .mask {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.media_result .options {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 30px;
|
||||
right: 0;
|
||||
padding: 13px;
|
||||
border: 1px solid transparent;
|
||||
border-width: 1px 0;
|
||||
border-radius: 0;
|
||||
box-shadow: inset 0 1px 8px rgba(0,0,0,0.25);
|
||||
}
|
||||
.media_result .options > .in_library_wanted {
|
||||
margin-top: -7px;
|
||||
}
|
||||
|
||||
.media_result .options > div {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.media_result .options .thumbnail {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.media_result .options select {
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.media_result .options select[name=title] { width: 170px; }
|
||||
.media_result .options select[name=profile] { width: 90px; }
|
||||
.media_result .options select[name=category] { width: 80px; }
|
||||
|
||||
@media all and (max-width: 480px) {
|
||||
|
||||
.media_result .options select[name=title] { width: 90px; }
|
||||
.media_result .options select[name=profile] { width: 50px; }
|
||||
.media_result .options select[name=category] { width: 50px; }
|
||||
|
||||
}
|
||||
|
||||
.media_result .options .button {
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.media_result .options .message {
|
||||
height: 100%;
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.media_result .data {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 30px;
|
||||
right: 0;
|
||||
background: #5c697b;
|
||||
cursor: pointer;
|
||||
border-top: 1px solid rgba(255,255,255, 0.08);
|
||||
transition: all .4s cubic-bezier(0.9,0,0.1,1);
|
||||
}
|
||||
.media_result .data.open {
|
||||
left: 100% !important;
|
||||
}
|
||||
|
||||
.media_result:last-child .data { border-bottom: 0; }
|
||||
|
||||
.media_result .in_wanted, .media_result .in_library {
|
||||
position: absolute;
|
||||
bottom: 2px;
|
||||
left: 14px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.media_result .thumbnail {
|
||||
width: 34px;
|
||||
min-height: 100%;
|
||||
display: block;
|
||||
margin: 0;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.media_result .info {
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 15px;
|
||||
right: 7px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.media_result .info h2 {
|
||||
margin: 0;
|
||||
font-weight: normal;
|
||||
font-size: 20px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.search_form .info h2 {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.media_result .info h2 .title {
|
||||
display: block;
|
||||
margin: 0;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.search_form .info h2 .title {
|
||||
position: absolute;
|
||||
width: 88%;
|
||||
}
|
||||
|
||||
.media_result .info h2 .year {
|
||||
padding: 0 5px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
width: 12%;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
@media all and (max-width: 480px) {
|
||||
|
||||
.search_form .info h2 .year {
|
||||
font-size: 12px;
|
||||
margin-top: 7px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.search_form .mask,
|
||||
.media_result .mask {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
@@ -45,10 +45,7 @@ var MovieList = new Class({
|
||||
}) : null
|
||||
);
|
||||
|
||||
if($(window).getSize().x <= 480 && !self.options.force_view)
|
||||
self.changeView('list');
|
||||
else
|
||||
self.changeView(self.getSavedView() || self.options.view || 'thumb');
|
||||
self.changeView(self.getSavedView() || self.options.view || 'thumb');
|
||||
|
||||
// Create the alphabet nav
|
||||
if(self.options.navigation)
|
||||
@@ -496,12 +493,12 @@ var MovieList = new Class({
|
||||
.addClass(new_view+'_list');
|
||||
|
||||
self.current_view = new_view;
|
||||
Cookie.write(self.options.identifier+'_view2', new_view, {duration: 1000});
|
||||
Cookie.write(self.options.identifier+'_view3', new_view, {duration: 1000});
|
||||
},
|
||||
|
||||
getSavedView: function(){
|
||||
var self = this;
|
||||
return Cookie.read(self.options.identifier+'_view2');
|
||||
return Cookie.read(self.options.identifier+'_view3');
|
||||
},
|
||||
|
||||
search: function(){
|
||||
|
||||
@@ -2,7 +2,10 @@ var MovieAction = new Class({
|
||||
|
||||
Implements: [Options],
|
||||
|
||||
class_name: 'action icon2',
|
||||
class_name: 'action',
|
||||
label: 'UNKNOWN',
|
||||
button: null,
|
||||
details: null,
|
||||
|
||||
initialize: function(movie, options){
|
||||
var self = this;
|
||||
@@ -11,12 +14,25 @@ var MovieAction = new Class({
|
||||
self.movie = movie;
|
||||
|
||||
self.create();
|
||||
if(self.el)
|
||||
self.el.addClass(self.class_name);
|
||||
|
||||
if(self.button)
|
||||
self.button.addClass(self.class_name);
|
||||
},
|
||||
|
||||
create: function(){},
|
||||
|
||||
getButton: function(){
|
||||
return this.button || null;
|
||||
},
|
||||
|
||||
getDetails: function(){
|
||||
return this.details || null;
|
||||
},
|
||||
|
||||
getLabel: function(){
|
||||
return this.label;
|
||||
},
|
||||
|
||||
disable: function(){
|
||||
if(this.el)
|
||||
this.el.addClass('disable');
|
||||
@@ -80,7 +96,8 @@ MA.IMDB = new Class({
|
||||
|
||||
self.id = self.movie.getIdentifier ? self.movie.getIdentifier() : self.get('imdb');
|
||||
|
||||
self.el = new Element('a.imdb', {
|
||||
self.button = new Element('a.imdb', {
|
||||
'text': 'IMDB',
|
||||
'title': 'Go to the IMDB page of ' + self.getTitle(),
|
||||
'href': 'http://www.imdb.com/title/'+self.id+'/',
|
||||
'target': '_blank'
|
||||
@@ -94,22 +111,11 @@ MA.IMDB = new Class({
|
||||
MA.Release = new Class({
|
||||
|
||||
Extends: MovieAction,
|
||||
label: 'Releases',
|
||||
|
||||
create: function(){
|
||||
var self = this;
|
||||
|
||||
self.el = new Element('a.releases.download', {
|
||||
'title': 'Show the releases that are available for ' + self.getTitle(),
|
||||
'events': {
|
||||
'click': self.show.bind(self)
|
||||
}
|
||||
});
|
||||
|
||||
if(!self.movie.data.releases || self.movie.data.releases.length === 0)
|
||||
self.el.hide();
|
||||
else
|
||||
self.showHelper();
|
||||
|
||||
App.on('movie.searcher.ended', function(notification){
|
||||
if(self.movie.data._id != notification.data._id) return;
|
||||
|
||||
@@ -118,7 +124,7 @@ MA.Release = new Class({
|
||||
// Releases are currently displayed
|
||||
if(self.options_container.isDisplayed()){
|
||||
self.options_container.destroy();
|
||||
self.createReleases();
|
||||
self.getDetails();
|
||||
}
|
||||
else {
|
||||
self.options_container.destroy();
|
||||
@@ -129,17 +135,10 @@ MA.Release = new Class({
|
||||
|
||||
},
|
||||
|
||||
show: function(e){
|
||||
getDetails: function(refresh){
|
||||
var self = this;
|
||||
if(e)
|
||||
(e).preventDefault();
|
||||
|
||||
self.createReleases();
|
||||
|
||||
},
|
||||
|
||||
createReleases: function(refresh){
|
||||
var self = this;
|
||||
p('test');
|
||||
|
||||
if(!self.options_container || refresh){
|
||||
self.options_container = new Element('div.options').grab(
|
||||
@@ -291,9 +290,7 @@ MA.Release = new Class({
|
||||
|
||||
}
|
||||
|
||||
// Show it
|
||||
self.options_container.inject(self.movie, 'top');
|
||||
self.movie.slide('in', self.options_container);
|
||||
return self.options_container;
|
||||
|
||||
},
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@ var Movie = new Class({
|
||||
|
||||
Extends: BlockBase,
|
||||
|
||||
action: {},
|
||||
actions: [],
|
||||
details: null,
|
||||
|
||||
initialize: function(list, options, data){
|
||||
@@ -15,18 +15,7 @@ var Movie = new Class({
|
||||
'events': {
|
||||
'click': function(e){
|
||||
(e).stop();
|
||||
|
||||
if(!self.details)
|
||||
self.details = new MovieDetails(self, {
|
||||
'level': 3
|
||||
});
|
||||
|
||||
App.getPageContainer().grab(self.details);
|
||||
|
||||
self.details.addSection('test', new Element('div.test', {
|
||||
'text': '.'
|
||||
}));
|
||||
|
||||
self.openDetails();
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -36,6 +25,29 @@ var Movie = new Class({
|
||||
self.parent(self, options);
|
||||
|
||||
self.addEvents();
|
||||
|
||||
//if(data.identifiers.imdb == 'tt0948470')
|
||||
// self.openDetails();
|
||||
},
|
||||
|
||||
openDetails: function(){
|
||||
var self = this;
|
||||
|
||||
if(!self.details){
|
||||
self.details = new MovieDetails(self, {
|
||||
'level': 3
|
||||
});
|
||||
|
||||
App.getPageContainer().grab(self.details);
|
||||
|
||||
// Add action items
|
||||
self.actions.each(function(action, nr){
|
||||
var details = action.getDetails();
|
||||
p(action, action.getLabel(), details);
|
||||
if(details)
|
||||
self.details.addSection(action.getLabel(), details);
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
addEvents: function(){
|
||||
@@ -213,7 +225,7 @@ var Movie = new Class({
|
||||
}
|
||||
})
|
||||
),
|
||||
self.actions = new Element('div.actions')
|
||||
self.actions_el = new Element('div.actions')
|
||||
)
|
||||
);
|
||||
|
||||
@@ -237,10 +249,13 @@ var Movie = new Class({
|
||||
// Add releases
|
||||
self.updateReleases();
|
||||
|
||||
Object.each(self.options.actions, function(action, key){
|
||||
self.action[key.toLowerCase()] = action = new self.options.actions[key](self);
|
||||
if(action.el)
|
||||
self.actions.adopt(action);
|
||||
self.options.actions.each(function(action){
|
||||
var action = new action(self),
|
||||
button = action.getButton();
|
||||
if(button)
|
||||
self.actions_el.grab(button);
|
||||
|
||||
self.actions.push(action);
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
@@ -49,16 +49,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
.quality {
|
||||
span {
|
||||
float: left;
|
||||
color: #FFF;
|
||||
font-size: .7em;
|
||||
padding: 2px 4px;
|
||||
background: rgba(0,0,0,.2);
|
||||
border-radius: 1px;
|
||||
margin: 2px 0 0 2px;
|
||||
}
|
||||
.quality span {
|
||||
float: left;
|
||||
color: #FFF;
|
||||
font-size: .7em;
|
||||
padding: 2px 4px;
|
||||
background: rgba(0,0,0,.2);
|
||||
border-radius: 1px;
|
||||
margin: 2px 0 0 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -31,9 +31,11 @@ var BlockSearchMovieItem = new Class({
|
||||
}
|
||||
}).adopt(
|
||||
self.info_container = new Element('div.info').adopt(
|
||||
new Element('h2').adopt(
|
||||
new Element('h2', {
|
||||
'title': self.getTitle()
|
||||
}).adopt(
|
||||
self.title = new Element('span.title', {
|
||||
'text': info.titles && info.titles.length > 0 ? info.titles[0] : 'Unknown'
|
||||
'text': self.getTitle()
|
||||
}),
|
||||
self.year = info.year ? new Element('span.year', {
|
||||
'text': info.year
|
||||
|
||||
@@ -598,24 +598,10 @@ function randomString(length, extra) {
|
||||
|
||||
})();
|
||||
|
||||
var createSpinner = function(target, options){
|
||||
var opts = Object.merge({
|
||||
lines: 12,
|
||||
length: 5,
|
||||
width: 4,
|
||||
radius: 9,
|
||||
color: '#fff',
|
||||
speed: 1.9,
|
||||
trail: 53,
|
||||
shadow: false,
|
||||
hwaccel: true,
|
||||
className: 'spinner',
|
||||
zIndex: 2e9,
|
||||
top: 'auto',
|
||||
left: 'auto'
|
||||
}, options);
|
||||
|
||||
return new Spinner(opts).spin(target);
|
||||
var createSpinner = function(container){
|
||||
var spinner = new Element('div.spinner');
|
||||
container.grab(spinner);
|
||||
return spinner;
|
||||
};
|
||||
|
||||
var rep = function (pa) {
|
||||
|
||||
+100
-108
@@ -1,162 +1,154 @@
|
||||
html {
|
||||
line-height: 1.5;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
|
||||
font-size: 14px;
|
||||
}
|
||||
@import "mixins";
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.api_docs {
|
||||
|
||||
h1, h2, h3, h4, h5 {
|
||||
clear: both;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 25px;
|
||||
padding: 20px 40px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
pre {
|
||||
background: #eee;
|
||||
font-family: monospace;
|
||||
margin: 0;
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.api, .missing {
|
||||
overflow: hidden;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding: 40px;
|
||||
}
|
||||
.api:hover {
|
||||
color: #000;
|
||||
h1 {
|
||||
font-size: 25px;
|
||||
padding: 20px 40px;
|
||||
}
|
||||
|
||||
.api .description {
|
||||
color: #333;
|
||||
padding: 0 0 5px;
|
||||
}
|
||||
|
||||
.api .params {
|
||||
background: #fafafa;
|
||||
pre {
|
||||
background: #eee;
|
||||
font-family: monospace;
|
||||
margin: 0;
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
}
|
||||
.api h3 {
|
||||
clear: both;
|
||||
float: left;
|
||||
width: 100px;
|
||||
|
||||
body {
|
||||
display: block;
|
||||
overflow: auto;
|
||||
background-color: #FFF;
|
||||
}
|
||||
|
||||
.api, .missing {
|
||||
overflow: hidden;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.api {
|
||||
&:hover {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.api .params {
|
||||
float: left;
|
||||
width: 700px;
|
||||
|
||||
.description {
|
||||
color: #333;
|
||||
padding: 0 0 5px;
|
||||
}
|
||||
|
||||
.api .params td, .api .params th {
|
||||
.params {
|
||||
background: #fafafa;
|
||||
width: 100%;
|
||||
|
||||
h3 {
|
||||
clear: both;
|
||||
float: left;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
td, th {
|
||||
padding: 3px 5px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.api .params tr:last-child td, .api .params tr:last-child th {
|
||||
|
||||
tr:last-child td, tr:last-child th {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.api .params .param {
|
||||
.param {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.api .params .param th {
|
||||
th {
|
||||
text-align: left;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.api .param .type {
|
||||
.type {
|
||||
font-style: italic;
|
||||
margin-right: 10px;
|
||||
width: 100px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.api .return {
|
||||
float: left;
|
||||
width: 700px;
|
||||
}
|
||||
|
||||
.database {
|
||||
padding: 20px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.database * {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.database .nav {
|
||||
}
|
||||
.database .nav li {
|
||||
display: inline-block;
|
||||
}
|
||||
.database .nav li a {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.database table {
|
||||
font-size: 11px;
|
||||
.return {
|
||||
float: left;
|
||||
width: 700px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.database table th {
|
||||
text-align: left;
|
||||
|
||||
.database {
|
||||
padding: 20px;
|
||||
margin: 0;
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.database table tr:hover {
|
||||
position: relative;
|
||||
z-index: 20;
|
||||
}
|
||||
.nav {
|
||||
li {
|
||||
display: inline-block;
|
||||
|
||||
.database table td {
|
||||
a {
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.database table {
|
||||
font-size: 11px;
|
||||
|
||||
th {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
tr:hover {
|
||||
position: relative;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
td {
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.database table .id {
|
||||
.id {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.database table ._rev {
|
||||
._rev {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.database table ._t {
|
||||
._t {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.database table .form {
|
||||
.form {
|
||||
width: 600px;
|
||||
}
|
||||
|
||||
.database table form {
|
||||
form {
|
||||
width: 600px;
|
||||
}
|
||||
|
||||
.database textarea {
|
||||
font-size: 12px;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
}
|
||||
textarea {
|
||||
font-size: 12px;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.database input[type=submit] {
|
||||
display: block;
|
||||
}
|
||||
input[type=submit] {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -1,6 +1,14 @@
|
||||
@import "fonts";
|
||||
@import "mixins";
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body, html {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
@@ -25,7 +33,7 @@ a {
|
||||
input, textarea, select {
|
||||
font-size: 1em;
|
||||
font-weight: 300;
|
||||
padding: $padding/2;
|
||||
padding: $padding/6 $padding/4;
|
||||
background: $background_color;
|
||||
border: 1px solid #f2f2f2;
|
||||
}
|
||||
@@ -347,3 +355,44 @@ input, textarea, select {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.mask{
|
||||
background: rgba(0,0,0, 0.9);
|
||||
z-index: 100;
|
||||
text-align: center;
|
||||
|
||||
$spinner_size: 22px;
|
||||
|
||||
.spinner {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: $spinner_size;
|
||||
height: $spinner_size;
|
||||
display: block;
|
||||
background: white;
|
||||
margin-top: -($spinner_size/2);
|
||||
margin-left: -($spinner_size/2);
|
||||
outline: 1px solid transparent;
|
||||
border: 1px solid #FFF;
|
||||
|
||||
@include animation(rotating 4.4s $cubic infinite normal);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotating {
|
||||
0% {
|
||||
@include transform(rotate(0deg) scale(1.4));
|
||||
border-radius: 2px;
|
||||
}
|
||||
45% {
|
||||
@include transform(rotate(360deg) scale(1));
|
||||
border-radius: 50%;
|
||||
}
|
||||
55% {}
|
||||
100% {
|
||||
@include transform(rotate(720deg) scale(1.4));
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -15,6 +15,7 @@ $cubic: cubic-bezier(0.9,0,0.1,1);
|
||||
@import "susy";
|
||||
@import "compass/css3/transition";
|
||||
@import "compass/css3/transform";
|
||||
@import "compass/css3/animation";
|
||||
|
||||
$susy: (
|
||||
columns: 24,
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
{% autoescape None %}
|
||||
<!doctype html>
|
||||
<html>
|
||||
<html class="api_docs">
|
||||
<head>
|
||||
<link rel="stylesheet" href="{{ Env.get('static_path') }}style/api.css" type="text/css">
|
||||
<link rel="stylesheet" href="{{ Env.get('static_path') }}style/combined.min.css" type="text/css">
|
||||
<title>API documentation</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
Reference in New Issue
Block a user