Better layout

This commit is contained in:
Girish Ramakrishnan
2018-05-24 09:55:33 -07:00
parent 423958dd0e
commit caa59dd9a9

View File

@@ -172,57 +172,58 @@
</div>
<div class="modal-body">
<h4>Take Backup</h4>
<div class="panel panel-default">
<div class="panel-body">
<div>This takes a live snapshot of this application.</div>
<div>
<button type="button" class="btn btn-success pull-right" ng-click="appRestore.createBackup()"> Backup</button>
</div>
<hr style="margin: 3px 0px 5px 0px"/>
<div class="row">
<div class="col-md-10">
This takes a live snapshot of this application. App will continue to run during the backup process.
</div>
<div class="col-md-2">
<button type="button" class="btn btn-success pull-right" ng-click="appRestore.createBackup()"> Backup</button>
</div>
</div>
<br/>
<h4>Restore From Backup</h4>
<div class="panel panel-default">
<div class="panel-body">
<p class="text-center" ng-show="appRestore.busyFetching"><i class="fa fa-circle-o-notch fa-spin"></i> Fetching backups</p>
<p class="text-danger" ng-show="appRestore.backups.length === 0 && !appRestore.busyFetching">This app has no backups to restore from.</p>
<hr style="margin: 3px 0px 5px 0px"/>
<p class="text-center" ng-show="appRestore.busyFetching"><i class="fa fa-circle-o-notch fa-spin"></i> Fetching backups</p>
<p class="text-danger" ng-show="appRestore.backups.length === 0 && !appRestore.busyFetching">This app has no backups to restore from.</p>
<div ng-show="appRestore.backups.length !== 0">
<p>Restoring the app will lose all content generated since the backup.</p>
<label class="control-label">Select Backup</label>
<div class="row">
<div class="dropdown col-md-8">
<button type="button" class="btn btn-block btn-default" data-toggle="dropdown">{{ appRestore.selectedBackup.creationTime | prettyDate }} - v{{appRestore.selectedBackup.version}} <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li ng-repeat="backup in appRestore.backups | orderBy:'-creationTime'">
<a href="" ng-click="appRestore.selectBackup(backup)">{{backup.creationTime}} {{ backup.creationTime | prettyDate }} - v{{backup.version}}</a>
</li>
</ul>
</div>
</div>
<br/>
<fieldset>
<form role="form" name="appRestoreForm" ng-submit="appRestore.restore()" autocomplete="off">
<div class="form-group" ng-class="{ 'has-error': (appRestoreForm.password.$dirty && appRestoreForm.password.$invalid) || (!appRestoreForm.password.$dirty && appRestore.error.password) }">
<label class="control-label" for="appRestorePasswordInput">Provide your password to confirm this action</label>
<div class="control-label" ng-show="(appRestoreForm.password.$dirty && appRestoreForm.password.$invalid) || (!appRestoreForm.password.$dirty && appRestore.error.password)">
<small ng-show=" appRestoreForm.password.$dirty && appRestoreForm.password.$invalid">Password required</small>
<small ng-show="!appRestoreForm.password.$dirty && appRestore.error.password">Wrong password</small>
</div>
<input type="password" class="form-control" ng-model="appRestore.password" id="appRestorePasswordInput" name="password" required autofocus>
</div>
<input class="ng-hide" type="submit" ng-disabled="appRestoreForm.$invalid || busy"/>
</form>
</fieldset>
<div ng-show="appRestore.backups.length !== 0">
<p>Restoring the app will lose all content generated since the backup.</p>
<label class="control-label">Select Backup</label>
<div class="row">
<div class="dropdown col-md-8">
<button type="button" class="btn btn-block btn-default" data-toggle="dropdown">{{ appRestore.selectedBackup.creationTime | prettyDate }} - v{{appRestore.selectedBackup.version}} <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li ng-repeat="backup in appRestore.backups | orderBy:'-creationTime'">
<a href="" ng-click="appRestore.selectBackup(backup)">{{backup.creationTime}} {{ backup.creationTime | prettyDate }} - v{{backup.version}}</a>
</li>
</ul>
</div>
<button type="button" class="btn btn-danger pull-right" ng-click="appRestore.restore()" ng-show="appRestore.backups.length !== 0" ng-disabled="appRestoreForm.$invalid || appRestore.busy || !appRestore.selectedBackup"><i class="fa fa-circle-o-notch fa-spin" ng-show="appRestore.busy"></i> Restore</button>
</div>
<br/>
<fieldset>
<form role="form" name="appRestoreForm" ng-submit="appRestore.restore()" autocomplete="off">
<div class="form-group" ng-class="{ 'has-error': (appRestoreForm.password.$dirty && appRestoreForm.password.$invalid) || (!appRestoreForm.password.$dirty && appRestore.error.password) }">
<label class="control-label" for="appRestorePasswordInput">Provide your password to confirm this action</label>
<div class="control-label" ng-show="(appRestoreForm.password.$dirty && appRestoreForm.password.$invalid) || (!appRestoreForm.password.$dirty && appRestore.error.password)">
<small ng-show=" appRestoreForm.password.$dirty && appRestoreForm.password.$invalid">Password required</small>
<small ng-show="!appRestoreForm.password.$dirty && appRestore.error.password">Wrong password</small>
</div>
<input type="password" class="form-control" ng-model="appRestore.password" id="appRestorePasswordInput" name="password" required autofocus>
</div>
<input class="ng-hide" type="submit" ng-disabled="appRestoreForm.$invalid || busy"/>
</form>
</fieldset>
<button type="button" class="btn btn-danger pull-right" ng-click="appRestore.restore()" ng-show="appRestore.backups.length !== 0" ng-disabled="appRestoreForm.$invalid || appRestore.busy || !appRestore.selectedBackup"><i class="fa fa-circle-o-notch fa-spin" ng-show="appRestore.busy"></i> Restore</button>
</div>
</div>
<br/>
<br/>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>