Update to bootstrap 4.0.0

.gitignore

@@ -0,0 +1 @@
+node_modules/

assets/list.css

@@ -0,0 +1,4 @@
+.name {
+	overflow: hidden;
+    word-wrap: break-word;
+}

assets/multi.js

@@ -4,21 +4,27 @@ $(document).ready(() => {
 	let $select = $(".multi-select");
 
 	let setSelected = (files) => {
-		$(".multi-files-value").val(JSON.stringify(files));
+		$(".multi-files-value").val(JSON.stringify(files.map(f => f.name)));
 		$(".multi-files").html(
 			files.map(f => {
-				return `<li class="list-group-item">${f}</li>`;
+				return `<li class="list-group-item d-flex align-items-start justify-content-between"><span class="name">${f.name}</span> <span class="badge badge-pill badge-secondary">${f.size}</span></li>`;
 			}).join("")
 		);
 	};
 
-	$select.on("change", () => {
+    let updateSelected = () => {
 		let $selected = $(".multi-select:checked");
 		let files = [];
 		$selected.each((i, ele) => {
-			files.push($(ele).data("select"));
+			files.push({
+                name: $(ele).data("select"),
+                size: $(ele).data("select-size")
+            });
 		});
 
 		setSelected(files);
-	});
+	}
+
+	$select.on("change", updateSelected);
+    updateSelected();
 });

assets/upload.css

