Add: static/js/index.js -Complete `queryServer()`. static/sass/(index, _mixins).sass -Add `opaque()` mixin.tags/v1.0^2
@@ -104,7 +104,6 @@ var searchResultsPage = 1; | |||||
$(window).keypress(function(key){ | $(window).keypress(function(key){ | ||||
for(var hotkey in hotkeyActions){ | for(var hotkey in hotkeyActions){ | ||||
var keyChar = String.fromCharCode(key.keyCode); | var keyChar = String.fromCharCode(key.keyCode); | ||||
console.log(keyChar); | |||||
if(keyChar == hotkey) | if(keyChar == hotkey) | ||||
hotkeyActions[keyChar](); | hotkeyActions[keyChar](); | ||||
} | } | ||||
@@ -377,17 +376,16 @@ function queryServer(){ | |||||
"q" : searchBar.value, | "q" : searchBar.value, | ||||
"p" : searchResultsPage++ | "p" : searchResultsPage++ | ||||
}); | }); | ||||
console.log(queryUrl); | |||||
var result = $.getJSON(queryUrl, function(result){ | |||||
$.each(result, function(key, value){ | |||||
if(key == "error") | |||||
errorMessage(value); | |||||
else | |||||
console.log("Success."); | |||||
}); | |||||
}); | |||||
// return []; | |||||
var resultDivs = []; | var resultDivs = []; | ||||
$.getJSON(queryUrl, function(result){ | |||||
if("error" in result) | |||||
errorMessage(result["error"]); | |||||
else | |||||
for(var codelet = 0; codelet < result["results"].length; codelet++) | |||||
resultDivs.push(result["results"][codelet]); | |||||
}); | |||||
for(var result = 0; result < 20; result++){ | for(var result = 0; result < 20; result++){ | ||||
var newDiv = createResult(testCodelet); | var newDiv = createResult(testCodelet); | ||||
resultDivs.push(newDiv) | resultDivs.push(newDiv) | ||||
@@ -10,6 +10,11 @@ | |||||
-o-#{$property}: $value | -o-#{$property}: $value | ||||
#{$property}: $value | #{$property}: $value | ||||
// Add portable opacity style. | |||||
@mixin opaque($opacity) | |||||
@include vendor(opacity, $opacity) | |||||
filter: alpha(opacity=$opacity) | |||||
.t1 | .t1 | ||||
@include vendor(transition, all 0.1s ease-out) | @include vendor(transition, all 0.1s ease-out) | ||||
@@ -297,26 +297,28 @@ div#results | |||||
color: orange | color: orange | ||||
div.result | div.result | ||||
@extend .t3 | |||||
width: $resultWidth | width: $resultWidth | ||||
height: 200px | height: 200px | ||||
margin-bottom: 100% | margin-bottom: 100% | ||||
@include vendor(transition, opacity 0.2s ease-in-out) | |||||
@include vendor(opacity, 0.7) | |||||
table | table | ||||
border-collapse: collapse | border-collapse: collapse | ||||
height: inherit | height: inherit | ||||
tr | tr | ||||
@extend .t3 | |||||
@include opaque(0.8) | |||||
height: inherit | height: inherit | ||||
&.cascade | &.cascade | ||||
@extend .t1 | @extend .t1 | ||||
margin-bottom: 15% | margin-bottom: 15% | ||||
&.display-all | |||||
@include vendor(opacity, 1.0) | |||||
&.display-all table tr | |||||
@include opaque(1.0) | |||||
div#display-info | div#display-info | ||||
font-size: 1.3em | font-size: 1.3em | ||||
@@ -330,13 +332,13 @@ div#display-info | |||||
text-transform: capitalize | text-transform: capitalize | ||||
td#code | td#code | ||||
@include vendor(transition, width 0.2s ease-in-out) | |||||
width: $codeWidth | width: $codeWidth | ||||
height: inherit | height: inherit | ||||
padding: 0px | padding: 0px | ||||
border: 1px solid #bbb | border: 1px solid #bbb | ||||
@include vendor(transition, width 0.2s ease-in-out) | |||||
#tablecontainer | #tablecontainer | ||||
overflow: hidden | overflow: hidden | ||||
width: 100% | width: 100% | ||||