Show upload progress

1 files changed, 29 insertions, 33 deletions

diff --git a/frontend/index.html b/frontend/index.html
index 2e2e5e3..15e5d98 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -70,47 +70,43 @@
   </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>