From d75cf84d9c5ea2c5e90e3917906c4a785bb5c7e1 Mon Sep 17 00:00:00 2001
From: ncastejon <castejon.nicolas@gmail.com>
Date: Fri, 1 Jun 2018 11:36:44 +0200
Subject: [PATCH] Responsive for mobile + i18n for dataset detail information
---
.../dataset-detail.component.html | 3 +-
.../dataset-detail.component.scss | 7 +-
.../dataset-description.component.html | 18 +++--
.../dataset-description.component.scss | 10 +--
.../dataset-description.component.ts | 1 -
.../dataset-info/dataset-info.component.html | 46 ++++++------
.../dataset-info/dataset-info.component.scss | 30 ++++----
.../dataset-info/dataset-info.component.ts | 75 +++++++++++++------
.../app/geosource/models/metadata.model.ts | 5 ++
.../app/geosource/services/dataset.service.ts | 20 ++++-
webapp/src/scss/variables.scss | 2 +
11 files changed, 139 insertions(+), 78 deletions(-)
diff --git a/webapp/src/app/geosource/components/dataset-detail/dataset-detail.component.html b/webapp/src/app/geosource/components/dataset-detail/dataset-detail.component.html
index d370f14b..62e51271 100644
--- a/webapp/src/app/geosource/components/dataset-detail/dataset-detail.component.html
+++ b/webapp/src/app/geosource/components/dataset-detail/dataset-detail.component.html
@@ -31,4 +31,5 @@
</li>
</ul>
</div>
-<router-outlet></router-outlet>
\ No newline at end of file
+
+<router-outlet></router-outlet>
diff --git a/webapp/src/app/geosource/components/dataset-detail/dataset-detail.component.scss b/webapp/src/app/geosource/components/dataset-detail/dataset-detail.component.scss
index cddf377c..d86b6fcf 100644
--- a/webapp/src/app/geosource/components/dataset-detail/dataset-detail.component.scss
+++ b/webapp/src/app/geosource/components/dataset-detail/dataset-detail.component.scss
@@ -1,11 +1,16 @@
+
.tabs {
&:not(:last-child) {
margin-bottom: 0;
}
}
-.navigation-tabs {
+ul.navigation-tabs {
+
justify-content: flex-end;
+ li a:hover {
+ text-decoration: none;
+ }
li.is-active a {
border-width: 1px;
}
diff --git a/webapp/src/app/geosource/components/dataset-detail/dataset-info/dataset-description/dataset-description.component.html b/webapp/src/app/geosource/components/dataset-detail/dataset-info/dataset-description/dataset-description.component.html
index 845b8bde..fa60b06c 100644
--- a/webapp/src/app/geosource/components/dataset-detail/dataset-info/dataset-description/dataset-description.component.html
+++ b/webapp/src/app/geosource/components/dataset-detail/dataset-info/dataset-description/dataset-description.component.html
@@ -1,15 +1,17 @@
<div class="description">
- <div class="columns">
- <div class="column">
- <p class="has-text-weight-semibold is-size-7 is-uppercase">{{ description.title }}</p>
+ <div class="columns is-multiline is-marginless">
+ <div class="column is-12">
+ <p class="has-text-weight-bold is-size-6">{{ description.title }}</p>
</div>
- </div>
- <div class="columns data" *ngFor="let data of description.data; let index=index; let odd=odd; let even=even;">
- <div class="column is-2 has-text-weight-bold is-size-7" [ngClass]="{ odd: odd, even: even }">
+
+ <ng-container *ngFor="let data of description.data; let index=index; let odd=odd; let even=even;">
+ <div class="column is-2 has-text-weight-bold is-size-7"
+ [ngClass]="{ odd: odd, even: even }">
{{ data.title }}
</div>
- <div class="column is-10 is-size-7" [ngClass]="{ odd: odd, even: even }">
- {{ data.value }}
+ <div class="column is-10 is-size-7" [ngClass]="{ odd: odd, even: even }" [innerHTML]='data.value'>
+
</div>
+ </ng-container>
</div>
</div>
diff --git a/webapp/src/app/geosource/components/dataset-detail/dataset-info/dataset-description/dataset-description.component.scss b/webapp/src/app/geosource/components/dataset-detail/dataset-info/dataset-description/dataset-description.component.scss
index db716c7f..8d04733e 100644
--- a/webapp/src/app/geosource/components/dataset-detail/dataset-info/dataset-description/dataset-description.component.scss
+++ b/webapp/src/app/geosource/components/dataset-detail/dataset-info/dataset-description/dataset-description.component.scss
@@ -1,12 +1,6 @@
@import "../../../../../../scss/variables";
.description {
- margin-bottom: 1rem;
- margin-top: 1.5rem;
- .columns {
- margin-left: 0.75rem;
- margin-right: 0.75rem;
- }
.columns.data {
border-bottom: 1px solid $border;
border-right: none;
@@ -19,6 +13,10 @@
.column {
padding-top: 5px;
padding-bottom: 5px;
+ &:first-of-type {
+ padding-left: 0;
+ padding-top: 0;
+ }
}
}
diff --git a/webapp/src/app/geosource/components/dataset-detail/dataset-info/dataset-description/dataset-description.component.ts b/webapp/src/app/geosource/components/dataset-detail/dataset-info/dataset-description/dataset-description.component.ts
index 54a3768a..a47989d6 100644
--- a/webapp/src/app/geosource/components/dataset-detail/dataset-info/dataset-description/dataset-description.component.ts
+++ b/webapp/src/app/geosource/components/dataset-detail/dataset-info/dataset-description/dataset-description.component.ts
@@ -11,7 +11,6 @@ export class DatasetDescriptionComponent implements OnInit {
constructor() { }
ngOnInit() {
- console.log(this.description);
}
}
diff --git a/webapp/src/app/geosource/components/dataset-detail/dataset-info/dataset-info.component.html b/webapp/src/app/geosource/components/dataset-detail/dataset-info/dataset-info.component.html
index 2735ae91..8c29910f 100644
--- a/webapp/src/app/geosource/components/dataset-detail/dataset-info/dataset-info.component.html
+++ b/webapp/src/app/geosource/components/dataset-detail/dataset-info/dataset-info.component.html
@@ -1,34 +1,32 @@
<ng-container *ngIf="metadata">
-
- <div class="columns abstract">
- <div class="column">
- <p>
- <strong class="has-text-warning is-size-7" *ngFor="let topic of metadata.topic_category">
- {{ topic }}
- </strong>
- </p>
- <p>{{ metadata.abstract }}</p>
- </div>
-
+ <div class="container abstract">
+ <p>
+ <strong class="has-text-warning is-size-7" *ngFor="let topic of metadata.topic_category">
+ {{ topic }}
+ </strong>
+ </p>
+ <p>{{ metadata.abstract }}</p>
</div>
- <div>
+
+ <div class="section is-paddingless">
<p class="title-dgl is-size-5 has-text-weight-bold">Description du jeu de données</p>
- <div class="columns dataset-description">
- <div class="column is-3 time-data">
- <p class="has-text-weight-semibold is-size-7">Données temporelles</p>
- <p>Date de création</p>
- <p> {{ metadata.date_publication[0] | date: 'dd LLL yyyy'}}</p>
- <p>Fréquence de mise à jour</p>
- <p>XXX</p>
- <p class="has-text-weight-semibold is-size-7">Dans ce jeu de données</p>
- <p>Nombre d'enregistrements</p>
- <p>{{ metadata.total_documents}}</p>
+ <div class="columns dataset-description is-marginless">
+ <div class="column is-3">
+ <h4 class="has-text-weight-semibold is-size-7">Données temporelles</h4>
+ <p class="data-title">Date de création</p>
+ <p class="data-value"> {{ metadata.date_publication[0] | date: 'dd LLL yyyy'}}</p>
+ <p class="data-title">Fréquence de mise à jour</p>
+ <p class="data-value">-</p>
+ <br>
+ <h4 class="has-text-weight-semibold is-size-7">Dans ce jeu de données</h4>
+ <p class="data-title">Nombre d'enregistrements</p>
+ <p class="data-value">{{ metadata.total_documents}}</p>
</div>
<div class="column is-9 ">
- <ng-container *ngFor="let description of descriptions">
+ <div *ngFor="let description of descriptions" class="unitary-description">
<app-dataset-description [description]="description"></app-dataset-description>
- </ng-container>
+ </div>
</div>
</div>
</div>
diff --git a/webapp/src/app/geosource/components/dataset-detail/dataset-info/dataset-info.component.scss b/webapp/src/app/geosource/components/dataset-detail/dataset-info/dataset-info.component.scss
index bd23d0e7..a245440a 100644
--- a/webapp/src/app/geosource/components/dataset-detail/dataset-info/dataset-info.component.scss
+++ b/webapp/src/app/geosource/components/dataset-detail/dataset-info/dataset-info.component.scss
@@ -1,13 +1,25 @@
@import "../../../../../scss/variables";
.abstract {
- .column {
- background-color: white;
- }
- margin-top: 0;
+ background-color: white;
+ padding-left: 15px;
+ padding: 15px;
+ margin-bottom: 1.5rem;
+}
+
+div.unitary-description:not(:first-of-type) {
+ margin-bottom: 1rem;
+ margin-top: 1rem;
}
.dataset-description {
+ .data-title {
+ font-weight: 300;
+ color: darkgray;
+ }
+ .data-value {
+ font-size: $size-7;
+ }
& > .column {
background-color: white;
border: 1px solid $border;
@@ -19,12 +31,4 @@
.title-dgl {
margin-bottom: 1rem;
-}
-
-.file-state {
- background-color: green;
-}
-.url-download {
- color: darkred;
-}
-
+}
\ No newline at end of file
diff --git a/webapp/src/app/geosource/components/dataset-detail/dataset-info/dataset-info.component.ts b/webapp/src/app/geosource/components/dataset-detail/dataset-info/dataset-info.component.ts
index 45b11372..0215ab92 100644
--- a/webapp/src/app/geosource/components/dataset-detail/dataset-info/dataset-info.component.ts
+++ b/webapp/src/app/geosource/components/dataset-detail/dataset-info/dataset-info.component.ts
@@ -18,54 +18,83 @@ export class DatasetInfoComponent implements OnInit {
constructor(
private _route: ActivatedRoute,
private _datasetService: DatasetService,
- ) {}
+ ) { }
ngOnInit() {
this._route.parent.paramMap
- .switchMap((params: ParamMap) => this._datasetService.getMetadataById(params.get('id')))
- .subscribe((metadata: Metadata) => {
- this.metadata = metadata;
- this.constructDescriptions();
- });
+ .switchMap((params: ParamMap) => this._datasetService.getMetadataById(params.get('id')))
+ .subscribe((metadata: Metadata) => {
+ this.metadata = metadata;
+ this.constructDescriptions();
+ });
}
constructDescriptions() {
+ let language = window.location.pathname.split('/')[1];
+ if (! Array('fr', 'fr-FR', 'fr-CA').includes(language) && !Array('en', 'en-US').includes(language)) {
+ language = navigator.language;
+ }
+ const isFrenchLanguage = Array('fr', 'fr-FR', 'fr-CA').includes(language);
+
this.descriptions = [];
this.descriptions.push({
- title: 'Informations générales',
+ title: isFrenchLanguage ? 'Informations générales' : 'General Information',
data: [
- {'title': 'Source', 'value': this.metadata.contact[0].organization},
- {'title': 'Formats', 'value': this.formatProtocols(this.metadata.uri)}
+ { 'title': 'Source', 'value': this.metadata.contact[0].organization },
+ { 'title': 'Formats', 'value': this.formatProtocols(this.metadata.uri) }
]
});
this.descriptions.push({
- title: 'Catégorisation',
+ title: isFrenchLanguage ? 'Catégorisation' : 'Categorisation',
data: [
- {'title': 'Catégories', 'value': this.metadata.topic_category.join(', ')},
- {'title': 'Mots clés', 'value': this.metadata.keyword.join(', ')}
+ { 'title': isFrenchLanguage ? 'Catégories' : 'Categories', 'value': this.metadata.topic_category.join(', ') },
+ { 'title': isFrenchLanguage ? 'Mots clés' : 'Keywords', 'value': this.metadata.keyword.join(', ') }
]
});
this.descriptions.push({
- title: 'Provenance',
+ title: isFrenchLanguage ? 'Provenance' : 'Origin',
data: [
- {'title': 'Généalogie', 'value': this.metadata.lineage}
+ { 'title': isFrenchLanguage ? 'Généalogie' : 'Lineage', 'value': this.metadata.lineage }
]
});
this.descriptions.push({
- title: 'Contraintes légales',
+ title: isFrenchLanguage ? 'Contraintes légales' : 'Legal constraints',
data: [
- {'title': 'Licence', 'value': this.metadata.use_limitation[0]},
- {'title': 'Restriction', 'value': this.metadata.rights[1]}
+ { 'title': isFrenchLanguage ? 'Licence' : 'Licence', 'value': this.metadata.use_limitation[0] },
+ { 'title': isFrenchLanguage ? 'Restriction' : 'Restriction', 'value': this.metadata.rights[1] }
]
});
this.descriptions.push({
- title: 'Informations géographiques',
+ title: isFrenchLanguage ? 'Informations géographiques' : 'Geographical information',
data: [
- {'title': 'Type de représentation', 'value': this.metadata.spatial_type},
- {'title': 'Echelle', 'value': '1:' + this.metadata.denominators},
- {'title': 'Résolution', 'value': this.metadata.resolution[0].distance + ' ' + this.metadata.resolution[0].uom},
- {'title': 'Etendue géographique', 'value': ''},
- {'title': 'Système de coordonnées', 'value': ''}
+ {
+ 'title': isFrenchLanguage ? 'Type de représentation' : 'Representation type',
+ 'idi18n': '@@dataset.representation_type',
+ 'value': this.metadata.spatial_type
+ },
+ {
+ 'title': isFrenchLanguage ? 'Echelle' : 'Scale',
+ 'idi18n': '@@dataset.scale',
+ 'value': '1:' + this.metadata.denominators
+ },
+ {
+ 'title': isFrenchLanguage ? 'Résolution' : 'Resolution',
+ 'idi18n': '@@dataset.resolution',
+ 'value': this.metadata.resolution[0].distance + ' ' + this.metadata.resolution[0].uom
+ },
+ {
+ 'title': isFrenchLanguage ? 'Etendue géographique' : 'Geographical extend',
+ 'idi18n': '@@dataset.geographical_spread',
+ 'value': this.metadata.max_east + ' est,</br>'
+ + this.metadata.max_south + ' sud,</br>'
+ + this.metadata.max_north + ' nord,</br>'
+ + this.metadata.max_west + ' ouest'
+ },
+ {
+ 'title': isFrenchLanguage ? 'Système de coordonnées' : 'Coordonates system',
+ 'idi18n': '@@dataset.coordiates_system',
+ 'value': '-'
+ }
]
});
}
diff --git a/webapp/src/app/geosource/models/metadata.model.ts b/webapp/src/app/geosource/models/metadata.model.ts
index 06cf938e..ce575790 100644
--- a/webapp/src/app/geosource/models/metadata.model.ts
+++ b/webapp/src/app/geosource/models/metadata.model.ts
@@ -57,9 +57,14 @@ export class Metadata implements IMetadata {
'spatial_type': string;
'denominators': number;
'resolution': IMetadataResolution[];
+ 'max_north': number;
+ 'max_south': number;
+ 'max_east': number;
+ 'max_west': number;
constructor(data?: IMetadata) {
Object.assign(this, data);
+
}
getCategories(): string[] {
diff --git a/webapp/src/app/geosource/services/dataset.service.ts b/webapp/src/app/geosource/services/dataset.service.ts
index 85a1338c..e62e4dba 100644
--- a/webapp/src/app/geosource/services/dataset.service.ts
+++ b/webapp/src/app/geosource/services/dataset.service.ts
@@ -123,7 +123,25 @@ export class DatasetService {
getMetadataById(id: number | string): Observable<Metadata> {
return this._elasticsearchService.getFullDataById(id).map(e => {
if (e.hits.hits.length > 0) {
- return new Metadata(e.hits.hits[0]._source['metadata-fr']);
+ const metadata = new Metadata(e.hits.hits[0]._source['metadata-fr']);
+ const coordinates = e.hits.hits[0]._source['metadata-fr']['bbox']['coordinates'][0];
+ const test = coordinates.map(point => {
+ return point[0];
+ });
+ metadata.max_west = Math.max.apply(Math, coordinates.map(point => {
+ return point[0];
+ }));
+ metadata.max_east = Math.min.apply(Math, coordinates.map(point => {
+ return point[0];
+ }));
+ metadata.max_north = Math.max.apply(Math, coordinates.map(point => {
+ return point[1];
+ }));
+ metadata.max_south = Math.min.apply(Math, coordinates.map(point => {
+ return point[1];
+ }));
+
+ return metadata;
} else {
return new Metadata();
}
diff --git a/webapp/src/scss/variables.scss b/webapp/src/scss/variables.scss
index b8264b5f..b47454bf 100644
--- a/webapp/src/scss/variables.scss
+++ b/webapp/src/scss/variables.scss
@@ -17,6 +17,8 @@ $title-font: 'Open Sans';
$tabs-border-bottom-width: 1px;
$tabs-border-bottom-color: black;
$tabs-boxed-link-active-border-color: black;
+$tabs-boxed-link-hover-border-bottom-color: black;
+$tabs-link-hover-color: $blue;
// Font size settings based on 16px (default browser font-size)
$size-1: 3rem;
--
GitLab