Fixed DOM elements, styling and code style issues

- Reduced number of DOM elements
- Also added mention of "config" backup.

core/css/styles.css

@@ -370,7 +370,7 @@ input[type="submit"].enabled {
 	opacity: .6;
 }
 
-#body-login .update .title {
+#body-login .update h2 {
 	font-weight: bold;
 	font-size: 18px;
 	margin-bottom: 30px;

core/js/update.js

@@ -18,7 +18,6 @@
 		 * @param $el progress list element
 		 */
 		start: function($el) {
-			var self = this;
 			if (this._started) {
 				return;
 			}
@@ -51,12 +50,16 @@
 				.addClass('error bold')
 				.append('<br />')
 				.append(t('core', 'The update was unsuccessful.' +
-				   'Please report this issue to the <a href="https://github.com/owncloud/core/issues" target="_blank">ownCloud community</a>.'))
+					'Please report this issue to the ' +
+					'<a href="https://github.com/owncloud/core/issues" target="_blank">ownCloud community</a>.'))
 				.appendTo($el);
 			});
-			updateEventSource.listen('done', function(message) {
+			updateEventSource.listen('done', function() {
 				// FIXME: use product name
-				$('<span>').addClass('bold').append('<br />').append(t('core', 'The update was successful. Redirecting you to ownCloud now.')).appendTo($el);
+				$('<span>').addClass('bold')
+					.append('<br />')
+					.append(t('core', 'The update was successful. Redirecting you to ownCloud now.'))
+					.appendTo($el);
 				setTimeout(function () {
 					OC.redirect(OC.webroot);
 				}, 3000);
@@ -73,11 +76,10 @@
 })();
 
 $(document).ready(function() {
-	$('.updateForm').on('submit', function(ev) {
-		ev.preventDefault();
+	$('.updateButton').on('click', function() {
 		var $progressEl = $('.updateProgress');
 		$progressEl.removeClass('hidden');
-		$('.updateForm').addClass('hidden');
+		$('.updateOverview').addClass('hidden');
 		OC.Update.start($progressEl);
 		return false;
 	});

core/templates/update.admin.php

@@ -1,32 +1,27 @@
 <div class="update">
-	<form name="updateForm" class="updateForm">
-		<p class="title bold">
-		<?php p($l->t('%s will be updated to version %s.',
-			array($_['productName'], $_['version']))); ?>
-		</p>
+	<div class="updateOverview">
+		<h2 class="title bold"><?php p($l->t('%s will be updated to version %s.',
+			array($_['productName'], $_['version']))); ?></h2>
 		<?php if (!empty($_['appList'])) { ?>
 		<div class="infogroup">
-			<p class="bold"><?php p($l->t('The following apps will be disabled during the upgrade:')) ?></p>
+			<span class="bold"><?php p($l->t('The following apps will be disabled:')) ?></span>
 			<ul class="content appList">
-			<?php foreach ($_['appList'] as $appInfo) { ?>
-			<li><?php p($appInfo['name']) ?> (<?php p($appInfo['id']) ?>)</li>
-			<?php } ?>
+				<?php foreach ($_['appList'] as $appInfo) { ?>
+				<li><?php p($appInfo['name']) ?> (<?php p($appInfo['id']) ?>)</li>
+				<?php } ?>
 			</ul>
 		</div>
 		<?php } ?>
 		<?php if (!empty($_['oldTheme'])) { ?>
-		<div class="infogroup">
-			<p class="bold"><?php p($l->t('The theme %s has been disabled.', array($_['oldTheme']))) ?></p>
+		<div class="infogroup bold">
+			<?php p($l->t('The theme %s has been disabled.', array($_['oldTheme']))) ?>
 		</div>
 		<?php } ?>
-		<div class="infogroup">
-			<p class="bold"><?php p($l->t('Please make sure that the database and the data folder have been backed up before proceeding.')) ?></p>
-		</div>
-		<div>
-			<input type="submit" value="<?php p($l->t('Start upgrade')) ?>"></input>
+		<div class="infogroup bold">
+			<?php p($l->t('Please make sure that the database, the config folder and the data folder have been backed up before proceeding.')) ?>
 		</div>
-	</form>
-
-	<div class="updateProgress hidden">
+		<input class="updateButton" type="button" value="<?php p($l->t('Start update')) ?>">
 	</div>
+
+	<div class="updateProgress hidden"></div>
 </div>