forms: horizontal layout and unit support (#245)

* update

* sync

[skip ci]

* always required

[skip ci]

* append support

* update schemas

[skip ci]

* typo

[skip ci]

* adjustment

* update

[skip ci]

* sync

[skip ci]

* slightly smaller logo

[skip ci]

* also for checkboxes

[skip ci]

* new connection lost page

[skip ci]

* update con_lost page

[skip ci]

* lost change

[skip ci]

* fix center position

[skip ci]

assets/webconfig/content/connection_lost.html

@@ -1,15 +1,22 @@
 <div id="wrapper">
-	<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom:0">
-		<div class="navbar-header">
-			<a class="navbar-brand" href="/"><img src="img/hyperion/hyperionlogo.png" alt="Redefine ambient light!" height="55"></a>
-		</div>
-	</nav>
-
-	<div class="container" style="margin-top:50px">
-		<div class="panel panel-danger" style="box-shadow: 10px 10px 5px #BBBBBB;">
-			<div class="panel-heading"><i class="fa fa-exclamation-triangle"></i> Connection to Hyperion Service lost!</div>
-			<div class="panel-body"><a href="/">reconnect</a></div>
-		</div>
+	<div class="container" style="margin:20px auto;">
+		<center>
+			<div class="logoimg" style="width:234px;height:80px;"></div>
+			<div>
+				<h2>Lost connection to Hyperion service!<h1>
+				<hr>
+				<h4>Possible reasons:</h4>
+				<p>1. Hyperion restarts</p>
+				<p>2. You perform an update</p>
+				<p>3. An older browser session</p>
+				<p>3. Hyperion isn't running</p>
+				<hr>
+				<i class="fa fa-refresh fa-spin" style="font-size:50px"></i>
+				<h4>This page will be automatically refreshed.</h4>
+				<h4>We reconnect again after Hyperion is available.</h4>
+				<a href="/">If not, click me</a>
+			</div>
+		</center>
 	</div>
 </div>