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