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% | ||||