From 343e8e90ba9b568fa3cee37a1e90f8c54638c05b Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Tue, 14 Jul 2020 14:03:40 +0200
Subject: [PATCH] Scroll file lists inside the card

---
 src/filemanager.html | 106 +++++++++++++++++++++----------------------
 src/theme.scss       |   9 ++++
 2 files changed, 60 insertions(+), 55 deletions(-)

diff --git a/src/filemanager.html b/src/filemanager.html
index f37c0a406..efc761d4d 100644
--- a/src/filemanager.html
+++ b/src/filemanager.html
@@ -200,71 +200,67 @@
 
   <div class="main-container animateMe ng-hide layout-root" ng-show="initialized">
     <div class="layout-content container">
-      <br/>
       <div class="row" ng-hide="app">
         <div class="col-md-12 text-center">
           <h3>App not found</h3>
         </div>
       </div>
-      <div class="row" ng-show="app">
-        <div class="col-md-12">
-          <div class="card card-large">
 
-            <input type="file" id="uploadFileInput" style="display: none" multiple/>
-            <input type="file" id="uploadFolderInput" style="display: none" multiple webkitdirectory directory/>
+      <div class="card card-large" ng-show="app">
 
-            <h4 class="text-center">{{ app.fqdn }}</h4>
+        <input type="file" id="uploadFileInput" style="display: none" multiple/>
+        <input type="file" id="uploadFolderInput" style="display: none" multiple webkitdirectory directory/>
 
-            <div>
-              <div class="btn-group" role="group">
-                <button class="btn btn-primary" ng-click="goDirectoryUp()" ng-disabled="cwd === '/'"><i class="fas fa-arrow-left"></i></button>
-                <button class="btn btn-primary" ng-click="refresh()"><i class="fas fa-sync-alt"></i></button>
-              </div>
-              <div class="btn-group" role="group">
-                <button class="btn btn-default" ng-disabled="cwd === '/'" ng-click="changeDirectory('/')"><i class="fas fa-home"></i> / </button>
-                <button class="btn btn-default" ng-disabled="part.path === cwd" ng-click="changeDirectory(part.path)" ng-repeat="part in cwdParts">{{ part.name }}</button>
-              </div>
-              <div class="btn-group pull-right" role="group">
-                <button class="btn btn-primary" ng-click="newDirectory.show()">New Folder</button>
-                <button class="btn btn-primary" ng-click="onUploadFile()">Upload File</button>
-                <button class="btn btn-primary" ng-click="onUploadFolder()">Upload Folder</button>
-              </div>
-            </div>
+        <h4 class="text-center">{{ app.fqdn }}</h4>
 
-            <br/>
-
-            <table class="table table-hover" style="margin: 0;" ng-class="{ 'entry-hovered': dropToBody }">
-              <thead>
-                <tr>
-                  <th style="width: 3%;">&nbsp;</th>
-                  <th style="width:67%">Name</th>
-                  <th style="width:10%">Size</th>
-                  <th style="width:10%">Owner</th>
-                  <th style="width: 10%" class="text-right">Actions</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr ng-show="entries.length === 0">
-                  <td colspan="5" class="text-center">No files</td>
-                </tr>
-                <tr ng-repeat="entry in entries" ng-drop="drop($event, entry)" ng-dragexit="dragExit($event, entry)" ng-dragover="dragEnter($event, entry)" ng-class="{ 'entry-hovered': entry.hovered }">
-                  <td ng-click="open(entry)" class="hand text-center">
-                    <i class="fas fa-folder fa-lg" ng-show="entry.isDirectory"></i>
-                    <i class="far fa-file fa-lg" ng-show="entry.isFile"></i>
-                  </td>
-                  <td class="hand elide-table-cell" ng-click="open(entry)">{{ entry.fileName }}</td>
-                  <td class="hand elide-table-cell" ng-click="open(entry)">{{ entry.size | prettyDiskSize }}</td>
-                  <td class="hand elide-table-cell" ng-click="open(entry)">{{ entry.uid | prettyOwner }}</td>
-                  <td class="text-right no-wrap" style="vertical-align: bottom">
-                    <button class="btn btn-xs btn-default" ng-click="download(entry)" ng-show="entry.isFile"><i class="fas fa-download"></i></button>
-                    <button class="btn btn-xs btn-default" ng-click="renameEntry.show(entry)"><i class="fas fa-edit"></i></button>
-                    <button class="btn btn-xs btn-default" ng-click="chownEntry.show(entry)"><i class="fas fa-user-edit"></i></button>
-                    <button class="btn btn-xs btn-danger" ng-click="entryRemove.show(entry)"><i class="far fa-trash-alt"></i></button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+        <div style="margin-bottom: 10px;">
+          <div class="btn-group" role="group">
+            <button class="btn btn-primary" ng-click="goDirectoryUp()" ng-disabled="cwd === '/'"><i class="fas fa-arrow-left"></i></button>
+            <button class="btn btn-primary" ng-click="refresh()"><i class="fas fa-sync-alt"></i></button>
           </div>
