@@ -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); | |||
@@ -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 |