- add bulma style

- add components: messages, locate-button
- move index.html into src folder
- move to angular build tools
- styles.css -> styles.scss

src/app/app.component.html

@@ -1,18 +1,93 @@
-<app-map  [mapId]="'map'" [mapOptions]="mapOptions" [serviceUrl]="providerUrl" [baseMaps]="baseMaps"  
-(onSelected)="onStationSelected($event)" (onMapInitializedEvent)="onMapInitialized($event)"></app-map>
-
-<!-- <span>{{ name }} app is running!</span> -->
-
-<!-- <div>
-  <n52-station-map-selector [mapId]="'timeseries'" [serviceUrl]="providerUrl"
-    [mapOptions]="mapOptions"></n52-station-map-selector>
-</div>
-<div>Is loading: {{loadingStations}}</div> -->
-
-
-<!-- <h1>{{ name }}</h1>
-<nav>
-  <a routerLink="/dashboard">Dashboard</a>
-  <a routerLink="/map">Map</a> 
+<!-- <nav class="navbar">   
+    <div class="navbar-brand">
+        <a class="navbar-item">
+            <img src="https://bulma.io/images/bulma-logo.png">
+        </a>
+    </div>
+</nav> -->
+<nav class="navbar has-shadow" role="navigation" aria-label="main navigation">
+    <div class="navbar-brand">
+        <a class="" href="http://geomon.geologie.ac.at/" target="_blank">
+            <img src="assets/Tethys-icon.png">
+        </a>
+        <a role="button" id="menu-icon" class="navbar-burger" aria-label="menu" aria-expanded="false"
+            data-target="navbarBasicExample">
+            <span aria-hidden="true"></span>
+            <span aria-hidden="true"></span>
+            <span aria-hidden="true"></span>
+        </a>
+    </div>
+    <div id="navbarBasicExample" class="navbar-menu">
+        <div class="navbar-start">
+            <span id='map-title' class="navbar-item">
+            </span>
+            <a class="navbar-item">
+                Documentation
+            </a>
+        </div>
+        <div class="navbar-end">
+            <div class="navbar-item">
+                <div class="buttons">
+                    <a class="button is-light">
+                        Log in
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
 </nav>
-<router-outlet></router-outlet> -->
+
+<section id="app" class="hero">
+
+
+    <div class="main columns">
+
+        <div class="canvas-area is-8 column">
+            <div id="div-map">
+
+                <app-map [mapId]="'map'" [mapOptions]="mapOptions" [serviceUrl]="providerUrl" [baseMaps]="baseMaps"
+                    (onSelected)="onStationSelected($event)" (onMapInitializedEvent)="onMapInitialized($event)">
+                </app-map>
+                <!-- <router-outlet></router-outlet> -->
+            </div>
+        </div>
+
+        <div class="input-area is-4 column">
+            <div class="columns">
+                <app-messages></app-messages>
+            </div>
+        </div>
+    </div>
+    <!-- <app-dashboard></app-dashboard> -->
+    <!-- <span>{{ name }} app is running!</span> -->
+
+    <!-- <div>
+    <n52-station-map-selector [mapId]="'timeseries'" [serviceUrl]="providerUrl"
+        [mapOptions]="mapOptions"></n52-station-map-selector>
+    </div>
+    <div>Is loading: {{loadingStations}}</div> -->
+
+
+    <!-- <h1>{{ name }}</h1>
+    <nav>
+    <a routerLink="/dashboard">Dashboard</a>
+    <a routerLink="/map">Map</a> 
+    </nav>-->
+    <!-- <router-outlet></router-outlet>  -->
+
+    <!-- <app-messages></app-messages> -->
+
+</section>
+
+
+
+<!-- footer -->
+<!-- <footer class="footer">
+    <div class="container">
+        <div class="content has-text-centered">
+            <p>
+                Made with <3 by 
+            </p>
+        </div>
+    </div>
+</footer> -->