diff --git a/src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.html b/src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.html
index c61bde297d7efba9b4f5fcd69693aba184efb9fd..331a5a461f5253fcda6f6bffaebe9756804394de 100644
--- a/src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.html
+++ b/src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.html
@@ -1,31 +1,51 @@
<div class="resource-download">
- <div class="first-line">
- <div class="resource-left">
- <app-format-icon [formatName]="getFormatName()">
- </app-format-icon>
- <div class="resource-main">
- <div class="resource-main-name">
- <span>{{isQueryable ? resource.metadataLink.name + '.' + format.fileExtension : link.name }}
- </span>
+ <div class="first-line">
+ <div class="resource-left">
+ <app-format-icon [formatName]="getFormatName()">
+ </app-format-icon>
+ <div class="resource-main">
+ <div class="resource-main-name">
+ <span>{{isQueryable ? resource.metadataLink.name + '.' + format.fileExtension : link.name }}
+ </span>
+ </div>
+ <div class="resource-options">
+ <div>
+ <span *ngIf="this.selectedProjection"> {{this.selectedProjection.name}}
+ </span>
+ </div>
+
+ <div *ngIf="this.selectedInsee">
+ <span> - </span>
+ <span>{{ this.selectedInsee.commune }}</span>
+ </div>
+
+ <div *ngIf="! this.selectedInsee && format.isCuttable">
+ <span> - </span>
+ <span i18n="@@dataset.resources.divisionbycommune">
+ All the municipalities
+ </span>
+ </div>
+ </div>
</div>
</div>
- </div>
- <div class="right-buttons">
- <div class="options-icon" *ngIf="(format.isCuttable && inseeLabel) || format.isProjectable">
+ <div class="right-buttons">
+ <div *ngIf="(format.isCuttable && inseeLabel) || format.isProjectable"
+ class="options-icon is-hidden-mobile" [ngClass]="{'is-open': isOptionOpen}"
+ (click)="isOptionOpen = !isOptionOpen">
- <svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
- x="0px" y="0px" viewBox="0 0 44 44" style="enable-background:new 0 0 44 44;" xml:space="preserve">
- <style type="text/css">
- .st0 {
- fill: none;
- stroke: #818080;
- stroke-width: 1.5;
- }
- </style>
- <path class="st0" d="M22,26c-2.2,0-4-1.8-4-4s1.8-4,4-4s4,1.8,4,4S24.2,26,22,26z" />
- <path class="st0" d="M33,23.4v-2.7l-0.1-0.2c-0.2-0.3-0.6-1.1-1.5-1.1h-0.8c-0.2-0.5-0.4-1-0.6-1.5l0.8-0.8c0.1-0.1,0.3-0.3,0.3-0.5
+ <svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+ x="0px" y="0px" viewBox="0 0 44 44" style="enable-background:new 0 0 44 44;" xml:space="preserve">
+ <style type="text/css">
+ .st0 {
+ fill: none;
+ stroke: #818080;
+ stroke-width: 1.5;
+ }
+ </style>
+ <path class="st0" d="M22,26c-2.2,0-4-1.8-4-4s1.8-4,4-4s4,1.8,4,4S24.2,26,22,26z" />
+ <path class="st0" d="M33,23.4v-2.7l-0.1-0.2c-0.2-0.3-0.6-1.1-1.5-1.1h-0.8c-0.2-0.5-0.4-1-0.6-1.5l0.8-0.8c0.1-0.1,0.3-0.3,0.3-0.5
c0.1-0.2,0.1-0.4,0.1-0.6c0-0.2,0-0.8-0.5-1.1l-1.8-1.8c-0.6-0.6-1.5-0.6-2.1,0L26,13.9c-0.4-0.2-0.8-0.4-1.2-0.5v-0.9
c0-0.8-0.7-1.5-1.5-1.5h-2.5c-0.9,0-1.5,0.7-1.5,1.5v0.9c-0.5,0.1-0.9,0.3-1.3,0.5l-0.9-0.9c-0.6-0.6-1.5-0.6-2.1,0l-1.8,1.8
c-0.1,0.1-0.3,0.3-0.3,0.5c-0.1,0.2-0.1,0.4-0.1,0.6c0,0.2,0,0.8,0.5,1.1l0.8,0.8c-0.3,0.5-0.5,1-0.6,1.5h-0.8
@@ -34,17 +54,17 @@
l0.6-0.6c0.5,0.3,1,0.5,1.6,0.7v0.6c0,0.8,0.7,1.5,1.5,1.5h2.5c0.9,0,1.5-0.7,1.5-1.5v-0.7c0.5-0.2,1-0.4,1.4-0.6l0.5,0.5
c0.1,0.1,0.3,0.3,0.5,0.3c0.2,0.1,0.4,0.1,0.6,0.1c0.2,0,0.8,0,1.1-0.5l1.7-1.7c0.1-0.1,0.3-0.3,0.3-0.5c0.1-0.2,0.1-0.4,0.1-0.6
c0-0.2,0-0.8-0.5-1.1l-0.5-0.5c0.2-0.4,0.4-0.9,0.5-1.3h0.8C32.3,24.9,33,24.2,33,23.4z" />
- </svg>
- </div>
+ </svg>
+ </div>
- <app-download-button [url]="queryableUrl" [fileName]="fileName">
- </app-download-button>
+ <app-download-button [url]="queryableUrl" [fileName]="fileName">
+ </app-download-button>
+ </div>
</div>
- </div>
- <div class="filter-items">
+ <div class="filter-items is-hidden-mobile" *ngIf="isOptionOpen">
<div class="division-item" *ngIf="format.isCuttable && inseeLabel">
<div class="label-dropdown title-label">
diff --git a/src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.scss b/src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.scss
index dbdac2261ac18b724df2785a54ddeb3c0602b1fd..c8f6f53929bdfc30b6203ba19280469a66e542dd 100644
--- a/src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.scss
+++ b/src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.scss
@@ -5,8 +5,8 @@
background-color: white;
align-items: center;
border-bottom: 1px solid #f2f2f2;
- margin-top: 0.5rem;
- padding-bottom: 0.5rem;
+ margin-top: 1rem;
+ padding-bottom: 1rem;
}
.first-line {
@@ -24,6 +24,7 @@
}
.resource-main-name span {
+ font-weight: 600;
font-size: 0.875rem;
word-break: break-all;
@@ -32,19 +33,36 @@
}
}
- .filter-items {
+ .resource-options {
display: flex;
+
+ span {
+ font-size: 0.875rem;
+ word-break: break-all;
+ }
+
}
}
-.right-buttons {
+.filter-items {
display: flex;
+ margin-left: calc(2rem + 48px);
+ margin-top: 0.75rem;
+
+ .division-item {
+ margin-right: 2rem;
+ }
+
+ .title-label {
+ margin-bottom: 0.5rem;
+ }
}
-.dropdown-menu {
- height: 2.5rem;
+.right-buttons {
+ display: flex;
}
+
.dropdown-insee {
.dropdown-menu {
height: 200px;
@@ -57,6 +75,8 @@
/* stylelint-disable-next-line */
.dropdown-trigger .button {
justify-content: space-between;
+ height: 2.625rem;
+ overflow: hidden;
svg {
width: 1rem;
@@ -69,6 +89,19 @@
border-radius: 4px;
width: 2.5rem;
height: 2.5rem;
+ margin-right: 0.5rem;
+
+ &:hover {
+ cursor: pointer;
+ }
+
+ &.is-open {
+ background-color: #818080;
+
+ svg path {
+ stroke: white;
+ }
+ }
svg {
height: 2.5rem;
@@ -85,8 +118,19 @@
width: 100%;
}
+
+@media screen and (min-width: $desktop) {
+ .dropdown-trigger button {
+ width: 8rem;
+ }
+}
+
// Remove Bulma default 100% width for tablet and desktop
-@media screen and (min-width: $tablet) {
+@media screen and (min-width: $desktop) {
+
+ .dropdown-trigger button {
+ width: 12rem;
+ }
.dropdown,
.dropdown-trigger,
@@ -96,4 +140,4 @@
// width: unset;
max-width: 350px;
}
-}
\ No newline at end of file
+}
diff --git a/src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.ts b/src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.ts
index 48379a1163a457482a0da33349650b52d33947e3..99e64d66ddd95ba710191a7fbd6bfbe67b4fad8c 100644
--- a/src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.ts
+++ b/src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.ts
@@ -27,6 +27,8 @@ export class ResourceDownloadItemComponent implements OnInit {
_queryableUrl = '';
+ isOptionOpen = false;
+
projectionList;
// Dropdown projection
dropDownProjectionToggle: false;
@@ -178,20 +180,6 @@ export class ResourceDownloadItemComponent implements OnInit {
// depending on the resource
setProjection(projection) {
this.selectedProjection = projection;
- // if (this.resource.type === linkFormats.wfs) {
- // this.queryableParameters.projection = `&SRSNAME=${projection.name}`;
- // } else if (this.resource.type === linkFormats.wms || this.resource.type === linkFormats.wcs) {
- // this.queryableParameters.projection = `&CRS=${projection.name}`;
- // this.queryableParameters.bbox = `&BBOX=${projection.bbox.minx},` +
- // `${projection.bbox.miny},` +
- // `${projection.bbox.maxx},` +
- // `${projection.bbox.maxy}`;
- // } else if (this.resource.type === linkFormats.ws) {
- // if (this.format.name !== 'JSON') {
- // this.queryableParameters.projection = `srsname=${projection.name}`;
- // }
- // }
-
this.queryableParameters.projectionActive = true;
// this.updateQueryableUrl();
}
diff --git a/src/i18n/messages.en.xlf b/src/i18n/messages.en.xlf
index 70f7f9f3d27a09927316cc5b7fbf9b31c9c69c02..5ee997b37545cce954a79edfede2c2941bae39cf 100644
--- a/src/i18n/messages.en.xlf
+++ b/src/i18n/messages.en.xlf
@@ -331,6 +331,10 @@
<source>All</source>
<target>All</target>
</trans-unit>
+ <trans-unit id="dataset.resources.allcommune" datatype="html">
+ <source>All the municipalities</source>
+ <target>All the municipalities</target>
+ </trans-unit>
<trans-unit id="dataset.resources.projectionsystem" datatype="html">
<source>Projection system</source>
<target>Projection system</target>
diff --git a/src/i18n/messages.fr.xlf b/src/i18n/messages.fr.xlf
index d341862e4d1ed21e991f9412974c133bffc17aae..b0c1e7ba240b4b543cb8197f6cacf1df46cfd187 100644
--- a/src/i18n/messages.fr.xlf
+++ b/src/i18n/messages.fr.xlf
@@ -342,6 +342,10 @@
<trans-unit id="dataset.resources.commune" datatype="html">
<source>All</source>
<target>Toutes</target>
+ <trans-unit id="dataset.resources.allcommune" datatype="html">
+ <source>All the municipalities</source>
+ <target>Toutes les communes</target>
+ </trans-unit>
</trans-unit>
<trans-unit id="dataset.resources.url.root" datatype="html">
<source>Resource root URL</source>