Update style and layout of header

src/storage/DimensionStore.js

@@ -101,7 +101,7 @@ class DimensionStore {
         return this.__Tokens.find({where:{scalarToken: scalarToken}}).then(token => {
             if (!token) return Promise.reject(new Error("Token not found"));
             return Promise.resolve(token.matrixUserId);
-        })
+        });
     }
 
     /**

web/app/page-header/page-header.component.html

@@ -1,7 +1,7 @@
 <div class="header">
     <div class="title">
         <h2 class="pageName">{{ pageName }}</h2>
-        <breadcrumb [allowBootstrap]="false"></breadcrumb>
+        <breadcrumb [allowBootstrap]="true" class="dimension-breadcrumb"></breadcrumb>
     </div>
     <div class="quickAction">
         <ng-content></ng-content>

web/app/page-header/page-header.component.scss

@@ -11,6 +11,7 @@
   margin: 0;
   width: 83.333333%; // col-sm-10
   padding: 15px;
+  display: inline-block;
 }
 
 .header .title .pageName {
@@ -24,5 +25,7 @@
   margin: 0;
   float: right;
   text-align: right;
-  width: 16.666667%; // col-sm-2
+  display: inline-block;
+  width: 15.666667%; // col-sm-2
+  position: relative;
 }

web/app/riot/riot.component.html

@@ -1,7 +1,7 @@
 <div id="wrapper">
-    <my-scalar-close></my-scalar-close>
-
-    <my-page-header pageName="Dimension"></my-page-header>
+    <my-page-header pageName="Dimension">
+        <my-scalar-close class="closeButton"></my-scalar-close>
+    </my-page-header>
 
     <div class="page-content">
         <div *ngIf="isError">

web/app/riot/riot.component.scss

@@ -1,10 +1,4 @@
 // component styles are encapsulated and only applied to their components
-my-scalar-close {
-  position: fixed;
-  top: 10px;
-  right: 15px;
-}
-
 .page-content {
   padding: 30px;
 }

web/app/riot/scalar-close/scalar-close.component.html

@@ -1 +1 @@
-<img src="/img/close.svg" (click)="closeScalar()">
+<img src="/img/close.svg" (click)="closeScalar()" alt="close" title="close" />

web/style/_riot.scss

@@ -0,0 +1,31 @@
+// The CSS for the Riot breadcrumb is specified here to ensure that it's style can be overridden.
+// In it's current position (as a component), the component-level stylesheet cannot access the
+// elements, so we specify it in a more generic location.
+
+.dimension-breadcrumb {
+  .fluid-bread {
+    padding: 0;
+  }
+
+  .fluid-bread .container {
+    padding: 0;
+  }
+
+  .fluid-bread .container .breadcrumb {
+    padding: 0;
+  }
+
+  .fluid-bread .breadcrumb-item a:hover {
+    text-decoration: none;
+  }
+
+  font-size: 13px;
+  display: block;
+  padding-top: 4px;
+}
+
+.header .quickAction .closeButton img {
+  position: absolute;
+  top: 25px;
+  right: 15px;
+}

web/style/app.scss

@@ -1,6 +1,7 @@
 // styles in src/style directory are applied to the whole page
 @import url('https://fonts.googleapis.com/css?family=Open+Sans:100|Roboto:300');
 @import '../../node_modules/angular2-toaster/toaster';
+@import "riot";
 
 body {
   background: rgb(238, 238, 238) !important;