diff --git a/src/app/pages/menu/menu-pages/map/map.component.scss b/src/app/pages/menu/menu-pages/map/map.component.scss
index a151f5ec..30c44a6f 100644
--- a/src/app/pages/menu/menu-pages/map/map.component.scss
+++ b/src/app/pages/menu/menu-pages/map/map.component.scss
@@ -9,11 +9,7 @@
::ng-deep .portal-hasHeader-hasMenu {
height: $portal-height-hasMenu-hasHeader-mobile !important;
-}
-::ng-deep #legend-button-dialog-container {
- top: calc( #{$header-height-mobile} + #{$menu-height-mobile} + 4px)!important;
- max-height: calc(100% - #{$header-height-mobile} - #{$menu-height-mobile} - #{$footer-height} - 100px)!important;
}
@media (min-width: 768px){
@@ -26,8 +22,9 @@
height: $portal-height-hasMenu-hasHeader !important;
}
- ::ng-deep #legend-button-dialog-container {
- top: calc( #{$header-height} + #{$menu-height} + 4px)!important;
- max-height: calc(100% - #{$header-height} - #{$menu-height} - #{$footer-height} - 180px)!important;
+ ::ng-deep #legendDialog {
+ top: $top-legend-dialog-hasMenu!important; // no header: $top-legend-dialog-hasMenu
+ max-height: calc($portal-height-hasFooter-hasMenu - $map-buttons-height)!important; // see portal variables $map-buttons-height-xxxx - $map-buttons-height
}
+
}
diff --git a/src/app/pages/menu/menu-pages/map/map.component.ts b/src/app/pages/menu/menu-pages/map/map.component.ts
index d672e2b8..3923558b 100644
--- a/src/app/pages/menu/menu-pages/map/map.component.ts
+++ b/src/app/pages/menu/menu-pages/map/map.component.ts
@@ -7,7 +7,7 @@ import { ConfigService } from '@igo2/core';
styleUrls: ['./map.component.scss']
})
export class MapComponent {
- public hasHeader = true;
+ public hasHeader: boolean;
constructor(private configService: ConfigService) {
diff --git a/src/app/pages/portal/legend-button/legend-button.component.ts b/src/app/pages/portal/legend-button/legend-button.component.ts
index dc4d29b1..9592cc64 100644
--- a/src/app/pages/portal/legend-button/legend-button.component.ts
+++ b/src/app/pages/portal/legend-button/legend-button.component.ts
@@ -26,11 +26,11 @@ export class LegendButtonComponent {
toggleLegendButton(): void {
if (!this.legendInPanel && !this.mobile){
- const dialogOpened = this.dialog.getDialogById('legend-dialog-container');
+ const dialogOpened = this.dialog.getDialogById('legendDialog');
if (!dialogOpened) {
this.legendButtonTooltip = this.languageService.translate.instant('legend.close');
this.dialogRef = this.dialog.open(LegendDialogComponent, {
- id: 'legend-dialog-container',
+ id: 'legendDialog',
hasBackdrop: false,
closeOnNavigation: true
});
diff --git a/src/app/pages/portal/legend-dialog/legend-dialog.component.html b/src/app/pages/portal/legend-dialog/legend-dialog.component.html
index 05dee5a3..57448da4 100644
--- a/src/app/pages/portal/legend-dialog/legend-dialog.component.html
+++ b/src/app/pages/portal/legend-dialog/legend-dialog.component.html
@@ -1,10 +1,14 @@
-
-{{"legend.title" | translate}}
+
+
+
+
+
{{"legend.title" | translate}}
-
-
\ No newline at end of file
+
+
+
\ No newline at end of file
diff --git a/src/app/pages/portal/legend-dialog/legend-dialog.component.scss b/src/app/pages/portal/legend-dialog/legend-dialog.component.scss
index cf11882e..ce528f61 100644
--- a/src/app/pages/portal/legend-dialog/legend-dialog.component.scss
+++ b/src/app/pages/portal/legend-dialog/legend-dialog.component.scss
@@ -1,22 +1,23 @@
@import '../portal.variables.scss';
+
// FLEX
-::ng-deep #legend-dialog-container {
+
+::ng-deep #legendDialog {
width: fit-content !important;
z-index: 10;
position: fixed;
right: 0.5%;
max-width: 99% !important;
padding: 16px !important;
- max-height: calc(100% - #{$header-height-mobile} - #{$footer-height} - 100px) !important;
overflow: hidden;
display: flex;
flex-direction: column;
height: 100%;
border-radius: 0;
height: fit-content;
-
+
igo-layer-legend-list {
max-height: inherit;
.layer-legend-list-container {
@@ -28,7 +29,7 @@
igo-layer-legend-item {
flex-wrap: wrap;
- width: min-content;
+ width: max-content;
display: flex;
flex-direction: column;
margin-bottom: 16px;
@@ -43,16 +44,10 @@
width: max-content !important;
}
- @media (min-width: 768px){
- max-height: calc(100% - #{$header-height} - #{$footer-height} - 180px) !important; //TODO : Inject the dialog in the portal then add config hasHeader, hasMenu and hasFooter
- height: fit-content;
- }
-
-}
+}
::ng-deep app-legend-dialog {
-
- max-height: calc(100% - 24px) !important;
+ overflow-y: auto;
height: inherit;
.mat-list-base .mat-list-item .mat-list-item-content {
diff --git a/src/app/pages/portal/legend-dialog/legend-dialog.component.ts b/src/app/pages/portal/legend-dialog/legend-dialog.component.ts
index 30f98235..3055606e 100644
--- a/src/app/pages/portal/legend-dialog/legend-dialog.component.ts
+++ b/src/app/pages/portal/legend-dialog/legend-dialog.component.ts
@@ -32,4 +32,5 @@ export class LegendDialogComponent implements OnInit {
layer.showInLayerList !== false
));
}
+
}
diff --git a/src/app/pages/portal/portal.component.html b/src/app/pages/portal/portal.component.html
index 04559a25..13fbad02 100644
--- a/src/app/pages/portal/portal.component.html
+++ b/src/app/pages/portal/portal.component.html
@@ -72,7 +72,7 @@
[map]="map"
[useStaticIcon]="getBaseLayersUseStaticIcon()">
-
+
diff --git a/src/app/pages/portal/portal.component.scss b/src/app/pages/portal/portal.component.scss
index c33bd283..74c551bd 100644
--- a/src/app/pages/portal/portal.component.scss
+++ b/src/app/pages/portal/portal.component.scss
@@ -383,16 +383,12 @@ igo-zoom-button {
height: calc( 100% - $footer-height)!important;
}
-::ng-deep #legend-dialog-container, app-legend-dialog {
- top: calc($header-height-mobile + 4px);
- max-height: calc(100% - $header-height-mobile - $footer-height - 100px);
-}
-
@media (min-width: 768px){
- ::ng-deep #legend-dialog-container, app-legend-dialog {
- top: calc($header-height + 4px);
- max-height: calc(100% - $header-height - $footer-height - 180px);
+ ::ng-deep #legendDialog {
+ top: $top-legend-dialog-hasHeader; // see portal variables $top-legend-dialog
+ max-height: calc($portal-height-hasFooter-hasHeader - $map-buttons-height); // see portal variables to replace $map-buttons-height-xxxx
}
+
}
diff --git a/src/app/pages/portal/portal.component.ts b/src/app/pages/portal/portal.component.ts
index 3cc5c485..5035268f 100644
--- a/src/app/pages/portal/portal.component.ts
+++ b/src/app/pages/portal/portal.component.ts
@@ -165,7 +165,7 @@ export class PortalComponent implements OnInit, AfterContentInit, OnDestroy {
public homeZoom: number;
@ViewChild('searchbar') searchBar: SearchBarComponent;
- public dialogOpened = this.dialog.getDialogById('legend-button-dialog-container');
+ public dialogOpened = this.dialog.getDialogById('legendDialog');
get map(): IgoMap {
return this.mapState.map;
diff --git a/src/app/pages/portal/portal.variables.scss b/src/app/pages/portal/portal.variables.scss
index cfd54dae..d97b8334 100644
--- a/src/app/pages/portal/portal.variables.scss
+++ b/src/app/pages/portal/portal.variables.scss
@@ -10,6 +10,7 @@ $header-height: 72px;
$header-height-mobile: 72px;
$footer-height: 29px;
$search-bar-height: 60px;
+$map-buttons-height: 188px;
$portal-height-hasHeader-mobile: calc( 100% - #{$header-height-mobile});
$portal-height-hasFooter-hasHeader-mobile: calc( 100% - #{$footer-height} - #{$header-height-mobile} );
@@ -19,10 +20,16 @@ $portal-height-hasMenu-mobile: calc( 100% - #{$menu-height-mobile});
$portal-height-hasFooter: calc( 100% - #{$footer-height} );
$portal-height-hasHeader: calc( 100% - #{$header-height});
$portal-height-hasMenu: calc( 100% - #{$menu-height});
+$portal-height-hasFooter-hasMenu: calc( 100% - #{$menu-height} - #{$footer-height});
$portal-height-hasMenu-hasHeader: calc( 100% - #{$header-height} - #{$menu-height} );
$portal-height-hasFooter-hasHeader: calc( 100% - #{$footer-height} - #{$header-height} );
$portal-height-hasFooter-hasHeader-hasMenu: calc( 100% - #{$footer-height} - #{$header-height} - #{$menu-height} );
+$top-legend-dialog: 4px;
+$top-legend-dialog-hasHeader: calc($header-height + 4px);
+$top-legend-dialog-hasHeader-hasMenu: calc( $header-height + $menu-height + 4px);
+$top-legend-dialog-hasMenu: calc( $menu-height + 4px);
+
$app-sidenav-width-mobile: calc(100% - #{$app-mobile-min-space-right} - #{$igo-margin});
$search-bar-left: $igo-icon-size;
$portal-left: 16px;
diff --git a/src/config/config.json b/src/config/config.json
index 7510b29c..b1e61624 100644
--- a/src/config/config.json
+++ b/src/config/config.json
@@ -9,8 +9,8 @@
"hasMenu": false,
"hasFooter": true,
"hasLegendButton": true,
- "legendInPanel": true,
- "showRotationButtonIfNoRotation": true,
+ "legendInPanel": false,
+ "showRotationButtonIfNoRotation": false,
"hasGeolocateButton": true,
"geolocate": {
"basic": true,
diff --git a/src/contexts/_default.json b/src/contexts/_default.json
index cb0412cc..3188cce9 100644
--- a/src/contexts/_default.json
+++ b/src/contexts/_default.json
@@ -3,39 +3,39 @@
"base": "_base",
"layers": [
{
- "id": "flor",
- "title": "Habitats floristiques",
+ "id": "mtq",
+ "title": "Établissements MTQ",
"showInLayerList": true,
"visible": true,
"baseLayer": false,
"sourceOptions": {
"type": "wms",
- "url": "https://geoegl.msp.gouv.qc.ca/apis/wss/environnement.fcgi",
+ "url": "https://ws.mapserver.transports.gouv.qc.ca/swtq",
"params": {
- "layers": "HABITATS_FLORISTIQUES_V",
+ "layers": "etablissement_mtq",
"version": "1.3.0"
},
"queryable": true,
"queryLayerFeatures": true,
- "queryTitle": "Habitats floristiques"
+ "queryTitle": "Établissements MTQ"
}
},
{
- "id": "mtq",
- "title": "Établissements MTQ",
+ "id": "ferr",
+ "title": "Réseau ferroviaire (MTQ-SWTQ)",
"showInLayerList": true,
"visible": true,
"baseLayer": false,
"sourceOptions": {
"type": "wms",
- "url": "https://ws.mapserver.transports.gouv.qc.ca/swtq",
+ "url": "https://ws.mapserver.transports.gouv.qc.ca/swtq?",
"params": {
- "layers": "etablissement_mtq",
+ "layers": "reseau_chfer_qc",
"version": "1.3.0"
},
- "queryable": true,
+ "queryable": false,
"queryLayerFeatures": true,
- "queryTitle": "Établissements MTQ"
+ "queryTitle": "Réseau ferroviaire (MTQ-SWTQ)"
}
}
]