Browse Source

Remove sidebar, display button. Change styling for results.

tags/v1.0^2
Benjamin Attal 10 years ago
parent
commit
c65e738a88
2 changed files with 28 additions and 50 deletions
  1. +13
    -15
      static/js/index.js
  2. +15
    -35
      static/sass/index.sass

+ 13
- 15
static/js/index.js View File

@@ -149,26 +149,22 @@ function createResult(codelet) {
row = document.createElement("tr");
//Level 2
var displayInfo = document.createElement("div"),
sidebar = document.createElement("td"),
codeElt = 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"),
dateModified = document.createElement("div"),
language = document.createElement("span"),
dateCreated = document.createElement("span"),
dateCreated = document.createElement("div"),
authors = document.createElement("div");

//Classes and ID's
newDiv.classList.add('result');

displayInfo.id = 'display-info';
sidebar.id = 'sidebar';
codeElt.id = 'code';
displayButton.id = 'display-button';
hiddenInfo.id = 'hidden-info';

title.id = 'title';
@@ -183,20 +179,24 @@ function createResult(codelet) {
+ 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;
dateModified.innerHTML = 'Last modified: <span>' + codelet.date_modified + '</span>';
// Needs to be changed from int to string on the server
dateCreated.innerHTML = 'Created ' + codelet.date_created;
authors.innerHTML = 'Authors: ';
$.each(codelet.authors, function(i, a) {
authors.innerHTML += '<a href=#>' + a + ' </a>';
dateCreated.innerHTML = 'Created: <span>' + codelet.date_created + '</span>';

var authorsHtml = 'Authors: <span>';
codelet.authors.forEach(function(a, i) {
if (i == codelet.authors.length - 1)
authorsHtml += '<a href=#>' + a + ' </a>';
else
authorsHtml += '<a href=#>' + a + ' </a>, ';
});
authors.innerHTML = authorsHtml;

sidebar.innerHTML = '';
// Needs to be processed on the server
codeElt.innerHTML = '<div id=tablecontainer>' + codelet.html_code + '</div>';

//Event binding
$(displayButton).hover(function(e) {
$(newDiv).hover(function(e) {
$(row).addClass('display-all');
});

@@ -213,10 +213,8 @@ function createResult(codelet) {

hiddenInfoContainer.appendChild(hiddenInfo);

row.appendChild(sidebar);
row.appendChild(codeElt);
row.appendChild(hiddenInfoContainer);
row.appendChild(displayButton);
table.appendChild(row);

displayInfo.appendChild(title);


+ 15
- 35
static/sass/index.sass View File

@@ -7,7 +7,6 @@

$minSearchFieldsWidth: 490px
$resultWidth: 1000px
$sidebarWidth: 30px
$codeWidth: 650px
$hiddenInfoWidth: 250px

@@ -287,18 +286,12 @@ div#results
width: 80%

/* TODO:
1) Sidebar
- Add way to cycle through hits in the code.
2) Hidden info
1) Hidden info
- Add links for authors.
- Remove language field.
3) Header
- Add an icon for the website.
- Add language tag.
4) Code body
- Add language field.
2) Code body
- Add highlighting.
5) Display button
- unicode glyph */
- Add scrolling hits*/
div.result
width: $resultWidth
height: 200px
@@ -306,7 +299,6 @@ div#results

table
border-collapse: collapse
border: 1px solid $baseColor3
height: inherit

tr
@@ -319,8 +311,6 @@ div#results
div#display-info
font-size: 1.3em
padding: 5px 0px 5px 5px
border: 1px dotted $baseColor3
border-bottom: none
width: 400px

a
@@ -341,19 +331,12 @@ div#display-info
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
background: #eee
color: #aaa

td#code
width: $codeWidth
height: inherit
border-right: 1px solid $baseColor3
@include vendor(transition, width 0.2s ease-in-out)

.display-all &
@@ -371,19 +354,9 @@ td#code
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
margin-left: -$hiddenInfoWidth - 10px
height: 100%
padding-top: 40px
font-size: 1.2em
@@ -394,14 +367,21 @@ div#hidden-info
margin-left: 0px
padding-left: 20px

span
font-family: monospace
color: #5CADFF
float: right

#date-created
display: inline-block
display: block


#date-modified
display: block

#authors
a
font-family: monospace
text-decoration: none

&:hover


Loading…
Cancel
Save