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>