Nemcio/Fancy-index
1
0
Fork 0
mirror of https://github.com/Vestride/fancy-index.git synced 2026-07-16 18:41:27 +02:00
Code Issues Packages Projects Releases Activity

Add view boxes to SVGs. Fix date parsing for other browsers.

Browse Source
This commit is contained in:
Glen Cheney
2014-12-09 13:52:21 -08:00
parent f6fa0ee6b6
commit 13f92f7dea
19 changed files with 41 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
icons/code.svg
View File

@@ -1,3 +1,3 @@
<svg height="1024" width="896" xmlns="http://www.w3.org/2000/svg">
<svg height="1024" width="896" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 896 1024">
<path d="M608 192l-96 96 224 224L512 736l96 96 288-320L608 192zM288 192L0 512l288 320 96-96L160 512l224-224L288 192z" />
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 197 B

After

Width:  |  Height:  |  Size: 220 B

2
icons/file-binary.svg
View File

@@ -1,3 +1,3 @@
<svg height="1024" width="768" xmlns="http://www.w3.org/2000/svg">
<svg height="1024" width="768" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 768 1024">
<path fill="#34495e" d="M0 960V64h576l192 192v704H0zM704 320L512 128H64v768h640V320zM320 512H128V256h192V512zM256 320h-64v128h64V320zM256 768h64v64H128v-64h64V640h-64v-64h128V768zM512 448h64v64H384v-64h64V320h-64v-64h128V448zM576 832H384V576h192V832zM512 640h-64v128h64V640z" />
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 355 B

After

Width:  |  Height:  |  Size: 378 B

2
icons/file-code.svg
View File

@@ -1,3 +1,3 @@
<svg height="1024" width="768" xmlns="http://www.w3.org/2000/svg">
<svg height="1024" width="768" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 768 1024">
<path fill="#34495e" d="M288 384L128 544l160 160 64-64-96-96 96-96L288 384zM416 448l96 96-96 96 64 64 160-160L480 384 416 448zM576 64H0v896h768V256L576 64zM704 896H64V128h448l192 192V896z" />
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 268 B

After

Width:  |  Height:  |  Size: 291 B

2
icons/file-directory.svg
View File

@@ -1,3 +1,3 @@
<svg height="1024" width="896" xmlns="http://www.w3.org/2000/svg">
<svg height="1024" width="896" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 896 1024">
<path fill="#34495e" d="M832 192c-32 0-336 0-352 0s-32-16-32-32 0 0 0-32-32-64-64-64-288 0-320 0-64 32-64 64 0 704 0 704h896s0-544 0-576-32-64-64-64z m-448 0h-320s0-15 0-32 16-32 32-32 241 0 256 0 32 15 32 32 0 32 0 32z" />
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 300 B

After

Width:  |  Height:  |  Size: 323 B

2
icons/file-media.svg
View File

@@ -1,3 +1,3 @@
<svg height="1024" width="768" xmlns="http://www.w3.org/2000/svg">
<svg height="1024" width="768" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 768 1024">
<path fill="#34495e" d="M576 64H0v896h768V256L576 64zM704 896H64V128h448l192 192V896zM128 256v512h128c0-70.625 57.344-128 128-128-70.656 0-128-57.375-128-128 0-70.656 57.344-128 128-128 70.625 0 128 57.344 128 128 0 70.625-57.375 128-128 128 70.625 0 128 57.375 128 128h128V384L512 256H128z" />
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 371 B

After

Width:  |  Height:  |  Size: 394 B

2
icons/file-pdf.svg
View File

