WIP: design download section

src/app/search/components/result/datatable.component.html

 <accordion>
-    <accordion-group (isOpenChange)="getSearchData.emit([page, nbItems, sortedCol, sortedOrder])" #ag [panelClass]="'custom-accordion'" class="my-2">
+    <accordion-group #ag [panelClass]="'custom-accordion'" class="my-2">
         <button class="btn btn-link btn-block clearfix" accordion-heading>
             <div class="pull-left float-left">
                 Datatable

src/app/search/components/result/datatable.component.ts

@@ -34,6 +34,7 @@ export class DatatableComponent implements OnInit {
     ngOnInit() {
         this.sortedCol = this.datasetAttributeList.find(a => a.search_flag === 'ID').id; 
         this.sortedOrder = 'a';
+        this.getSearchData.emit([this.page, this.nbItems, this.sortedCol, this.sortedOrder]);
     }
 
     getOutputList(): Attribute[] {

src/app/search/components/result/download.component.css

 .dl-btn {
-    width: 30px;
-    height: 30px;
+    height: 80px;
 }
 
 .title, .badge {

src/app/search/components/result/download.component.html

@@ -24,7 +24,7 @@
     </li>
 </ul> -->
 
-<div class="jumbotron">
+<div class="jumbotron py-5">
     <div class="title">Dataset <strong>{{ datasetName }}</strong> selected with <strong>{{ dataLength }}</strong> objects found.</div>
     <hr class="my-4">
     <p class="lead">Download results just here:</p>
@@ -38,7 +38,9 @@
                     </div>
                 </div> -->
                 <!-- BTN -->
-                <button class="btn btn-lg btn-block btn-success">CSV</button>
+                <button class="btn btn-lg btn-block btn-success">
+                    <img src="assets/logo_csv.png" class="dl-btn" alt="">
+                </button>
                 <!-- BADGE -->
                 <!-- <button class="btn badge badge-pill badge-success">CSV</button> -->
             </div>
@@ -50,7 +52,9 @@
                     </div>
                 </div> -->
                 <!-- BTN -->
-                <button class="btn btn-lg btn-block btn-success">ASCII</button>
+                <button class="btn btn-lg btn-block btn-success">
+                    <img src="assets/logo_ascii.png" class="dl-btn" alt="">
+                </button>
                 <!-- BADGE -->
                 <!-- <button class="btn badge badge-pill badge-success">ASCII</button> -->
             </div>
@@ -62,7 +66,9 @@
                     </div>
                 </div> -->
                 <!-- BTN -->
-                <button class="btn btn-lg btn-success btn-block">VO</button>
+                <button class="btn btn-lg btn-success btn-block">
+                    <img src="assets/logo_vo.png" class="dl-btn" alt="">
+                </button>
                 <!-- BADGE -->
                 <!-- <button class="btn badge badge-pill badge-success">VO</button> -->
             </div>
@@ -74,7 +80,9 @@
                     </div>
                 </div> -->
                 <!-- BTN -->
-                <button class="btn btn-lg btn-block btn-success">SPECTRA</button>
+                <button class="btn btn-lg btn-block btn-success">
+                    <img src="assets/logo_spectra.png" class="dl-btn" alt="">
+                </button>
                 <!-- BADGE -->
                 <!-- <button class="btn badge badge-pill badge-success">SPECTRA</button> -->
             </div>
@@ -86,7 +94,9 @@
                     </div>
                 </div> -->
                 <!-- BTN -->
-                <button class="btn btn-lg btn-block btn-success">STAMP</button>
+                <button class="btn btn-lg btn-block btn-success">
+                    <img src="assets/logo_stamp.png" class="dl-btn" alt="">
+                </button>
                 <!-- BADGE -->
                 <!-- <button class="btn badge badge-pill badge-success">STAMP</button> -->
             </div>

src/styles.css

@@ -4,6 +4,10 @@
     color: #7AC29A;
 }
 
+.theme-bg-color {
+    background-color: #7AC29A;
+}
+
 
 /* Custom styles for external library components */
 /* Needs to be in global stylesheet due to ViewEncapsulation */