diff --git a/static/js/index.js b/static/js/index.js index a0771d0..b920b24 100644 --- a/static/js/index.js +++ b/static/js/index.js @@ -149,26 +149,22 @@ function createResult(codelet) { row = document.createElement("tr"); //Level 2 var displayInfo = document.createElement("div"), - sidebar = document.createElement("td"), codeElt = document.createElement("td"), - displayButton = document.createElement("td"), hiddenInfoContainer = document.createElement("td"), hiddenInfo = document.createElement("div"); //Level 3 var title = document.createElement("span"), site = document.createElement("span"), - dateModified = document.createElement("span"), + dateModified = document.createElement("div"), language = document.createElement("span"), - dateCreated = document.createElement("span"), + dateCreated = document.createElement("div"), authors = document.createElement("div"); //Classes and ID's newDiv.classList.add('result'); displayInfo.id = 'display-info'; - sidebar.id = 'sidebar'; codeElt.id = 'code'; - displayButton.id = 'display-button'; hiddenInfo.id = 'hidden-info'; title.id = 'title'; @@ -183,20 +179,24 @@ function createResult(codelet) { + codelet.filename + ''; site.innerHTML = 'on ' + codelet.origin[0] +''; language.innerHTML = codelet.language; - dateModified.innerHTML = 'Last modified ' + codelet.date_modified; + dateModified.innerHTML = 'Last modified: ' + codelet.date_modified + ''; // Needs to be changed from int to string on the server - dateCreated.innerHTML = 'Created ' + codelet.date_created; - authors.innerHTML = 'Authors: '; - $.each(codelet.authors, function(i, a) { - authors.innerHTML += '' + a + ' '; + dateCreated.innerHTML = 'Created: ' + codelet.date_created + ''; + + var authorsHtml = 'Authors: '; + codelet.authors.forEach(function(a, i) { + if (i == codelet.authors.length - 1) + authorsHtml += '' + a + ' '; + else + authorsHtml += '' + a + ' , '; }); + authors.innerHTML = authorsHtml; - sidebar.innerHTML = ''; // Needs to be processed on the server codeElt.innerHTML = '
' + codelet.html_code + '
'; //Event binding - $(displayButton).hover(function(e) { + $(newDiv).hover(function(e) { $(row).addClass('display-all'); }); @@ -213,10 +213,8 @@ function createResult(codelet) { hiddenInfoContainer.appendChild(hiddenInfo); - row.appendChild(sidebar); row.appendChild(codeElt); row.appendChild(hiddenInfoContainer); - row.appendChild(displayButton); table.appendChild(row); displayInfo.appendChild(title); diff --git a/static/sass/index.sass b/static/sass/index.sass index f526024..3039c40 100644 --- a/static/sass/index.sass +++ b/static/sass/index.sass @@ -7,7 +7,6 @@ $minSearchFieldsWidth: 490px $resultWidth: 1000px -$sidebarWidth: 30px $codeWidth: 650px $hiddenInfoWidth: 250px @@ -287,18 +286,12 @@ div#results width: 80% /* TODO: - 1) Sidebar - - Add way to cycle through hits in the code. - 2) Hidden info + 1) Hidden info - Add links for authors. - - Remove language field. - 3) Header - - Add an icon for the website. - - Add language tag. - 4) Code body + - Add language field. + 2) Code body - Add highlighting. - 5) Display button - - unicode glyph */ + - Add scrolling hits*/ div.result width: $resultWidth height: 200px @@ -306,7 +299,6 @@ div#results table border-collapse: collapse - border: 1px solid $baseColor3 height: inherit tr @@ -319,8 +311,6 @@ div#results div#display-info font-size: 1.3em padding: 5px 0px 5px 5px - border: 1px dotted $baseColor3 - border-bottom: none width: 400px a @@ -341,19 +331,12 @@ div#display-info margin-left: 100px padding: 3px @include vendor(border-radius, 2px) - background: #ddd - color: orange - -td#sidebar - width: $sidebarWidth - background-color: #eee - border-right: 1px solid $baseColor3 - height: inherit + background: #eee + color: #aaa td#code width: $codeWidth height: inherit - border-right: 1px solid $baseColor3 @include vendor(transition, width 0.2s ease-in-out) .display-all & @@ -371,19 +354,9 @@ td#code border: none font-family: monospace -td#display-button - width: 25px - background: url(https://cdn1.iconfinder.com/data/icons/windows-8-metro-style/512/View_Details-.png) - background-size: 25px 25px - background-repeat: no-repeat - background-position: center - - .display-all & - @include vendor(transform, rotateY(180deg)) - div#hidden-info width: $hiddenInfoWidth - margin-left: -$hiddenInfoWidth + margin-left: -$hiddenInfoWidth - 10px height: 100% padding-top: 40px font-size: 1.2em @@ -394,14 +367,21 @@ div#hidden-info margin-left: 0px padding-left: 20px + span + font-family: monospace + color: #5CADFF + float: right + #date-created - display: inline-block + display: block + #date-modified display: block #authors a + font-family: monospace text-decoration: none &:hover