Add slide effect to hidden information.

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 += '<span>' + s[0] + '</span>';
-        });
-    });
     authors.innerHTML = 'Authors: ';
     $.each(codelet.authors, function(i, a) {
-        authors.innerHTML += '<span>' + a + '; </span>';
+        authors.innerHTML += '<a href=#>' + a + '; </a>';
     });
 
     sidebar.innerHTML = '';
     // Needs to be processed on the server
     codeElt.innerHTML = '<div id=tablecontainer>' + codelet.html_code + '</div>';
 
+    //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);
 

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