From fa148237c578d563d2f24624566945e085d88453 Mon Sep 17 00:00:00 2001 From: Benjamin Attal Date: Wed, 28 May 2014 23:34:39 -0400 Subject: [PATCH] Add slide effect to hidden information. --- static/js/index.js | 45 ++++++++++++++++-------------------- static/sass/index.sass | 63 ++++++++++++++++++++++++++------------------------ 2 files changed, 53 insertions(+), 55 deletions(-) diff --git a/static/js/index.js b/static/js/index.js index f5c19b0..f337054 100644 --- a/static/js/index.js +++ b/static/js/index.js @@ -35,15 +35,6 @@ var testCodelet = { 'language': 'Python', 'date_created': 'May 10, 2014', 'date_modified': '2 days ago', - 'symbols': { - 'vars': [ - ['app', [ [12, -1, 12, -1] ], - [ [13, -1, 13, -1], - [15, -1, 15, -1], - [16, -1, 16, -1], - [17, -1, 17, -1] ]] - ] - }, 'origin': ['GitHub', 'https://github.com', ''], 'authors': ['sevko', 'earwig'], 'html_code': codeExample @@ -146,14 +137,15 @@ function createResult(codelet) { var displayInfo = document.createElement("div"), sidebar = document.createElement("td"), codeElt = document.createElement("td"), - hiddenInfo = 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"), language = document.createElement("span"), dateCreated = document.createElement("span"), - matches = document.createElement("div"), authors = document.createElement("div"); //Classes and ID's @@ -162,6 +154,7 @@ function createResult(codelet) { displayInfo.id = 'display-info'; sidebar.id = 'sidebar'; codeElt.id = 'code'; + displayButton.id = 'display-button'; hiddenInfo.id = 'hidden-info'; title.id = 'title'; @@ -169,7 +162,6 @@ function createResult(codelet) { dateModified.id = 'date-modified'; language.id = 'language'; dateCreated.id = 'date-created'; - matches.id = 'matches'; authors.id = 'authors'; //Add the bulk of the html @@ -180,35 +172,38 @@ function createResult(codelet) { // Needs to be changed from int to string on the server language.innerHTML = codelet.language; dateCreated.innerHTML = 'Created ' + codelet.date_created; - matches.innerHTML = 'Symbol matches: '; - $.each(Object.keys(codelet.symbols), function(i, t) { - $.each(codelet.symbols[t], function(i, s) { - matches.innerHTML += '' + s[0] + ''; - }); - }); authors.innerHTML = 'Authors: '; $.each(codelet.authors, function(i, a) { - authors.innerHTML += '' + a + '; '; + authors.innerHTML += '' + a + '; '; }); sidebar.innerHTML = ''; // Needs to be processed on the server codeElt.innerHTML = '
' + codelet.html_code + '
'; + //Event binding + $(displayButton).click(function(e) { + $(hiddenInfo).toggleClass('visible'); + $(this).toggleClass('active'); + }); + //Finish and append elements to parent elements + hiddenInfo.appendChild(dateCreated); + hiddenInfo.appendChild(dateModified); + hiddenInfo.appendChild(authors); + hiddenInfo.appendChild(language); + + hiddenInfoContainer.appendChild(hiddenInfo); + row.appendChild(sidebar); row.appendChild(codeElt); - row.appendChild(hiddenInfo); + row.appendChild(hiddenInfoContainer); + row.appendChild(displayButton); table.appendChild(row); displayInfo.appendChild(title); displayInfo.appendChild(site); - hiddenInfo.appendChild(dateCreated); - hiddenInfo.appendChild(language); - hiddenInfo.appendChild(matches); - hiddenInfo.appendChild(authors); - newDiv.appendChild(displayInfo); newDiv.appendChild(table); diff --git a/static/sass/index.sass b/static/sass/index.sass index 8f0e90e..8656178 100644 --- a/static/sass/index.sass +++ b/static/sass/index.sass @@ -9,7 +9,7 @@ $minSearchFieldsWidth: 490px $resultWidth: 830px $sidebarWidth: 30px $codeWidth: 500px -$hiddenInfoWidth: 300px +$hiddenInfoWidth: 250px .ui-datepicker font-size: 70% @@ -291,16 +291,9 @@ div#results - Add way to cycle through hits in the code. 2) Hidden info - Use effect to make it transition into view. - - Add date modified. - - Get rid of symbols matches. - - Don't use monospace. - Add links for authors. - - Cross out search terms based on what's in the codelet. 3) Header - - Remove date modified. - - Make the title bigger. - Add an icon for the website. - - Change the spacing. 4) Code body - Add highlighting.*/ div.result @@ -310,6 +303,8 @@ div#results margin-bottom: 6% #display-info + font-size: 1.2em + a text-decoration: none @@ -317,16 +312,11 @@ div#results color: orange #title - margin-right: 50px + margin-right: 10px #site text-transform: capitalize - #date-modified - font-style: italic - color: #777 - display: block - table border-collapse: collapse border: 1px solid #ccc @@ -335,9 +325,6 @@ div#results tr height: inherit - td - overflow: scroll - #sidebar width: $sidebarWidth background-color: #eee @@ -361,33 +348,49 @@ div#results 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: 25px text-align: center font-size: 1.2em - font-family: monospace + line-height: 1.5em + @include vendor(transition, margin-left 0.2s ease-in-out) + + &.visible + margin-left: 0px #date-created + display: inline-block + + #date-modified display: block #language display: inline-block - padding: 3px - @include vendor(border-radius, 3px) - background-color: #eee font-weight: bold color: purple - &:hover - background-color: #ddd - - #matches - span - color: red - #authors - span - color: red + a + text-decoration: none + + &:hover + color: orange &.cascade @extend .t3