Commit 38139033 authored by Thibault Ehrhart's avatar Thibault Ehrhart

Minor UI updates

parent 8eee1bfe
......@@ -1417,7 +1417,7 @@
},
"browserify-rsa": {
"version": "4.0.1",
"resolved": "http://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.0.1.tgz",
"resolved": "https://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.0.1.tgz",
"integrity": "sha1-IeCr+vbyApzy+vsTNWenAdQTVSQ=",
"dev": true,
"requires": {
......@@ -1461,7 +1461,7 @@
},
"buffer": {
"version": "4.9.1",
"resolved": "http://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz",
"resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz",
"integrity": "sha1-bRu2AbB6TvztlwlBMgkwJ8lbwpg=",
"dev": true,
"requires": {
......@@ -1518,7 +1518,7 @@
},
"readable-stream": {
"version": "1.1.14",
"resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz",
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz",
"integrity": "sha1-fPTFTvZI44EwhMY23SB54WbAgdk=",
"dev": true,
"requires": {
......@@ -1831,7 +1831,7 @@
},
"chalk": {
"version": "1.1.3",
"resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
"integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
"dev": true,
"requires": {
......@@ -2944,7 +2944,7 @@
},
"readable-stream": {
"version": "1.1.14",
"resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz",
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz",
"integrity": "sha1-fPTFTvZI44EwhMY23SB54WbAgdk=",
"dev": true,
"requires": {
......@@ -3022,7 +3022,7 @@
},
"dom-converter": {
"version": "0.1.4",
"resolved": "http://registry.npmjs.org/dom-converter/-/dom-converter-0.1.4.tgz",
"resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.1.4.tgz",
"integrity": "sha1-pF71cnuJDJv/5tfIduexnLDhfzs=",
"dev": true,
"requires": {
......@@ -5856,7 +5856,7 @@
},
"readable-stream": {
"version": "1.0.34",
"resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
"integrity": "sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=",
"dev": true,
"requires": {
......@@ -8272,7 +8272,7 @@
},
"chalk": {
"version": "1.1.3",
"resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
"integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
"dev": true,
"optional": true,
......@@ -8598,7 +8598,7 @@
},
"octicons": {
"version": "4.4.0",
"resolved": "http://registry.npmjs.org/octicons/-/octicons-4.4.0.tgz",
"resolved": "https://registry.npmjs.org/octicons/-/octicons-4.4.0.tgz",
"integrity": "sha1-rKO9MvXcHZB6jQ3nRPeODFThlEY=",
"dev": true
},
......@@ -8682,7 +8682,7 @@
},
"os-locale": {
"version": "1.4.0",
"resolved": "http://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
"resolved": "https://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
"integrity": "sha1-IPnxeuKe00XoveWDsT0gCYA8FNk=",
"dev": true,
"requires": {
......
<div *ngIf="selectedItem">
<div class="header padding-right">
<div class="date">{{ selectedItem.dateCreated | date: 'dd/MM/yyyy HH:mm:ss' }}</div>
<div class="location">{{ selectedItem.locality }} - {{ getCountryName(selectedItem.country) }}</div>
<div class="header-text">
<div class="date">{{ selectedItem.dateCreated | date: 'dd/MM/yyyy HH:mm:ss' }}</div>
<div class="location">{{ selectedItem.locality }} - {{ getCountryName(selectedItem.country) }}</div>
</div>
<!--
<div class="share-buttons">
<a href="https://www.facebook.com/" target="_blank"><i class="fa fa-facebook icon" aria-hidden="true"></i></a>
......
......@@ -42,7 +42,7 @@
.header {
border-bottom: 1px solid $border-color;
height: 60px;
min-height: 60px;
margin-left: 3em;
width: calc(100% - 6em);
margin-top: -1px;
......@@ -63,6 +63,11 @@
text-align: right;
}
.header-text {
display: flex;
flex-wrap: wrap;
}
.header-buttons {
flex: 1;
......@@ -70,6 +75,7 @@
flex-direction: row;
justify-content: flex-end;
flex-wrap: wrap-reverse;
align-items: center;
}
.fullscreen-button, .close-button {
......
<div class="container">
<div class="row">
<div class="column sidebar-search-filters padding" *ngIf="!isFullscreen">
<a href="/"><img class="logo" src="assets/images/logo.png" alt="Asrael"/></a>
<a routerLink="/"><img class="logo" src="assets/images/logo.png" alt="Asrael"/></a>
<form [formGroup]="formGroupSearch" novalidate>
<div class="form-group">
<label for="inputSchema">Schema</label>
<ng-select [items]="schemas"
class="form-control"
bindLabel="label"
bindValue="id"
placeholder="Select a schema"
clearAllText="Clear"
formControlName="schema">
</ng-select>
</div>
<div *ngIf="formGroupSearch.value.schema">
<div>Schema Properties</div>
<hr><br>
<div class="form-group">
<label>Number of injured</label>
<input type="text" class="form-control" placeholder="Enter a value">
</div>
<div class="form-group">
<label>Number of survivors</label>
<input type="text" class="form-control" placeholder="Enter a value">
</div>
<div class="form-group">
<label>Number of deaths</label>
<input type="text" class="form-control" placeholder="Enter a value">
</div>
<div class="form-group">
<label>Operator</label>
<input type="text" class="form-control" placeholder="Enter a value">
</div>
<div class="form-group">
<label>Aircraft registration</label>
<input type="text" class="form-control" placeholder="Enter a value">
</div>
<div class="form-group">
<label>Flight number</label>
<input type="text" class="form-control" placeholder="Enter a value">
</div>
</div>
<div>News Metadata</div>
<hr><br>
<div class="form-group">
<label for="inputKeywords">Keywords</label>
<input type="text" class="form-control" formControlName="keywords" placeholder="Enter some keywords">
</div>
<div class="form-group">
<label for="inputWhat">What?</label>
<label for="inputWhat">What? (subject code)</label>
<ng-select [items]="subjectCodes"
class="form-control"
bindLabel="label"
......@@ -18,12 +64,14 @@
formControlName="selectedSubjectCodes">
</ng-select>
</div>
<div class="form-group">
<!--
<div class="form-group">
<label for="inputWho">Who?</label>
<input type="text" class="form-control" formControlName="who" placeholder="Select a person">
</div>
-->
<div class="form-group">
<label for="inputWhere">Where?</label>
<label for="inputWhere">Where? (news created)</label>
<ng-select [items]="locations"
class="form-control"
bindLabel="label"
......@@ -34,11 +82,11 @@
</ng-select>
</div>
<div class="form-group">
<label for="inputWhen">When?</label>
<label for="inputWhen">When? (news created)</label>
<input type="date" class="form-control" formControlName="date" placeholder="Select a date">
</div>
<div>Annotations</div>
<div>Entity Annotations</div>
<hr><br>
<div class="form-group" *ngFor="let annotation of annotations">
......@@ -66,7 +114,10 @@
</li>
</ul>
</div>
<div class="container">
<div class="container home-list">
<div class="loader" [hidden]="!isLoading">
<div class="spinner"></div>
</div>
<div class="list">
<div class="item padding" *ngFor="let item of news" [routerLink]="['details', item.s.value.substr(item.s.value.lastIndexOf('/') + 1)]" routerLinkActive="active" (click)="selectItem(item)">
<div class="text">
......
......@@ -43,6 +43,9 @@
.results-count {
flex: 1;
text-align: right;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.list {
......@@ -82,3 +85,8 @@
}
}
}
.home-list {
width: 100%;
height: 100%;
}
......@@ -24,7 +24,7 @@ export class HomeComponent implements OnInit {
news: any = [];
sub: any;
selectedItem: any;
isLoading: boolean = false;
isLoading: boolean = true;
isFullscreen: boolean = false;
inDetailsView: boolean = false;
......
......@@ -121,7 +121,6 @@ a:hover {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
width: 100%;
}
......@@ -270,3 +269,50 @@ form {
color: #ffcc2e;
}
}
.loader {
position: relative;
height: 100%;
.spinner {
width: 50px;
height: 50px;
border-radius: 100%;
margin: auto;
position: absolute;
left: 0;right: 0;top: 0;bottom: 0;
border: 1px solid;
color: $primary-color;
animation: rotate 1.3s linear 0s infinite;
&:after {
content: '';
position: absolute;
width: 15px;
height: 15px;
background: #fff;
border-radius: 100%;
background-color: $primary-color;
left: -5px;
top: 18px;
}
}
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
hl1 {
display: block;
font-weight: bold;
font-size: large;
}
hl2 {
display: block;
font-weight: bold;
font-size: 140%;
margin-top: 1em;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment