Make listings look better

Test out build
This commit is contained in:
chrisgarrity 2017-06-09 14:44:58 -04:00
parent bd7d02cc6e
commit f74ea9a247
5 changed files with 51 additions and 19 deletions

BIN
resources/folder.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

View file

@ -2,19 +2,36 @@
<html>
<head>
<title>S3 Bucket Listing Generator</title>
<link rel="stylesheet" type="text/css" href="resources.css">
</head>
<body>
<div id="navigation"></div>
<div id="listing"></div>
<table>
<thead>
<tr>
<th>
Name
</th>
<th>
Size
</th>
<th>
Last Modified
</th>
</tr>
</thead>
<tbody id="listing"></tbody>
</table>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
var S3BL_IGNORE_PATH = true;
var BUCKET_NAME = 'scratch-resources';
// var BUCKET_URL = 'https://BUCKET.s3.amazonaws.com';
// var S3B_ROOT_DIR = 'SUBDIR_L1/SUBDIR_L2/';
// var S3B_SORT = 'DEFAULT';
// var EXCLUDE_FILE = 'index.html';
var S3B_ROOT_DIR = 'source/';
// var S3B_SORT = 'A2Z';
var EXCLUDE_FILE = '.DS_Store';
// var AUTO_TITLE = true;
// var S3_REGION = 's3'; // for us-east-1
</script>

View file

@ -59,7 +59,7 @@ function getS3Data(marker, html) {
var s3_rest_url = createS3QueryUrl(marker);
// set loading notice
$('#listing')
.html('<img src="//assets.okfn.org/images/icons/ajaxload-circle.gif" />');
.html('<img src="loading.gif" />');
$.get(s3_rest_url)
.done(function(data) {
// clear loading notice
@ -84,8 +84,7 @@ function getS3Data(marker, html) {
if (info.nextMarker != "null") {
getS3Data(info.nextMarker, html);
} else {
document.getElementById('listing').innerHTML =
'<pre>' + html + '</pre>';
document.getElementById('listing').innerHTML = html;
}
})
.fail(function(error) {
@ -198,12 +197,7 @@ function getInfoFromS3Data(xml) {
// }
function prepareTable(info) {
var files = info.files.concat(info.directories), prefix = info.prefix;
var cols = [45, 30, 15];
var content = [];
content.push(padRight('Last Modified', cols[1]) + ' ' +
padRight('Size', cols[2]) + 'Key \n');
content.push(new Array(cols[0] + cols[1] + cols[2] + 4).join('-') + '\n');
// add ../ at the start of the dir listing, unless we are already at root dir
if (prefix && prefix !== S3B_ROOT_DIR) {
var up = prefix.replace(/\/$/, '').split('/').slice(0, -1).concat('').join(
@ -216,7 +210,7 @@ function prepareTable(info) {
keyText: '../',
href: S3BL_IGNORE_PATH ? '?prefix=' + up : '../'
},
row = renderRow(item, cols);
row = renderRow(item);
content.push(row + '\n');
}
@ -234,7 +228,7 @@ function prepareTable(info) {
item.href = BUCKET_WEBSITE_URL + '/' + encodeURIComponent(item.Key);
item.href = item.href.replace(/%2F/g, '/');
}
var row = renderRow(item, cols);
var row = renderRow(item);
if (typeof EXCLUDE_FILE == 'undefined' || EXCLUDE_FILE != item.Key)
content.push(row + '\n');
});
@ -242,11 +236,20 @@ function prepareTable(info) {
return content.join('');
}
function renderRow(item, cols) {
var row = '';
row += padRight(item.LastModified, cols[1]) + ' ';
row += padRight(item.Size, cols[2]);
row += '<a href="' + item.href + '">' + item.keyText + '</a>';
function renderRow(item) {
var row = '<tr>';
if (item.Type == 'directory') {
row += '<td><img src="folder.png" /></td>';
} else {
row += '<td></td>';
}
row += '<td><a href="' + item.href + '">' + item.keyText + '</a></td>';
if (item.Type == 'directory') {
row += '<td></td>';
} else {
row += '<td>' + item.Size + '</td>';
}
row += '<td>' + item.LastModified + '</td></tr>\n';
return row;
}

BIN
resources/loading.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 47 KiB

12
resources/resources.css Normal file
View file

@ -0,0 +1,12 @@
body {
color: hsla(0, 0, 42, 1); //#6B6B6B
font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
font-size: 1rem;
font-weight: 300;
}
a {text-decoration: none;}
#listing img {
max-height: 1.5rem;
}