From 23d6f903bea10ac1f680888c3d513524aa213499 Mon Sep 17 00:00:00 2001 From: Severyn Kozak Date: Tue, 17 Jun 2014 19:58:56 -0400 Subject: [PATCH] Mod results styling, enforce max attr length. Add: static/js/index.js -Introduce a maximum character length to each attribute field. static/sass/index.sass -Add `overflow: auto` only when hidden information is displayed. -Decrease the width of the code viewport on hover; move the hidden information less far right. --- static/js/index.js | 45 ++++++++++++++++++++++++++------------------- static/sass/index.sass | 21 ++++++++++++++------- 2 files changed, 40 insertions(+), 26 deletions(-) diff --git a/static/js/index.js b/static/js/index.js index 6e6ae5e..d23f432 100644 --- a/static/js/index.js +++ b/static/js/index.js @@ -108,7 +108,6 @@ var searchResultsPage = 1; var displayHotkeyHelp = function(){ var help = $("div#hotkey-help"); - console.log("H"); if(help.hasClass("hidden")) help.fadeIn(420); else @@ -137,16 +136,16 @@ var searchResultsPage = 1; }()); //Obtained by parsing python file with pygments -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
' +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(deaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabug=True)\n
\n
' var testCodelet = { 'url': 'https://github.com/earwig/bitshift/blob/develop/app.py', 'name': 'app.py', - 'language': 'python', - 'date_created': 'May 10, 2014', - 'date_modified': '2 days ago', + 'lang': 'python', + 'created': 'May 10, 2014 aaaaaaaaaa', + 'modified': '2 days ago', 'origin': ['GitHub', 'https://github.com', ''], - 'authors': ['sevko', 'earwig'], + 'authors': ['sevko', 'earwig', 'another author', 'a'], 'code': codeExample }; @@ -215,6 +214,8 @@ function clearResults(){ * @return {Element} The result element. */ function createResult(codelet) { + var maxAttributeLength = 20; + //Level 1 var newDiv = document.createElement("div"), table = document.createElement("table"), @@ -256,23 +257,31 @@ function createResult(codelet) { //Add the bulk of the html title.innerHTML = ' » ' - + codelet.name + ''; - site.innerHTML = '' + codelet.origin[0] +''; + + codelet.name + ''; + site.innerHTML = '' + + codelet.origin[0] +''; nextMatch.innerHTML = 'next match'; prevMatch.innerHTML = 'prev match'; language.innerHTML = 'Language: ' + codelet.lang + ''; - dateModified.innerHTML = 'Last modified: ' + codelet.modified + ''; + dateModified.innerHTML = 'Last modified: ' + codelet.modified + + ''; // Needs to be changed from int to string on the server - dateCreated.innerHTML = 'Created: ' + codelet.created + ''; + dateCreated.innerHTML = 'Created: ' + + codelet.created.substring(0, maxAttributeLength) + ''; var authorsHtml = 'Authors: '; - codelet.authors.forEach(function(a, i) { - if (i == codelet.authors.length - 1) - authorsHtml += '' + a + ' '; + var currLength = 0; + var authorsList = []; + for(var auth = 0; auth < codelet.authors.length; auth++){ + currLength += codelet.authors[auth].length; + if(maxAttributeLength < currLength){ + authorsList.push("..."); + break; + } else - authorsHtml += '' + a + ' , '; - }); - authors.innerHTML = authorsHtml; + authorsList.push('' + codelet.authors[auth] + ''); + } + authors.innerHTML = "Authors: " + authorsList.join(", ") + ""; // Needs to be processed on the server codeElt.innerHTML = '
' + codelet.code + '
'; @@ -396,10 +405,8 @@ function queryServer(){ else if(result["results"].length == 0) insertErrorMessage("No search results."); else - for(var codelet = 0; codelet < result["results"].length; codelet++){ + for(var codelet = 0; codelet < result["results"].length; codelet++) resultDivs.push(createResult(result["results"][codelet])); - console.log(result["results"][codelet]); - } results.resolve(resultDivs); }); diff --git a/static/sass/index.sass b/static/sass/index.sass index 4472a56..badd8d9 100644 --- a/static/sass/index.sass +++ b/static/sass/index.sass @@ -6,9 +6,9 @@ @import variables $minSearchFieldsWidth: 490px -$resultWidth: 800px +// $resultWidth: 400px $codeWidth: 700px -$hiddenInfoWidth: 250px +$hiddenInfoWidth: 300px .ui-datepicker font-size: 70% @@ -346,7 +346,7 @@ div#results div.result @extend .t3 - width: $resultWidth + // width: $resultWidth height: 200px margin-bottom: 100% pointer-events: auto @@ -369,6 +369,10 @@ div.result table tr @include opaque(1.0) + #tablecontainer + max-width: 70% + overflow: auto !important + div#display-info font-size: 1.3em padding: 5px 0px 5px 5px @@ -391,17 +395,20 @@ td#code #tablecontainer width: 100% height: inherit - overflow: auto + overflow: hidden background-color: #49483e position: relative z-index: 1 + // &:hover + // overflow: auto + table border-collapse: collapse font-family: monospace .linenos - padding-left: 1% + padding-left: 8px pre margin-top: 5px @@ -414,7 +421,7 @@ td#code div#hidden-info width: $hiddenInfoWidth - margin-left: -$hiddenInfoWidth - 200px + margin-left: -$hiddenInfoWidth height: 100% padding-top: 40px font-size: 1.2em @@ -425,7 +432,7 @@ div#hidden-info @include vendor(transition, margin-left 0.2s ease-in-out) .display-all & - margin-left: 0px + margin-left: -$hiddenInfoWidth / 1.5 padding-left: 20px span