Remove external sources from installer page (#6101)

* Remove external sources from installer page * Remove bootstrap.min.css * Make spinner display consistently cross-platform * Change spinner to look better
7 years ago · c731661a39
parent b0488fec61
commit c731661a39
4 changed files with 82 additions and 37 deletions
--- a/install/web.js
+++ b/install/web.js
@ -26,6 +26,7 @@ winston.add(winston.transports.File, {

 var web = {};
 var scripts = [
+	'node_modules/jquery/dist/jquery.js',
 	'public/vendor/xregexp/xregexp.js',
 	'public/vendor/xregexp/unicode/unicode-base.js',
 	'public/src/utils.js',
@ -53,7 +54,7 @@ web.install = function (port) {
 		extended: true,
 	}));

-	async.parallel([compileLess, compileJS], function (err) {
+	async.parallel([compileLess, compileJS, copyCSS], function (err) {
 		if (err) {
 			winston.error(err);
 		}
@ -136,14 +137,15 @@ function launch(req, res) {
 	process.stdout.write('    "./nodebb log" to view server output\n');
 	process.stdout.write('    "./nodebb restart" to restart NodeBB\n');

-	async.parallel([
-		function (next) {
-			fs.unlink(path.join(__dirname, '../public/installer.css'), next);
-		},
-		function (next) {
-			fs.unlink(path.join(__dirname, '../public/installer.min.js'), next);
-		},
-	], function (err) {
+	var filesToDelete = [
+		'installer.css',
+		'installer.min.js',
+		'bootstrap.min.css',
+	];
+
+	async.each(filesToDelete, function (filename, next) {
+		fs.unlink(path.join(__dirname, '../public', filename), next);
+	}, function (err) {
 		if (err) {
 			winston.warn('Unable to remove installer files');
 		}
@ -198,4 +200,15 @@ function compileJS(callback) {
 	});
 }

+function copyCSS(next) {
+	async.waterfall([
+		function (next) {
+			fs.readFile(path.join(__dirname, '../node_modules/bootstrap/dist/css/bootstrap.min.css'), 'utf8', next);
+		},
+		function (src, next) {
+			fs.writeFile(path.join(__dirname, '../public/bootstrap.min.css'), src, next);
+		},
+	], next);
+}
+
 module.exports = web;
--- a/public/less/install.less
+++ b/public/less/install.less
@ -1,3 +1,48 @@
+.working {
+  width: 24px;
+  height: 24px;
+
+  position: relative;
+	display: inline-block;
+	vertical-align: bottom;
+	
+	&::before, &::after {
+		content: ' ';
+
+		width: 100%;
+		height: 100%;
+		border-radius: 50%;
+		background-color: #fff;
+		opacity: 0.6;
+		position: absolute;
+		top: 0;
+		left: 0;
+		
+		-webkit-animation: sk-bounce 2.0s infinite ease-in-out;
+		animation: sk-bounce 2.0s infinite ease-in-out;
+	}
+	
+	&::after {
+		-webkit-animation-delay: -1.0s;
+		animation-delay: -1.0s;
+	}
+}
+
+@-webkit-keyframes sk-bounce {
+  0%, 100% { -webkit-transform: scale(0.0) }
+  50% { -webkit-transform: scale(1.0) }
+}
+
+@keyframes sk-bounce {
+  0%, 100% { 
+    transform: scale(0.0);
+    -webkit-transform: scale(0.0);
+  } 50% { 
+    transform: scale(1.0);
+    -webkit-transform: scale(1.0);
+  }
+}
+
 .btn, .form-control, .navbar {
 	border-radius: 0;
 }
@ -8,7 +53,7 @@
 }

 body, small, p, div {
-	font-family: "Roboto", sans-serif;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
 }

 .input-row {
--- a/public/src/installer/install.js
+++ b/public/src/installer/install.js
@ -46,7 +46,7 @@ $('document').ready(function () {

 			return false;
 		}
-		$('#submit .fa-spin').removeClass('hide');
+		$('#submit .working').removeClass('hide');
 	}

 	function activate(type, el) {
@ -112,7 +112,7 @@ $('document').ready(function () {
 	}

 	function launchForum() {
-		$('#launch .fa-spin').removeClass('hide');
+		$('#launch .working').removeClass('hide');

 		$.post('/launch', function () {
 			var successCount = 0;
--- a/src/views/install/index.tpl
+++ b/src/views/install/index.tpl
@ -2,37 +2,28 @@
 <html>
 <head>
 	<meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<title>NodeBB Web Installer</title>

-	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/united/bootstrap.min.css">
-	<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,700' rel='stylesheet' type='text/css'>
-	<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
+	<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
 	<link rel="stylesheet" type="text/css" href="installer.css">
 	
+	<script type="text/javascript" async defer src="installer.min.js"></script>
 </head>

 <body>
 	<nav class="navbar navbar-default">
 		<div class="container-fluid">
 			<div class="navbar-header">
-				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
-					<span class="sr-only">Toggle navigation</span>
-					<span class="icon-bar"></span>
-					<span class="icon-bar"></span>
-					<span class="icon-bar"></span>
-				</button>
 				<a class="navbar-brand" href="#">NodeBB</a>
 			</div>

-			<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
-				<ul class="nav navbar-nav">
-					<li class="active"><a href="/">Installer</a></li>
-					<li><a href="https://docs.nodebb.org" target="_blank">Get Help</a></li>
-					<li><a href="https://community.nodebb.org" target="_blank">Community</a></li>
-				</ul>
-			</div>
+			<ul class="nav navbar-nav">
+				<li class="active"><a href="/">Installer</a></li>
+				<li><a href="https://docs.nodebb.org" target="_blank">Get Help</a></li>
+				<li><a href="https://community.nodebb.org" target="_blank">Community</a></li>
+			</ul>
 		</div>
 	</nav>

@ -104,7 +95,7 @@
 			</div>
 			<!-- ENDIF !skipDatabaseSetup -->

-			<button id="submit" type="submit" class="btn btn-lg btn-success">Install NodeBB <i class="fa fa-spinner fa-spin hide"></i></button>
+			<button id="submit" type="submit" class="btn btn-lg btn-success">Install NodeBB <i class="working hide"></i></button>
 		</form>
 	</div>

@ -113,7 +104,7 @@
 		<p>
 			<h1>Congratulations! Your NodeBB has been set-up.</h1>

-			<button id="launch" class="btn btn-lg btn-success">Launch NodeBB <i class="fa fa-spinner fa-spin hide"></i></button>
+			<button id="launch" class="btn btn-lg btn-success">Launch NodeBB <i class="working hide"></i></button>
 		</p>
 	</div>

@ -131,9 +122,5 @@
 		</div>
 		<!-- END databases -->
 	</div>
-
-	<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
-	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
-	<script type="text/javascript" src="installer.min.js"></script>
 </body>
 </html>