From a1304671f59884c68369c86c02331e7e38005b48 Mon Sep 17 00:00:00 2001 From: Benjamin Attal Date: Fri, 30 May 2014 10:13:42 -0400 Subject: [PATCH] Increase the width of the results. Show hidden info on hover instead of click. Move language to top of result. --- static/js/index.js | 17 +++-- static/sass/index.sass | 172 ++++++++++++++++++++++++++----------------------- 2 files changed, 103 insertions(+), 86 deletions(-) diff --git a/static/js/index.js b/static/js/index.js index 2d84791..a84c665 100644 --- a/static/js/index.js +++ b/static/js/index.js @@ -32,7 +32,7 @@ searchBar.onkeyup = typingTimer; var testCodelet = { 'code_url': 'https://github.com/earwig/bitshift/blob/develop/app.py', 'filename': 'app.py', - 'language': 'Python', + 'language': 'python', 'date_created': 'May 10, 2014', 'date_modified': '2 days ago', 'origin': ['GitHub', 'https://github.com', ''], @@ -168,9 +168,9 @@ function createResult(codelet) { title.innerHTML = 'File ' + codelet.filename + ''; site.innerHTML = 'on ' + codelet.origin[0] +''; + language.innerHTML = codelet.language; dateModified.innerHTML = 'Last modified ' + codelet.date_modified; // Needs to be changed from int to string on the server - language.innerHTML = codelet.language; dateCreated.innerHTML = 'Created ' + codelet.date_created; authors.innerHTML = 'Authors: '; $.each(codelet.authors, function(i, a) { @@ -182,16 +182,20 @@ function createResult(codelet) { codeElt.innerHTML = '
' + codelet.html_code + '
'; //Event binding - $(displayButton).click(function(e) { - $(hiddenInfo).toggleClass('visible'); - $(this).toggleClass('active'); + $(displayButton).hover(function(e) { + $(row).addClass('display-all'); + }); + + $(newDiv).on('transitionend', function(e) { + $(newDiv).one('mouseleave', function(e) { + $(row).removeClass('display-all'); + }); }); //Finish and append elements to parent elements hiddenInfo.appendChild(dateCreated); hiddenInfo.appendChild(dateModified); hiddenInfo.appendChild(authors); - hiddenInfo.appendChild(language); hiddenInfoContainer.appendChild(hiddenInfo); @@ -203,6 +207,7 @@ function createResult(codelet) { displayInfo.appendChild(title); displayInfo.appendChild(site); + displayInfo.appendChild(language); newDiv.appendChild(displayInfo); newDiv.appendChild(table); diff --git a/static/sass/index.sass b/static/sass/index.sass index 300df45..41acc19 100644 --- a/static/sass/index.sass +++ b/static/sass/index.sass @@ -6,9 +6,9 @@ @import variables $minSearchFieldsWidth: 490px -$resultWidth: 830px +$resultWidth: 1000px $sidebarWidth: 30px -$codeWidth: 500px +$codeWidth: 650px $hiddenInfoWidth: 250px .ui-datepicker @@ -296,27 +296,15 @@ div#results - Add an icon for the website. - Add language tag. 4) Code body - - Add highlighting.*/ + - Add highlighting. + 5) Display button + - unicode glyph */ div.result width: $resultWidth height: 200px margin-top: 2% - margin-bottom: 6% + margin-bottom: 10% - #display-info - font-size: 1.2em - - a - text-decoration: none - - &:hover - color: orange - - #title - margin-right: 10px - - #site - text-transform: capitalize table border-collapse: collapse @@ -324,74 +312,98 @@ div#results height: inherit tr - height: inherit - - #sidebar - width: $sidebarWidth - background-color: #eee - border-right: 1px solid $baseColor3 - height: inherit - - #code - width: $codeWidth - height: inherit - border-right: 1px solid $baseColor3 - - #tablecontainer - overflow: scroll - width: 100% - height: inherit - background-color: #49483e - - table - table-layout:fixed - border-collapse: collapse - border: none - font-family: monospace - - #display-button - width: 25px - background: url(http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/512/Image-Edition-Tools-Arrow-icon.png) - background-size: 25px 25px - background-repeat: no-repeat - background-position: center - - &:hover - background-color: #eee - - &.active - @include vendor(transform, rotateY(180deg)) - - #hidden-info - width: $hiddenInfoWidth - margin-left: -$hiddenInfoWidth - height: 100% - padding-top: 50px - text-align: center - font-size: 1em - line-height: 1.5em - @include vendor(transition, margin-left 0.2s ease-in-out) - &.visible - margin-left: 0px + height: inherit +div#display-info + font-size: 1.3em + padding: 5px 0px 5px 5px + border: 1px dotted $baseColor3 + border-bottom: none + width: 400px + + a + text-decoration: none - #date-created - display: inline-block + &:hover + color: orange + + #title + margin-right: 10px + + #site + text-transform: capitalize + + #language + font-size: 0.8em + font-weight: bold + 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 + +td#code + width: $codeWidth + height: inherit + border-right: 1px solid $baseColor3 + @include vendor(transition, width 0.2s ease-in-out) + + .display-all & + width: 500px + + #tablecontainer + overflow: scroll + width: 100% + height: inherit + background-color: #49483e - #date-modified - display: block + table + table-layout:fixed + border-collapse: collapse + 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 + height: 100% + padding-top: 40px + font-size: 1.2em + line-height: 1.5em + @include vendor(transition, margin-left 0.2s ease-in-out) + + .display-all & + margin-left: 0px + padding-left: 20px + + #date-created + display: inline-block - #language - display: inline-block - font-weight: bold - color: orange + #date-modified + display: block - #authors - a - text-decoration: none + #authors + a + text-decoration: none - &:hover - color: orange + &:hover + color: orange &.cascade @extend .t3