Fixing UI layout

master
Luca Frosini 5 years ago
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() {
}
}

@ -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…
Cancel
Save