using less for web installer

10 years ago · 005c95277b
parent 2ffdec5386
commit 005c95277b
3 changed files with 40 additions and 27 deletions
--- a/install/web.js
+++ b/install/web.js
@ -2,8 +2,9 @@

 var winston = require('winston'),
 	express = require('express'),
-	nconf = require('nconf'),
+	fs = require('fs'),
 	path = require('path'),
+	less = require('less'),
 	app = express();

 var web = {};
@ -12,8 +13,10 @@ web.install = function(port) {
 	port = port || 8080;
 	winston.info('Launching web installer on port ', port);

-	setupRoutes();
-	launchExpress(port);
+	compileLess(function() {
+		setupRoutes();
+		launchExpress(port);
+	});
 };


@ -34,9 +37,21 @@ function setupRoutes() {
 }

 function install(req, res, next) {
-	console.log('test');
 	res.render('install/index', {});
 }

+function compileLess(callback) {
+	fs.readFile(path.join(__dirname, '../public/less/install.less'), function(err, style) {
+		less.render(style.toString(), function(err, css) {
+			if(err) {
+				return winston.error('Unable to compile LESS: ', err);
+			}
+
+			console.log(css);
+
+			fs.writeFile(path.join(__dirname, '../public/stylesheet.css'), css.css, callback);
+		});
+	});
+}

 module.exports = web;
--- a/public/less/install.less
+++ b/public/less/install.less
@ -0,0 +1,20 @@
+.btn, .form-control, .navbar { border-radius: 0; }
+.container { font-size: 18px; }
+body, small, p, div { font-family: "Roboto", sans-serif; }
+.input-row {
+	margin-bottom: 20px;
+}
+.input-row.active .input-field {
+	border-right: 5px solid #BF3E11;
+	padding-right: 20px;
+}
+.input-row.active .help-text {
+	display: block;
+}
+
+.help-text {
+	line-height: 20px;
+	color: #888;
+	font-size: 85%;
+	display: none;
+}
--- a/src/views/install/index.tpl
+++ b/src/views/install/index.tpl
@ -8,6 +8,7 @@

 	<link rel="stylesheet" type="text/css" href="https://bootswatch.com/united/bootstrap.min.css">
 	<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,500,700' rel='stylesheet' type='text/css'>
+	<link rel="stylesheet" type="text/css" href="stylesheet.css">


 	<!--[if lt IE 9]>
@ -16,29 +17,6 @@
  		<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js"></script>
  		<script>__lt_ie_9__ = 1;</script>
 	<![endif]-->
-
-	<style type="text/css">
-	.btn, .form-control, .navbar { border-radius: 0; }
-	.container { font-size: 18px; }
-	body, small, p, div { font-family: "Roboto", sans-serif; }
-	.input-row {
-		margin-bottom: 20px;
-	}
-	.input-row.active .input-field {
-		border-right: 5px solid #BF3E11;
-		padding-right: 20px;
-	}
-	.input-row.active .help-text {
-		display: block;
-	}
-
-	.help-text {
-		line-height: 20px;
-		color: #888;
-		font-size: 85%;
-		display: none;
-	}
-	</style>
 </head>

 <body>