@@ -1,7 +1,4 @@
-.custom-file-control.file-selected:after {
-	display: none;
-}
-.custom-file-control {
+.custom-file-label {
 	white-space: nowrap;
 	text-overflow: ellipsis;
 	overflow: hidden;

assets/upload.js

@@ -8,7 +8,7 @@ $(document).ready(() => {
 	
 	$file.on("change", () => {
 		let file = $file[0].files[0];
-		let fnElement = $file.parent().find(".custom-file-control");
+		let fnElement = $file.parent().find(".custom-file-label");
 		fnElement.addClass("file-selected");
 		fnElement.text(file.name);
 

package.json

@@ -8,7 +8,7 @@
   "dependencies": {
     "archiver": "^1.1.0",
     "body-parser": "^1.15.2",
-    "bootstrap": "4.0.0-alpha.4",
+    "bootstrap": "^4.0.0",
     "connect-busboy": "0.0.2",
     "connect-flash": "^0.1.1",
     "express": "^4.14.0",

views/layouts/main.handlebars

@@ -8,9 +8,10 @@
 	<link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css" />
 	<script src="/jquery/jquery.min.js"></script>
 	<script src="/bootstrap/js/bootstrap.min.js"></script>
-	<script src="/filesize/filesize.es6.js"></script>
+	<script src="/filesize/filesize.js"></script>
 	
 	<link rel="stylesheet" href="/assets/fonts.css" />
+	<link rel="stylesheet" href="/assets/list.css" />
 	<script src="/assets/multi.js"></script>
 	<link rel="stylesheet" href="/assets/upload.css" />
 	<script src="/assets/upload.js"></script>

views/list.handlebars

@@ -1,6 +1,7 @@
 {{> navbar path=path}}
 
-<main class="container" style="margin-top: 64px; margin-bottom: 64px;">
+<div style="padding-top: 56px; padding-bottom: 56px;">
+<main class="container my-4">
 	{{#each errors as |error|}}
 		<div class="alert alert-danger" role="alert">
 			{{error}}
@@ -14,16 +15,17 @@
 	<ul class="list-group">
 	{{#each files}}
 		<li class="list-group-item">
-			<label class="custom-control custom-checkbox">
-				<input type="checkbox" class="custom-control-input multi-select" data-select="{{name}}">
-				<span class="custom-control-indicator"></span>
-			</label>
-		{{#if isdirectory}}
-			<a href="{{name}}/">{{name}}/</a>
-		{{else}}
-			<a href="{{name}}">{{name}}</a>
-			<span class="tag tag-default tag-pill pull-xs-right">{{size}}</span>
-		{{/if}}
+			<div class="custom-control custom-checkbox">
+				<input type="checkbox" class="custom-control-input multi-select" data-select="{{name}}" data-select-size="{{size}}" id="check{{@index}}">
+                <label class="custom-control-label d-flex align-items-start justify-content-between" for="check{{@index}}">
+                    {{#if isdirectory}}
+                        <a href="{{name}}/" class="name">{{name}}/</a>
+                    {{else}}
+                        <a href="{{name}}" class="name mr-auto">{{name}}</a>
+                        <span class="badge badge-pill badge-secondary">{{size}}</span>
+                    {{/if}}
+                </label>
+			</div>
 		</li>
 	{{else}}
 		<li class="list-group-item">
@@ -32,6 +34,7 @@
 	{{/each}}
 	</ul>
 </main>
+</div>
 
 {{> toolbar}}
 

views/partials/dialogue-delete.handlebars

@@ -3,10 +3,10 @@
 		<div class="modal-dialog modal-sm">
 			<div class="modal-content">
 				<div class="modal-header">
+					<h5 class="modal-title">Are you sure?</h5>
 					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
 						<span aria-hidden="true">&times;</span>
 					</button>
-					<h4 class="modal-title">Are you sure?</h4>
 				</div>
 				<div class="modal-body">
 					<p>You are deleting the following files: </p>

views/partials/dialogue-download.handlebars

@@ -3,10 +3,10 @@
 		<div class="modal-dialog modal-sm">
 			<div class="modal-content">
 				<div class="modal-header">
+					<h5 class="modal-title">Download file archive?</h5>
 					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
 						<span aria-hidden="true">&times;</span>
 					</button>
-					<h4 class="modal-title">Download file archive?</h4>
 				</div>
 				<div class="modal-body">
 					<p>Your archive will contain the following files: </p>

views/partials/dialogue-mkdir.handlebars

@@ -3,10 +3,10 @@
 		<div class="modal-dialog modal-sm">
 			<div class="modal-content">
 				<div class="modal-header">
+					<h5 class="modal-title">Create a folder</h5>
 					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
 						<span aria-hidden="true">&times;</span>
 					</button>
-					<h4 class="modal-title">Create a folder</h4>
 				</div>
 				<div class="modal-body">
 					<div class="form-group">

views/partials/dialogue-upload.handlebars

@@ -3,17 +3,17 @@
 		<div class="modal-dialog modal-sm">
 			<div class="modal-content">
 				<div class="modal-header">
+					<h5 class="modal-title">Upload a file</h5>
 					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
 						<span aria-hidden="true">&times;</span>
 					</button>
-					<h4 class="modal-title">Upload a file</h4>
 				</div>
 				<div class="modal-body">
 					<div class="form-group">
-						<label class="custom-file">
+						<div class="custom-file">
 							<input name="file" type="file" id="upload-file" class="custom-file-input">
-							<span class="custom-file-control"></span>
-						</label>
+							<label class="custom-file-label" for="upload-file">Choose file</label>
+						</div>
 					</div>
 					<div class="form-group upload-unhide">
 						<label for="upload-file-size">Filesize: </label>

views/partials/navbar.handlebars

@@ -1,25 +1,26 @@
-<nav class="navbar navbar-dark bg-primary navbar-fixed-top">
+<nav class="navbar navbar-dark bg-primary fixed-top navbar-expand-sm">
 	<a class="navbar-brand" href="/">File Manager</a>
-	<ul class="nav navbar-nav">
-		{{#eachpath path}}
-		<li class="nav-item{{#if current}} active{{/if}}">
-			<a class="nav-link" href="{{path}}">{{name}}</a>
-		</li>
-		{{/eachpath}}
-	</ul>
-	<ul class="nav navbar-nav pull-xs-right">
-		<li class="nav-item">
-			{{#if isloginenabled}}
-			{{#if isloggingin}}
-				<a class="nav-link" href="/@login" title="Sign in">
-					<span class="octicon octicon-sign-in"></span>
-				</a>
-			{{else}}
-				<a class="nav-link" href="/@logout" title="Sign out">
-					<span class="octicon octicon-sign-out"></span>
-				</a>
-			{{/if}}
-			{{/if}}
-		</li>
-	</ul>
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse" id="navbar">
+        <div class="navbar-nav mr-auto">
+            {{#eachpath path}}
+                <a class="nav-item nav-link{{#if current}} active{{/if}}" href="{{path}}">{{name}}</a>
+            {{/eachpath}}
+        </div>
+        <div class="navbar-nav">
+            {{#if isloginenabled}}
+            {{#if isloggingin}}
+                <a class="nav-item nav-link" href="/@login" title="Sign in">
+                    <span class="octicon octicon-sign-in"></span>
+                </a>
+            {{else}}
+                <a class="nav-item nav-link" href="/@logout" title="Sign out">
+                    <span class="octicon octicon-sign-out"></span>
+                </a>
+            {{/if}}
+            {{/if}}
+        </div>
+    </div>
 </nav>

views/partials/toolbar.handlebars

@@ -1,28 +1,30 @@
-<nav class="navbar navbar-light bg-faded navbar-fixed-bottom">
-	<div class="btn-group" role="group">
-		<a class="btn btn-secondary" href="@upload" data-toggle="modal" data-target="#upload">
-			<span class="octicon octicon-cloud-upload"></span>
-			Upload
-		</a>
-		<a class="btn btn-secondary" href="@mkdir" data-toggle="modal" data-target="#mkdir">
-			<span class="octicon octicon-file-directory"></span>
-			New folder
-		</a>
-	</div>
-	<div class="btn-group" role="group">
-		<a class="btn btn-secondary" href="@download" data-toggle="modal" data-target="#download">
-			<span class="octicon octicon-file-zip"></span>
-			Download
-		</a>
-		<a class="btn btn-secondary" href="@delete" data-toggle="modal" data-target="#delete">
-			<span class="octicon octicon-trashcan"></span>
-			Delete
-		</a>
-	</div>
-	<div class="btn-group pull-xs-right" role="group">
-		<a class="btn btn-secondary" href="./">
-			<span class="octicon octicon-sync"></span>
-			Refresh
-		</a>
-	</div>
+<nav class="navbar navbar-light bg-light fixed-bottom justify-content-between">
+    <div class="btn-group mr-2" role="group">
+        <a class="btn btn-primary" href="@upload" data-toggle="modal" data-target="#upload">
+            <span class="octicon octicon-cloud-upload"></span>
+            Upload
+        </a>
+        <a class="btn btn-secondary" href="@mkdir" data-toggle="modal" data-target="#mkdir">
+            <span class="octicon octicon-file-directory"></span>
+            New folder
+        </a>
+    </div>
+    <div class="btn-group mr-2" role="group">
+        <a class="btn btn-success" href="@download" data-toggle="modal" data-target="#download">
+            <span class="octicon octicon-file-zip"></span>
+            Download
+        </a>
+    </div>
+    <div class="btn-group mr-auto" role="group">
+        <a class="btn btn-danger" href="@delete" data-toggle="modal" data-target="#delete">
+            <span class="octicon octicon-trashcan"></span>
+            Delete
+        </a>
+    </div>
+    <div class="btn-group" role="group">
+        <a class="btn btn-warning" href="./">
+            <span class="octicon octicon-sync"></span>
+            Refresh
+        </a>
+    </div>
 </nav>