+          <div class="btn-group" role="group">
+            <button class="btn btn-default" ng-disabled="cwd === '/'" ng-click="changeDirectory('/')"><i class="fas fa-home"></i> / </button>
+            <button class="btn btn-default" ng-disabled="part.path === cwd" ng-click="changeDirectory(part.path)" ng-repeat="part in cwdParts">{{ part.name }}</button>
+          </div>
+          <div class="btn-group pull-right" role="group">
+            <button class="btn btn-primary" ng-click="newDirectory.show()">New Folder</button>
+            <button class="btn btn-primary" ng-click="onUploadFile()">Upload File</button>
+            <button class="btn btn-primary" ng-click="onUploadFolder()">Upload Folder</button>
+          </div>
+        </div>
+
+        <div style="overflow: auto;">
+          <table class="table table-hover" style="margin: 0;" ng-class="{ 'entry-hovered': dropToBody }">
+            <thead>
+              <tr>
+                <th style="width: 3%;">&nbsp;</th>
+                <th style="width:67%">Name</th>
+                <th style="width:10%">Size</th>
+                <th style="width:10%">Owner</th>
+                <th style="width: 10%" class="text-right">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr ng-show="entries.length === 0">
+                <td colspan="5" class="text-center">No files</td>
+              </tr>
+              <tr ng-repeat="entry in entries" ng-drop="drop($event, entry)" ng-dragexit="dragExit($event, entry)" ng-dragover="dragEnter($event, entry)" ng-class="{ 'entry-hovered': entry.hovered }">
+                <td ng-click="open(entry)" class="hand text-center">
+                  <i class="fas fa-folder fa-lg" ng-show="entry.isDirectory"></i>
+                  <i class="far fa-file fa-lg" ng-show="entry.isFile"></i>
+                </td>
+                <td class="hand elide-table-cell" ng-click="open(entry)">{{ entry.fileName }}</td>
+                <td class="hand elide-table-cell" ng-click="open(entry)">{{ entry.size | prettyDiskSize }}</td>
+                <td class="hand elide-table-cell" ng-click="open(entry)">{{ entry.uid | prettyOwner }}</td>
+                <td class="text-right no-wrap" style="vertical-align: bottom">
+                  <button class="btn btn-xs btn-default" ng-click="download(entry)" ng-show="entry.isFile"><i class="fas fa-download"></i></button>
+                  <button class="btn btn-xs btn-default" ng-click="renameEntry.show(entry)"><i class="fas fa-edit"></i></button>
+                  <button class="btn btn-xs btn-default" ng-click="chownEntry.show(entry)"><i class="fas fa-user-edit"></i></button>
+                  <button class="btn btn-xs btn-danger" ng-click="entryRemove.show(entry)"><i class="far fa-trash-alt"></i></button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
         </div>
       </div>
     </div>
diff --git a/src/theme.scss b/src/theme.scss
index 85114c8ba..2a88db089 100644
--- a/src/theme.scss
+++ b/src/theme.scss
@@ -1699,6 +1699,15 @@ tag-input {
     .entry-hovered > td {
         border: none !important;
     }
+
+    .card {
+        height: calc(100% - 20px);
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        margin-bottom: 10px;
+        margin-top: 10px;
+    }
 }