Browse Source

Results styling

tags/v1.0^2
Benjamin Attal 10 years ago
parent
commit
6edb6d754c
3 changed files with 22 additions and 10 deletions
  1. +2
    -5
      static/js/index.js
  2. +19
    -4
      static/sass/index.sass
  3. +1
    -1
      templates/index.html

+ 2
- 5
static/js/index.js View File

@@ -44,6 +44,7 @@ var testCodelet = {
[17, -1, 17, -1] ]] [17, -1, 17, -1] ]]
] ]
}, },
'origin': ['GitHub', 'https://github.com', ''],
'authors': ['sevko', 'earwig'], 'authors': ['sevko', 'earwig'],
'html_code': codeExample 'html_code': codeExample
}; };
@@ -172,12 +173,9 @@ function createResult(codelet) {
authors.id = 'authors'; authors.id = 'authors';


//Add the bulk of the html //Add the bulk of the html
var hostUrl = codelet.code_url.match(/htt(p|ps):\/\/\w+\.\w+/)[0],
hostName = hostUrl.split('://')[1].split('.')[0];

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="' + hostUrl + '">' + hostName +'</a>';
site.innerHTML = 'on <a href="' + codelet.origin[1] + '">' + codelet.origin[0] +'</a>';
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; language.innerHTML = codelet.language;
@@ -205,7 +203,6 @@ function createResult(codelet) {


displayInfo.appendChild(title); displayInfo.appendChild(title);
displayInfo.appendChild(site); displayInfo.appendChild(site);
displayInfo.appendChild(dateModified);


hiddenInfo.appendChild(dateCreated); hiddenInfo.appendChild(dateCreated);
hiddenInfo.appendChild(language); hiddenInfo.appendChild(language);


+ 19
- 4
static/sass/index.sass View File

@@ -287,8 +287,22 @@ div#results
width: 80% width: 80%


/* TODO: /* TODO:
1) On the side
- add way to cycle through hits in the code.*/
1) Sidebar
- 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 div.result
width: $resultWidth width: $resultWidth
height: 200px height: 200px
@@ -309,8 +323,8 @@ div#results
text-transform: capitalize text-transform: capitalize


#date-modified #date-modified
font-family: monospace
color: #333
font-style: italic
color: #777
display: block display: block


table table
@@ -351,6 +365,7 @@ div#results
width: $hiddenInfoWidth width: $hiddenInfoWidth
text-align: center text-align: center
font-size: 1.2em font-size: 1.2em
font-family: monospace


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


+ 1
- 1
templates/index.html View File

@@ -9,9 +9,9 @@
{{ assets.tag("lib/jquery.min.js") }} {{ assets.tag("lib/jquery.min.js") }}
{{ assets.tag("lib/jquery-ui.min.js") }} {{ assets.tag("lib/jquery-ui.min.js") }}
{{ assets.tag("lib/typeahead.bundle.min.js") }} {{ assets.tag("lib/typeahead.bundle.min.js") }}
{{ assets.tag("lib/highlight.css") }}


{{ assets.tag("index.css") }} {{ assets.tag("index.css") }}
{{ assets.tag("highlight.css") }}


<script> <script>
AUTOCOMPLETE_LANGUAGES = {{ autocomplete_languages | safe }}; AUTOCOMPLETE_LANGUAGES = {{ autocomplete_languages | safe }};


Loading…
Cancel
Save