Skip to content

GitLab

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
Hide whitespace changes
Inline Side-by-side
src/app/dataset-detail/components/dataset-api/icon-format/icon-format.component.scss
View file @ 5d284ec3
......@@ -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 {
......
src/app/dataset-detail/components/dataset-api/resources-queryable/resources-queryable.component.html
View file @ 5d284ec3
......@@ -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>
......
src/app/dataset-detail/components/dataset-api/resources-queryable/resources-queryable.component.scss
View file @ 5d284ec3
......@@ -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;
......
src/app/dataset-detail/components/dataset-detail/dataset-detail.component.html
View file @ 5d284ec3
......@@ -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>
......
src/app/dataset-detail/components/dataset-detail/dataset-detail.component.ts
View file @ 5d284ec3
......@@ -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;
}
......
src/app/dataset-detail/components/dataset-downloads/resource-custom-download/resource-custom-download.component.html
View file @ 5d284ec3
<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
src/app/dataset-detail/components/dataset-downloads/resource-custom-download/resource-custom-download.component.scss
View file @ 5d284ec3
@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;
}
}
src/app/dataset-detail/components/dataset-downloads/resource-custom-download/resource-custom-download.component.ts
View file @ 5d284ec3
......@@ -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) { }
......
src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.html 0 → 100644
View file @ 5d284ec3
<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
src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.scss 0 → 100644
View file @ 5d284ec3
@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;
}
}
src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.ts 0 → 100644
View file @ 5d284ec3
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);
}
}
src/app/dataset-detail/components/dataset-downloads/resource-static/resource-static.component.html
View file @ 5d284ec3
<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
src/app/dataset-detail/components/dataset-downloads/resource-static/resource-static.component.scss
View file @ 5d284ec3
......@@ -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;
......
src/app/dataset-detail/components/index.ts
View file @ 5d284ec3
......@@ -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,
];
src/app/shared/components/format-icon/format-icon.component.html 0 → 100644
View file @ 5d284ec3
<div class="format-icon" [ngClass]="formatName">
<span>{{ labelTypeFile[formatName] || formatName }} </span>
</div>
\ No newline at end of file
src/app/shared/components/format-icon/format-icon.component.scss 0 → 100644
View file @ 5d284ec3
@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;
}
}