Add design changes

src/main/ts/src/app/app.component.html

@@ -1,13 +1,12 @@
 <app-header></app-header>
-<main class="container" *ngIf="!loading && connectedToApi">
-  <router-outlet></router-outlet>
-</main>
-<main class="container" *ngIf="!loading && !connectedToApi">
-  <h3>Vous n'êtes pas connecté au serveur.</h3>
-  Veuillez contacter votre administrateur ou réessayer plus tard.
-</main>
-<main class="container" *ngIf="loading">
-  <h3>Chargement...</h3>
-</main>
-<!-- <app-footer></app-footer> -->
-
+<div id="versionDiv" *ngIf="!loading && connectedToApi">
+  APP Version : {{appVersion}} - API Version : {{apiVersion}}
+</div>
+<main class="container">
+  <router-outlet *ngIf="!loading && connectedToApi"></router-outlet>
+  <div *ngIf="!loading && !connectedToApi">
+    <h3>Vous n'êtes pas connecté au serveur.</h3>
+    Veuillez contacter votre administrateur ou réessayer plus tard.
+  </div>
+  <h3 *ngIf="loading">Chargement...</h3>
+</main>

src/main/ts/src/app/app.component.scss

@@ -1,4 +1,14 @@
 main {
-  margin-top: 84px;
-  padding-top: 25px;
+  padding-top: 15px;
+  flex:1 0 auto;
+}
+
+#versionDiv {
+  background-color: #388e3c;
+  color: white;
+  padding: 2px 10px;
+  margin-top: -6px;
+  font-size: 12px;
+  font-style: italic;
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
 }

src/main/ts/src/app/app.component.ts

@@ -10,6 +10,7 @@ import { environment } from '../environments/environment';
 export class AppComponent implements OnInit {
   title = 'app';
   loading = true;
+  appVersion = environment.appVersion;
   apiVersion;
   connectedToApi = false;
 

src/main/ts/src/app/header/header.component.html

@@ -24,4 +24,5 @@
 			</li>
 		</ul>
 	</links>
+	<div style="background-color: blue;">Test</div>
 </mdb-navbar>

src/main/ts/src/styles.scss

@@ -1,4 +1,19 @@
 /* You can add global styles to this file, and also import other style files */
+html {
+	height: 100%;
+}
+
+body {
+	// 64px for the header and 15px for a litle margin.
+	padding-top: 90px;
+	padding-bottom: 30px;
+	display: flex;
+	position: relative;
+	flex-direction: column;
+	justify-content:space-between;
+	min-height: 100%;
+}
+
 .btn-rounded {
   border-radius: 10em;
 }