Increase the width of the results. Show hidden info on hover instead of click. Move language to top of result.

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 <a href="' + codelet.code_url + '">'
                       + codelet.filename + '</a>';
     site.innerHTML = 'on <a href="' + codelet.origin[1] + '">' + codelet.origin[0] +'</a>';
+    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 = '<div id=tablecontainer>' + codelet.html_code + '</div>';
 
     //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);

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