@@ -1,3 +1,3 @@
<svg height="1024" width="768" xmlns="http://www.w3.org/2000/svg">
<svg height="1024" width="768" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 768 1024">
<path fill="#34495e" d="M576 64H0v896h768V256L576 64zM64 128h255.812c-13.188 4.094-27.281 15.031-34.625 42.875-13.25 49.406-7.031 130.75 15.625 209.344C276.688 461.438 178.188 656.875 171.531 668.5c-15.625 4.875-65.344 23.625-107.531 59.812V128zM347.125 435.469c57.625 149.781 95 149.531 135.188 167.594C398.344 616 334.219 625.25 249.781 662.5 246.094 668.938 326.281 516.594 347.125 435.469zM704 896H65.844 64v-0.375c0.781 0.062 1.094 0.375 1.844 0.375 33.812 0 84.75-21 180.562-182.375 38.188-15.438 72.062-26.875 78.469-28.938 58.812-14.875 125-26.625 187.562-33.375C566.875 678.5 639.125 697 680.25 699.625c9.625 0.5 16.062-1.188 23.75-2V896zM704 585.375c-23.688-14.688-54-25-89.125-25-24.25 0-50.625 1.375-78.688 4.375-26.938-13-92.562-32.719-147.188-190.219 17.094-103.625 12.719-173.562 12.719-173.562 6.781-52.938-23.344-72.844-51.625-72.844 0 0-0.279-0.125-0.344-0.125H512l192 192V585.375z" />
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 980 B

After

Width:  |  Height:  |  Size: 1003 B

2
icons/file-text.svg
View File

@@ -1,3 +1,3 @@
<svg height="1024" width="768" xmlns="http://www.w3.org/2000/svg">
<svg height="1024" width="768" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 768 1024">
<path fill="#34495e" d="M448 256H128v64h320V256zM576 64H0v896h768V256L576 64zM704 896H64V128h448l192 192V896zM128 768h512v-64H128V768zM128 640h512v-64H128V640zM128 512h512v-64H128V512z" />
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 265 B

After

Width:  |  Height:  |  Size: 288 B

2
icons/file-zip.svg
View File

@@ -1,3 +1,3 @@
<svg height="1024" width="768" xmlns="http://www.w3.org/2000/svg">
<svg height="1024" width="768" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 768 1024">
<path fill="#34495e" d="M320 576v-64h-64v64H320zM320 448v-64h-64v64H320zM320 320v-64h-64v64H320zM192 384h64v-64h-64V384zM576 64H0v896h768V256L576 64zM704 896H64V128h192v64h64v-64h192l192 192V896zM192 256h64v-64h-64V256zM192 512h64v-64h-64V512zM192 640l-64 64v128h256V704l-64-64h-64v-64h-64V640zM320 704v64H192v-64H320z" />
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 399 B

After

Width:  |  Height:  |  Size: 422 B

BIN
icons/file_type_coffescript.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 15 KiB

BIN
icons/file_type_html.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 15 KiB

2
icons/gear.svg
View File

@@ -1,3 +1,3 @@
<svg height="1024" width="896" xmlns="http://www.w3.org/2000/svg">
<svg height="1024" width="896" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 896 1024">
<path fill="#34495e" d="M447.938 350C358.531 350 286 422.531 286 512c0 89.375 72.531 162.062 161.938 162.062 89.438 0 161.438-72.688 161.438-162.062C609.375 422.531 537.375 350 447.938 350zM772.625 605.062l-29.188 70.312 52.062 102.25 6.875 13.5-72.188 72.188L611.75 807.375l-70.312 28.875L505.75 945.5l-4.562 14.5H399.156L355 836.688l-70.312-29-102.404 51.938-13.5 6.75-72.156-72.125 55.875-118.5-28.969-70.25L14.469 569.875 0 565.188V463.219L123.406 419l28.969-70.188-51.906-102.469-6.844-13.438 72.062-72.062 118.594 55.844 70.219-29.031 35.656-109.188L394.75 64h102l44.188 123.469 70.125 29.031L713.5 164.53099999999995l13.625-6.844 72.125 72.062-55.875 118.406L772.25 418.5l109.375 35.656L896 458.75v101.938L772.625 605.062z" />
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 810 B

After

Width:  |  Height:  |  Size: 833 B

2
icons/html.svg
View File

@@ -1,3 +1,3 @@
<svg height="1024" width="896" xmlns="http://www.w3.org/2000/svg">
<svg height="1024" width="896" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 896 1024">
<path fill="#e74c3c" d="M608 192l-96 96 224 224L512 736l96 96 288-320L608 192zM288 192L0 512l288 320 96-96L160 512l224-224L288 192z" />
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 212 B

After

Width:  |  Height:  |  Size: 235 B

3
icons/info.svg
View File

