Fixing UI layout
This commit is contained in:
parent
55f5bbc00a
commit
7e58e23727
|
|
@ -9,14 +9,35 @@
|
|||
}
|
||||
|
||||
.toolbar img {
|
||||
margin: 0 10px;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
#monitor-ui>footer>h3 {
|
||||
#content {
|
||||
max-height: 950px;
|
||||
}
|
||||
|
||||
#content::after {
|
||||
content: "";
|
||||
clear: both;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#monitor-ui>footer {
|
||||
height: 90px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
#monitor-ui>footer>h5 {
|
||||
margin: 0px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#monitor-ui>footer>h3.and {
|
||||
#monitor-ui>footer>h5.and {
|
||||
font-size: 70%;
|
||||
}
|
||||
|
||||
#list-and-details {
|
||||
float: left;
|
||||
width: 50%;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
|
@ -8,18 +8,21 @@
|
|||
</a>
|
||||
</div>
|
||||
|
||||
<div class="content" role="main">
|
||||
<div id="content" class="content" role="main">
|
||||
<app-resource-types-tree></app-resource-types-tree>
|
||||
<app-resource-list></app-resource-list>
|
||||
<app-resource-details></app-resource-details>
|
||||
<div id="list-and-details">
|
||||
<app-resource-list></app-resource-list>
|
||||
<app-resource-details></app-resource-details>
|
||||
</div>
|
||||
<app-basket></app-basket>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer>
|
||||
<h3>KEEP CALM</h3>
|
||||
<h3 class="and">AND</h3>
|
||||
<h3>LOVE</h3>
|
||||
<h3><a aria-label="D4SCIENCE" href="https://www.d4science.org/" target="_blank">D4SCIENCE</a></h3>
|
||||
<h5>KEEP CALM</h5>
|
||||
<h5 class="and">AND</h5>
|
||||
<h5>LOVE</h5>
|
||||
<h5><a aria-label="D4SCIENCE" href="https://www.d4science.org/" target="_blank">D4SCIENCE</a></h5>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
|
|
@ -9,13 +9,15 @@ import { AppComponent } from './app.component';
|
|||
import { ResourceListComponent } from './resource-list/resource-list.component';
|
||||
import { ResourceDetailsComponent } from './resource-details/resource-details.component';
|
||||
import { ResourceTypesTreeComponent } from './resource-types-tree/resource-types-tree.component';
|
||||
import { BasketComponent } from './basket/basket.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
AppComponent,
|
||||
ResourceListComponent,
|
||||
ResourceDetailsComponent,
|
||||
ResourceTypesTreeComponent
|
||||
ResourceTypesTreeComponent,
|
||||
BasketComponent
|
||||
],
|
||||
imports: [
|
||||
NgbModule,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
#basket {
|
||||
width: 34%;
|
||||
max-height: 950px;
|
||||
float: left;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
<div id="basket" class="table-bordered">
|
||||
<p>basket works!</p>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { BasketComponent } from './basket.component';
|
||||
|
||||
describe('BasketComponent', () => {
|
||||
let component: BasketComponent;
|
||||
let fixture: ComponentFixture<BasketComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ BasketComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(BasketComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-basket',
|
||||
templateUrl: './basket.component.html',
|
||||
styleUrls: ['./basket.component.css']
|
||||
})
|
||||
export class BasketComponent implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
#resource-details {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -1 +1,3 @@
|
|||
<p>resource-details works!</p>
|
||||
<div id="resource-details" class="table-bordered">
|
||||
<p>resource-details works!</p>
|
||||
</div>
|
||||
|
|
@ -1,3 +1,13 @@
|
|||
table {
|
||||
max-width: 800px;
|
||||
#resource-listing {
|
||||
max-height: 50%;
|
||||
scroll-behavior: auto;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#resource-listing > table {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
#resource-listing > table > thead > tr > th.header {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
<div style="margin-left:5px;">
|
||||
<div id="resource-listing">
|
||||
<table class="table table-striped table-bordered" *ngFor="let key of resources.keys()">
|
||||
<thead>
|
||||
<tr>
|
||||
<th [attr.colspan]="resources.get(key).mandatoryProperties.size+2">Resources identified by {{resources.get(key).type}}</th>
|
||||
<th [attr.colspan]="resources.get(key).mandatoryProperties.size+2" class="header">Resources identified by {{resources.get(key).type}}</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Resource Type</th>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
#resource-tree {
|
||||
max-width: 400px;
|
||||
width: 15%;
|
||||
float: left;
|
||||
max-height: 950px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { IsService } from '../is.service';
|
||||
import { Type } from '../type';
|
||||
import { Type } from './type';
|
||||
import { TypeDefinition } from '../is-model/types/TypeDefinition';
|
||||
|
||||
@Component({
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { TypeDefinition } from './is-model/types/TypeDefinition';
|
||||
import { TypeDefinition } from '../is-model/types/TypeDefinition';
|
||||
|
||||
export class Type {
|
||||
|
||||
Loading…
Reference in New Issue