Commit 5d284ec3 authored by ext.sopra.ncastejon's avatar ext.sopra.ncastejon
Browse files

Change download and api svg. Refactor code and create new components for the download page.

parent 3e03e0a4
......@@ -12,19 +12,19 @@
}
&.type-KML {
border: 1px solid #98b3e9;
border: 1px solid #939df2;
}
&.type-WMS {
border: 1px solid #a6e0c1;
border: 1px solid #e5a1f1;
}
&.type-WS {
border: 1px solid #eec982;
border: 1px solid #78d7d7;
}
&.type-WFS {
border: 1px solid #ec9bd5;
border: 1px solid #7bc0f5;
}
&.type-WCS {
......
......@@ -19,16 +19,18 @@
<div class="resource-information">
<div class="resource-name">
<span>{{ resource.name }} </span>
<span class="icon tooltip is-tooltip-multiline pirate-alert"
[attr.data-tooltip]="getMessageWarning(resource)" *ngIf="getMessageWarning(resource)">
<i class="fas fa-exclamation-triangle fa-lg"></i>
</span>
</div>
<div class="is-hidden-mobile">
<div class="description-and-formats is-hidden-mobile">
<span class="resource-description">{{ resource.description }}</span>
<ng-container *ngFor="let format of resource.formats">
<app-format-icon [formatName]="format.name"></app-format-icon>
</ng-container>
</div>
</div>
<span class="icon tooltip is-tooltip-multiline pirate-alert" [attr.data-tooltip]="getMessageWarning(resource)"
*ngIf="getMessageWarning(resource)">
<i class="fas fa-exclamation-triangle fa-lg"></i>
</span>
</div>
......
......@@ -58,6 +58,14 @@
}
}
.description-and-formats {
display: flex;
align-items: center;
& > * {
margin-right: 0.5rem;
}
}
.resource-type {
margin-right: 1rem;
}
......@@ -73,7 +81,7 @@
}
}
.resource-title .resource-name span {
.resource-title .resource-name span:first {
@media screen and (min-width: $tablet) {
text-transform: uppercase;
......
......@@ -48,45 +48,31 @@
</li>
<li [routerLinkActive]="'is-active'">
<a (click)="setPosition()" [routerLink]="[AppRoutes.downloads.uri]" class="tab-link">
<svg class="tab-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
<g id="picto_x5F_download">
<path
d="M21.323 13.961h-.338c-.339 0-.677.339-.677.677v4.57H1.692v-4.57a.667.667 0 0 0-.677-.677H.677c-.339 0-.677.339-.677.677V20.223c0 .423.338.677.677.677h20.646c.338 0 .677-.339.677-.677v-5.585a.667.667 0 0 0-.677-.677z"
class="primary" />
<path
d="M10.323 15.315c.085.085.254.17.339.17.084.084.254.084.338.084.085 0 .254 0 .339-.084.17 0 .254-.085.338-.17L17.6 9.223c.17-.254.17-.592 0-.761l-.423-.424c-.169-.253-.592-.253-.761 0l-4.57 4.654V.846C11.847.338 11.509 0 11 0c-.507 0-.846.338-.846.846v11.846L5.585 8.038c-.17-.253-.508-.253-.762 0l-.423.424c-.169.253-.169.592 0 .761l5.923 6.092z"
class="secondary" />
</g>
</svg>
<svg class="tab-icon" xmlns="http://www.w3.org/2000/svg" data-name="Calque 1" viewBox="0 0 38 32">
<path class="primary"
d="M32.515 30H4.5a.5.5 0 01-.5-.5v-7.485a.5.5 0 011 0V29h27.015v-6.985a.5.5 0 011 0V29.5a.5.5 0 01-.5.5z" />
<path class="secondary"
d="M26.771 14.024a.5.5 0 00-.708 0l-7.056 7.057V2.7a.5.5 0 00-1 0v18.381l-7.056-7.057a.5.5 0 00-.707.707l7.91 7.911a.5.5 0 00.707 0l7.91-7.911a.5.5 0 000-.707z" />
</svg>
<div>
<div>
<span class="tab-title tab-title-long" i18n="@@dataset.detail.downloads">Downloads</span>
<span class="tab-title tab-title-short">Downloads</span>
</div>
<div>
<span class="tab-subtitle">{{ datasetServicesList }}</span>
<span class="tab-subtitle">{{ datasetFormatsList }}</span>
</div>
</div>
</a>
</li>
<li [routerLinkActive]="'is-active'">
<a (click)="setPosition()" [routerLink]="[AppRoutes.resources.uri]" class="tab-link">
<svg class="tab-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
<g id="picto_x5F_api">
<path
d="M11.8 19.6c2.1 0 3.8 1.7 3.8 3.8s-1.7 3.8-3.8 3.8S8 25.5 8 23.4s1.7-3.8 3.8-3.8m0-1c-2.7 0-4.8 2.2-4.8 4.8 0 2.7 2.2 4.8 4.8 4.8s4.8-2.2 4.8-4.8c0-2.7-2.1-4.8-4.8-4.8z"
class="secondary" />
<path
d="M13.1 13.6c.3 0 .5.2.5.5v1.6l.7.2c.4.1.7.3 1.1.5l.6.3.5-.5.6-.6c.1-.1.3-.1.4-.1s.2 0 .4.1l1.8 1.8c.2.2.2.5 0 .7l-.7.6-.5.5.3.6c.2.4.3.7.5 1.1l.2.7h1.6c.3 0 .5.2.5.5v2.5c0 .3-.2.5-.5.5h-1.6l-.2.7c-.1.4-.3.7-.5 1.1l-.3.6.5.5.6.6c.2.2.2.5 0 .7l-1.8 1.8c-.1.1-.3.1-.4.1s-.2 0-.4-.1l-.6-.6-.4-.4-.6.3c-.4.2-.7.3-1.1.5l-.7.2v1.6c0 .3-.2.5-.5.5h-2.5c-.3 0-.5-.2-.5-.5v-1.6l-.7-.2c-.4-.1-.7-.3-1.1-.5l-.6-.3-.5.5-.6.6c-.1.1-.3.1-.4.1s-.2 0-.4-.1L4 29.5c-.2-.2-.2-.5 0-.7l.6-.6.5-.5-.3-.7c-.2-.4-.3-.7-.5-1.1l-.2-.7H2.5c-.3 0-.5-.2-.5-.5v-2.5c0-.3.2-.5.5-.5h1.6l.2-.7c.1-.4.3-.7.5-1.1l.3-.6-.5-.5-.6-.7c-.2-.2-.2-.5 0-.7l1.8-1.8c.1-.1.3-.1.4-.1s.2 0 .4.1l.6.6.5.5.6-.3c.3-.2.7-.4 1.1-.5l.7-.2v-1.6c0-.3.2-.5.5-.5h2.5m0-1h-2.5c-.8 0-1.5.7-1.5 1.5v.9c-.4.1-.9.3-1.3.5l-.6-.6c-.3-.3-.7-.4-1.1-.4s-.8.1-1.1.4l-1.8 1.8c-.6.6-.6 1.5 0 2.1l.6.6c-.2.4-.4.8-.5 1.3h-.8c-.8 0-1.5.7-1.5 1.5v2.5c0 .8.7 1.5 1.5 1.5h.9c.1.4.3.9.5 1.3l-.6.5c-.6.6-.6 1.5 0 2.1l1.8 1.8c.3.3.7.4 1.1.4s.8-.1 1.1-.4l.6-.6c.4.2.8.4 1.3.5v.9c0 .8.7 1.5 1.5 1.5h2.5c.8 0 1.5-.7 1.5-1.5v-.9c.4-.1.9-.3 1.3-.5l.6.6c.3.3.7.4 1.1.4.4 0 .8-.1 1.1-.4l1.8-1.8c.6-.6.6-1.5 0-2.1l-.6-.6c.2-.4.4-.8.5-1.3h.9c.8 0 1.5-.7 1.5-1.5v-2.5c0-.8-.7-1.5-1.5-1.5h-.9c-.1-.4-.3-.9-.5-1.3l.6-.6c.6-.6.6-1.5 0-2.1l-1.8-1.8c-.3-.3-.7-.4-1.1-.4-.4 0-.8.1-1.1.4l-.6.6c-.4-.2-.8-.4-1.3-.5V14c-.1-.7-.8-1.4-1.6-1.4z"
class="secondary" />
<path
d="M26.4 7.3c.4 0 .8.1 1.2.3.6.3 1.1.9 1.4 1.6.2.7.2 1.4-.1 2.1-.5.9-1.4 1.5-2.4 1.5-.4 0-.8-.1-1.2-.3-1.3-.7-1.9-2.3-1.2-3.6.3-1 1.2-1.6 2.3-1.6m0-1c-1.4 0-2.7.8-3.3 2.1-.9 1.8-.1 4.1 1.7 5 .5.3 1.1.4 1.6.4 1.4 0 2.7-.8 3.3-2.1.9-1.8.1-4.1-1.7-5-.5-.2-1.1-.4-1.6-.4z"
class="primary" />
<path
d="M25 2.8c.1 0 .1 0 .1.1l.2.6.2.7H26.3c.3 0 .5 0 .8.1l.7.1.3-.7.3-.6c0-.1.1-.1.1-.1h.1l1.7.9.1.1v.1l-.3.6-.3.7.5.5c.2.2.4.4.6.7l.4.6.7-.2.7-.2c.1 0 .1 0 .1.1l.6 1.8v.1s0 .1-.1.1l-.5.1-.7.2v.7c0 .3 0 .6-.1.9v.8l.7.3.6.3c.1 0 .1.1.1.2l-.9 1.7c0 .1-.1.1-.1.1h-.1l-.6-.3-.7-.3-.5.5c-.2.2-.4.4-.7.6l-.6.4.2.7.2.6v.1s0 .1-.1.1l-1.9.6c-.1 0-.1 0-.1-.1l-.2-.6-.2-.7H26.3c-.3 0-.5 0-.8-.1l-.7-.1-.3.7-.3.7c0 .1-.1.1-.1.1H24l-1.7-.9c-.1 0-.1-.1-.1-.2l.3-.6.3-.7-.5-.5c-.2-.2-.4-.4-.6-.7l-.4-.5-.7.2-.7.2c-.1 0-.1 0-.1-.1l-.6-1.8v-.1s0-.1.1-.1l.6-.2.7-.2v-.7c0-.3 0-.6.1-.9l.1-.7-.8-.4-.6-.3-.1-.1v-.1l.9-1.7c0-.1.1-.1.1-.1h.1l.6.3.7.3.5-.5c.2-.2.4-.4.7-.6l.5-.4-.2-.7-.2-.7v-.1s0-.1.1-.1l1.9-.6c-.1 0-.1 0 0 0m0-1c-.1 0-.2 0-.4.1l-1.8.6c-.6.2-1 .9-.8 1.5l.2.6c-.2.2-.5.4-.7.7l-.6-.3c-.2-.1-.3-.1-.5-.1-.4 0-.8.2-1 .6l-.9 1.7c-.3.6 0 1.3.5 1.5l.6.3c0 .3-.1.7-.1 1l-.6.2c-.6.2-.9.9-.7 1.5l.6 1.8c.2.5.6.8 1.1.8.1 0 .2 0 .4-.1l.6-.2c.2.3.4.5.7.8l-.3.6c-.3.6 0 1.3.5 1.5l1.7.9c.2.1.3.1.5.1.4 0 .8-.2 1-.6l.3-.6c.3 0 .6.1.9.1h.1l.2.6c.2.5.6.8 1.1.8.1 0 .2 0 .4-.1l1.8-.6c.6-.2.9-.9.7-1.5l-.2-.6c.3-.2.5-.4.8-.7l.6.3c.2.1.3.1.5.1.4 0 .8-.2 1-.6l.9-1.7c.3-.6 0-1.3-.5-1.5l-.5-.3c0-.3.1-.7.1-1l.6-.2c.6-.2.9-.9.7-1.5l-.6-1.8c-.2-.5-.6-.8-1.1-.8-.1 0-.2 0-.4.1l-.6.2c-.2-.3-.4-.5-.7-.8l.3-.6c.3-.6 0-1.3-.5-1.5l-1.7-.9c-.2-.1-.3-.1-.5-.1-.4 0-.8.2-1 .6l-.3.6c-.3 0-.6-.1-.9-.1h-.1l-.4-.6c-.1-.5-.6-.8-1-.8z"
class="primary" />
</g>
</svg>
<svg class="tab-icon" xmlns="http://www.w3.org/2000/svg" data-name="Calque 1" viewBox="0 0 38 32">
<path class="secondary"
d="M12.841 22.076l-8.889-5.484 8.889-5.485a.5.5 0 10-.526-.85l-9.578 5.91-.011.01a.616.616 0 00-.075.07.478.478 0 00-.065.07s-.009.007-.012.012a.489.489 0 00-.026.073.411.411 0 00-.035.094.466.466 0 000 .1.55.55 0 000 .091.456.456 0 00.038.1.412.412 0 00.024.067l.01.01a.5.5 0 00.153.154l9.578 5.91a.5.5 0 00.526-.852z" />
<path class="primary"
d="M35.491 16.594a.46.46 0 000-.1.418.418 0 00-.035-.095.477.477 0 00-.026-.072s-.009-.007-.012-.012a.478.478 0 00-.065-.07.546.546 0 00-.075-.07l-.011-.01-9.578-5.91a.5.5 0 10-.526.85l8.889 5.485-8.889 5.484a.5.5 0 00.526.852l9.578-5.91a.5.5 0 00.153-.154l.01-.01a.54.54 0 00.025-.067.509.509 0 00.037-.1.562.562 0 00-.001-.091zM15.53 28.907a.526.526 0 01-.14-.02.5.5 0 01-.339-.62L21.99 4.6a.5.5 0 01.959.281L16.01 28.548a.5.5 0 01-.48.359z" />
</svg>
<div>
<div>
<span class="tab-title tab-title-long" i18n="@@dataset.detail.api">API</span>
......
......@@ -104,6 +104,25 @@ export class DatasetDetailComponent implements OnInit, OnDestroy {
return formatted;
}
get datasetFormatsList() {
let list = this._datasetDetailService.datasetMetadata.link.map(l => l.formats);
// Flat the arrays
list = [].concat(...list);
// Remove duplicates
list = [...new Set(list)];
let formatted: string;
if (list.length > 4) {
formatted = `${list.slice(0, 4).join(', ')} ...`; // Keep the first 4 elements of the list
} else {
formatted = list.join(', ');
}
return formatted;
}
get hasMap() {
return this._datasetDetailService.dataset.hasMap;
}
......
<div class="resource">
<div class="resource-download" *ngFor="let format of resource.formats">
<div class="resource-left">
<div class="resource-icon" [ngClass]="format.name">
<span>{{labelTypeFile[format.name] || format.name}}</span>
</div>
<div class="resource-main">
<div class="resource-main-name">
<span>{{ resource.metadataLink.name }}.{{ format.fileExtension}}
</span>
</div>
</div>
</div>
<div class="resource-download-icon" (click)="saveFile(format)">
<a>
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="21" fill="none" viewBox="0 0 22 21">
<path fill="#4668AB"
d="M21.323 13.961h-.338c-.339 0-.677.339-.677.677v4.57H1.692v-4.57a.667.667 0 0 0-.677-.677H.677c-.339 0-.677.339-.677.677V20.223c0 .423.338.677.677.677h20.646c.338 0 .677-.339.677-.677v-5.585a.667.667 0 0 0-.677-.677z" />
<path fill="#4668AB"
d="M10.323 15.315c.085.085.254.17.339.17.084.084.254.084.338.084.085 0 .254 0 .339-.084.17 0 .254-.085.338-.17L17.6 9.223c.17-.254.17-.592 0-.761l-.423-.424c-.169-.253-.592-.253-.761 0l-4.57 4.654V.846C11.847.338 11.509 0 11 0c-.507 0-.846.338-.846.846v11.846L5.585 8.038c-.17-.253-.508-.253-.762 0l-.423.424c-.169.253-.169.592 0 .761l5.923 6.092z" />
</svg>
</a>
</div>
</div>
<ng-container *ngFor="let format of resource.formats">
<app-resource-download-item [formatName]="format.name" [formatExtension]="format.fileExtension"
[resourceName]="resource.metadataLink.name" [isQueryable]="true" (saveEvent)="saveFile(format)">
</app-resource-download-item>
</ng-container>
</div>
\ No newline at end of file
@import '../../../../../scss/variables.scss';
@import '.././../../../../../node_modules/bulma/sass/utilities/_all.sass';
.resource {
background-color: white;
.resource-download {
display: flex;
background-color: white;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #f2f2f2;
margin-top: 0.5rem;
padding-bottom: 0.5rem;
}
}
.resource-download-icon {
padding: 0.5rem 0.4rem;
border: 1px solid $grey-super-light-color;
border-radius: 4px;
margin-right: 0.75rem;
a {
display: flex;
}
svg {
height: 1.5rem;
fill: $link-color;
}
&:hover {
opacity: 0.7;
}
}
.resource-left {
display: flex;
align-items: center;
.resource-main {
margin-left: 2rem;
}
.resource-main-name span {
font-size: 0.875rem;
word-break: break-all;
@media screen and (min-width: $tablet) {
font-size: 1rem;
}
}
.resource-icon {
display: flex;
align-items: center;
justify-content: center;
width: 2.75rem;
padding: 0.4rem 1.5rem;
border-radius: 2px;
span {
text-transform: uppercase;
color: white;
font-weight: 600;
}
}
.resource-icon.PDF {
background-color: $pdf-color;
}
.resource-icon.PNG {
background-color: $png-color;
}
.resource-icon.JPEG {
background-color: $jpg-color;
}
.resource-icon.KML {
background-color: $kmz-color;
}
.resource-icon.ShapeFile {
background-color: $shp-color;
}
.resource-icon.ZIP {
background-color: $zip-color;
}
.resource-icon.JSON,
.resource-icon.GeoJSON {
background-color: $json-color;
}
.resource-icon.GeoJSON span {
font-size: 0.7rem;
}
.resource-icon.GML {
background-color: $gml-color;
}
.resource-icon.CSV {
background-color: $csv-color;
}
}
......@@ -26,13 +26,6 @@ export class ResourceCustomDownloadableComponent implements OnInit {
WCS: 'FORMAT',
};
// used in case we want to display inside the type file icon, a label different from it's file extension
// For example, a shapefile has a .zip extension, but we want to display the label 'SHP'
labelTypeFile = {
ShapeFile: 'SHP',
GeoJSON: 'GeoJSON',
};
constructor(
private _notificationService: NotificationService) { }
......
<div class="resource-download">
<div class="resource-left">
<app-format-icon [formatName]="formatName">
</app-format-icon>
<div class="resource-main">
<div class="resource-main-name">
<span>{{isQueryable ? resourceName + '.' + formatExtension : resourceName }}
</span>
</div>
</div>
</div>
<ng-container *ngIf="isQueryable; else other">
<div class="resource-download-icon" (click)="saveResource()">
<a>
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="21" fill="none" viewBox="0 0 22 21">
<path fill="#4668AB"
d="M21.323 13.961h-.338c-.339 0-.677.339-.677.677v4.57H1.692v-4.57a.667.667 0 0 0-.677-.677H.677c-.339 0-.677.339-.677.677V20.223c0 .423.338.677.677.677h20.646c.338 0 .677-.339.677-.677v-5.585a.667.667 0 0 0-.677-.677z" />
<path fill="#4668AB"
d="M10.323 15.315c.085.085.254.17.339.17.084.084.254.084.338.084.085 0 .254 0 .339-.084.17 0 .254-.085.338-.17L17.6 9.223c.17-.254.17-.592 0-.761l-.423-.424c-.169-.253-.592-.253-.761 0l-4.57 4.654V.846C11.847.338 11.509 0 11 0c-.507 0-.846.338-.846.846v11.846L5.585 8.038c-.17-.253-.508-.253-.762 0l-.423.424c-.169.253-.169.592 0 .761l5.923 6.092z" />
</svg>
</a>
</div>
</ng-container>
<ng-template #other>
<div class="resource-download-icon">
<a [href]="resourceUrl" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="21" fill="none" viewBox="0 0 22 21">
<path fill="#4668AB"
d="M21.323 13.961h-.338c-.339 0-.677.339-.677.677v4.57H1.692v-4.57a.667.667 0 0 0-.677-.677H.677c-.339 0-.677.339-.677.677V20.223c0 .423.338.677.677.677h20.646c.338 0 .677-.339.677-.677v-5.585a.667.667 0 0 0-.677-.677z" />
<path fill="#4668AB"
d="M10.323 15.315c.085.085.254.17.339.17.084.084.254.084.338.084.085 0 .254 0 .339-.084.17 0 .254-.085.338-.17L17.6 9.223c.17-.254.17-.592 0-.761l-.423-.424c-.169-.253-.592-.253-.761 0l-4.57 4.654V.846C11.847.338 11.509 0 11 0c-.507 0-.846.338-.846.846v11.846L5.585 8.038c-.17-.253-.508-.253-.762 0l-.423.424c-.169.253-.169.592 0 .761l5.923 6.092z" />
</svg>
</a>
</div>
</ng-template>
</div>
\ No newline at end of file
@import '../../../../../../scss/variables.scss';
@import '../.././../../../../../node_modules/bulma/sass/utilities/_all.sass';
.resource-download {
display: flex;
background-color: white;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #f2f2f2;
margin-top: 0.5rem;
padding-bottom: 0.5rem;
}
.resource-left {
display: flex;
align-items: center;
margin-right: 0.5rem;
.resource-main {
margin-left: 2rem;
}
.resource-main-name span {
font-size: 0.875rem;
word-break: break-all;
@media screen and (min-width: $tablet) {
font-size: 1rem;
}
}
}
.resource-download-icon {
padding: 0.5rem 0.4rem;
border: 1px solid $grey-super-light-color;
border-radius: 4px;
margin-right: 0.75rem;
a {
display: flex;
}
svg {
height: 1.5rem;
fill: $link-color;
}
&:hover {
opacity: 0.7;
}
}
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
@Component({
selector: 'app-resource-download-item',
templateUrl: './resource-download-item.component.html',
styleUrls: ['./resource-download-item.component.scss']
})
export class ResourceDownloadItemComponent implements OnInit {
@Input() formatName: string;
@Input() formatExtension?: string;
@Input() resourceName: string;
@Input() resourceUrl ?: string;
@Input() isQueryable: boolean;
@Output() saveEvent = new EventEmitter();
constructor() { }
ngOnInit() {
}
saveResource() {
this.saveEvent.emit(null);
}
}
<div class="resource">
<div class="resource-left">
<div class="resource-icon" [ngClass]="link.formats[0]">
<span>
{{ link.formats[0] }}
</span>
</div>
<div class="resource-main">
<div class="resource-main-name">
<span>{{ link.name }}
</span>
</div>
<div class="resource-main-size">
<span *ngIf="!humanFileSize(link['content-length'], true).includes('NaN')">
({{ humanFileSize(link['content-length'], true) }})
</span>
</div>
</div>
</div>
<app-resource-download-item [formatName]="link.formats[0]"
[resourceName]="link.name" [resourceUrl]="link.url" [isQueryable]="false">
</app-resource-download-item>
<div class="resource-download-icon">
<a [href]="link.url" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="21" fill="none" viewBox="0 0 22 21">
<path fill="#4668AB"
d="M21.323 13.961h-.338c-.339 0-.677.339-.677.677v4.57H1.692v-4.57a.667.667 0 0 0-.677-.677H.677c-.339 0-.677.339-.677.677V20.223c0 .423.338.677.677.677h20.646c.338 0 .677-.339.677-.677v-5.585a.667.667 0 0 0-.677-.677z" />
<path fill="#4668AB"
d="M10.323 15.315c.085.085.254.17.339.17.084.084.254.084.338.084.085 0 .254 0 .339-.084.17 0 .254-.085.338-.17L17.6 9.223c.17-.254.17-.592 0-.761l-.423-.424c-.169-.253-.592-.253-.761 0l-4.57 4.654V.846C11.847.338 11.509 0 11 0c-.507 0-.846.338-.846.846v11.846L5.585 8.038c-.17-.253-.508-.253-.762 0l-.423.424c-.169.253-.169.592 0 .761l5.923 6.092z" />
</svg>
</a>
</div>
</div>
\ No newline at end of file
......@@ -2,9 +2,9 @@
.resource {
background-color: white;
display: flex;
justify-content: space-between;
align-items: center;
// display: flex;
// justify-content: space-between;
// align-items: center;
}
.resource-download-icon {
......@@ -30,6 +30,7 @@
.resource-left {
display: flex;
align-items: center;
margin-right: 0.5rem;
.resource-main {
margin-left: 1rem;
......
......@@ -11,14 +11,15 @@ import { DatasetDetailComponent } from './dataset-detail/dataset-detail.componen
import { DatasetDownloadsComponent } from './dataset-downloads/dataset-downloads.component';
// tslint:disable-next-line: max-line-length
import { ResourceCustomDownloadableComponent } from './dataset-downloads/resource-custom-download/resource-custom-download.component';
// tslint:disable-next-line: max-line-length
import { ResourceDownloadItemComponent } from './dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component';
import { ResourceStaticComponent } from './dataset-downloads/resource-static/resource-static.component';
import { DatasetInfoComponent } from './dataset-info/dataset-info.component';
import { DatasetMapComponent } from './dataset-map/dataset-map.component';
import { DatasetTableMapComponent } from './dataset-table-map/dataset-table-map.component';
import { DatasetTableComponent } from './dataset-table/dataset-table.component';
// tslint:disable-next-line: max-line-length
export { DatasetDetailComponent, DatasetAPIComponent, ResourceCustomDownloadableComponent, ResourceStaticComponent, DatasetDownloadsComponent, ResourceQueryableComponent, DatasetMapComponent, DatasetInfoComponent, DatasetTableMapComponent, DatasetTableComponent, ResourcesQueryableComponent, IconFormatComponent, DatasetDataDetailsComponent, DatasetDataDetailPropertiesComponent };
export { DatasetDetailComponent, ResourceDownloadItemComponent, DatasetAPIComponent, ResourceCustomDownloadableComponent, ResourceStaticComponent, DatasetDownloadsComponent, ResourceQueryableComponent, DatasetMapComponent, DatasetInfoComponent, DatasetTableMapComponent, DatasetTableComponent, ResourcesQueryableComponent, IconFormatComponent, DatasetDataDetailsComponent, DatasetDataDetailPropertiesComponent };
// tslint:disable-next-line:variable-name
export const DatasetDetailComponents = [
DatasetDetailComponent,
......@@ -35,4 +36,5 @@ export const DatasetDetailComponents = [
IconFormatComponent,
DatasetDataDetailsComponent,
DatasetDataDetailPropertiesComponent,
ResourceDownloadItemComponent,
];
<div class="format-icon" [ngClass]="formatName">
<span>{{ labelTypeFile[formatName] || formatName }} </span>
</div>
\ No newline at end of file
@import '../../../../scss/variables.scss';
.format-icon {
display: flex;
align-items: center;
justify-content: center;
width: 2.75rem;
padding: 0.4rem 1.5rem;
border-radius: 2px;
span {
font-size: 0.7rem;
text-transform:
uppercase;
color: white;
font-weight: 600;
}
}