From 6921bc7f4ad06a3c2f64804d8a7807bb8bd2c874 Mon Sep 17 00:00:00 2001
From: Willem Dantuma <willem.dantuma@dobs.nl>
Date: Tue, 3 Mar 2020 21:02:33 +0100
Subject: [PATCH] Styling changes

---
 .../selected-item-temporal.component.html      | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/projects/common-map/src/fm-map/components/selected-item-temporal/selected-item-temporal.component.html b/projects/common-map/src/fm-map/components/selected-item-temporal/selected-item-temporal.component.html
index 2fcae7f..b20e93c 100644
--- a/projects/common-map/src/fm-map/components/selected-item-temporal/selected-item-temporal.component.html
+++ b/projects/common-map/src/fm-map/components/selected-item-temporal/selected-item-temporal.component.html
@@ -5,10 +5,24 @@
       <div class="mb-2"><a href="#" (click)="handleBackToList($event)" i18n>Back</a></div>
       <div class="card menu-card">
         <h1>{{item.name}}</h1>
-        <h3>{{item.dataDate|date}}</h3>
       </div>
       <div class="legend-container" *ngIf="item?.data.layers;let layers">
         <div class="card menu-card">
+          <h5>Date image: {{item.dataDate | date:'shortDate'}}</h5>
+          <div class="d-flex justify-content-between">
+            <div *ngIf="hasPrevious()">
+              <button type="button" class="btn btn-link p-0" (click)="handlePreviousTemporal($event)" i18n>
+                <i class="fa fa-arrow-circle-left" aria-hidden="true" title="Previous"></i>&nbsp;{{ previousDate() | date:'shortDate'}}
+              </button>
+            </div>
+            <div *ngIf="hasNext()">
+              <button type="button" class="btn btn-link p-0" (click)="handleNextTemporal($event)" i18n>
+                {{ nextDate()| date:'shortDate' }}&nbsp;<i class="fa fa-arrow-circle-right" aria-hidden="true" title="Next"></i>
+              </button>
+            </div>
+          </div>
+        </div>
+        <div class="card menu-card pt-2">
           <div *ngIf="layers.length>1">
             <select (change)="onLayerChanged($event.target.value)" [value]="itemLayer.layerIndex">
               <option *ngFor="let l of layers;" [value]="l.index">{{l.name}}</option>
@@ -21,8 +35,6 @@
         <ul class="p-0 mt-2">
           <li *ngIf="item.isEditable"><a href="#" class="mt-1 mr-1" (click)="handleOnEdit(item)" i18n><i class="fa fa-pencil" aria-hidden="true" title="Edit"></i> Edit</a></li>
           <li *ngIf="itemTypeService.isLayer(item)"><a href="#" (click)="handleAddAsLayer(item,itemLayer.layerIndex)" class="mt-1 mr-1" i18n><i class="fa fa-eye" aria-hidden="true" title="Add as layer"></i> Add as overlay</a></li>
-          <li *ngIf="hasNext()"><a href="#" (click)="handleNextTemporal($event)" class="mt-1 mr-1" i18n>Next <span>({{nextDate()|date}})</span></a></li>
-          <li *ngIf="hasPrevious()"><a href="#" (click)="handlePreviousTemporal($event)" class="mt-1 mr-1" i18n>Previous <span>({{previousDate()|date}})</span></a></li>
         </ul>
       </div>
     </div>