Update style and layout of header
This commit is contained in:
parent
9e49058cf9
commit
b5a8231a7a
|
@ -101,7 +101,7 @@ class DimensionStore {
|
||||||
return this.__Tokens.find({where:{scalarToken: scalarToken}}).then(token => {
|
return this.__Tokens.find({where:{scalarToken: scalarToken}}).then(token => {
|
||||||
if (!token) return Promise.reject(new Error("Token not found"));
|
if (!token) return Promise.reject(new Error("Token not found"));
|
||||||
return Promise.resolve(token.matrixUserId);
|
return Promise.resolve(token.matrixUserId);
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<h2 class="pageName">{{ pageName }}</h2>
|
<h2 class="pageName">{{ pageName }}</h2>
|
||||||
<breadcrumb [allowBootstrap]="false"></breadcrumb>
|
<breadcrumb [allowBootstrap]="true" class="dimension-breadcrumb"></breadcrumb>
|
||||||
</div>
|
</div>
|
||||||
<div class="quickAction">
|
<div class="quickAction">
|
||||||
<ng-content></ng-content>
|
<ng-content></ng-content>
|
||||||
|
|
|
@ -11,6 +11,7 @@
|
||||||
margin: 0;
|
margin: 0;
|
||||||
width: 83.333333%; // col-sm-10
|
width: 83.333333%; // col-sm-10
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header .title .pageName {
|
.header .title .pageName {
|
||||||
|
@ -24,5 +25,7 @@
|
||||||
margin: 0;
|
margin: 0;
|
||||||
float: right;
|
float: right;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
width: 16.666667%; // col-sm-2
|
display: inline-block;
|
||||||
|
width: 15.666667%; // col-sm-2
|
||||||
|
position: relative;
|
||||||
}
|
}
|
|
@ -1,7 +1,7 @@
|
||||||
<div id="wrapper">
|
<div id="wrapper">
|
||||||
<my-scalar-close></my-scalar-close>
|
<my-page-header pageName="Dimension">
|
||||||
|
<my-scalar-close class="closeButton"></my-scalar-close>
|
||||||
<my-page-header pageName="Dimension"></my-page-header>
|
</my-page-header>
|
||||||
|
|
||||||
<div class="page-content">
|
<div class="page-content">
|
||||||
<div *ngIf="isError">
|
<div *ngIf="isError">
|
||||||
|
|
|
@ -1,10 +1,4 @@
|
||||||
// component styles are encapsulated and only applied to their components
|
// component styles are encapsulated and only applied to their components
|
||||||
my-scalar-close {
|
|
||||||
position: fixed;
|
|
||||||
top: 10px;
|
|
||||||
right: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-content {
|
.page-content {
|
||||||
padding: 30px;
|
padding: 30px;
|
||||||
}
|
}
|
|
@ -1 +1 @@
|
||||||
<img src="/img/close.svg" (click)="closeScalar()">
|
<img src="/img/close.svg" (click)="closeScalar()" alt="close" title="close" />
|
31
web/style/_riot.scss
Normal file
31
web/style/_riot.scss
Normal file
|
@ -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;
|
||||||
|
}
|
|
@ -1,6 +1,7 @@
|
||||||
// styles in src/style directory are applied to the whole page
|
// 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 url('https://fonts.googleapis.com/css?family=Open+Sans:100|Roboto:300');
|
||||||
@import '../../node_modules/angular2-toaster/toaster';
|
@import '../../node_modules/angular2-toaster/toaster';
|
||||||
|
@import "riot";
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background: rgb(238, 238, 238) !important;
|
background: rgb(238, 238, 238) !important;
|
||||||
|
|
Loading…
Reference in a new issue