<html>
<head>
- <title> Cloudron Surfer </title>
+ <title> Surfer </title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body>
-<el-container id="app" @drop="drop" @dragover="dragOver">
+<div id="app" @drop="drop" @dragover="dragOver">
+
+<el-container>
<input type="file" ref="upload" style="display: none" id="uploadInput" multiple/>
<el-dialog title="Login" :visible.sync="ready && !session.valid" width="30%" :close-on-press-escape="false" :show-close="false">
</el-header>
<el-main>
- <!-- <div class="container" v-show="uploadStatus.busy" v-cloak>
- <div class="row">
- <div class="col-lg-12">
- <p>Uploading... ({{ uploadStatus.done }} / {{ uploadStatus.count }}) </p>
- <center>
- <div class="progress">
- <div class="progress-bar progress-bar-striped" role="progressbar" v-bind:style="{ width: uploadStatus.percentDone + '%' }">
- <span class="sr-only">{{ uploadStatus.percentDone }}% Complete</span>
- </div>
- </div>
- </center>
- </div>
- </div>
- </div> -->
-
<div v-show="busy">
<center><h1><i class="el-icon-loading"></i></h1></center>
</div>
<div v-show="!busy && session.valid" v-cloak>
- <el-table :data="entries" style="width: 100%" height="100%" empty-text="Folder is emtpy" :default-sort="{ prop: 'filePath', order: 'descending' }" @row-click="open">
- <el-table-column prop="previewUrl" label="Type" width="100px" sortable>
- <template slot-scope="scope">
- <img v-bind:src="scope.row.previewUrl" height="48px" width="48px"/>
- </template>
- </el-table-column>
- <el-table-column prop="filePath" label="Name" sortable></el-table-column>
- <el-table-column prop="size" label="Size" width="150px" sortable :formatter="prettyFileSize"></el-table-column>
- <el-table-column prop="mtime" label="Modified" width="150px" sortable :formatter="prettyDate"></el-table-column>
- <el-table-column label="Actions" align="right" width="200px" class-name="list-actions">
- <template slot-scope="scope">
- <el-button size="small" icon="el-icon-download" circle v-show="scope.row.isFile" @click.stop="onDownload(scope.row)"></el-button>
- <el-button size="small" icon="el-icon-edit" circle @click.stop="onRename(scope.row)"></el-button>
- <el-button size="small" icon="el-icon-delete" circle @click.stop="onDelete(scope.row)"></el-button>
- </template>
- </el-table-column>
- </el-table>
+ <center>
+ <el-table :data="entries" style="max-width: 1280px;width: 100%" height="100%" empty-text="Folder is emtpy" :default-sort="{ prop: 'filePath', order: 'descending' }" @row-click="open">
+ <el-table-column prop="previewUrl" label="Type" width="100px" sortable>
+ <template slot-scope="scope">
+ <img v-bind:src="scope.row.previewUrl" height="48px" width="48px"/>
+ </template>
+ </el-table-column>
+ <el-table-column prop="filePath" label="Name" sortable></el-table-column>
+ <el-table-column prop="size" label="Size" width="150px" sortable :formatter="prettyFileSize"></el-table-column>
+ <el-table-column prop="mtime" label="Modified" width="150px" sortable :formatter="prettyDate"></el-table-column>
+ <el-table-column label="Actions" align="right" width="200px" class-name="list-actions">
+ <template slot-scope="scope">
+ <el-button size="small" icon="el-icon-download" circle v-show="scope.row.isFile" @click.stop="onDownload(scope.row)"></el-button>
+ <el-button size="small" icon="el-icon-edit" circle @click.stop="onRename(scope.row)"></el-button>
+ <el-button size="small" icon="el-icon-delete" circle @click.stop="onDelete(scope.row)"></el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ </center>
</div>
</el-main>
- <el-footer style="height: 24px">Built by the <a href="https://cloudron.io" target="_blank">Cloudron.io</a> team. <a href="https://git.cloudron.io/cloudron/surfer" target="_blank">Get the code</a></el-footer>
+ <el-footer v-show="uploadStatus.busy">
+ <el-row>
+ <el-col :span="4">
+ Uploading files ({{ uploadStatus.done }} / {{ uploadStatus.count }})
+ </el-col>
+ <el-col :span="20">
+ <el-progress :text-inside="true" :stroke-width="18" :percentage="uploadStatus.percentDone"></el-progress>
+ </el-col>
+ </el-row>
+ </el-footer>
</el-container>
+</div>
+
<script src="/_admin/js/app.js"></script>
</body>
projects / perso / Immae / Projets / Nodejs / Surfer.git / blobdiff