@@ -1,3 +0,0 @@
<svg height="1024" width="896" xmlns="http://www.w3.org/2000/svg">
<path d="M448 384c35 0 64-29 64-64s-29-64-64-64-64 29-64 64 29 64 64 64z m0-320c-247 0-448 201-448 448s201 448 448 448 448-201 448-448-201-448-448-448z m0 768c-177 0-320-143-320-320s143-320 320-320 320 143 320 320-143 320-320 320z m64-320c0-32-32-64-64-64s-32 0-64 0-64 32-64 64h64s0 160 0 192 32 64 64 64 32 0 64 0 64-32 64-64h-64s0-160 0-192z" />
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 425 B

2
icons/markdown.svg
View File

@@ -1,3 +1,3 @@
<svg height="1024" width="1024" xmlns="http://www.w3.org/2000/svg">
<svg height="1024" width="1024" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
<path d="M950.154 192H73.846C33.127 192 0 225.12699999999995 0 265.846v492.308C0 798.875 33.127 832 73.846 832h876.308c40.721 0 73.846-33.125 73.846-73.846V265.846C1024 225.12699999999995 990.875 192 950.154 192zM576 703.875L448 704V512l-96 123.077L256 512v192H128V320h128l96 128 96-128 128-0.125V703.875zM767.091 735.875L608 512h96V320h128v192h96L767.091 735.875z" />
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 446 B

After

Width:  |  Height:  |  Size: 470 B

2
icons/npm.svg
View File

@@ -11,7 +11,7 @@
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="233"
height="91"
id="svg2"
viewBox="0 0 233 91"
version="1.1"
inkscape:version="0.48.1 r9760"
sodipodi:docname="npm.svg">
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

2
icons/ruby.svg
View File

@@ -1,3 +1,3 @@
<svg height="1024" width="1024" xmlns="http://www.w3.org/2000/svg">
<svg height="1024" width="1024" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
<path fill="#CC342D" d="M768 128H256L0 384l512 512 512-512L768 128zM128 384l192-192h384l192 192L512 768 128 384zM704 256H512v448l320-320L704 256z" />
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 227 B

After

Width:  |  Height:  |  Size: 251 B

2
icons/xml.svg
View File

@@ -1,3 +1,3 @@
<svg height="1024" width="896" xmlns="http://www.w3.org/2000/svg">
<svg height="1024" width="896" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 896 1024">
<path fill="#bada55" d="M608 192l-96 96 224 224L512 736l96 96 288-320L608 192zM288 192L0 512l288 320 96-96L160 512l224-224L288 192z" />
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 212 B

After

Width:  |  Height:  |  Size: 235 B

18
script.js
View File

@@ -24,11 +24,15 @@ void(function() {
thead.appendChild(firstRow);
table.insertBefore(thead, table.firstElementChild);
// Remove the first column and put the image in the next.
var rows = toArray(table.querySelectorAll('tr'));
rows.forEach(function(row) {
var div = document.createElement('div');
div.className = 'img-wrap';
var first = row.removeChild(row.firstElementChild).firstElementChild;
div.appendChild(first);
var filename = row.firstElementChild;
filename.insertBefore(first, filename.firstElementChild);
filename.insertBefore(div, filename.firstElementChild);
});
// Swap special images.
@@ -132,7 +136,17 @@ void(function() {
var stamp = date.textContent.trim();
if (!stamp || i === 0) return;
var time = new Date(stamp);
// 2014-12-09 10:43 -> 2014, 11, 09, 10, 43, 0.
var parts = stamp.split(' ');
var day = parts[0].split('-');
var timeOfDay = parts[1].split(':');
var year = parseInt(day[0], 10);
var month = parseInt(day[1], 10) - 1;
var _day = parseInt(day[2], 10);
var hour = parseInt(timeOfDay[0], 10);
var minutes = parseInt(timeOfDay[1], 10);
var time = new Date(year, month, _day, hour, minutes, 0);
var difference = Math.round((now.getTime() - time.getTime()) / 1000);
date.textContent = getTimeSince(difference) + ' ago';
});

12
style.css
View File

@@ -61,16 +61,26 @@ a {
text-decoration: none;
color: #3498db;
}
a:hover {
text-decoration: underline;
}
a:visited {
color: #8e44ad;
}
td img {
.img-wrap {
vertical-align: middle;
display: inline-block;
margin-right: 8px;
margin-bottom: 2px;
width: 16px;
}
td img {
display: block;
width: 100%;
height: auto;
}