Fixing UI layout

is-monitor-frontend/src/app/app.component.css

@@ -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;
+}

is-monitor-frontend/src/app/app.component.html

@@ -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>
+		<div id="list-and-details">
-        <app-resource-details></app-resource-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>
+		<h5>KEEP CALM</h5>
-		<h3 class="and">AND</h3>
+		<h5 class="and">AND</h5>
-		<h3>LOVE</h3>
+		<h5>LOVE</h5>
-		<h3><a aria-label="D4SCIENCE" href="https://www.d4science.org/" target="_blank">D4SCIENCE</a></h3>
+		<h5><a aria-label="D4SCIENCE" href="https://www.d4science.org/" target="_blank">D4SCIENCE</a></h5>
 	</footer>
 
 </div>

is-monitor-frontend/src/app/app.module.ts

@@ -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,

is-monitor-frontend/src/app/basket/basket.component.css

@@ -0,0 +1,6 @@
+#basket {
+    width: 34%;
+    max-height: 950px;
+    float: left;
+    margin-left: 5px;
+}

is-monitor-frontend/src/app/basket/basket.component.html

@@ -0,0 +1,3 @@
+<div id="basket" class="table-bordered">
+    <p>basket works!</p>
+</div>

is-monitor-frontend/src/app/basket/basket.component.spec.ts

@@ -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();
+  });
+});

is-monitor-frontend/src/app/basket/basket.component.ts

@@ -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() {
+  }
+
+}

is-monitor-frontend/src/app/resource-details/resource-details.component.css

@@ -0,0 +1,3 @@
+#resource-details {
+    width: 100%;
+}

is-monitor-frontend/src/app/resource-details/resource-details.component.html

@@ -1 +1,3 @@
-<p>resource-details works!</p>
+<div id="resource-details" class="table-bordered">
+    <p>resource-details works!</p>
+</div>

is-monitor-frontend/src/app/resource-list/resource-list.component.css

@@ -1,3 +1,13 @@
-table  {
+#resource-listing {
-    max-width: 800px;
+    max-height: 50%;
+    scroll-behavior: auto;
+    overflow: auto;
+}
+
+#resource-listing > table  {
+    margin-bottom: 5px;
+}
+
+#resource-listing > table > thead > tr > th.header  {
+    text-align: center;
 }

is-monitor-frontend/src/app/resource-list/resource-list.component.html

@@ -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>

is-monitor-frontend/src/app/resource-types-tree/resource-types-tree.component.css

@@ -1,4 +1,6 @@
 #resource-tree {
-    max-width: 400px;
+    width: 15%;
     float: left;
+    max-height: 950px;
+    overflow: auto;
 }

is-monitor-frontend/src/app/resource-types-tree/resource-types-tree.component.ts

@@ -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({

is-monitor-frontend/src/app/resource-types-tree/type.ts

@@ -1,4 +1,4 @@
-import { TypeDefinition } from './is-model/types/TypeDefinition';
+import { TypeDefinition } from '../is-model/types/TypeDefinition';
 
 export class Type {