From fab23ee595702ad5c19db4d4e5cecd66663d0ec4 Mon Sep 17 00:00:00 2001
From: Girish Ramakrishnan <girish@cloudron.io>
Date: Tue, 17 Dec 2019 10:15:38 -0800
Subject: [PATCH] backup: compact the view

---
 src/views/app.html | 25 ++++++++++---------------
 1 file changed, 10 insertions(+), 15 deletions(-)

diff --git a/src/views/app.html b/src/views/app.html
index c490bcfd0..b5eb61c83 100644
--- a/src/views/app.html
+++ b/src/views/app.html
@@ -676,18 +676,16 @@
       </div>
 
       <div class="card"ng-show="view === 'backups'">
-        <div class="row">
-          <div class="col-md-12">
-            <label class="control-label">Create Backup</label>
-            <p>This creates a snapshot of the app at this instant.</p>
-            <button type="button" class="btn btn-primary pull-right" ng-click="backups.createBackup()" ng-disabled="app.taskId || backups.busyCreate"><i class="fa fa-circle-notch fa-spin" ng-show="app.installationState === 'pending_backup' || backups.busyCreate"></i> Create Backup</button>
-          </div>
-        </div>
-        <hr/>
         <div class="row">
           <div class="col-md-12">
             <label class="control-label">Backups</label>
-            <p>You can use app backups to restore or clone this app.</p>
+
+            <div>
+              <button type="button" class="btn btn-primary pull-right" ng-click="backups.createBackup()" ng-disabled="app.taskId || backups.busyCreate"><i class="fa fa-circle-notch fa-spin" ng-show="app.installationState === 'pending_backup' || backups.busyCreate"></i> Create Backup</button>
+              <span>Backups are complete snapshots of the app. You can use app backups to restore or clone this app.</span>
+            </div>
+
+            <br/>
 
             <!-- backup id copy helper -->
             <input type="text" class="offscreen" aria-hidden="true" id="backupIdHelper" value="">
@@ -696,8 +694,7 @@
               <thead>
                 <tr>
                   <th width="25px">&nbsp;</th>
-                  <th>Created</th>
-                  <th>Version</th>
+                  <th>Backup</th>
                   <th class="text-right" width="180px">Actions</th>
                 </tr>
               </thead>
@@ -707,8 +704,7 @@
                 </tr>
                 <tr ng-repeat="backup in backups.backups">
                   <td><div ng-click="backups.copyBackupId(backup)" class="hand" uib-tooltip="{{ backups.copyBackupIdDone ? 'Copied to clipboard' : 'Click to copy backup id' }}" tooltip-placement="right"><i class="fa fa-copy"></i></div></td>
-                  <td><div uib-tooltip="{{ backup.creationTime | prettyLongDate }}">{{ backup.creationTime | prettyDate }}</div></td>
-                  <td>{{ backup.version }}</td>
+                  <td><div uib-tooltip="{{ backup.creationTime | prettyLongDate }}">v{{ backup.version }} - {{ backup.creationTime | prettyDate }}</div></td>
                   <td class="text-right no-wrap" style="vertical-align: bottom">
                     <button class="btn btn-xs btn-default" ng-click="clone.show(backup)" uib-tooltip="Clone from this Backup"><i class="far fa-clone"></i></button>
                     <button class="btn btn-xs btn-danger" ng-click="restore.show(backup)" ng-disabled="app.taskId" uib-tooltip="Restore to this Backup"><i class="fas fa-history"></i></button>
@@ -723,8 +719,7 @@
           <div class="col-md-12">
             <label class="control-label">Automatic Backups</label>
 
-            <p>Cloudron periodically creates a backup based on the <a href="/#/backups">backup</a> settings. If you disable automatic backups, be sure to manually create backups often.</p>
-            <p>Automatic Backups is currently <b>{{ backups.enableBackup ? 'enabled' : 'disabled' }}</b>.</p>
+            <p>Cloudron periodically creates a backup based on the <a href="/#/backups">backup</a> settings. Automatic Backups is currently <b>{{ backups.enableBackup ? 'enabled' : 'disabled' }}</b>.</p>
 
             <button class="btn btn-primary pull-right" ng-class="{ 'btn-danger': backups.enableBackup }" ng-click="backups.toggleAutomaticBackups()" ng-disabled="backups.busy"><i class="fa fa-circle-notch fa-spin" ng-show="backups.busy"></i> {{ backups.enableBackup ? 'Disable' : 'Enable' }} Automatic Backups</button>
           </div>