Implement layout wireframelayout-classic

5 files changed, 252 insertions, 111 deletions

diff --git a/mavigator-server/src/main/resources/assets/stylesheets/main.css b/mavigator-server/src/main/resources/assets/stylesheets/main.css
index f254449..1da21ec 100644
--- a/mavigator-server/src/main/resources/assets/stylesheets/main.css
+++ b/mavigator-server/src/main/resources/assets/stylesheets/main.css
@@ -4,200 +4,200 @@ html, body {
 }
 
 body {
-	background-color: #e6e6e6;
+    background-color: #e6e6e6;
 }
 
 .loader {
-	width: 100%;
-	font-size: 50px;
-	text-align: center;
+    width: 100%;
+    font-size: 50px;
+    text-align: center;
 }
 
 #vfd-dashboard {
-	width: 100%;
-	height: 100%;
+    width: 100%;
+    height: 100%;
 }
 
 #vfd-dashboard header {
-	color: #eeeeee;
-	background-color: #222222;
-	padding-left: 8px;
-	padding-right: 8px;
-	padding-top: 3px;
-	padding-bottom: 3px;
-	margin-bottom: 3px;
-	display: flex;
+    color: #eeeeee;
+    background-color: #222222;
+    padding-left: 8px;
+    padding-right: 8px;
+    padding-top: 3px;
+    padding-bottom: 3px;
+    margin-bottom: 3px;
+    display: flex;
 }
 
 #vfd-dashboard header > * {
-	margin: 5px;
-	flex: 1;
+    margin: 5px;
+    flex: 1;
 }
 
 #vfd-dashboard header > :nth-child(1) {
-	text-align: left;
+    text-align: left;
 }
 
 #vfd-dashboard header > :nth-child(2) {
-	text-align: center;
+    text-align: center;
 }
 
 #vfd-dashboard header > :nth-child(3) {
-	text-align: right;
+    text-align: right;
 }
 
 /* dashboard layout */
 .d-container {
-	display: flex;
-	align-content: flex-start;
-	align-items: stretch;
+    display: flex;
+    align-content: flex-start;
+    align-items: stretch;
 }
 
 .d-container > * {
-	flex: 1;
+    flex: 1;
 }
 
 .d-column {
-	flex-direction: column;
+    flex-direction: column;
 }
 
 .d-row {
-	flex-direction: row;
+    flex-direction: row;
 }
 
 .d-above {
-	flex: none;
+    flex: none;
 }
 
 .d-left {
-	flex: 1 1 30%;
+    flex: 1 1 30%;
 }
 
 .d-main {
-	flex: 1 1 70%;
+    flex: 1 1 70%;
 }
 
 .d-panel {
-	margin: 3px;
-	padding: 10px;
-	background-color: white;
-	border-radius: 3px;
+    margin: 3px;
+    padding: 10px;
+    background-color: white;
+    border-radius: 3px;
 }
 
 
 /* Mode styles */
 .mode {
-	display: inline-block;
-	box-sizing: border-box;
-	text-decoration: normal;
-	margin-right: 5px;
+    display: inline-block;
+    box-sizing: border-box;
+    text-decoration: normal;
+    margin-right: 5px;
 }
 
 .mode.danger {
-	color: #d9534f;
-	text-shadow: 0 0 5px #d9534f;
-	animation: danger-blink 1s linear infinite;
-	-webkit-animation: danger-blink 1s linear infinite;
+    color: #d9534f;
+    text-shadow: 0 0 5px #d9534f;
+    animation: danger-blink 1s linear infinite;
+    -webkit-animation: danger-blink 1s linear infinite;
 }
 
 .mode.warning {
-	color: #f0ad4e;
-	text-shadow: 0 0 5px #f0ad4e;
+    color: #f0ad4e;
+    text-shadow: 0 0 5px #f0ad4e;
 }
 
 .mode.info {
-	color: #5bc0de;
-	text-shadow: 0 0 5px #5bc0de;
+    color: #5bc0de;
+    text-shadow: 0 0 5px #5bc0de;
 }
 
 .mode.success {
-	color: #5cb85c;
-	text-shadow: 0 0 5px #5cb85c;
+    color: #5cb85c;
+    text-shadow: 0 0 5px #5cb85c;
 }
 
 .mode.off {
-	color: #eeeeee;
-	text-shadow: none;
-	animation: none;
-	-webkit-animation: none;
+    color: #eeeeee;
+    text-shadow: none;
+    animation: none;
+    -webkit-animation: none;
 }
 
 /* TODO: Rules below are maybe obsolete and need to be reviewed */
 .table-instrument {
-	table-layout: fixed;
-	width: 100%;
+    table-layout: fixed;
+    width: 100%;
 }
 
 .table-instrument td {
-	width: 100%;
+    width: 100%;
 }
 
 .heartbeat {
-	color: rgba(165, 25, 25, 1);
-	animation: heartbeat 2s linear infinite;
-	-webkit-animation: heartbeat 2s linear infinite;
+    color: rgba(165, 25, 25, 1);
+    animation: heartbeat 2s linear infinite;
+    -webkit-animation: heartbeat 2s linear infinite;
 }
 
 @keyframes heartbeat {
-	0% {
-		transform: scale(1);
-	}
-	7% {
-		transform: scale(1.3);
-	}
-	14% {
-		transform: scale(1);
-	}
-	21% {
-		transform: scale(1.3);
-	}
-	28% {
-		transform: scale(1);
-	}
+    0% {
+	transform: scale(1);
+    }
+    7% {
+	transform: scale(1.3);
+    }
+    14% {
+	transform: scale(1);
+    }
+    21% {
+	transform: scale(1.3);
+    }
+    28% {
+	transform: scale(1);
+    }
 }
 @-webkit-keyframes heartbeat {
-	0% {
-		transform: scale(1);
-	}
-	7% {
-		transform: scale(1.3);
-	}
-	14% {
-		transform: scale(1);
-	}
-	21% {
-		transform: scale(1.3);
-	}
-	28% {
-		transform: scale(1);
-	}
+    0% {
+	transform: scale(1);
+    }
+    7% {
+	transform: scale(1.3);
+    }
+    14% {
+	transform: scale(1);
+    }
+    21% {
+	transform: scale(1.3);
+    }
+    28% {
+	transform: scale(1);
+    }
 }
 
 @keyframes danger-blink {
-	0% {
-		color: #eeeeee;
-		text-shadow: none;
-	}
-	50% {
-		color: #d9534f;
-		text-shadow: 0 0 5px #d9534f;
-	}
-	100% {
-		color: #eeeeee;
-		text-shadow: none;
-	}
+    0% {
+	color: #eeeeee;
+	text-shadow: none;
+    }
+    50% {
+	color: #d9534f;
+	text-shadow: 0 0 5px #d9534f;
+    }
+    100% {
+	color: #eeeeee;
+	text-shadow: none;
+    }
 }
 @-webkit-keyframes danger-blink {
-	0% {
-		color: #eeeeee;
-		text-shadow: none;
-	}
-	50% {
-		color: #d9534f;
-		text-shadow: 0 0 5px #d9534f;
-	}
-	100% {
-		color: #eeeeee;
-		text-shadow: none;
-	}
+    0% {
+	color: #eeeeee;
+	text-shadow: none;
+    }
+    50% {
+	color: #d9534f;
+	text-shadow: 0 0 5px #d9534f;
+    }
+    100% {
+	color: #eeeeee;
+	text-shadow: none;
+    }
 }
