From 117b48993e8cf736e48870d377db977fed720e5c Mon Sep 17 00:00:00 2001 From: Benjamin Attal Date: Wed, 14 May 2014 20:48:09 -0400 Subject: [PATCH] Preliminary search result design. Must add other features to the result including meta info (title, author, etc.) --- static/js/index.js | 27 +++++++++++++++++++++---- static/sass/index.sass | 55 +++++++++++++++++++++++++++++++++++++++++++++----- 2 files changed, 73 insertions(+), 9 deletions(-) diff --git a/static/js/index.js b/static/js/index.js index 18e9191..8a8c43c 100644 --- a/static/js/index.js +++ b/static/js/index.js @@ -26,12 +26,13 @@ resultsDiv = $("div#results")[0]; var typingTimer, lastValue; //Obtained by parsing python file with pygments -var codeExample = '
"""\nModule to contain all the project's Flask server plumbing.\n"""\n\nfrom flask import Flask\nfrom flask import render_template, session\n\nfrom bitshift import assets\n# from bitshift.database import Database\n# from bitshift.query import parse_query\n\napp = Flask(__name__)\napp.config.from_object("bitshift.config")\n\napp_env = app.jinja_env\napp_env.line_statement_prefix = "="\napp_env.globals.update(assets=assets)\n\n# database = Database()\n\n@app.route("/")\ndef index():\n    return render_template("index.html")\n\n@app.route("/search/<query>")\ndef search(query):\n    # tree = parse_query(query)\n    # database.search(tree)\n    pass\n\n@app.route("/about")\ndef about():\n    return render_template("about.html")\n\n@app.route("/developers")\ndef developers():\n    return render_template("developers.html")\n\nif __name__ == "__main__":\n    app.run(debug=True)\n
\n' +var codeExample = '
 1\n 2\n 3\n 4\n 5\n 6\n 7\n 8\n 9\n10\n11\n12\n13\n14\n15\n16\n17\n18\n19\n20\n21\n22\n23\n24\n25\n26\n27\n28\n29\n30\n31\n32\n33\n34\n35\n36\n37\n38\n39\n40
"""\nModule to contain all the project's Flask server plumbing.\n"""\n\nfrom flask import Flask\nfrom flask import render_template, session\n\nfrom bitshift import assets\n# from bitshift.database import Database\n# from bitshift.query import parse_query\n\napp = Flask(__name__)\napp.config.from_object("bitshift.config")\n\napp_env = app.jinja_env\napp_env.line_statement_prefix = "="\napp_env.globals.update(assets=assets)\n\n# database = Database()\n\n@app.route("/")\ndef index():\n    return render_template("index.html")\n\n@app.route("/search/<query>")\ndef search(query):\n    # tree = parse_query(query)\n    # database.search(tree)\n    pass\n\n@app.route("/about")\ndef about():\n    return render_template("about.html")\n\n@app.route("/developers")\ndef developers():\n    return render_template("developers.html")\n\nif __name__ == "__main__":\n    app.run(debug=True)\n
\n
' searchBar.onkeyup = typingTimer; // Enable infinite scrolling down the results page. $(window).scroll(function() { - if($(window).scrollTop() + $(window).height() == $(document).height()){ + var searchField = $("div#search-field"); + if($(window).scrollTop() + $(window).height() == $(document).height() && searchField.hasClass('partly-visible')){ loadMoreResults(); } }); @@ -120,9 +121,27 @@ function populateResults(){ function queryServer(){ var resultDivs = [] for(var result = 0; result < 20; result++){ - var newDiv = document.createElement("div"); + var newDiv = document.createElement("div"), + table = document.createElement("table"), + row = document.createElement("tr"), + sidebar = document.createElement("td"), + codeElt = document.createElement("td"), + meta = document.createElement("td"); + newDiv.classList.add("result"); - newDiv.innerHTML = codeExample; + sidebar.id = 'sidebar'; + codeElt.id = 'code'; + meta.id = 'meta'; + + sidebar.innerHTML = ''; + codeElt.innerHTML = '
' + codeExample + '
'; + + row.appendChild(sidebar); + row.appendChild(codeElt); + row.appendChild(meta); + table.appendChild(row); + newDiv.appendChild(table); + resultDivs.push(newDiv); } diff --git a/static/sass/index.sass b/static/sass/index.sass index 44c0945..a2ed825 100644 --- a/static/sass/index.sass +++ b/static/sass/index.sass @@ -283,11 +283,56 @@ div#results width: 80% div.result - background-color: none - font-family: Arial, "Inconsolata" - margin-bottom: 10% - margin-top: 1% - padding: 1% + width: 60% + height: 200px + font-family: Menlo, Monaco, "Inconsolata" + margin-top: 3% + + table + border-collapse: collapse + border: 1px solid #ccc + height: inherit + + tr + height: inherit + + #sidebar + width: 15% + background-color: #eee + border-right: 1px solid #ccc + height: inherit + + #code + width: 50% + height: inherit + border-right: 1px solid #ccc + + #tablecontainer + overflow: scroll + width: 100% + height: inherit + + table + table-layout:fixed + border-collapse: collapse + border: none + background-color: #49483e + + pre + margin: 0 + + .linenodiv + padding-left: 5px + padding-right: 5px + color: white + + .hll + border-left: 1px solid #666 + padding: 3% + overflow: scroll + + #meta + width: 35% &.cascade @extend .t3