@@ -32,7 +32,7 @@ searchBar.onkeyup = typingTimer; | |||||
var testCodelet = { | var testCodelet = { | ||||
'code_url': 'https://github.com/earwig/bitshift/blob/develop/app.py', | 'code_url': 'https://github.com/earwig/bitshift/blob/develop/app.py', | ||||
'filename': 'app.py', | 'filename': 'app.py', | ||||
'language': 'Python', | |||||
'language': 'python', | |||||
'date_created': 'May 10, 2014', | 'date_created': 'May 10, 2014', | ||||
'date_modified': '2 days ago', | 'date_modified': '2 days ago', | ||||
'origin': ['GitHub', 'https://github.com', ''], | 'origin': ['GitHub', 'https://github.com', ''], | ||||
@@ -168,9 +168,9 @@ function createResult(codelet) { | |||||
title.innerHTML = 'File <a href="' + codelet.code_url + '">' | title.innerHTML = 'File <a href="' + codelet.code_url + '">' | ||||
+ codelet.filename + '</a>'; | + codelet.filename + '</a>'; | ||||
site.innerHTML = 'on <a href="' + codelet.origin[1] + '">' + codelet.origin[0] +'</a>'; | site.innerHTML = 'on <a href="' + codelet.origin[1] + '">' + codelet.origin[0] +'</a>'; | ||||
language.innerHTML = codelet.language; | |||||
dateModified.innerHTML = 'Last modified ' + codelet.date_modified; | dateModified.innerHTML = 'Last modified ' + codelet.date_modified; | ||||
// Needs to be changed from int to string on the server | // Needs to be changed from int to string on the server | ||||
language.innerHTML = codelet.language; | |||||
dateCreated.innerHTML = 'Created ' + codelet.date_created; | dateCreated.innerHTML = 'Created ' + codelet.date_created; | ||||
authors.innerHTML = 'Authors: '; | authors.innerHTML = 'Authors: '; | ||||
$.each(codelet.authors, function(i, a) { | $.each(codelet.authors, function(i, a) { | ||||
@@ -182,16 +182,20 @@ function createResult(codelet) { | |||||
codeElt.innerHTML = '<div id=tablecontainer>' + codelet.html_code + '</div>'; | codeElt.innerHTML = '<div id=tablecontainer>' + codelet.html_code + '</div>'; | ||||
//Event binding | //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 | //Finish and append elements to parent elements | ||||
hiddenInfo.appendChild(dateCreated); | hiddenInfo.appendChild(dateCreated); | ||||
hiddenInfo.appendChild(dateModified); | hiddenInfo.appendChild(dateModified); | ||||
hiddenInfo.appendChild(authors); | hiddenInfo.appendChild(authors); | ||||
hiddenInfo.appendChild(language); | |||||
hiddenInfoContainer.appendChild(hiddenInfo); | hiddenInfoContainer.appendChild(hiddenInfo); | ||||
@@ -203,6 +207,7 @@ function createResult(codelet) { | |||||
displayInfo.appendChild(title); | displayInfo.appendChild(title); | ||||
displayInfo.appendChild(site); | displayInfo.appendChild(site); | ||||
displayInfo.appendChild(language); | |||||
newDiv.appendChild(displayInfo); | newDiv.appendChild(displayInfo); | ||||
newDiv.appendChild(table); | newDiv.appendChild(table); | ||||
@@ -6,9 +6,9 @@ | |||||
@import variables | @import variables | ||||
$minSearchFieldsWidth: 490px | $minSearchFieldsWidth: 490px | ||||
$resultWidth: 830px | |||||
$resultWidth: 1000px | |||||
$sidebarWidth: 30px | $sidebarWidth: 30px | ||||
$codeWidth: 500px | |||||
$codeWidth: 650px | |||||
$hiddenInfoWidth: 250px | $hiddenInfoWidth: 250px | ||||
.ui-datepicker | .ui-datepicker | ||||
@@ -296,27 +296,15 @@ div#results | |||||
- Add an icon for the website. | - Add an icon for the website. | ||||
- Add language tag. | - Add language tag. | ||||
4) Code body | 4) Code body | ||||
- Add highlighting.*/ | |||||
- Add highlighting. | |||||
5) Display button | |||||
- unicode glyph */ | |||||
div.result | div.result | ||||
width: $resultWidth | width: $resultWidth | ||||
height: 200px | height: 200px | ||||
margin-top: 2% | 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 | table | ||||
border-collapse: collapse | border-collapse: collapse | ||||
@@ -324,74 +312,98 @@ div#results | |||||
height: inherit | height: inherit | ||||
tr | 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 | &.cascade | ||||
@extend .t3 | @extend .t3 |