\ No newline at end of file
diff --git a/mavigator-server/src/main/resources/assets/stylesheets/new.css b/mavigator-server/src/main/resources/assets/stylesheets/new.css
new file mode 100644
index 0000000..50f352d
--- /dev/null
+++ b/mavigator-server/src/main/resources/assets/stylesheets/new.css
@@ -0,0 +1,59 @@
+body {
+    background: black;
+}
+
+main {
+    width: 100vw;
+    height: 56.25vw; /* 100/56.25 = 1.778 */
+    max-height: 100vh;
+    max-width: 177.78vh; /* 16/9 = 1.778 */
+    margin: auto;
+    position: absolute;
+    top:0; bottom:0; /* vertical center */
+    left:0; right:0; /* horizontal center */
+
+    background: pink;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+}
+
+#mcp {
+    background: purple;
+
+    width: 100%;
+    height: 15%;
+}
+
+#mrow {
+    width: 100%;
+    height: 88.75%;
+
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+}
+
+#ecam {
+    background: lightblue;
+
+    width: 20%;
+    height: 100%;
+}
+
+#primary {
+    background: orange;
+
+    width: 80%;
+    height: 100%;
+}
+
+#fms {
+    background: gray;
+
+    width: 100%;
+    height: 5%;
+}
\ No newline at end of file
diff --git a/mavigator-server/src/main/resources/assets/stylesheets/reset.css b/mavigator-server/src/main/resources/assets/stylesheets/reset.css
new file mode 100644
index 0000000..af94440
--- /dev/null
+++ b/mavigator-server/src/main/resources/assets/stylesheets/reset.css
@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
\ No newline at end of file
diff --git a/mavigator-server/src/main/scala/mavigator/Router.scala b/mavigator-server/src/main/scala/mavigator/Router.scala
index 07e40b0..9475f45 100644
--- a/mavigator-server/src/main/scala/mavigator/Router.scala
+++ b/mavigator-server/src/main/scala/mavigator/Router.scala
@@ -60,7 +60,7 @@ object Router {
       }
     } ~
     pathEndOrSingleSlash {
-      get {
+      get {/*
         val html = mavigator.views.html.app(
           "Index",
           "mavigator_index_Main",
@@ -69,6 +69,8 @@ object Router {
           )
         )
         complete(html)
+            */
+        complete(mavigator.views.html.next("test"))
       }
     }
   )
diff --git a/mavigator-server/src/main/twirl/mavigator/views/next.scala.html b/mavigator-server/src/main/twirl/mavigator/views/next.scala.html
new file mode 100644
index 0000000..c34f6ed
--- /dev/null
+++ b/mavigator-server/src/main/twirl/mavigator/views/next.scala.html
@@ -0,0 +1,32 @@
+@(title: String)
+
+<!DOCTYPE html>
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <!-- Become fullscreen on mobile -->
+    <meta name="mobile-web-app-capable" content="yes">
+
+    <title>Mavigator - @title</title>
+
+    <link rel="shortcut icon" href="/assets/images/logo.svg">
+    <link rel="stylesheet" media="screen" href="/assets/stylesheets/reset.css">
+    <link rel="stylesheet" media="screen" href="/assets/stylesheets/new.css">
+  </head>
+
+  <body>
+
+    <main>
+      <div id="mcp">mcp</div>
+      <div id="mrow">
+	<div id="ecam">eicas</div>
+	<div id="primary">primary</div>
+      </div>
+      <div id="fms">mcp</div>
+    </main>
+
+  </body>
+</html>