diff --git a/static/js/index.js b/static/js/index.js index 083e1d8..49d522c 100644 --- a/static/js/index.js +++ b/static/js/index.js @@ -141,13 +141,13 @@ var codeExample = '
' - + codelet.filename + ''; + + codelet.name + ''; site.innerHTML = '' + codelet.origin[0] +''; nextMatch.innerHTML = 'next match'; prevMatch.innerHTML = 'prev match'; @@ -295,7 +275,7 @@ function createResult(codelet) { authors.innerHTML = authorsHtml; // Needs to be processed on the server - codeElt.innerHTML = '
' + codelet.html_code + '
'; + codeElt.innerHTML = '
' + codelet.code + '
'; //Event binding $(newDiv).on('mousemove', function(e) { @@ -408,39 +388,49 @@ function queryServer(){ "p" : searchResultsPage++ }); - var resultDivs = []; + var results = $.Deferred(); $.getJSON(queryUrl, function(result){ + var resultDivs = []; if("error" in result) insertErrorMessage(result["error"]); else - for(var codelet = 0; codelet < result["results"].length; codelet++) - resultDivs.push(result["results"][codelet]); + for(var codelet = 0; codelet < result["results"].length; codelet++){ + resultDivs.push(createResult(result["results"][codelet])); + console.log(result["results"][codelet]); + } + results.resolve(resultDivs); }); - for(var result = 0; result < 20; result++){ - var newDiv = createResult(testCodelet); - resultDivs.push(newDiv) - } + return results; +} - return resultDivs; +/* + * Query the server with the current search string, and populate `div#results` + * with its response. + */ +function populateResults(){ + searchResultsPage = 1; + loadMoreResults(); } /* - * Adds more results to `div#results`. + * Query the server for the next results page, and add its codelets to + * `div#results`. */ function loadMoreResults(){ - var results = queryServer(); - for(var result = 0; result < results.length; result++){ - var newDiv = results[result]; - resultsDiv.appendChild(newDiv); - setTimeout( - (function(divReference){ - return function(){ - divReference.classList.add("cascade"); - }; - }(newDiv)), - result * 20); - } + queryServer().done(function(results){ + for(var result = 0; result < results.length; result++){ + var newDiv = results[result]; + resultsDiv.appendChild(newDiv); + setTimeout( + (function(divReference){ + return function(){ + divReference.classList.add("cascade"); + }; + }(newDiv)), + result * 20); + } + }); } /* @@ -453,5 +443,3 @@ function insertErrorMessage(msg){ error.append(msg); resultsDiv.appendChild(error[0]); } - -// loadMoreResults(); diff --git a/static/sass/index.sass b/static/sass/index.sass index ecf4af6..08bfa26 100644 --- a/static/sass/index.sass +++ b/static/sass/index.sass @@ -6,8 +6,8 @@ @import variables $minSearchFieldsWidth: 490px -$resultWidth: 1000px -$codeWidth: 650px +$resultWidth: 800px +$codeWidth: 700px $hiddenInfoWidth: 250px .ui-datepicker @@ -366,8 +366,9 @@ div.result @extend .t1 margin-bottom: 15% - &.display-all table tr - @include opaque(1.0) + &.display-all + table tr + @include opaque(1.0) div#display-info font-size: 1.3em @@ -384,14 +385,14 @@ td#code @include vendor(transition, width 0.2s ease-in-out) width: $codeWidth + max-width: $codeWidth height: inherit padding: 0px - border: 1px solid #bbb #tablecontainer - overflow: hidden width: 100% height: inherit + overflow: auto background-color: #49483e position: relative z-index: 1 @@ -414,7 +415,7 @@ td#code div#hidden-info width: $hiddenInfoWidth - margin-left: -$hiddenInfoWidth - 10px + margin-left: -$hiddenInfoWidth - 200px height: 100% padding-top: 40px font-size: 1.2em