Bladeren bron

Add slide effect to hidden information.

tags/v1.0^2
Benjamin Attal 10 jaren geleden
bovenliggende
commit
fa148237c5
2 gewijzigde bestanden met toevoegingen van 53 en 55 verwijderingen
  1. +20
    -25
      static/js/index.js
  2. +33
    -30
      static/sass/index.sass

+ 20
- 25
static/js/index.js Bestand weergeven

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



+ 33
- 30
static/sass/index.sass Bestand weergeven

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

Laden…
Annuleren
Opslaan