Update to bootstrap 4.0.0
parent
544c4358d7
commit
3c13652401
|
@ -0,0 +1 @@
|
|||
node_modules/
|
|
@ -0,0 +1,4 @@
|
|||
.name {
|
||||
overflow: hidden;
|
||||
word-wrap: break-word;
|
||||
}
|
|
@ -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();
|
||||
});
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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);
|
||||
|
||||
|
|
File diff suppressed because it is too large
Load Diff
|
@ -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",
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
<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}}/">{{name}}/</a>
|
||||
<a href="{{name}}/" class="name">{{name}}/</a>
|
||||
{{else}}
|
||||
<a href="{{name}}">{{name}}</a>
|
||||
<span class="tag tag-default tag-pill pull-xs-right">{{size}}</span>
|
||||
<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}}
|
||||
|
||||
|
|
|
@ -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">×</span>
|
||||
</button>
|
||||
<h4 class="modal-title">Are you sure?</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>You are deleting the following files: </p>
|
||||
|
|
|
@ -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">×</span>
|
||||
</button>
|
||||
<h4 class="modal-title">Download file archive?</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Your archive will contain the following files: </p>
|
||||
|
|
|
@ -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">×</span>
|
||||
</button>
|
||||
<h4 class="modal-title">Create a folder</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
|
|
|
@ -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">×</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>
|
||||
|
|
|
@ -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">
|
||||
<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}}
|
||||
<li class="nav-item{{#if current}} active{{/if}}">
|
||||
<a class="nav-link" href="{{path}}">{{name}}</a>
|
||||
</li>
|
||||
<a class="nav-item nav-link{{#if current}} active{{/if}}" href="{{path}}">{{name}}</a>
|
||||
{{/eachpath}}
|
||||
</ul>
|
||||
<ul class="nav navbar-nav pull-xs-right">
|
||||
<li class="nav-item">
|
||||
</div>
|
||||
<div class="navbar-nav">
|
||||
{{#if isloginenabled}}
|
||||
{{#if isloggingin}}
|
||||
<a class="nav-link" href="/@login" title="Sign in">
|
||||
<a class="nav-item 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">
|
||||
<a class="nav-item nav-link" href="/@logout" title="Sign out">
|
||||
<span class="octicon octicon-sign-out"></span>
|
||||
</a>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<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">
|
||||
<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>
|
||||
|
@ -9,18 +9,20 @@
|
|||
New folder
|
||||
</a>
|
||||
</div>
|
||||
<div class="btn-group" role="group">
|
||||
<a class="btn btn-secondary" href="@download" data-toggle="modal" data-target="#download">
|
||||
<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>
|
||||
<a class="btn btn-secondary" href="@delete" data-toggle="modal" data-target="#delete">
|
||||
</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 pull-xs-right" role="group">
|
||||
<a class="btn btn-secondary" href="./">
|
||||
<div class="btn-group" role="group">
|
||||
<a class="btn btn-warning" href="./">
|
||||
<span class="octicon octicon-sync"></span>
|
||||
Refresh
|
||||
</a>
|
||||
|
|
Loading…
Reference in New Issue