Responsive for mobile + i18n for dataset detail information

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>

webapp/src/app/geosource/components/dataset-detail/dataset-detail.component.scss

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

webapp/src/app/geosource/components/dataset-detail/dataset-info/dataset-description/dataset-description.component.html

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

webapp/src/app/geosource/components/dataset-detail/dataset-info/dataset-description/dataset-description.component.scss

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

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);
   }
 
 }

webapp/src/app/geosource/components/dataset-detail/dataset-info/dataset-info.component.html

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

webapp/src/app/geosource/components/dataset-detail/dataset-info/dataset-info.component.scss

 @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

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': '-'
+        }
       ]
     });
   }

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[] {

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

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;