diff --git a/app/components/directory-listing/template.hbs b/app/components/directory-listing/template.hbs
index 7a989e4..4082723 100644
--- a/app/components/directory-listing/template.hbs
+++ b/app/components/directory-listing/template.hbs
@@ -5,6 +5,7 @@
{{#link-to "index" (query-params path=item.path)}}
{{item-icon type=item.type}}
{{item.name}}
+
{{item.type}}
{{/link-to}}
{{else}}
@@ -12,6 +13,7 @@
{{#link-to "index"}}
{{item-icon type=item.type}}
{{item.name}}
+ {{human-file-size item.size}}
{{item.type}}
{{/link-to}}
{{/if}}
diff --git a/app/helpers/human-file-size.js b/app/helpers/human-file-size.js
new file mode 100644
index 0000000..cf7c818
--- /dev/null
+++ b/app/helpers/human-file-size.js
@@ -0,0 +1,16 @@
+import { helper } from '@ember/component/helper';
+
+export default helper(function(fileSizeInBytes/*, options*/) {
+ if (fileSizeInBytes < 1024) {
+ return `${fileSizeInBytes} bytes`;
+ }
+
+ var i = -1;
+ var byteUnits = ['KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+ do {
+ fileSizeInBytes = fileSizeInBytes / 1024;
+ i++;
+ } while (fileSizeInBytes > 1024);
+
+ return String(Math.max(fileSizeInBytes, 0.1).toFixed(1) + ' ' +byteUnits[i]);
+});
diff --git a/app/styles/_layout.scss b/app/styles/_layout.scss
index 408bd26..436d3be 100644
--- a/app/styles/_layout.scss
+++ b/app/styles/_layout.scss
@@ -4,8 +4,8 @@
#remotestorage-widget {
position: fixed;
- right: 1rem;
- top: 0.5rem;
+ top: 1rem;
+ right: 3rem;
z-index: 1;
}
diff --git a/app/styles/components/_directory-listing.scss b/app/styles/components/_directory-listing.scss
index 17c2660..cf36a29 100644
--- a/app/styles/components/_directory-listing.scss
+++ b/app/styles/components/_directory-listing.scss
@@ -41,8 +41,14 @@
&.name {
width: 60%;
}
+ &.size {
+ width: 10%;
+ white-space: nowrap;
+ color: $dark-grey-3;
+ }
&.type {
- width: 37%;
+ width: 27%;
+ white-space: nowrap;
color: $dark-grey-3;
}
}