diff --git a/package-lock.json b/package-lock.json
index 46076265f8de1bbfcaa0a23265d04cecba2e39e7..e0cdd01c194db705d83dc06f97d394be3dd6df9b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "webapp",
- "version": "2.5.1",
+ "version": "2.5.2",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
@@ -4863,12 +4863,6 @@
"integrity": "sha512-EaObqwIvayI5a8dCzhFrjKzVwKLxjoG9T6Ppd5CEo07LRKfQ8Yokw54r5+Wq7FaBQ+yXRvQAYPrHwya1/UFt9g==",
"dev": true
},
- "@types/file-saver": {
- "version": "2.0.1",
- "resolved": "https://registry.npmjs.org/@types/file-saver/-/file-saver-2.0.1.tgz",
- "integrity": "sha512-g1QUuhYVVAamfCifK7oB7G3aIl4BbOyzDOqVyUfEr4tfBKrXfeH+M+Tg7HKCXSrbzxYdhyCP7z9WbKo0R2hBCw==",
- "dev": true
- },
"@types/geojson": {
"version": "7946.0.7",
"resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.7.tgz",
@@ -4907,6 +4901,21 @@
"integrity": "sha512-aWw2YTtAdT7CskFyxEX2K21/zSDStuf/ikI3yBqmwpwJF0pS+/IX5DWv+1UFffZIbruP6cnT9/LAJV1gFwAT1A==",
"dev": true
},
+ "@types/lodash": {
+ "version": "4.14.150",
+ "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.150.tgz",
+ "integrity": "sha512-kMNLM5JBcasgYscD9x/Gvr6lTAv2NVgsKtet/hm93qMyf/D1pt+7jeEZklKJKxMVmXjxbRVQQGfqDSfipYCO6w==",
+ "dev": true
+ },
+ "@types/lodash.clonedeep": {
+ "version": "4.5.6",
+ "resolved": "https://registry.npmjs.org/@types/lodash.clonedeep/-/lodash.clonedeep-4.5.6.tgz",
+ "integrity": "sha512-cE1jYr2dEg1wBImvXlNtp0xDoS79rfEdGozQVgliDZj1uERH4k+rmEMTudP9b4VQ8O6nRb5gPqft0QzEQGMQgA==",
+ "dev": true,
+ "requires": {
+ "@types/lodash": "*"
+ }
+ },
"@types/mapbox-gl": {
"version": "1.7.0",
"resolved": "https://registry.npmjs.org/@types/mapbox-gl/-/mapbox-gl-1.7.0.tgz",
@@ -8011,11 +8020,6 @@
}
}
},
- "file-saver": {
- "version": "2.0.2",
- "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.2.tgz",
- "integrity": "sha512-Wz3c3XQ5xroCxd1G8b7yL0Ehkf0TC9oYC6buPFkNnU9EnaPlifeAFCyCh+iewXTyFRcg0a6j3J7FmJsIhlhBdw=="
- },
"fileset": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/fileset/-/fileset-2.0.3.tgz",
diff --git a/package.json b/package.json
index d736b8350dfc2f5885ac6412c156f97b7e1c9e67..1812106c16ed2739d7ee40bf97562a23b06524ae 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "webapp",
- "version": "2.5.2",
+ "version": "2.6.0",
"license": "GNU Affero General Public License v3.0",
"scripts": {
"ng": "ng",
@@ -41,7 +41,6 @@
"bulma-slider": "^2.0.0",
"bulma-tooltip": "^3.0.2",
"core-js": "^2.5.7",
- "file-saver": "^2.0.2",
"font-awesome": "^4.7.0",
"hamburgers": "^1.1.3",
"jwt-decode": "^2.2.0",
@@ -61,10 +60,10 @@
"@angular/cli": "^8.3.23",
"@angular/compiler-cli": "8.2.14",
"@angular/language-service": "8.2.14",
- "@types/file-saver": "^2.0.1",
"@types/jasmine": "^2.8.12",
"@types/jasminewd2": "^2.0.6",
"@types/jwt-decode": "^2.2.1",
+ "@types/lodash.clonedeep": "^4.5.6",
"@types/mapbox-gl": "^1.7.0",
"@types/node": "^6.14.2",
"codelyzer": "^5.0.1",
diff --git a/src/app/core/components/contact/contact.component.html b/src/app/core/components/contact/contact.component.html
index 49483505ef2546f02e87ab9a0ad09ed756900df6..64e6355d64d0560b818c2adf91b9be689828f5a5 100644
--- a/src/app/core/components/contact/contact.component.html
+++ b/src/app/core/components/contact/contact.component.html
@@ -1,236 +1,247 @@
-<div class="page-container has-padding has-white-background is-fullwidth">
-
- <app-page-header [pageInfo]="pageHeaderInfo"></app-page-header>
-
+<div class="main-container">
+ <div class="header-section">
+ <app-page-header [pageInfo]="pageHeaderInfo"></app-page-header>
+ </div>
<div class="contact-form-container">
- <form [formGroup]="form" (ngSubmit)="send()">
- <div class="columns">
- <div class="column is-12-mobile is-2-tablet is-3-desktop">
- <span class="section-title" i18n="@@contact.identity">Identity</span>
+ <form [formGroup]="form" class="centered-form" (ngSubmit)="send()">
+ <div class="form-content">
+ <div class="columns">
+ <div class="column is-12-mobile is-2-tablet is-3-desktop">
+ <span class="section-title" i18n="@@contact.identity">Identity</span>
+ </div>
</div>
- </div>
- <div class="columns">
- <div class="column is-12-mobile is-10-tablet is-9-desktop">
- <div class="prefilled-user-identity-column" *ngIf="user !== null; else unauthenticatedUserTemplate">
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 23" class="user-icon">
- <g>
- <path
- d="M11.5 11.7c-3.1 0-5.6-2.6-5.6-5.6C5.9 3 8.5.5 11.5.5c3.1 0 5.6 2.6 5.6 5.6 0 3-2.6 5.6-5.6 5.6zM17.2 14.6c1.3.6 2.3 1.5 3 2.6 1.2 1.9 1.2 3.8 1.2 3.9 0 .8-.6 1.4-1.2 1.4H2.6c-.6 0-1.2-.6-1.2-1.4 0-.1 0-2 1.2-3.9.7-1.1 1.8-2 3-2.6 1.6-.8 3.5-1.2 5.8-1.2s4.2.4 5.8 1.2z"
- class="stroke-white" />
- </g>
- </svg>
- <div class="fields-container">
- <p class="fullname">{{ user.firstName }} {{ user.lastName }}</p>
- <p>{{ user.email }}</p>
+ <div class="columns">
+ <div class="column is-12-mobile is-10-tablet is-12-desktop">
+ <div class="prefilled-user-identity-column" *ngIf="user !== null; else unauthenticatedUserTemplate">
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 23" class="user-icon">
+ <g>
+ <path
+ d="M11.5 11.7c-3.1 0-5.6-2.6-5.6-5.6C5.9 3 8.5.5 11.5.5c3.1 0 5.6 2.6 5.6 5.6 0 3-2.6 5.6-5.6 5.6zM17.2 14.6c1.3.6 2.3 1.5 3 2.6 1.2 1.9 1.2 3.8 1.2 3.9 0 .8-.6 1.4-1.2 1.4H2.6c-.6 0-1.2-.6-1.2-1.4 0-.1 0-2 1.2-3.9.7-1.1 1.8-2 3-2.6 1.6-.8 3.5-1.2 5.8-1.2s4.2.4 5.8 1.2z"
+ class="stroke-white" />
+ </g>
+ </svg>
+ <div class="fields-container">
+ <p class="fullname">{{ user.firstName }} {{ user.lastName }}</p>
+ <p>{{ user.email }}</p>
+ </div>
</div>
- </div>
- <ng-template #unauthenticatedUserTemplate>
- <div class="fields-container">
+ <ng-template #unauthenticatedUserTemplate>
+ <div class="fields-container">
+ <div class="columns">
+ <div class="field column is-6">
+ <label class="label" for="lastname"><span i18n="@@contact.lastname">Last name</span><span
+ class="required-field">*</span></label>
+ <p class="control has-icons-right">
+ <input id="lastname" class="input" type="text" formControlName="lastname"
+ (keyup)="toUppercase('lastname')"
+ [ngClass]="{'has-error': fieldIsInvalid('lastname'), 'is-valid': fieldIsValid('lastname')}">
+ <span class="icon is-small is-right is-icon-success" *ngIf="fieldIsValid('lastname')">
+ <i class="fas fa-check-circle"></i>
+ </span>
+ <span class="icon is-small is-right is-icon-warning" *ngIf="fieldIsInvalid('lastname')">
+ <i class="fas fa-exclamation-circle"></i>
+ </span>
+ </p>
- <div class="field">
- <label class="label" for="lastname"><span i18n="@@contact.lastname">Last name</span><span
- class="required-field">*</span></label>
- <p class="control has-icons-right">
- <input id="lastname" class="input" type="text" formControlName="lastname"
- (keyup)="toUppercase('lastname')"
- [ngClass]="{'has-error': fieldIsInvalid('lastname'), 'is-valid': fieldIsValid('lastname')}">
- <span class="icon is-small is-right is-icon-success" *ngIf="fieldIsValid('lastname')">
- <i class="fas fa-check-circle"></i>
- </span>
- <span class="icon is-small is-right is-icon-warning" *ngIf="fieldIsInvalid('lastname')">
- <i class="fas fa-exclamation-circle"></i>
- </span>
- </p>
-
- <div class="form-incorrect-field-message" *ngIf="fieldIsInvalid('lastname')">
- <div *ngIf="lastname.errors['required']" i18n="@@contact.errors.missingLastname">
- You must indicate a lastname.
- </div>
- <div *ngIf="lastname.errors['pattern']" i18n="@@contact.errors.forbiddenCharacters">
- Special characters are forbidden.
+ <div class="form-incorrect-field-message" *ngIf="fieldIsInvalid('lastname')">
+ <div *ngIf="lastname.errors['required']" i18n="@@contact.errors.missingLastname">
+ You must indicate a lastname.
+ </div>
+ <div *ngIf="lastname.errors['pattern']" i18n="@@contact.errors.forbiddenCharacters">
+ Special characters are forbidden.
+ </div>
+ </div>
</div>
- </div>
- </div>
- <div class="field">
- <label class="label" for="firstname"><span i18n="@@contact.firstname">First name</span><span
- class="required-field">*</span></label>
- <p class="control has-icons-right">
- <input id="firstname" class="input" type="text" (keyup)="toUppercase('firstname')"
- formControlName="firstname"
- [ngClass]="{'has-error': fieldIsInvalid('firstname'), 'is-valid': fieldIsValid('firstname')}">
- <span class="icon is-small is-right is-icon-success" *ngIf="fieldIsValid('firstname')">
- <i class="fas fa-check-circle"></i>
- </span>
- <span class="icon is-small is-right is-icon-warning" *ngIf="fieldIsInvalid('firstname')">
- <i class="fas fa-exclamation-circle"></i>
- </span>
- </p>
+ <div class="field column is-6">
+ <label class="label" for="firstname"><span i18n="@@contact.firstname">First name</span><span
+ class="required-field">*</span></label>
+ <p class="control has-icons-right">
+ <input id="firstname" class="input" type="text" (keyup)="toUppercase('firstname')"
+ formControlName="firstname"
+ [ngClass]="{'has-error': fieldIsInvalid('firstname'), 'is-valid': fieldIsValid('firstname')}">
+ <span class="icon is-small is-right is-icon-success" *ngIf="fieldIsValid('firstname')">
+ <i class="fas fa-check-circle"></i>
+ </span>
+ <span class="icon is-small is-right is-icon-warning" *ngIf="fieldIsInvalid('firstname')">
+ <i class="fas fa-exclamation-circle"></i>
+ </span>
+ </p>
- <div class="form-incorrect-field-message" *ngIf="fieldIsInvalid('firstname')">
- <div *ngIf="firstname.errors['required']" i18n="@@contact.errors.missingFirstname">
- You must indicate a firstname.
- </div>
- <div *ngIf="firstname.errors['pattern']" i18n="@@contact.errors.forbiddenCharacters">
- Special characters are forbidden.
+ <div class="form-incorrect-field-message" *ngIf="fieldIsInvalid('firstname')">
+ <div *ngIf="firstname.errors['required']" i18n="@@contact.errors.missingFirstname">
+ You must indicate a firstname.
+ </div>
+ <div *ngIf="firstname.errors['pattern']" i18n="@@contact.errors.forbiddenCharacters">
+ Special characters are forbidden.
+ </div>
+ </div>
</div>
</div>
- </div>
-
- <div class="field">
- <label class="label" for="email"><span i18n="@@contact.email">Email</span><span
- class="required-field">*</span></label>
- <p class="control has-icons-right">
- <input id="email" class="input" type="email" formControlName="email"
- [ngClass]="{'has-error': fieldIsInvalid('email'), 'is-valid': fieldIsValid('email')}">
- <span class="icon is-small is-right is-icon-success" *ngIf="fieldIsValid('email')">
- <i class="fas fa-check-circle"></i>
- </span>
- <span class="icon is-small is-right is-icon-warning" *ngIf="fieldIsInvalid('email')">
- <i class="fas fa-exclamation-circle"></i>
- </span>
- </p>
+ <div class="columns">
+ <div class="field column is-6">
+ <label class="label" for="email"><span i18n="@@contact.email">Email</span><span
+ class="required-field">*</span></label>
+ <p class="control has-icons-right">
+ <input id="email" class="input" type="email" formControlName="email"
+ [ngClass]="{'has-error': fieldIsInvalid('email'), 'is-valid': fieldIsValid('email')}">
+ <span class="icon is-small is-right is-icon-success" *ngIf="fieldIsValid('email')">
+ <i class="fas fa-check-circle"></i>
+ </span>
+ <span class="icon is-small is-right is-icon-warning" *ngIf="fieldIsInvalid('email')">
+ <i class="fas fa-exclamation-circle"></i>
+ </span>
+ </p>
- <div class="form-incorrect-field-message" *ngIf="fieldIsInvalid('email')">
- <div *ngIf="email.errors['required']" i18n="@@contact.errors.missingEmail">
- You must enter an email address.
- </div>
+ <div class="form-incorrect-field-message" *ngIf="fieldIsInvalid('email')">
+ <div *ngIf="email.errors['required']" i18n="@@contact.errors.missingEmail">
+ You must enter an email address.
+ </div>
- <div *ngIf="email.errors['email']" i18n="@@contact.errors.invalidEmail">
- You must enter a valid email address.
+ <div *ngIf="email.errors['email']" i18n="@@contact.errors.invalidEmail">
+ You must enter a valid email address.
+ </div>
+ </div>
</div>
- </div>
- </div>
- <div class="field">
- <label class="label" for="emailConfirmation"><span i18n="@@contact.emailConfirmation">Confirm your email
- address</span><span class="required-field">*</span></label>
- <p class="control has-icons-right">
- <input id="emailConfirmation" class="input" type="email" formControlName="emailConfirmation"
- [ngClass]="{'has-error': emailConfirmationError || fieldIsInvalid('emailConfirmation'), 'is-valid': !emailConfirmationError && fieldIsValid('emailConfirmation')}">
- <span class="icon is-small is-right is-icon-success"
- *ngIf="!emailConfirmationError && fieldIsValid('emailConfirmation')">
- <i class="fas fa-check-circle"></i>
- </span>
- <span class="icon is-small is-right is-icon-warning"
- *ngIf="emailConfirmationError || fieldIsInvalid('emailConfirmation')">
- <i class="fas fa-exclamation-circle"></i>
- </span>
- </p>
+ <div class="field column is-6">
+ <label class="label" for="emailConfirmation"><span i18n="@@contact.emailConfirmation">Confirm your
+ email
+ address</span><span class="required-field">*</span></label>
+ <p class="control has-icons-right">
+ <input id="emailConfirmation" class="input" type="email" formControlName="emailConfirmation"
+ [ngClass]="{'has-error': emailConfirmationError || fieldIsInvalid('emailConfirmation'), 'is-valid': !emailConfirmationError && fieldIsValid('emailConfirmation')}">
+ <span class="icon is-small is-right is-icon-success"
+ *ngIf="!emailConfirmationError && fieldIsValid('emailConfirmation')">
+ <i class="fas fa-check-circle"></i>
+ </span>
+ <span class="icon is-small is-right is-icon-warning"
+ *ngIf="emailConfirmationError || fieldIsInvalid('emailConfirmation')">
+ <i class="fas fa-exclamation-circle"></i>
+ </span>
+ </p>
- <div class="form-incorrect-field-message" *ngIf="fieldIsInvalid('emailConfirmation')">
- <div *ngIf="emailConfirmation.errors['required']" i18n="@@contact.errors.missingConfirmationEmail">
- You must confirm your email address.
- </div>
+ <div class="form-incorrect-field-message" *ngIf="fieldIsInvalid('emailConfirmation')">
+ <div *ngIf="emailConfirmation.errors['required']"
+ i18n="@@contact.errors.missingConfirmationEmail">
+ You must confirm your email address.
+ </div>
- <div *ngIf="emailConfirmation.errors['email']" i18n="@@contact.errors.invalidEmail">
- You must enter a valid email address.
- </div>
- </div>
- <div class="form-incorrect-field-message" *ngIf="emailConfirmationError">
- <div *ngIf="emailConfirmationError" i18n="@@contact.errors.confirmationEmailNotCorresponding">
- You must enter the same email address.
+ <div *ngIf="emailConfirmation.errors['email']" i18n="@@contact.errors.invalidEmail">
+ You must enter a valid email address.
+ </div>
+ </div>
+ <div class="form-incorrect-field-message" *ngIf="emailConfirmationError">
+ <div *ngIf="emailConfirmationError" i18n="@@contact.errors.confirmationEmailNotCorresponding">
+ You must enter the same email address.
+ </div>
+ </div>
</div>
</div>
</div>
- </div>
- </ng-template>
+ </ng-template>
+ </div>
</div>
</div>
- <div class="columns">
- <div class="column is-12">
- <span class="section-title" i18n="@@contact.message">Message</span>
+ <div class="form-content">
+ <div class="columns">
+ <div class="column is-12">
+ <span class="section-title" i18n="@@contact.message">Message</span>
+ </div>
</div>
- </div>
- <div class="columns">
- <div class="column is-12">
- <div class="field">
- <label class="label" [for]="subjectLabelFor"><span i18n="@@contact.subject">Subject</span><span
- class="required-field">*</span></label>
- <div class="dropdown" [ngClass]="{'is-active': subjectDropdownState}"
- (clickOutside)="closeSubjectDropdown()">
- <div class="dropdown-trigger" (click)="toggleSubject()">
- <button id="subjectDropdown" type="button" class="button" aria-haspopup="true"
- aria-controls="dropdown-menu" [disabled]="formDisabled">
- <span>{{ selectedSubject !== null && selectedSubject.value !== null ? selectedSubject.value : contactTrad.subjectPlaceholder }}</span>
- <span class="icon is-small">
- <i class="fas fa-angle-down" aria-hidden="true"></i>
- </span>
- </button>
- </div>
- <div class="dropdown-menu" id="dropdown-menu" role="menu">
- <ul class="dropdown-content">
- <li class="dropdown-item" *ngFor="let sub of subjects" (keydown.enter)="setSubject(sub)"
- (click)="setSubject(sub)" tabindex=0>
- {{ sub.value }}
- </li>
- </ul>
+ <div class="columns">
+ <div class="column is-12">
+ <div class="field">
+ <label class="label" [for]="subjectLabelFor"><span i18n="@@contact.subject">Subject</span><span
+ class="required-field">*</span></label>
+ <div class="dropdown" [ngClass]="{'is-active': subjectDropdownState}"
+ (clickOutside)="closeSubjectDropdown()">
+ <div class="dropdown-trigger" (click)="toggleSubject()">
+ <button id="subjectDropdown" type="button" class="button" aria-haspopup="true"
+ aria-controls="dropdown-menu" [disabled]="formDisabled">
+ <span>{{ selectedSubject !== null && selectedSubject.value !== null ? selectedSubject.value : contactTrad.subjectPlaceholder }}</span>
+ <span class="icon is-small">
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
+ </span>
+ </button>
+ </div>
+ <div class="dropdown-menu" id="dropdown-menu" role="menu">
+ <ul class="dropdown-content">
+ <li class="dropdown-item" *ngFor="let sub of subjects" (keydown.enter)="setSubject(sub)"
+ (click)="setSubject(sub)" tabindex=0>
+ {{ sub.value }}
+ </li>
+ </ul>
+ </div>
</div>
- </div>
- <p class="control has-icons-right subject-input-control" *ngIf="displaySubjectInput === true">
- <input id="subjectInput" class="input" type="text" formControlName="subject"
- [ngClass]="{'has-error': fieldIsInvalid('subject'), 'is-valid': fieldIsValid('subject')}">
- <span class="icon is-small is-right is-icon-success" *ngIf="fieldIsValid('subject')">
- <i class="fas fa-check-circle"></i>
- </span>
- <span class="icon is-small is-right is-icon-warning" *ngIf="fieldIsInvalid('subject')">
- <i class="fas fa-exclamation-circle"></i>
- </span>
- </p>
+ <p class="control has-icons-right subject-input-control" *ngIf="displaySubjectInput === true">
+ <input id="subjectInput" class="input" type="text" formControlName="subject"
+ [ngClass]="{'has-error': fieldIsInvalid('subject'), 'is-valid': fieldIsValid('subject')}">
+ <span class="icon is-small is-right is-icon-success" *ngIf="fieldIsValid('subject')">
+ <i class="fas fa-check-circle"></i>
+ </span>
+ <span class="icon is-small is-right is-icon-warning" *ngIf="fieldIsInvalid('subject')">
+ <i class="fas fa-exclamation-circle"></i>
+ </span>
+ </p>
- <div class="form-incorrect-field-message" *ngIf="fieldIsInvalid('subject')">
- <div *ngIf="subject.errors['required']" i18n="@@contact.errors.missingSubject">
- You must enter a subject.
+ <div class="form-incorrect-field-message" *ngIf="fieldIsInvalid('subject')">
+ <div *ngIf="subject.errors['required']" i18n="@@contact.errors.missingSubject">
+ You must enter a subject.
+ </div>
</div>
</div>
- </div>
- <div class="field">
- <label class="label" for="text"><span i18n="@@contact.messageField">Message</span><span
- class="required-field">*</span></label>
- <p class="control has-icons-right">
- <textarea id="text" class="textarea has-fixed-size" type="textarea" formControlName="text"
- [ngClass]="{'has-error': fieldIsInvalid('text'), 'is-valid': fieldIsValid('text')}" rows=6></textarea>
- <span class="icon is-small is-right is-icon-success" *ngIf="fieldIsValid('text')">
- <i class="fas fa-check-circle"></i>
- </span>
- <span class="icon is-small is-right is-icon-warning" *ngIf="fieldIsInvalid('text')">
- <i class="fas fa-exclamation-circle"></i>
- </span>
- </p>
+ <div class="field">
+ <label class="label" for="text"><span i18n="@@contact.messageField">Message</span><span
+ class="required-field">*</span></label>
+ <p class="control has-icons-right">
+ <textarea id="text" class="textarea has-fixed-size" type="textarea" formControlName="text"
+ [ngClass]="{'has-error': fieldIsInvalid('text'), 'is-valid': fieldIsValid('text')}" rows=6></textarea>
+ <span class="icon is-small is-right is-icon-success" *ngIf="fieldIsValid('text')">
+ <i class="fas fa-check-circle"></i>
+ </span>
+ <span class="icon is-small is-right is-icon-warning" *ngIf="fieldIsInvalid('text')">
+ <i class="fas fa-exclamation-circle"></i>
+ </span>
+ </p>
- <div class="form-incorrect-field-message" *ngIf="fieldIsInvalid('text')">
- <div *ngIf="text.errors['required']" i18n="@@contact.errors.invalidMessage">
- You must enter a message.
+ <div class="form-incorrect-field-message" *ngIf="fieldIsInvalid('text')">
+ <div *ngIf="text.errors['required']" i18n="@@contact.errors.invalidMessage">
+ You must enter a message.
+ </div>
</div>
</div>
- </div>
- <div class="field">
- <input id="consent" class="is-checkradio" type="checkbox" formControlName="consent">
- <label for="consent" class="label consent-label checkbox-label">
- <p>
- <span i18n="@@consent.withoutCGU">I accept the processing of the information
- entered in this form to respond to my request.</span><span class="required-field">*</span>
- </p>
- </label>
- <div class="form-incorrect-field-message" *ngIf="fieldIsInvalid('consent')">
- <div *ngIf="consent.errors['required']" i18n="@@consent.error">
- You must accept the processing of the information entered in this form to
- respond to your request.
+ <div class="field">
+ <input id="consent" class="is-checkradio" type="checkbox" formControlName="consent">
+ <label for="consent" class="label consent-label checkbox-label">
+ <p>
+ <span i18n="@@consent.withoutCGU">I accept the processing of the information
+ entered in this form to respond to my request.</span><span class="required-field">*</span>
+ </p>
+ </label>
+ <div class="form-incorrect-field-message" *ngIf="fieldIsInvalid('consent')">
+ <div *ngIf="consent.errors['required']" i18n="@@consent.error">
+ You must accept the processing of the information entered in this form to
+ respond to your request.
+ </div>
</div>
+ <p class="consent-text" i18n="@@consent.text">
+ Fields with an asterisk (*) are mandatory. Information in these fields will be processed to respond to
+ your request. The data is kept for a period of 12 months. Recipients of this
+ information are the metropolitan departments in charge of processing your request. In compliance with
+ the
+ “Digital Technology and Freedom” law dated January 6, 1978, you have the right to access and rectify
+ information that concerns you. To exercise this right, please contact the service of the Data Protection
+ Officer (DPD): Métropole de Lyon – Délégué à la Protection des Données - Direction des Affaires
+ Juridiques et de la Commande Publique - 20, rue du Lac - BP 33569 - 69505 Lyon Cedex 03 or use the
+ following form https://demarches.toodego.com/sve/proteger-mes-donnees-personnelles/. You may also oppose
+ processing of your personal data for a legitimate reason. In this case, we will
+ not be able to process the request submitted using this form.
+ </p>
</div>
- <p class="consent-text" i18n="@@consent.text">
- Fields with an asterisk (*) are mandatory. Information in these fields will be processed to respond to
- your request. The data is kept for a period of 12 months. Recipients of this
- information are the metropolitan departments in charge of processing your request. In compliance with the
- “Digital Technology and Freedom” law dated January 6, 1978, you have the right to access and rectify
- information that concerns you. To exercise this right, please contact: Lyon Métropole - Direction des
- Affaires Juridiques et de la Commande Publique - 20 Rue du Lac - BP 33569 - 69505 Lyon Cedex 03, by postal
- mail. You may also oppose processing of your personal data for a legitimate reason. In this case, we will
- not be able to process the request submitted using this form.
- </p>
</div>
</div>
</div>
diff --git a/src/app/core/components/contact/contact.component.scss b/src/app/core/components/contact/contact.component.scss
index 2e50cf9d087ccc73b83ed22349e317ec37ed64aa..18604b14e9548ba3974b229aaf527cf5165306e1 100644
--- a/src/app/core/components/contact/contact.component.scss
+++ b/src/app/core/components/contact/contact.component.scss
@@ -32,18 +32,28 @@
cursor: pointer;
background-color: lightgrey;
}
-
+.form-content:not(:first-child){
+ margin-top:0;
+}
+.form-content:first-child{
+ margin-bottom:1rem;
+ .column{
+ margin-bottom:0;
+ }
+}
.button-wrapper {
display: flex;
justify-content: flex-end;
+ padding-right:2rem;
+
@media screen and (max-width: 550px) {
flex-direction: column;
align-items: center;
justify-content: space-between;
+ padding-right:0;
.button {
- width: 100%;
&:first-of-type {
margin-bottom: 0.5rem;
diff --git a/src/app/core/components/cookie-banner/cookie-banner.component.html b/src/app/core/components/cookie-banner/cookie-banner.component.html
index 140c8f9e6ed4e7e8e925caa2d6e4c447c6af923e..13467410fef9fa99c91b243ecbc3b8fee750e03d 100644
--- a/src/app/core/components/cookie-banner/cookie-banner.component.html
+++ b/src/app/core/components/cookie-banner/cookie-banner.component.html
@@ -1,9 +1,80 @@
<div class="cookie-baner-container" *ngIf="displayCookieBanner">
- <div>
- <p><span i18n="@@cookieBanner.message">By continuing to browse this site, you agree to the use of cookies. </span>
- <a class="link-without-decoration" [routerLink]="['/', AppRoutes.legalNotices.uri]" i18n="@@cookieBanner.more"> Learn more</a></p>
+ <div class="cross" (click)="hideCookieBanner()">
+ <svg color="white" width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path d="M1 13.0144L7 7.00723L0.999999 1.00006" stroke="white" stroke-width="2" stroke-linecap="round"
+ stroke-linejoin="round" />
+ <path d="M13 1L7 7.00717L13 13.0143" stroke="white" stroke-width="2" stroke-linecap="round"
+ stroke-linejoin="round" />
+ </svg>
</div>
- <div>
- <button class="button" (click)="hideCookieBanner()">OK</button>
+ <div class="cookie-icon">
+ <svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path
+ d="M26.9018 6.53255L27.7391 7.07925L28.4427 6.00157L27.2246 5.58609L26.9018 6.53255ZM23.303 1.52707L24.303 1.52213L24.2984 0.576451L23.3539 0.528362L23.303 1.52707ZM32.2251 14.6798L33.225 14.6928L33.2405 13.4994L32.0628 13.693L32.2251 14.6798ZM40.3328 19.2742L41.2178 18.8087L40.7186 17.8597L39.8067 18.4238L40.3328 19.2742ZM42.8507 21.6482L43.8504 21.6258L43.8364 20.9966L43.263 20.7372L42.8507 21.6482ZM27.2246 5.58609C25.5304 5.00824 24.3123 3.40671 24.303 1.52213L22.3031 1.53201C22.3167 4.2941 24.1026 6.63438 26.579 7.47901L27.2246 5.58609ZM27.0403 9.43481C27.0403 8.56391 27.2972 7.75606 27.7391 7.07925L26.0644 5.98585C25.4167 6.97791 25.0403 8.16392 25.0403 9.43481H27.0403ZM31.356 13.7505C28.9725 13.7505 27.0403 11.8183 27.0403 9.43481H25.0403C25.0403 12.9229 27.8679 15.7505 31.356 15.7505V13.7505ZM32.0628 13.693C31.8334 13.7308 31.5974 13.7505 31.356 13.7505V15.7505C31.7065 15.7505 32.0511 15.7218 32.3873 15.6665L32.0628 13.693ZM33.2246 14.7502C33.2246 14.731 33.2247 14.7119 33.225 14.6928L31.2252 14.6668C31.2248 14.6946 31.2246 14.7224 31.2246 14.7502H33.2246ZM37.5403 19.0659C35.1568 19.0659 33.2246 17.1337 33.2246 14.7502H31.2246C31.2246 18.2383 34.0522 21.0659 37.5403 21.0659V19.0659ZM39.8067 18.4238C39.1487 18.8308 38.3735 19.0659 37.5403 19.0659V21.0659C38.7557 21.0659 39.8938 20.7216 40.8588 20.1247L39.8067 18.4238ZM43.263 20.7372C42.3862 20.3403 41.6644 19.6577 41.2178 18.8087L39.4477 19.7398C40.1008 20.9812 41.1544 21.9781 42.4383 22.5592L43.263 20.7372ZM43.856 22.1187C43.856 21.954 43.8541 21.7897 43.8504 21.6258L41.8509 21.6706C41.8543 21.8195 41.856 21.9689 41.856 22.1187H43.856ZM22.2373 43.7373C34.177 43.7373 43.856 34.0583 43.856 22.1187H41.856C41.856 32.9537 33.0724 41.7373 22.2373 41.7373V43.7373ZM0.618652 22.1187C0.618652 34.0583 10.2977 43.7373 22.2373 43.7373V41.7373C11.4022 41.7373 2.61865 32.9537 2.61865 22.1187H0.618652ZM22.2373 0.5C10.2977 0.5 0.618652 10.179 0.618652 22.1187H2.61865C2.61865 11.2836 11.4022 2.5 22.2373 2.5V0.5ZM23.3539 0.528362C22.984 0.509527 22.6117 0.5 22.2373 0.5V2.5C22.5778 2.5 22.9161 2.50866 23.2522 2.52577L23.3539 0.528362Z"
+ fill="white" />
+ <circle cx="11.9937" cy="14.875" r="1.375" fill="white" />
+ <circle cx="22.2373" cy="35.125" r="1.375" fill="white" />
+ <circle cx="12.8374" cy="27.0312" r="2.71875" fill="white" />
+ <circle cx="25.1748" cy="19.9375" r="1.5625" fill="white" />
+ <circle cx="31.356" cy="31.75" r="2" fill="white" />
+ <circle cx="19.4873" cy="9.5" r="2" fill="white" />
+ </svg>
</div>
+ <p class="banner-text"><span i18n="@@cookieBanner.message">We care about your personal data and we use cookies in
+ order to improve your experience.</span>
+ <div class="button-wrapper">
+ <button class="button" i18n="@@cookieBanner.close" (click)="hideCookieBanner();">Close</button>
+ <button class="button button-white" i18n="@@cookieBanner.more" (click)="showMore();hideCookieBanner();">Learn
+ more</button>
+ </div>
</div>
+<div class="modal" *ngIf="modalOpen">
+ <div class="box">
+ <div>
+ <p class="title" i18n="@@cookieModal.title">Cookies manager</p>
+ <svg class="cross" (click)="hideModal()" color="white" width="14" height="15" viewBox="0 0 14 15" fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <path d="M1 13.0144L7 7.00723L0.999999 1.00006" stroke="white" stroke-width="2" stroke-linecap="round"
+ stroke-linejoin="round" />
+ <path d="M13 1L7 7.00717L13 13.0143" stroke="white" stroke-width="2" stroke-linecap="round"
+ stroke-linejoin="round" />
+ </svg>
+ </div>
+
+
+ <div class="content">
+ <div class="tabs">
+ <div class="tab" (click)='toggleTab(0)' [ngClass]="{'tab-active' : tab === 0}">
+ <p i18n="@@cookieModal.tab1title">Why do we use cookies?</p>
+ </div>
+ <div class="tab" (click)='toggleTab(1)' [ngClass]="{'tab-active' : tab === 1}">
+ <p i18n="@@cookieModal.tab2title">Necessary cookies</p>
+ </div>
+ </div>
+ <div class="description">
+ <div class="tab-description" [ngClass]="{'hidden' : tab !== 0}">
+ <p class="tab-title" i18n="@@cookieModal.tab1">Why do we use cookies?</p>
+ <div class="tab-content">
+ <p i18n="@@cookieModal.tab1.p1">We use cookies to learn about how you interact with us, improve your
+ experience on our site and personalize your relationship with the platform data.grandlyon.com.</p>
+ <p i18n="@@cookieModal.tab1.p2">Cookies are not used for commercial purposes.</p>
+ <p i18n="@@cookieModal.tab1.p3">Click on the « Necessary cookies » tab to find out more.</p>
+ </div>
+ </div>
+ <div class="tab-description" [ngClass]="{'hidden' : tab !== 1}">
+ <p class="tab-title" i18n="@@cookieModal.tab2">Necessary cookies</p>
+ <div class="tab-content">
+ <p i18n="@@cookieModal.tab2.p1">Active cookies allow to :</p>
+ <p i18n="@@cookieModal.tab2.p2">- save your awareness of how cookies are managed, so that you will not have
+ to go through it at each visit.</p>
+ <p i18n="@@cookieModal.tab2.p3">- save your awareness and acceptance of the Terms of use, so that we will
+ not have to ask you to renew this acceptance at each visit.</p>
+ <p i18n="@@cookieModal.tab2.p4">- avoid, during authenticated sessions, to systematically prompt you for
+ your credentials at each visit or new page</p>
+ <p i18n="@@cookieModal.tab2.p5">- measure the data.grandlyon.com platform's traffic</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
\ No newline at end of file
diff --git a/src/app/core/components/cookie-banner/cookie-banner.component.scss b/src/app/core/components/cookie-banner/cookie-banner.component.scss
index 1eee2eb6c20d07f18dfad51d829c11cf11992506..8eae3a3cc1922eca8008a6904082ef8961d67934 100644
--- a/src/app/core/components/cookie-banner/cookie-banner.component.scss
+++ b/src/app/core/components/cookie-banner/cookie-banner.component.scss
@@ -2,59 +2,251 @@
@import '../../../../../node_modules/bulma/sass/utilities/_all.sass';
.cookie-baner-container {
- height: 4.3125rem;
- width: 100%;
+ background: rgba(36, 43, 63, 0.9);
position: fixed;
- bottom: 0;
- display: flex;
- justify-content: space-between;
- background-color: $brand-color;
+ border: 1px solid #FFFFFF;
+ box-sizing: border-box;
+ border-radius: 4px;
z-index: 5;
+ min-height: 200px;
+ right: 0;
+ max-width: 300px;
+ margin: 1rem;
+ bottom: 0;
- p,
- a,
- span {
+ @media screen and(max-width: $tablet) {
+ right: 0;
+ max-width: 700px;
+ margin: auto;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ background: rgba(36, 43, 63, 1);
+ }
+
+ .cross {
+ float: right;
color: white;
- font-size: 16px;
+ cursor: pointer;
+ margin: 0.8rem;
}
- div {
- display: flex;
- align-items: center;
- padding: 0 2.5rem;
+ .cookie-icon {
+ margin: 1rem 0 0.7rem 2rem;
+ text-align: center;
+
+ }
+
+ .banner-text,
+ .banner-text span {
+ color: white;
+ font-size: 15px;
+ margin: auto;
+ }
+
+ span {
+ display: block;
+ text-align: center;
+ padding: 0 1rem;
}
+
a {
color: $tomato-color;
font-weight: 600;
display: inline-block;
}
+ .button-wrapper {
+ display: flex;
+ justify-content: space-evenly;
+
+ @media screen and (max-width: $tablet) {
+ justify-content: center;
+ margin-top: 0.4rem;
+
+ button:first-of-type {
+ margin-right: 1rem;
+ }
+ }
+ }
+
button.button {
- height: 43px;
- width: 85px;
+ width: 120px;
+ height: 36px;
border: 1px solid white;
border-radius: 4px;
font-size: 12px;
font-weight: bold;
- background-color: transparent;
+ background-color: #242B3F;
color: white;
+ display: block;
+ margin-top: 1rem;
+ padding: 0.5rem 1.5rem;
&:hover {
border-color: $tomato-color;
}
}
- @media screen and (max-width: $tablet) {
- height: unset;
- display: block;
+ button.button.button-white {
+ background-color: white;
+ color: #242B3F;
+ }
+}
+
+.modal {
+ width: 100%;
+ height: 100vh;
+ position: fixed;
+ top: 0;
+ left: 0;
+ background: rgba(36, 43, 63, 0.8);
+ z-index: 10;
+ display: flex;
+ align-items: center;
+ overflow: hidden;
+
+ .box {
+ width: 100%;
+ max-width: 600px;
+ min-height: 400px;
+ background: #FFFFFF;
+ box-shadow: 0px 4px 28px rgba(0, 0, 0, 0.55);
+ position: relative;
+
+ @media screen and(max-width: $tablet) {
+ width: calc(100% - 50px);
+ height: 450px;
+ max-width: unset;
+ }
+
+ .title {
+ background: #242B3F;
+ color: white;
+ text-align: left;
+ margin-bottom: 0;
+ font-size: 1.2rem;
+ padding: 1rem;
+ }
+
+ .cross {
+ position: absolute;
+ top: 0;
+ right: 0;
+ margin: 1.2rem 1rem;
+ color: white;
+ cursor: pointer;
+ }
+
+ .content {
+ display: flex;
+ height: calc(450px - 53px); // minus the height of the popup header
+
+ @media screen and(max-width: $tablet) {
+ flex-direction: column;
+ }
+
+ .tabs {
+ width: 35%;
+ background: #EBEBEB;
+ color: #242B3F;
+
+ @media screen and(max-width: $tablet) {
+ width: 100%;
+ display: flex;
+ }
+
+ .tab {
+ cursor: pointer;
+ padding: 1rem;
+ border-bottom: 1px solid #B4B4B4;
+ position: relative;
+
+ @media screen and(max-width: $tablet) {
+ width: 50%;
+
+ &:not(:last-of-type) {
+ border-right: 1px solid $grey-super-light-color;
+ }
+ }
+
+ p {
+ display: inline-block;
+ }
+
+ .circle {
+ margin-right: 8px;
+ display: inline-block;
+ }
+ }
+
+ .tab-active {
+ background: white;
+
+ @media screen and(max-width: $tablet) {
+
+ //remove border
+ &:after {
+ content: '';
+ height: 2px;
+ width: 100%;
+ position: absolute;
+ bottom: -2px;
+ left: 0;
+ background: white;
+ }
+ }
+
+ @media screen and(min-width: $tablet) {
+
+ //remove border
+ &:after {
+ content: '';
+ height: 100%;
+ width: 2px;
+ position: absolute;
+ right: -2px;
+ top: 0;
+ background: white;
+ }
+ }
+ }
+ }
+
+ .description {
+ width: 65%;
+ border-left: 1px solid #B4B4B4;
+ padding: 1.3rem 1rem;
+ background-color: #fff;
+ overflow: auto;
+
+ @media screen and(max-width: $tablet) {
+ width: 100%;
+ border: none;
+ }
+
+ .tab-description {
+ color: #242B3F;
+ text-align: left;
+
+ .tab-title {
+ font-weight: bold;
+ font-size: 1.2rem;
+ }
+
+ .tab-content {
+ margin-top: 1rem;
- div {
- padding: 1rem 2.5rem;
+ p {
+ margin-bottom: 0.7rem;
+ }
+ }
+ }
- &:last-of-type {
- justify-content: center;
- padding-top: 0;
+ .hidden {
+ display: none;
+ }
}
}
}
diff --git a/src/app/core/components/cookie-banner/cookie-banner.component.ts b/src/app/core/components/cookie-banner/cookie-banner.component.ts
index 2f0d09ca803f43af9a6993cfab66c0d78a88cea0..9afc3586037edc50c7c15a26236787c1acd8a736 100644
--- a/src/app/core/components/cookie-banner/cookie-banner.component.ts
+++ b/src/app/core/components/cookie-banner/cookie-banner.component.ts
@@ -1,42 +1,70 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
import { CookieService } from 'ngx-cookie-service';
+import { Subscription } from 'rxjs';
import { AppRoutes } from '../../../routes';
+import { AppStateService } from '../../services';
@Component({
selector: 'app-cookie-banner',
templateUrl: './cookie-banner.component.html',
styleUrls: ['./cookie-banner.component.scss'],
})
-export class CookieBannerComponent implements OnInit {
+export class CookieBannerComponent implements OnInit, OnDestroy {
+ modalOpen: boolean;
+ tab = 0;
AppRoutes = AppRoutes;
private cookiesAccepted: boolean;
private cookiesAcceptedKey = 'COOKIES_ACCEPTED';
+ private sub: Subscription;
constructor(
private _cookieService: CookieService,
- ) {
- this.cookiesAccepted = (this._cookieService.get(this.cookiesAcceptedKey) === 'true');
- this._cookieService.set(
- this.cookiesAcceptedKey, // Key
- 'true', // Value
- new Date(new Date().setFullYear(new Date().getFullYear() + 1)), // Expiration date now + 1 year
- '/',
- document.location.hostname,
- false,
- 'Strict',
- );
- }
+ private _appStateService: AppStateService,
+ ) { }
ngOnInit() {
+ this.cookiesAccepted = (this._cookieService.get(this.cookiesAcceptedKey) === 'true');
+
+ this.modalOpen = this._appStateService.cookieModalOpened;
+
+ this.sub = this._appStateService.cookieModalStateChanged$.subscribe((state) => {
+ this.modalOpen = state;
+ });
}
hideCookieBanner() {
- this.cookiesAccepted = true;
+ if (!this.cookiesAccepted) {
+ this._cookieService.set(
+ this.cookiesAcceptedKey, // Key
+ 'true', // Value
+ new Date(new Date().setFullYear(new Date().getFullYear() + 1)), // Expiration date now + 1 year
+ '/',
+ document.location.hostname,
+ false,
+ 'Strict',
+ );
+ this.cookiesAccepted = true;
+ }
+ }
+
+ hideModal() {
+ this._appStateService.changeCookieModalState(false);
+ }
+
+ showMore() {
+ this._appStateService.changeCookieModalState(true);
+ }
+
+ toggleTab(tabNumber) {
+ this.tab = tabNumber;
}
get displayCookieBanner() {
return !this.cookiesAccepted;
}
+ ngOnDestroy() {
+ this.sub.unsubscribe();
+ }
}
diff --git a/src/app/core/components/feedback/feedback.component.html b/src/app/core/components/feedback/feedback.component.html
index 3d2879a8ec841015ea5c047f45605f69b98c26eb..aec4894ee493cf55cf71f25c6f67e8b1445983ea 100644
--- a/src/app/core/components/feedback/feedback.component.html
+++ b/src/app/core/components/feedback/feedback.component.html
@@ -1,5 +1,4 @@
-<div class="feedback-component-container" [ngClass]="{'on-home-page': isHomePage}"
- (clickOutside)="closeFeedbackFromClickOutside()">
+<div class="feedback-component-container" (clickOutside)="closeFeedbackFromClickOutside()">
<button tabindex="0" class="feedback-button" (click)="toogle()" aria-label="Your feedback..."
i18n-aria-label="@@feedback.giveYourFeedback" [ngClass]="{'expended': isExpended, 'closed': shouldAnimateClosing}">
<svg xmlns="http://www.w3.org/2000/svg" id="feedback_x5F_icon" viewBox="0 0 37.2 34">
@@ -21,8 +20,7 @@
</div>
<form [formGroup]="feedbackForm" (ngSubmit)="sendFeedback()">
- <p class="is-strong" i18n="@@feedback.thisIsABeta">This website is in beta.</p>
- <p class="is-strong" i18n="@@feedback.itNeedsYou">It needs your feedback to improve:<span
+ <p class="is-strong" i18n="@@feedback.itNeedsYou">data.grandlyon.com needs your feedback to improve :<span
class="required-field">*</span>
</p>
@@ -112,17 +110,17 @@
<p class="is-small consent-text" i18n="@@consent.text" *ngIf="feedbackHasEmail">
Fields with an asterisk (*) are mandatory. Information in these fields will be processed to respond to
your request. The data is kept for a period of 12 months. Recipients of this
- information are the metropolitan departments in charge of processing your request. In compliance with the
+ information are the metropolitan departments in charge of processing your request. In compliance with
+ the
“Digital Technology and Freedom” law dated January 6, 1978, you have the right to access and rectify
- information that concerns you. To exercise this right, please contact: Lyon Métropole - Direction des
- Affaires Juridiques et de la Commande Publique - 20 Rue du Lac - BP 33569 - 69505 Lyon Cedex 03, by postal
- mail. You may also oppose processing of your personal data for a legitimate reason. In this case, we will
+ information that concerns you. To exercise this right, please contact the service of the Data Protection
+ Officer (DPD): Métropole de Lyon – Délégué à la Protection des Données - Direction des Affaires
+ Juridiques et de la Commande Publique - 20, rue du Lac - BP 33569 - 69505 Lyon Cedex 03 or use the
+ following form https://demarches.toodego.com/sve/proteger-mes-donnees-personnelles/. You may also oppose
+ processing of your personal data for a legitimate reason. In this case, we will
not be able to process the request submitted using this form.
</p>
</form>
</div>
- <a class="why-a-beta-link" i18n="@@feedback.whyABeta" [routerLink]="['/', AppRoutes.beta.uri]"
- [tabindex]="isExpended ? 0 : -1">Why a beta
- version?</a>
</div>
</div>
\ No newline at end of file
diff --git a/src/app/core/components/feedback/feedback.component.scss b/src/app/core/components/feedback/feedback.component.scss
index 8f1d06f04fdff85c39044b9cb2dc8f2fe3d8e78a..f6b70b1330b9d4b6c3bd4203ae2dc0035e98d342 100644
--- a/src/app/core/components/feedback/feedback.component.scss
+++ b/src/app/core/components/feedback/feedback.component.scss
@@ -101,12 +101,12 @@ label.feedback-consent {
.feedback-form-feeling-wrapper label:hover::after,
.feedback-form-feeling-wrapper label:focus::after {
- border: 1px solid $yellow-dd-color;
+ border: 1px solid $tomato-color;
}
button.feedback-button {
clip-path: polygon($button-polygon-starting-point 0, 100% 0, 100% 100%, 0 100%);
- background-color: $yellow-dd-color;
+ background-color: $tomato-color;
position: fixed;
display: flex;
align-items: center;
@@ -128,17 +128,17 @@ button.feedback-button {
margin-left: 1.2rem;
.color-brand {
- fill: $brand-color;
+ fill: $grey-background-color;
}
.color-beta {
- fill: $yellow-dd-color;
+ fill: $tomato-color;
}
}
span {
visibility: hidden;
- color: $brand-color;
+ color: $grey-background-color;
font-size: 1.125rem;
font-weight: bold;
text-align: right;
@@ -151,14 +151,14 @@ button.feedback-button {
}
}
-.on-home-page button.feedback-button {
- top: calc(50vh - 1.9rem);
- right: 0;
+// .on-home-page button.feedback-button {
+// top: calc(50vh - 1.9rem);
+// right: 0;
- span {
- visibility: visible;
- }
-}
+// span {
+// visibility: visible;
+// }
+// }
.feedback-form-feeling-wrapper {
display: flex;
@@ -207,7 +207,7 @@ button.feedback-button {
.feedback-form-feeling-wrapper input[type="radio"]:checked {
& ~ label::after {
- border: 2px solid $yellow-dd-color;
+ border: 2px solid $tomato-color;
z-index: -1;
background-color: white;
}
@@ -241,8 +241,8 @@ button.feedback-button {
// padding: 0.5rem;
button {
- background-color: $yellow-dd-color;
- color: $brand-color;
+ background-color: $tomato-color;
+ color: white;
font-size: 1rem;
font-weight: bold;
width: 208px;
@@ -278,7 +278,7 @@ button.feedback-button {
clip-path: polygon($container-polygon-starting-point 0, 100% 0, 100% 100%, 0 100%);
}
- background-color: $yellow-dd-color;
+ background-color: $tomato-color;
position: fixed;
width: var(--feedback-container-width);
right: calc(-1 * var(--feedback-container-width));
diff --git a/src/app/core/components/main/footer/footer.component.html b/src/app/core/components/main/footer/footer.component.html
index efecf5e5ca7120c96650883aa94764afa73699d6..6204fa7d5f01bf8c78660492ba98eed26d6fa9da 100644
--- a/src/app/core/components/main/footer/footer.component.html
+++ b/src/app/core/components/main/footer/footer.component.html
@@ -37,12 +37,12 @@
</div>
</div>
<div class="links-section">
- <div>
+ <!-- <div>
<a class="accessibility-link" [routerLink]="['/', AppRoutes.accessibility.uri]" i18n="@@footer.accessibility">
Accessibility</a>
- </div>
+ </div> -->
<div>
- <span class="bullet">•</span>
+ <!-- <span class="bullet">•</span> -->
<a class="site-map-link" [routerLink]="['/', AppRoutes.siteMap.uri]" i18n="@@footer.sitemap">Site Map</a>
</div>
<div>
@@ -58,6 +58,10 @@
<span class="bullet">•</span>
<a [routerLink]="['/', AppRoutes.cgu.uri]" i18n="@@footer.cgu">Terms of use</a>
</div>
+ <div>
+ <span class="bullet">•</span>
+ <a href preventDefault (click)="openCookieModal()">Cookies</a>
+ </div>
</div>
</div>
<div class="column metropole">
diff --git a/src/app/core/components/main/footer/footer.component.scss b/src/app/core/components/main/footer/footer.component.scss
index 08317f75f7e50c74dd0a4f81dbe91164c50b8406..0cdaaad25c46d977e0705eeca22fe363d26eaa15 100644
--- a/src/app/core/components/main/footer/footer.component.scss
+++ b/src/app/core/components/main/footer/footer.component.scss
@@ -46,9 +46,9 @@ footer.footer {
display: flex;
flex-flow: column;
- .changelog > * {
- color: $yellow-dd-color;
- }
+ // .changelog > * {
+ // color: $yellow-dd-color;
+ // }
.links-section:first-of-type {
margin-bottom: 0.3rem;
diff --git a/src/app/core/components/main/footer/footer.component.ts b/src/app/core/components/main/footer/footer.component.ts
index 2d1d5650d4d2cabd8ce3ada40d14a1ac20ad53f5..968bc6a618caf9a44d40140881a00b570b9afadc 100644
--- a/src/app/core/components/main/footer/footer.component.ts
+++ b/src/app/core/components/main/footer/footer.component.ts
@@ -1,5 +1,6 @@
import { Component, OnInit } from '@angular/core';
import { AppRoutes } from '../../../../routes';
+import { AppStateService } from '../../../services';
import { APP_CONFIG } from '../../../services/app-config.service';
@Component({
@@ -13,8 +14,14 @@ export class FooterComponent implements OnInit {
APP_CONFIG = APP_CONFIG;
catalogueUrl = APP_CONFIG.backendUrls.catalogue;
- constructor() { }
+ constructor(
+ private _appStateService: AppStateService,
+ ) { }
ngOnInit() { }
+ openCookieModal() {
+ this._appStateService.changeCookieModalState(true);
+ }
+
}
diff --git a/src/app/core/components/main/header/header.component.html b/src/app/core/components/main/header/header.component.html
index e56c62f2e7381780a7ded4d51452a9cceccc282d..f6f308f93c9c4067754d9739ae489d9c73e2ca4b 100644
--- a/src/app/core/components/main/header/header.component.html
+++ b/src/app/core/components/main/header/header.component.html
@@ -1,4 +1,4 @@
-<header role="banner" [ngClass]="{'is-home': isHomePage}">
+<header role="banner"[ngClass]="{'is-home': isHomePage}">
<div class="navbar-header dgl">
<div class="navbar-header-item icon-hamburger" [ngClass]="{'is-fixed': isBurgerActive}">
<div class="hamburger hamburger--collapse-r" [ngClass]="{'is-active': isBurgerActive}" (click)="toggleBurger()"
@@ -7,7 +7,6 @@
<div class="hamburger-inner"></div>
</div>
</div>
- <!-- </div> -->
</div>
<div class="navbar-header-item logo-data">
<a [routerLink]="['/', AppRoutes.home.uri]" *ngIf="!isHomePage">
@@ -17,11 +16,11 @@
</a>
</div>
- <div class="navbar-header-item search-bar is-hidden-touch" *ngIf="!isHomePage">
+ <div class="navbar-header-item search-bar" *ngIf="!isHomePage">
<app-search-bar></app-search-bar>
</div>
- <div class="navbar-header-item navbar-right-side">
+ <div class="navbar-header-item navbar-right-side" [ngClass]="{'navbar-right-home': isHomePage}">
<div class="connect-me">
<a [routerLink]="['/', AppRoutes.signin.uri]" aria-label="Sign In" i18n-aria-label="@@header.signIn"
*ngIf="!userIsSignedIn; else userSignedInTemplate">
diff --git a/src/app/core/components/main/header/header.component.scss b/src/app/core/components/main/header/header.component.scss
index 81f469f957b419f458505785ba2fbc4b0c332b43..e49fb2b4af23d6b46ad451b3e1091abc499109c2 100644
--- a/src/app/core/components/main/header/header.component.scss
+++ b/src/app/core/components/main/header/header.component.scss
@@ -14,9 +14,40 @@ header {
@media screen and (min-width: $tablet) {
margin-right: 4.5rem; // To avoid the header content to be under the feedback button
+
+ }
+
+ @media screen and(max-width:$tablet) {
+ padding-top: 0.7rem;
+ flex-wrap: wrap;
+
+ .navbar-header-item:nth-of-type(1) {
+ order: 1
+ }
+
+ ;
+
+ .navbar-header-item:nth-of-type(2) {
+ order: 2
+ }
+
+ ;
+
+ .navbar-header-item:nth-of-type(3) {
+ order: 4
+ }
+
+ ;
+
+ .navbar-header-item:nth-of-type(4) {
+ order: 3
+ }
+
+ ;
}
}
+
.is-home .navbar-header {
margin-right: 0;
}
@@ -52,6 +83,7 @@ svg {
display: flex;
justify-content: flex-start;
line-height: 1;
+ max-width: 200px;
span {
color: white;
@@ -115,7 +147,12 @@ svg.is-connected {
.navbar-right-side .navbar-item {
padding: 0.5rem 0.5rem 0.5rem 1rem;
}
-
+.navbar-right-home{
+ margin-right: 3.5rem;
+ @media screen and (max-width: $tablet) {
+ margin-right: 0;
+ }
+}
.navbar-right-side .navbar-item.navbar-item-feedback {
padding: 0;
@@ -164,6 +201,12 @@ svg.is-connected {
flex-grow: 0.7;
padding: 0;
margin-right: auto;
+
+ @media screen and(max-width:$tablet) {
+ width: 100%;
+ height: 40px;
+ margin-top: 0.7rem;
+ }
}
.username {
@@ -332,8 +375,10 @@ svg.is-connected {
left: 1rem;
}
- .put-menu-to-right {
- width: 142px;
+ @media screen and (max-width: $tablet) {
+ .put-menu-to-right {
+ width: 142px;
+ }
}
.modal.is-active {
@@ -361,7 +406,7 @@ svg.is-connected {
}
button.feedback-button {
- background-color: $yellow-dd-color;
+ background-color: $tomato-color;
display: flex;
align-items: center;
padding: 7px;
@@ -379,11 +424,11 @@ button.feedback-button {
// min-height: 32px;
.color-brand {
- fill: $brand-color;
+ fill: $grey-background-color;
}
.color-beta {
- fill: $yellow-dd-color;
+ fill: $tomato-color;
}
}
}
diff --git a/src/app/core/components/main/main.component.scss b/src/app/core/components/main/main.component.scss
index daebf6aeee3a653d2c4fe28dffd2fa60315438ce..dba1cc65ef9fefe4ea2a77fd487491487ccb8011 100644
--- a/src/app/core/components/main/main.component.scss
+++ b/src/app/core/components/main/main.component.scss
@@ -7,6 +7,9 @@
min-height: 100vh;
grid-template-columns: 1fr;
grid-template-rows: [header] $header-bar-height [content] 1fr [footer] auto;
+ @media screen and(max-width:$tablet){
+ grid-template-rows: [header] $header-bar-height-mobile [content] 1fr [footer] auto;
+ }
}
.grid-layout.prevent-scroll {
@@ -34,6 +37,9 @@
background-color: $brand-color;
padding-top: $header-bar-height;
top: 0;
+ @media screen and(max-width:$tablet){
+ padding-top: $header-bar-height-mobile;
+ }
}
@media screen and (min-width: $tablet) {
diff --git a/src/app/core/components/main/side-menu/side-menu.component.html b/src/app/core/components/main/side-menu/side-menu.component.html
index b1ae62e1c79c96fa250f10fc0f2a2d6b39779d3c..47f34739c8c2ed6f59208150a7801adfe7705f1d 100644
--- a/src/app/core/components/main/side-menu/side-menu.component.html
+++ b/src/app/core/components/main/side-menu/side-menu.component.html
@@ -1,11 +1,6 @@
<aside class="menu" [attr.aria-hidden]="!isOpened">
<ul class="menu-list">
- <li class="search-bar-menu" *ngIf="!isHomePage">
- <a [tabIndex]="isOpened ? 0 : -1">
- <app-search-bar class="search-bar"></app-search-bar>
- </a>
- </li>
<li>
<a [routerLink]="['/', AppRoutes.home.uri]" routerLinkActive="active-link"
[routerLinkActiveOptions]="{ exact: true }" [tabIndex]="isOpened ? 0 : -1">
@@ -99,17 +94,6 @@
<span i18n="@@menu.contribution" class="label-menu">Contribution</span>
</a>
</li>
- <li>
- <a [routerLink]="['/', AppRoutes.beta.uri]" routerLinkActive="active-link" [tabIndex]="isOpened ? 0 : -1">
- <div class="icon-item">
- <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 23">
- <path class="stroke-main" stroke-linecap="round" stroke-linejoin="round"
- d="M.5 22.5c.51-.733 1.53-1.467 1.53-4.4V4.9c0-2.2.764-4.4 4.588-4.4 3.058 0 4.588 2.2 4.588 3.667 0 1.466-.765 3.666-5.353 3.666 4.588 0 7.647 2.2 7.647 5.134 0 2.933-2.294 5.133-6.118 5.133-3.058 0-5.098-1.845-5.353-2.579" />
- </svg>
- </div>
- <span i18n="@@menu.beta" class="label-menu">Why a beta version?</span>
- </a>
- </li>
<li *ngIf="displayAdminBar">
<a [routerLink]="['/', AppRoutes.drafts.uri]" routerLinkActive="active-link" [tabIndex]="isOpened ? 0 : -1">
<div class="icon-item">
diff --git a/src/app/core/components/main/side-menu/side-menu.component.scss b/src/app/core/components/main/side-menu/side-menu.component.scss
index 94f1dd5177497ab24b562c2b6e6a65b170131dee..5711f66947bd958c3b55ee4ce997284471ce653e 100644
--- a/src/app/core/components/main/side-menu/side-menu.component.scss
+++ b/src/app/core/components/main/side-menu/side-menu.component.scss
@@ -128,24 +128,3 @@
}
}
}
-
-.search-bar-menu {
- display: none;
-
- &:hover a {
- /* stylelint-disable-line */
- background-color: $background-link-hover-color;
- }
-
- @media screen and (max-width: $desktop - 1px) {
- display: block;
-
- .search-bar {
- flex-grow: 1; // Make the searchbar take all the available width
-
- .input {
- height: 2em;
- }
- }
- }
-}
diff --git a/src/app/core/services/app-config.service.ts b/src/app/core/services/app-config.service.ts
index 2f2fb08e2a6ba1d20fd23fc5f814ff9244359938..b320a1e20b82bb011ab6e387642360221e506c0b 100644
--- a/src/app/core/services/app-config.service.ts
+++ b/src/app/core/services/app-config.service.ts
@@ -14,14 +14,27 @@ export class AppConfig {
catalogue: string;
reuses: string;
geocoder: string;
- proxyMap: string;
+ proxyQuery: string;
seo: string;
};
+ layer3d: {
+ url: string;
+ };
theFunctionalitiesInterruptor: {
credits: boolean;
reuses: boolean;
partners: boolean;
};
+ licenses: License[];
+}
+
+class License {
+ matchingKeys: string[];
+ nameFr: string;
+ nameEn: string;
+ acronymFr: string;
+ acronymEn: string;
+ url: string;
}
export let APP_CONFIG: AppConfig = new AppConfig();
diff --git a/src/app/core/services/app-state.service.ts b/src/app/core/services/app-state.service.ts
index 8bcea9bb5430ca42c3f4daf6035ee59561ea7f44..8857fd2c22b9a537d705228a93997329297d9703 100644
--- a/src/app/core/services/app-state.service.ts
+++ b/src/app/core/services/app-state.service.ts
@@ -8,11 +8,15 @@ export class AppStateService {
private _menuStateChanged: Subject<boolean>;
private _feedbackOpened: boolean;
private _feedbackStateChanged: Subject<boolean>;
+ private _cookieModalOpened: boolean;
+ private _cookieModalStateChanged: Subject<boolean>;
constructor() {
this._menuStateChanged = new Subject<any>();
this._feedbackStateChanged = new Subject<any>();
+ this._cookieModalStateChanged = new Subject<any>();
this._feedbackOpened = false;
+ this._cookieModalOpened = false;
}
changeMenuState(state: boolean) {
@@ -27,6 +31,13 @@ export class AppStateService {
}
}
+ changeCookieModalState(state: boolean) {
+ if (this.cookieModalOpened !== state) {
+ this._cookieModalOpened = state;
+ this._cookieModalStateChanged.next(state);
+ }
+ }
+
get menuStateChanged$(): Observable<boolean> {
return this._menuStateChanged.asObservable();
}
@@ -35,6 +46,10 @@ export class AppStateService {
return this._feedbackStateChanged.asObservable();
}
+ get cookieModalStateChanged$(): Observable<boolean> {
+ return this._cookieModalStateChanged.asObservable();
+ }
+
get menuOpened() {
return this._menuOpened;
}
@@ -42,4 +57,8 @@ export class AppStateService {
get feedbackOpened() {
return this._feedbackOpened;
}
-}
\ No newline at end of file
+
+ get cookieModalOpened() {
+ return this._cookieModalOpened;
+ }
+}
diff --git a/src/app/dataset-detail/components/dataset-api/dataset-api.component.scss b/src/app/dataset-detail/components/dataset-api/dataset-api.component.scss
index b403a52537b793853c365f6bb3f7e2428e94a277..32e78cdee99327f19780fab670f25fc7c0e25b11 100644
--- a/src/app/dataset-detail/components/dataset-api/dataset-api.component.scss
+++ b/src/app/dataset-detail/components/dataset-api/dataset-api.component.scss
@@ -62,14 +62,12 @@ h4 {
.resource-item {
background-color: white;
- padding: 0.5rem;
- padding-left: 0;
- padding-bottom: 0;
+ padding-top: 0.5rem;
border-radius: 8px;
@media screen and (min-width: $tablet) {
margin-bottom: 1rem;
- padding: 1.5rem;
+ padding: 1.7rem 2rem;
box-shadow: 0 6px 12px 0 rgba(129, 128, 128, 0.1);
}
@@ -77,22 +75,16 @@ h4 {
.resource-description {
padding-bottom: 0.5rem;
- padding-left: 0.5rem;
- padding-top: 1rem;
+
+ @media screen and (max-width: $tablet) {
+ padding: 1rem 0.7rem 1.5rem 0.7rem;
+ border-bottom: 1px solid $grey-background-color;
+ }
span {
font-weight: 600;
line-height: 1;
font-size: 1rem;
-
- @media screen and (min-width: $tablet) {
- font-size: 1.25rem;
- padding-bottom: 1.5rem;
- padding-left: 1.5rem;
- padding-top: 1.5rem;
-
-
- }
}
}
}
diff --git a/src/app/dataset-detail/components/dataset-api/dataset-api.component.ts b/src/app/dataset-detail/components/dataset-api/dataset-api.component.ts
index 0e1c17b6211bd3310d8c8e348a64ae89a03b33ab..a8004befd7c63fce40d923a768e45c9a96a21eb4 100644
--- a/src/app/dataset-detail/components/dataset-api/dataset-api.component.ts
+++ b/src/app/dataset-detail/components/dataset-api/dataset-api.component.ts
@@ -28,7 +28,7 @@ export class DatasetAPIComponent implements OnInit, OnDestroy {
isSample = false;
// To display in the template
- queryableResources: Resource[];
+ queryableResources; // each property of this object is an Array of Resource;
constructor(
private _datasetDetailService: DatasetDetailService,
@@ -40,20 +40,16 @@ export class DatasetAPIComponent implements OnInit, OnDestroy {
ngOnInit() {
this.resources = [];
- this.queryableResources = [];
+ this.queryableResources = {};
this.isSample = this._datasetDetailService.dataset.editorialMetadata.isSample;
this.cguModalIsOpened = (this._cookieService.get(environment.cguAcceptedCookieName) !== 'true') &&
!this._userService.userIsSignedIn;
- this.initialize();
this._resourcesService.getResources().subscribe(
(results) => {
this.resources = results;
this.initialize();
- this.sub = this._datasetDetailService.dataset$.subscribe(() => {
- this.initialize();
- });
},
(err) => {
this._notificationService.notify(new Notification({
@@ -63,6 +59,9 @@ export class DatasetAPIComponent implements OnInit, OnDestroy {
},
);
+ this.sub = this._datasetDetailService.dataset$.subscribe(() => {
+ this.initialize();
+ });
}
ngOnDestroy() {
diff --git a/src/app/dataset-detail/components/dataset-api/resources-queryable/resource-queryable/resource-queryable.component.html b/src/app/dataset-detail/components/dataset-api/resources-queryable/resource-queryable/resource-queryable.component.html
index b4090f1b9ae5459e53d39a55c175fb2a663ee3e9..23ce465077a6d19a538209ad06a4b43e160e8058 100644
--- a/src/app/dataset-detail/components/dataset-api/resources-queryable/resource-queryable/resource-queryable.component.html
+++ b/src/app/dataset-detail/components/dataset-api/resources-queryable/resource-queryable/resource-queryable.component.html
@@ -207,7 +207,7 @@
</svg>
</button>
<div class="resource-download-icon">
- <app-download-button [url]="queryableUrl" [fileName]="getFileName()">
+ <app-download-button [url]="downloadUrl" [fileName]="getFileName()">
</app-download-button>
</div>
diff --git a/src/app/dataset-detail/components/dataset-api/resources-queryable/resource-queryable/resource-queryable.component.scss b/src/app/dataset-detail/components/dataset-api/resources-queryable/resource-queryable/resource-queryable.component.scss
index 8e11e2bfa510362314fc63aa10d03afc5ea1bed7..8460a792143c9bc218ed0250df2cb81bd0fe616e 100644
--- a/src/app/dataset-detail/components/dataset-api/resources-queryable/resource-queryable/resource-queryable.component.scss
+++ b/src/app/dataset-detail/components/dataset-api/resources-queryable/resource-queryable/resource-queryable.component.scss
@@ -16,7 +16,7 @@
margin-bottom: 1rem;
span {
- font-size: 1.125rem;
+ font-size: 1rem;
font-weight: 600;
line-height: 1;
word-break: break-all;
@@ -79,18 +79,10 @@
margin-left: 0.5rem;
position: relative;
margin-right: 0.5rem;
- height: 3.5rem;
- flex-grow: 1;
- margin-top: 0.5rem;
+ height: 2.75rem;
+ width: 2.75rem;
border-color: $grey-super-light-color;
- @media screen and (min-width: $tablet) {
- height: 2.75rem;
- width: 2.75rem;
- margin-top: 0;
- flex-grow: 0;
- }
-
svg {
position: absolute;
width: 1.25rem;
@@ -204,6 +196,14 @@
justify-content: unset;
}
+ @media screen and (max-width: $tablet) {
+
+ .button {
+ margin-top: 0.5rem;
+ margin-left: 0;
+ }
+ }
+
.resource-download-icon,
.tooltip {
margin-left: 0;
diff --git a/src/app/dataset-detail/components/dataset-api/resources-queryable/resource-queryable/resource-queryable.component.ts b/src/app/dataset-detail/components/dataset-api/resources-queryable/resource-queryable/resource-queryable.component.ts
index 405aaa50fd2ebabcb924f9315a20b77a12be4f96..0a57279dd22c34bd0e599856ecbf2fa19fef7b67 100644
--- a/src/app/dataset-detail/components/dataset-api/resources-queryable/resource-queryable/resource-queryable.component.ts
+++ b/src/app/dataset-detail/components/dataset-api/resources-queryable/resource-queryable/resource-queryable.component.ts
@@ -2,6 +2,7 @@ import { Component, Input, OnInit } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
import { communeInsee } from '../../../../../../assets/resources/commune-insee';
import { geosource } from '../../../../../../i18n/traductions';
+import { APP_CONFIG } from '../../../../../core/services/app-config.service';
import { linkFormats, Metadata } from '../../../../../shared/models';
import { Format, Projection, Resource } from '../../../../models';
import { DatasetDetailService } from '../../../../services';
@@ -500,4 +501,11 @@ export class ResourceQueryableComponent implements OnInit {
}
}
+
+ get downloadUrl() {
+ return this.queryableUrl.replace(
+ 'https://download.data.grandlyon.com',
+ `${APP_CONFIG.backendUrls.proxyQuery}/download`,
+ );
+ }
}
diff --git a/src/app/dataset-detail/components/dataset-api/resources-queryable/resources-queryable.component.scss b/src/app/dataset-detail/components/dataset-api/resources-queryable/resources-queryable.component.scss
index 6cc62416383c687493029a39456cdf141cb05d25..f7bf3fab464e02d995ee4ac2130b1adb45e3fb50 100644
--- a/src/app/dataset-detail/components/dataset-api/resources-queryable/resources-queryable.component.scss
+++ b/src/app/dataset-detail/components/dataset-api/resources-queryable/resources-queryable.component.scss
@@ -12,8 +12,8 @@
.resource {
background-color: white;
- padding: 0.75rem;
- padding-left: 1rem;
+ padding: 0 0.75rem 0.75rem 0.75rem;
+ margin-top: 0.75rem;
position: relative;
border-left: 2px solid white;
@@ -37,7 +37,6 @@
}
@media screen and (min-width: $tablet) {
- padding-left: 1.5rem;
margin-right: unset;
}
@@ -54,17 +53,12 @@
.resource-title {
display: flex;
align-items: center;
- flex-wrap: wrap;
cursor: pointer;
}
.resource-information {
span {
font-size: 0.875rem;
-
- @media screen and (min-width: $tablet) {
- font-size: 1rem;
- }
}
}
diff --git a/src/app/dataset-detail/components/dataset-detail/dataset-detail.component.html b/src/app/dataset-detail/components/dataset-detail/dataset-detail.component.html
index ec361916bebf49da2ca71643e48ebfae99467426..3ae5c3f981d243e3a2bc44afa1f5fa112739bf79 100644
--- a/src/app/dataset-detail/components/dataset-detail/dataset-detail.component.html
+++ b/src/app/dataset-detail/components/dataset-detail/dataset-detail.component.html
@@ -12,7 +12,7 @@
d="M19 0L4.5 6.4v19.4L19 32l14.5-6.4V6.4L19 0zm13.5 24.9l-13 5.7-.5.3-13.5-5.8v-18l13.5-6 13.1 5.8L19 13l.5.2v.6l13-6.1v17.2z" />
<path class="secondary" d="M19 30.9l.5-.2V13.2L5.9 6.9l-.4.2v.7l13 6.1v16.8z" />
</svg>
- <div>
+ <div class="tab-text-wrapper">
<div>
<span class="tab-title" i18n="@@dataset.detail.data">Data</span>
</div>
@@ -33,14 +33,15 @@
class="primary" />
</g>
</svg>
- <div>
+
+ <div class="tab-text-wrapper">
<div>
<span class="tab-title tab-title-long" i18n="@@dataset.detail.infoTab">Information</span>
<span class="tab-title tab-title-short">Info</span>
</div>
<div>
- <span class="tab-subtitle">
- {{ datasetUpdateFrequency }}
+ <span class="tab-subtitle" [title]="datasetLicense">
+ {{ datasetLicense }}
</span>
</div>
</div>
@@ -54,7 +55,7 @@
<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 class="tab-text-wrapper">
<div>
<span class="tab-title tab-title-long" i18n="@@dataset.detail.downloads">Downloads</span>
<span class="tab-title tab-title-short" i18n="@@dataset.detail.downloads">Downloads</span>
@@ -73,7 +74,7 @@
<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 class="tab-text-wrapper">
<div>
<span class="tab-title tab-title-long" i18n="@@dataset.detail.api">API</span>
<span class="tab-title tab-title-short">API</span>
@@ -84,9 +85,25 @@
</div>
</a>
</li>
+ <li [routerLinkActive]="'is-active'">
+ <a (click)="setPosition()" [routerLink]="[AppRoutes.dataReuses.uri]" class="tab-link">
+ <svg class="tab-icon" viewBox="0 0 38 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path class="primary" fill-rule="evenodd" clip-rule="evenodd" d="M5 6.286L19.455 0 33.91 6.285V25.14l-14.455 6.284L5 25.14V6.286zm27.59.516l-6.484-2.82.002.005-5.362 2.264-1.229-.567 5.328-2.25-5.39-2.344-5.423 2.358 5.4 2.218-1.24.572-5.33-2.189.046-.112-6.59 2.866 5.494 2.38-.527.244v.619L6 7.754v7.874l5.285 2.485v1.055l1 .423v7.626l6.541 2.844v-7.703l.63.267.37-.157v7.7h-.007l.006.005 6.543-2.845V19.7l1.257-.532v-1.086l5.285-2.46V7.753l-5.285 2.286v-.613l-.532-.246 5.497-2.378zm.32 9.923l-5.542 2.58v7.588l5.542-2.41v-7.758zM11.285 26.782v-7.564L6 16.733v7.752l5.285 2.297z" fill="#464A57"/>
+ <path class="secondary" fill-rule="evenodd" clip-rule="evenodd" d="M11.285 19.17V9.427l8.17-3.771 8.17 3.77v9.742l-8.17 3.457-8.17-3.457v.002zm1.75-9.45l6.42-2.962 6.45 2.976-6.274 2.836h-.349l-6.247-2.85zm-.75.758v8.029l6.541 2.767V13.46l-6.54-2.983zm7.541 10.905l6.8-2.877v-8l-6.8 3.073v7.804z" fill="#DA322F"/>
+ </svg>
+ <div class="tab-text-wrapper">
+ <div>
+ <span class="tab-title tab-title-long" i18n="@@dataset.detail.reuse">Reuse</span>
+ <span class="tab-title tab-title-short" i18n="@@dataset.detail.reuse">Reuse</span>
+ </div>
+ <div>
+ <span class="tab-subtitle">{{reusesTypes}}</span>
+ </div>
+ </div>
+ </a>
+ </li>
</ul>
</div>
-
<div class="details-container">
<router-outlet></router-outlet>
</div>
diff --git a/src/app/dataset-detail/components/dataset-detail/dataset-detail.component.scss b/src/app/dataset-detail/components/dataset-detail/dataset-detail.component.scss
index ddce393cc50382901f5fc37d314d5e27c14566c8..517a809e574a687855754f8b5b8120c6783a79ce 100644
--- a/src/app/dataset-detail/components/dataset-detail/dataset-detail.component.scss
+++ b/src/app/dataset-detail/components/dataset-detail/dataset-detail.component.scss
@@ -26,6 +26,10 @@ svg.tab-icon {
width: 2.25rem;
height: 2.25rem;
align-self: center;
+ @media screen and (max-width: $tablet) {
+ width: 1.8rem;
+ height: 1.8rem;
+ }
.primary {
fill: $grey-dark-color;
@@ -39,6 +43,9 @@ svg.tab-icon {
.tab-title {
font-size: 1rem;
white-space: nowrap;
+ @media screen and (max-width: $tablet) {
+ font-size: 0.9rem;
+ }
}
.tabulations {
@@ -52,6 +59,7 @@ svg.tab-icon {
ul.navigation-tabs {
border-bottom: 1px solid $grey-super-light-color;
display: flex;
+ height: 100%;
li {
margin-bottom: -1px;
@@ -66,6 +74,7 @@ ul.navigation-tabs {
color: unset;
justify-content: flex-start;
padding: 0.75rem 0 0.75rem 0;
+ height: 100%;
// margin-bottom: 1px;
}
@@ -106,6 +115,7 @@ ul.navigation-tabs {
}
svg.tab-icon {
+ flex-shrink: 0;
.secondary {
fill: $tomato-color;
}
@@ -137,6 +147,19 @@ ul.navigation-tabs {
display: none;
}
+// Making sur text inside the tab never goes outside of the tab
+@media (min-width: $desktop) {
+ .tab-text-wrapper {
+ // ~Width of the text wrapper = width of the tab
+ max-width: calc(100% - 2.25rem - 1.25rem);
+
+ div {
+ text-overflow: ellipsis;
+ overflow: hidden;
+ }
+ }
+}
+
@media (max-width: $desktop) {
ul.navigation-tabs {
li {
diff --git a/src/app/dataset-detail/components/dataset-detail/dataset-detail.component.ts b/src/app/dataset-detail/components/dataset-detail/dataset-detail.component.ts
index cd910edb60ae949b6119605567750947e9996ec1..417cc0739ec6fa1be74e14926ef427dd8721dc8b 100644
--- a/src/app/dataset-detail/components/dataset-detail/dataset-detail.component.ts
+++ b/src/app/dataset-detail/components/dataset-detail/dataset-detail.component.ts
@@ -4,12 +4,14 @@ import { ActivatedRoute, Router, Scroll } from '@angular/router';
import { Subscription } from 'rxjs';
import { filter } from 'rxjs/operators';
import { ViewportScroller } from '../../../../../node_modules/@angular/common';
-import { datatsetDataRepresentationType, geosource } from '../../../../i18n/traductions';
+import { environment } from '../../../../environments/environment';
+import { datatsetDataRepresentationType, geosource, reusesTypes } from '../../../../i18n/traductions';
import { NavigationHistoryService } from '../../../core/services';
import { AppRoutes } from '../../../routes';
import { IPageHeaderInfo, Metadata, typesMetadata } from '../../../shared/models';
import { DatasetDetailService } from '../../services';
+
@Component({
selector: 'app-dataset-detail',
templateUrl: './dataset-detail.component.html',
@@ -57,7 +59,6 @@ export class DatasetDetailComponent implements OnInit, OnDestroy {
this.isLoading = true;
this.initDatasetInfo();
-
});
}
@@ -73,6 +74,12 @@ export class DatasetDetailComponent implements OnInit, OnDestroy {
get datasetDataNumber() {
return this._datasetDetailService.datasetDataNumber;
}
+ get datasetLicense() {
+ if (window.location.href.includes(environment.angularAppHost.en)) {
+ return this.metadata.license.acronymEn;
+ }
+ return this.metadata.license.acronymFr;
+ }
get datasetUpdateFrequency() {
const keyUpdate = this.metadata.updateFrequency ? this.metadata.updateFrequency : 'other';
@@ -165,6 +172,29 @@ export class DatasetDetailComponent implements OnInit, OnDestroy {
return this._datasetDetailService.dataset.hasTable;
}
+ get reusesTypes(): string {
+ let types = [];
+ if (this._datasetDetailService.dataset.reuses.length > 0) {
+
+ types = [
+ // Using a Set in order to filter out duplicates values
+ ...new Set(
+ // Generate an array of all the reuses types (there can be duplicate)
+ [].concat(...this._datasetDetailService.dataset.reuses.map(reuse => reuse.reuseTypes))
+ ),
+ ]
+ // Replace the keys by the labels
+ .map(e => reusesTypes[e]);
+ }
+
+ if (this._datasetDetailService.dataset.relatedNews.length > 0) {
+ types.push(reusesTypes['news']);
+ }
+
+ // Contact the value into a string (values separated by a coma)
+ return types.join(', ');
+ }
+
initDatasetInfo() {
this.pageHeaderInfo = {
...this.pageHeaderInfo,
diff --git a/src/app/dataset-detail/components/dataset-downloads/dataset-downloads.component.html b/src/app/dataset-detail/components/dataset-downloads/dataset-downloads.component.html
index cd5b42ad11c91a9a8bea3f3ba0fb8b979d5cab21..06984893884be851efdab7a704cfbd46fdc771e4 100644
--- a/src/app/dataset-detail/components/dataset-downloads/dataset-downloads.component.html
+++ b/src/app/dataset-detail/components/dataset-downloads/dataset-downloads.component.html
@@ -8,12 +8,12 @@
<span>{{downloadable.key}}</span>
</div>
<div class="resource-downloadable-files" *ngFor="let resource of downloadable.value">
- <ng-container *ngFor="let format of resource.formats; let i=index">
+ <div class="resource-download-item-wrapper" *ngFor="let format of resource.formats; let i=index">
<app-resource-download-item [metadata]="metadata"
[format]="format" [resource]="resource" [projections]="projections"
[isQueryable]="true">
</app-resource-download-item>
- </ng-container>
+ </div>
</div>
</div>
</div>
diff --git a/src/app/dataset-detail/components/dataset-downloads/dataset-downloads.component.scss b/src/app/dataset-detail/components/dataset-downloads/dataset-downloads.component.scss
index 2d9f3a6f7c1413cb562a68cb4f983295a9faa76d..87bf0b3610cc7ee1d433ce180238511d6f417c8a 100644
--- a/src/app/dataset-detail/components/dataset-downloads/dataset-downloads.component.scss
+++ b/src/app/dataset-detail/components/dataset-downloads/dataset-downloads.component.scss
@@ -4,10 +4,10 @@
.downloads-container {
position: relative;
height: 100%;
+ background-color: $grey-background-color;
@media screen and (min-width: $tablet) {
max-width: unset;
- background-color: $grey-background-color;
}
}
@@ -23,6 +23,8 @@
flex-direction: column;
padding: 2rem 1.25rem 1.25rem 1.25rem;
max-width: 100vw;
+ justify-content: center;
+ ;
@media screen and (min-width: $tablet) {
max-width: unset;
@@ -31,9 +33,6 @@
.resources-downloadable {
width: 100%;
- margin-right: 1rem;
- border-bottom: 2px solid $grey-background-color;
- background-color: white;
}
@media screen and (min-width: $tablet) {
@@ -45,14 +44,16 @@
.resources-downloadable {
width: 66%;
- padding: 2.5rem;
- box-shadow: 0 6px 12px 0 rgba(129, 128, 128, 0.1);
- border-radius: 8px;
}
}
.resource-download {
margin-bottom: 1.5rem;
+ background-color: white;
+ padding: 1.7rem 2rem;
+ box-shadow: 0 6px 12px 0 rgba(129, 128, 128, 0.1);
+ border-radius: 8px;
+ border-bottom: 2px solid $grey-background-color;
}
.resource-description {
@@ -63,11 +64,17 @@
font-weight: 600;
line-height: 1;
font-size: 1rem;
+ word-break: break-all;
}
}
.resource-static {
- margin-bottom: 1rem;
+ margin-bottom: 1.5rem;
+ border-bottom: 2px solid $grey-background-color;
+ background-color: white;
+ padding: 1.7rem 2rem;
+ box-shadow: 0 6px 12px 0 rgba(129, 128, 128, 0.1);
+ border-radius: 8px;
}
.resource-static-files {
@@ -80,10 +87,12 @@
}
.resources-other {
- margin-top: 1rem;
+ margin-bottom: 1.5rem;
border-bottom: 2px solid $grey-background-color;
background-color: white;
-
+ padding: 1.7rem 2rem;
+ box-shadow: 0 6px 12px 0 rgba(129, 128, 128, 0.1);
+ border-radius: 8px;
a {
word-break: break-all;
@@ -95,7 +104,6 @@
box-shadow: 0 6px 12px 0 rgba(129, 128, 128, 0.1);
border-radius: 8px;
align-self: flex-start;
- padding: 2.5rem;
margin-left: 1rem;
}
}
@@ -128,6 +136,16 @@
}
}
+.resource-download-item-wrapper,
+.resource-static-files {
+ border-bottom: 1px solid #f2f2f2;
+}
+
+.resource-downloadable-files:last-of-type .resource-download-item-wrapper:last-of-type,
+.resource-static-files:last-of-type {
+ border-bottom: none;
+}
+
::ng-deep .downloads-container {
.modal {
overflow-y: auto;
diff --git a/src/app/dataset-detail/components/dataset-downloads/dataset-downloads.component.ts b/src/app/dataset-detail/components/dataset-downloads/dataset-downloads.component.ts
index 2ef6dc6a05eb3850a89e4fd5c61cf7d97d0d9b2f..73e742bb779b1c764f35ead38621a6b0656b8883 100644
--- a/src/app/dataset-detail/components/dataset-downloads/dataset-downloads.component.ts
+++ b/src/app/dataset-detail/components/dataset-downloads/dataset-downloads.component.ts
@@ -21,8 +21,8 @@ export class DatasetDownloadsComponent implements OnInit {
metadata: Metadata;
sub: Subscription;
- downloadableResources: Resource[];
- staticResources: IMetadataLink[];
+ downloadableResources; // Each property of the object is an array of Resource;
+ staticResources; // Each property of the object is an array of IMetadataLink;
otherResources: IMetadataLink[];
cguModalIsOpened: boolean;
@@ -44,8 +44,8 @@ export class DatasetDownloadsComponent implements OnInit {
ngOnInit() {
this.resources = [];
this.projections = [];
- this.downloadableResources = [];
- this.staticResources = [];
+ this.downloadableResources = {};
+ this.staticResources = {};
this.otherResources = [];
this.cguModalIsOpened = (this._cookieService.get(environment.cguAcceptedCookieName) !== 'true') &&
@@ -53,25 +53,26 @@ export class DatasetDownloadsComponent implements OnInit {
this.isSample = this._datasetDetailService.dataset.editorialMetadata.isSample;
- this.initialize();
-
forkJoin([
this._resourcesService.getProjections(),
this._resourcesService.getResources(),
- ]).subscribe((response) => {
- this.projections = response[0];
- this.resources = response[1];
+ ]).subscribe(
+ (response) => {
+ this.projections = response[0];
+ this.resources = response[1];
- this.initialize();
- this.sub = this._datasetDetailService.dataset$.subscribe(() => {
this.initialize();
- });
- // tslint:disable-next-line: align
- }, (err) => {
- this._notificationService.notify(new Notification({
- type: 'error',
- message: `${notificationMessages.resources.initializationError}`,
- }));
+ },
+ (err) => {
+ this._notificationService.notify(new Notification({
+ type: 'error',
+ message: `${notificationMessages.resources.initializationError}`,
+ }));
+ },
+ );
+
+ this.sub = this._datasetDetailService.dataset$.subscribe(() => {
+ this.initialize();
});
}
@@ -97,8 +98,7 @@ export class DatasetDownloadsComponent implements OnInit {
if (this.metadata && this.resources.length > 0 && !this.hasBeenInitialized) {
this.hasBeenInitialized = true;
if (this.metadata.link) {
- [this.downloadableResources, this.staticResources, this.otherResources] =
- this._resourcesService.getResourcesForDownload(this.metadata);
+ [this.downloadableResources, this.staticResources, this.otherResources] = this._resourcesService.getResourcesForDownload(this.metadata);
}
}
}
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 0267c2aad187a504204c987e332a962e42bab313..8119b62bd5f74bb13c3f96951852252c32e2930a 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,4 +1,4 @@
- <div class="resource-download">
+ <div class="resource-download-item">
<div class="first-line">
<div class="resource-left">
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 949318b2d8f0d9c414da96a72ba08804de7318ae..b4f9bb3f8bc23a8a73f2edab7c25d93ad5044f41 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
@@ -1,10 +1,9 @@
@import '../../../../../../scss/variables.scss';
@import '../.././../../../../../node_modules/bulma/sass/utilities/_all.sass';
-.resource-download {
+.resource-download-item {
background-color: white;
align-items: center;
- border-bottom: 1px solid #f2f2f2;
margin-top: 1rem;
padding-bottom: 1rem;
}
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 afd9a0b33700cfd09279338af438bf8b13c77c5f..63420e73ef641219c1effac5a32891b221f5d32c 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
@@ -88,11 +88,6 @@ export class ResourceDownloadItemComponent implements OnInit {
ngOnInit() {
this.initItems();
- // Retrieve the first data for the dataset (if exists). It will be used in the
- // Data, Downloads and API tabs.
- this._datasetDetailService.retrieveDatasetData().subscribe(() => {
- this.initItems();
- });
}
initItems() {
@@ -170,11 +165,13 @@ export class ResourceDownloadItemComponent implements OnInit {
} else {
queryableUrl += `/${this.resource.metadataLink.name}.shp?srsname=EPSG:3946`;
}
+ } else if (this.resource.type === linkFormats.kml) {
+ queryableUrl += `?${this.resource.parametersUrl}` +
+ `&typename=${this.resource.metadataLink.name}`;
}
} else {
queryableUrl = this.link.url;
}
-
queryableUrl += this.queryableParameters.insee;
return queryableUrl;
}
@@ -265,13 +262,19 @@ export class ResourceDownloadItemComponent implements OnInit {
transformObjectToArray(object) {
const array = [];
- const keys = Object.keys(object);
- keys.forEach((key) => {
- array.push({
- name: key,
- bbox: object[key],
+ let keys;
+
+ if (object) {
+ keys = Object.keys(object);
+
+ keys.forEach((key) => {
+ array.push({
+ name: key,
+ bbox: object[key],
+ });
});
- });
+ }
+
return array;
}
diff --git a/src/app/dataset-detail/components/dataset-info/dataset-info.component.html b/src/app/dataset-detail/components/dataset-info/dataset-info.component.html
index 308e71f0f02d15acb55773d1e4b9dd8c0d0b75b3..a808d7a176e35bae1b332bcf9ac6d2ff487f9db6 100644
--- a/src/app/dataset-detail/components/dataset-info/dataset-info.component.html
+++ b/src/app/dataset-detail/components/dataset-info/dataset-info.component.html
@@ -1,21 +1,42 @@
-<div class="columns info-container" *ngIf="metadata">
- <div class="column is-8">
-
+<div class="info-container" *ngIf="metadata">
+ <div class="leftside">
<div class="info-section">
<span class="info-title">
Description
</span>
<p class="abstract">{{ abstract }}</p>
- <button class="show-more-or-less-btn" (click)="toogleAbstractDisplayState()" *ngIf="displayAbstractShowMoreBtn">
- <i class="fas fa-plus"></i>
- <span i18n="@@dataset.info.showMore">Show more
- </span>
- </button>
- <button class="show-more-or-less-btn" (click)="toogleAbstractDisplayState()" *ngIf="displayAbstractShowLessBtn">
- <i class="fas fa-minus"></i>
- <span i18n="@@dataset.info.showLess">Show less
- </span>
- </button>
+ </div>
+ <app-info-summary class="mobile-section"></app-info-summary>
+
+ <!-- <div class="info-section" >
+ <span class="info-title" i18n="@@dataset.info.dashboard">
+ Dashboard
+ </span>
+ <div class="dashboard">
+ </div>
+ </div> -->
+
+ <div class="info-section">
+ <span class="info-title" i18n="@@dataset.info.legalContraints">
+ Terms of use
+ </span>
+ <a class="link" [href]="license.url" target="_blank" *ngIf="license.url; else simpleLicenseName">
+ <span>{{ license.nameFr }}</span><br>
+ <span>{{ license.nameEn }}</span>
+ </a>
+
+ <ng-template #simpleLicenseName>
+ <span>{{ license.nameFr }}</span>
+ </ng-template>
+ </div>
+
+ <app-info-partners class="mobile-section"></app-info-partners>
+
+ <div class="info-section" *ngIf="categories.length > 0">
+ <span class="info-title" i18n="@@dataset.info.categories">
+ Categories
+ </span>
+ <span class="categorie" *ngFor="let categorie of categories">{{ categorie }}</span>
</div>
<div class="info-section" *ngIf="parent.id && parent.title">
@@ -31,7 +52,6 @@
</div>
</div>
</div>
-
<div class="info-section" *ngIf="children.length > 0">
<span class="info-title" i18n="@@dataset.info.childrenDataset">
Child datasets
@@ -45,30 +65,6 @@
</div>
</div>
</div>
-
- <div class="info-section">
- <span class="info-title" i18n="@@dataset.info.producer">
- Producer
- </span>
- <div class="info-subsection" *ngFor="let producer of producers">
- <span class="info-subtitle">
- {{ producer.organisationName }}
- </span>
- <span *ngIf="producer.individualName && producer.individualName !== 'null'">
- {{ producer.individualName }}
- </span>
- <p>
- {{ producer.address }}
- </p>
- <p *ngIf="producer.email !== 'null'">
- {{ producer.email }}
- </p>
- <p *ngIf="producer.telephone !== 'null'">
- {{ producer.telephone }}
- </p>
- </div>
- </div>
-
<div class="info-section">
<span class="info-title" i18n="@@dataset.info.origin">
Origin
@@ -81,181 +77,89 @@
Geographical information
</span>
<div class="columns">
- <div class="column">
- <div class="info-subsection">
- <span class="info-subtitle" i18n="@@dataset.info.spacialRepresentation">
- Spacial representation type
- </span>
- <span>
- {{ geographicalInfo.representationType | titlecase }}
- </span>
- </div>
-
- <div class="info-subsection" *ngIf="geographicalInfo.coordinatesSystem">
- <span class="info-subtitle" i18n="@@dataset.info.coordSystem">
- Coordinates system
- </span>
- <span>
- {{ geographicalInfo.coordinatesSystem }}
- </span>
- </div>
- <div class="info-subsection">
- <span class="info-subtitle" i18n="@@dataset.info.spatialExtent">
- Geographical extent
- </span>
- <p>
- {{ geographicalInfo.geographicalExtend.maxEast }}
- </p>
- <p>
- {{ geographicalInfo.geographicalExtend.maxWest }}
- </p>
- <p>
- {{ geographicalInfo.geographicalExtend.maxSouth }}
- </p>
- <p>
- {{ geographicalInfo.geographicalExtend.maxNorth }}
- </p>
+ <div class="column is-narrow">
+ <div class="geo-thumbnail">
+ <ng-container *ngIf="metadata.image;else noImage">
+ <img [src]="metadata.image.url" alt="Image du Dataset" (error)="setBackupImage()">
+ </ng-container>
+ <ng-template #noImage>
+ <img src="./assets/img/vignette-data-geo.png" alt="No Image Dataset">
+ </ng-template>
</div>
</div>
<div class="column">
- <div class="info-subsection">
- <span class="info-subtitle" i18n="@@dataset.info.scale">
- Scale
- </span>
- <span>
- {{ geographicalInfo.scale }}
- </span>
+ <div class="geographical-info">
+ <div class="info-subsection">
+ <span class="info-subtitle" i18n="@@dataset.info.spacialRepresentation">
+ Spacial representation type
+ </span>
+ <span>
+ {{ geographicalInfo.representationType | titlecase }}
+ </span>
+ </div>
+
+ <div class="info-subsection">
+ <span class="info-subtitle" i18n="@@dataset.info.spatialExtent">
+ Geographical extent
+ </span>
+ <p>
+ {{ geographicalInfo.geographicalExtend.maxEast }}
+ </p>
+ <p>
+ {{ geographicalInfo.geographicalExtend.maxWest }}
+ </p>
+ <p>
+ {{ geographicalInfo.geographicalExtend.maxSouth }}
+ </p>
+ <p>
+ {{ geographicalInfo.geographicalExtend.maxNorth }}
+ </p>
+ </div>
</div>
- <div class="info-subsection">
- <span class="info-subtitle" i18n="@@dataset.info.resolution">
- Resolution
- </span>
- <span>
- {{ geographicalInfo.resolution }}
- </span>
+ <div class="geographical-info">
+ <div class="info-subsection" *ngIf="geographicalInfo.coordinatesSystem">
+ <span class="info-subtitle" i18n="@@dataset.info.coordSystem">
+ Coordinates system
+ </span>
+ <span>
+ {{ geographicalInfo.coordinatesSystem }}
+ </span>
+ </div>
+
+ <div class="info-subsection">
+ <span class="info-subtitle" i18n="@@dataset.info.scale">
+ Scale
+ </span>
+ <span>
+ {{ geographicalInfo.scale }}
+ </span>
+ </div>
+
+ <div class="info-subsection">
+ <span class="info-subtitle" i18n="@@dataset.info.resolution">
+ Resolution
+ </span>
+ <span>
+ {{ geographicalInfo.resolution }}
+ </span>
+ </div>
</div>
</div>
</div>
</div>
- </div>
-
- <div class="column is-4">
- <div class="info-section">
- <span class="info-title" i18n="@@dataset.info.summary">
- Summary
- </span>
- <div class="summary">
- <div>
- <ng-container *ngIf="summaryInfo.isOpenAccess; else lockedIconTemplate">
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
- <path id="accees_x5F_ouvert"
- d="M13 1c-2.8 0-5 2.2-5 5v1H2C.9 7 0 7.9 0 9v6c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2h-2V6c0-1.7 1.3-3 3-3s3 1.3 3 3c0 .6.4 1 1 1s1-.4 1-1c0-2.8-2.2-5-5-5z"
- class="greylightcolor" />
- </svg>
- </ng-container>
-
- <ng-template #lockedIconTemplate>
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
- <path id="accees_x5F_ferme"
- d="M14 7V6c0-2.8-2.2-5-5-5S4 3.2 4 6v1c-1.1 0-2 .9-2 2v6c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2zM6 6c0-1.7 1.3-3 3-3s3 1.3 3 3v1H6V6z"
- class="greylightcolor" />
- </svg>
- </ng-template>
- <span>{{ summaryInfo.restriction }}</span>
- </div>
- <div>
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
- <g id="picto_x5F_publish">
- <path
- d="M16.1 1.8c-1-1-2.6-1-3.5 0l-.5-.5c-.9-.9-2.2-.9-3-.1l-3 3c-.4.4-.4 1 0 1.4l.7.7 3.7-3.7s.1 0 .3.1l.5.5-4.1 4 3.5 3.5 5.4-5.3c1-1 1-2.6 0-3.6zM6.5 7.9L2 12.4c-.5.5-.9 3.8-.9 3.8-.1.4.2.7.6.6 0 0 3.3-.4 3.8-.9l4.5-4.5-3.5-3.5z"
- class="greylightcolor" />
- <g>
- <path
- d="M16.1 1.8c-1-1-2.6-1-3.5 0l-.5-.5c-.9-.9-2.2-.9-3-.1l-3 3c-.4.4-.4 1 0 1.4l.7.7 3.7-3.7s.1 0 .3.1l.5.5-4.1 4 3.5 3.5 5.4-5.3c1-1 1-2.6 0-3.6zM6.5 7.9L2 12.4c-.5.5-.9 3.8-.9 3.8-.1.4.2.7.6.6 0 0 3.3-.4 3.8-.9l4.5-4.5-3.5-3.5z"
- class="greylightcolor" />
- </g>
- </g>
- </svg>
-
- <span i18n="@@dataset.info.publishDate">Published on
- {{ (summaryInfo.publicationDate | date: 'dd/MM/yyyy') || '-' }}</span>
- </div>
- <div>
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
- <path id="picto_x5F_refresh"
- d="M12.7 5c-.5-.4-1.1-.8-1.7-1-.6-.3-1.3-.4-2-.4-1.2 0-2.4.4-3.4 1.1-.9.8-1.6 1.8-1.9 3 0 .1-.1.2-.1.2-.1 0-.1.1-.2.1H1.5c-.1 0-.2 0-.3-.1-.1-.2-.1-.3-.1-.4.2-1.2.7-2.3 1.5-3.3s1.7-1.8 2.8-2.3C6.5 1.3 7.7 1 9 1c1.1 0 2.1.2 3 .6.9.4 1.8.9 2.5 1.6L15.7 2c.2-.2.3-.2.5-.2s.4.1.5.2c.2.2.3.4.3.6v4.3c0 .2-.1.4-.2.5-.2.2-.3.2-.5.2H12c-.2 0-.4-.1-.5-.2-.2-.2-.2-.3-.2-.5s.1-.4.2-.5L12.7 5zM1.8 10.3h4.3c.2 0 .4.1.5.2.2.2.2.3.2.5s-.1.4-.2.5L5.3 13c.5.5 1.1.8 1.7 1.1.6.2 1.3.4 2 .4 1.2 0 2.4-.4 3.3-1.1 1-.8 1.6-1.8 1.9-3 0-.1.1-.2.1-.2.1-.1.2-.1.3-.1h1.8c.1 0 .2.1.3.2.1.1.1.2.1.3-.2 1.2-.7 2.3-1.5 3.3s-1.7 1.8-2.8 2.3c-1 .5-2.2.8-3.5.8-1.1 0-2.1-.2-3-.6s-1.8-.9-2.5-1.6L2.3 16c-.2.2-.3.2-.5.2s-.4-.1-.5-.2c-.2-.2-.3-.4-.3-.6v-4.3c0-.2.1-.4.2-.5.2-.2.4-.3.6-.3z"
- class="greylightcolor" />
- </svg>
-
- <span>{{ summaryInfo.updateFrequency }}</span>
- </div>
- <div>
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
- <path id="picto_x5F_view"
- d="M17.8 8.2c-.9-1.5-2.1-2.7-3.7-3.6-1.5-.9-3.2-1.4-5.1-1.4-1.9 0-3.6.5-5.1 1.4-1.6.9-2.8 2.1-3.7 3.6-.1.3-.2.5-.2.8s.1.5.2.8c.9 1.5 2.1 2.7 3.7 3.6 1.6.9 3.3 1.4 5.1 1.4 1.9 0 3.6-.5 5.1-1.4 1.5-.9 2.8-2.1 3.7-3.6.1-.3.2-.5.2-.8s-.1-.5-.2-.8zm-8.8 5c-.8 0-1.5-.2-2.1-.6-.6-.4-1.2-.9-1.6-1.6-.4-.5-.5-1.2-.5-2s.2-1.5.6-2.1c.4-.6.9-1.2 1.6-1.5.5-.5 1.2-.6 2-.6s1.5.2 2.1.6c.6.4 1.2.9 1.5 1.5.4.6.6 1.4.6 2.1s-.2 1.5-.6 2.1c-.4.6-.9 1.2-1.5 1.6-.6.4-1.3.5-2.1.5zM12.2 9c0 .9-.3 1.7-1 2.3-.6.6-1.4.9-2.3.9s-1.7-.3-2.3-.9c-.5-.6-.8-1.4-.8-2.3 0-.5.1-1.1.4-1.5 0 .4.1.7.4 1 .3.2.6.4 1 .4s.7-.1.9-.4c.3-.3.4-.6.4-1s-.2-.7-.5-1c-.2-.2-.6-.4-.9-.4.5-.2 1-.4 1.5-.4.9 0 1.7.3 2.3 1 .6.6.9 1.4.9 2.3z"
- class="greylightcolor" />
- </svg>
-
- <span *ngIf="summaryInfo.viewsNumber" i18n="@@dataset.info.viewsNumber">{{ summaryInfo.viewsNumber }}
- view(s)during the last month</span>
- <span *ngIf="!summaryInfo.viewsNumber">-</span>
- </div>
- <div>
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
- <path id="picto_donne"
- d="M10 5.2V1H3.8c-.3 0-.4.1-.6.2-.1.2-.2.3-.2.6v14.5c0 .2.1.4.2.5.2.1.3.2.6.2h10.5c.2 0 .4-.1.5-.2.1-.1.2-.3.2-.5V6h-4.2c-.2 0-.4-.1-.5-.2s-.3-.3-.3-.6zm5-.4V5h-4V1h.2c.2 0 .4.1.5.2l3.1 3.1c.1.1.2.3.2.5z"
- class="greylightcolor" />
- </svg>
-
- <span>{{ summaryInfo.dataType }}</span>
- </div>
- </div>
- </div>
-
- <div class="info-section" *ngIf="categories.length > 0">
- <span class="info-title" i18n="@@dataset.info.categories">
- Categories
- </span>
- <span>{{ categories }}</span>
- </div>
-
- <div class="info-section">
- <span class="info-title" i18n="@@dataset.info.legalContraints">
- Terms of use
- </span>
- <p *ngFor="let constraint of metadata.legalConstraints">
- {{ constraint }}
- </p>
- <a [href]="licenceUrl" target="_blank" *ngIf="licenceUrl" class="button btn-blue-text btn-consult-license"
- rel="noopener" i18n="@@dataset.info.consultLicense">
- Consult the license
- </a>
- </div>
-
- <div class="info-section">
+ <div id="keywords" class="info-section">
<span class="info-title" i18n="@@dataset.info.keywords">
Keywords
</span>
- <span>{{ keywords }}</span>
- </div>
-
- <div class="info-section">
- <span class="info-title">
- Contact
- </span>
- <button class="button btn-blue-text" i18n="@@dataset.info.contactus" [routerLink]="['/', AppRoutes.contact.uri]"
- [queryParams]="{ subject: metadata.title }">Contact us</button>
+ <span class="keywords" *ngFor="let keyword of keywords">{{ keyword }}</span>
</div>
+ </div>
+ <div class="rightside">
+ <app-info-summary></app-info-summary>
+ <app-info-partners></app-info-partners>
+ <app-info-contact></app-info-contact>
- <div class="info-section">
- <span class="info-title">
- ID
- </span>
- <span>
- {{ metadata.geonet.uuid }}
- </span>
- </div>
</div>
</div>
\ No newline at end of file
diff --git a/src/app/dataset-detail/components/dataset-info/dataset-info.component.scss b/src/app/dataset-detail/components/dataset-info/dataset-info.component.scss
index 2845766f635735dacfc1e768133e304f4b6f80a2..a357d037d2731d6a713fbd32a9a3c1346be45455 100644
--- a/src/app/dataset-detail/components/dataset-info/dataset-info.component.scss
+++ b/src/app/dataset-detail/components/dataset-info/dataset-info.component.scss
@@ -9,14 +9,49 @@ p {
.info-container {
padding: 2rem 1.25rem 1.25rem 1.25rem;
+ background: #F2F2F2;
+ display: flex;
+ flex-direction: row;
+
+ .leftside {
+ width: 65%;
+
+ @media screen and(max-width: $tablet) {
+ width: 100%;
+ }
+ }
+
+ .rightside {
+ width: 35%;
+ margin-left: 1rem;
+ display: flex;
+ flex-direction: column;
+
+ @media screen and(max-width: $tablet) {
+ display: none;
+ }
+ }
+
+ .mobile-section {
+ display: none;
+
+ @media screen and(max-width: $tablet) {
+ display: block;
+ }
+ }
}
-.info-section .abstract {
+.info-section {
white-space: pre-line;
+ padding: 1.7rem 2rem;
+ background: white;
+ box-shadow: 0px 6px 12px rgba(129, 128, 128, 0.1);
+ border-radius: 8px;
+
}
.info-section:not(:first-of-type) {
- margin-top: 2rem;
+ margin-top: 1rem;
}
.info-subsection {
@@ -27,7 +62,7 @@ p {
font-size: 0.875rem;
color: $grey-dark-color;
text-transform: uppercase;
- margin-bottom: 0.3rem;
+ margin-bottom: 1rem;
display: block;
}
@@ -39,7 +74,6 @@ p {
}
.related-dataset {
- border: 1px solid $grey-super-light-color;
max-height: 300px;
overflow-y: auto;
@@ -68,31 +102,39 @@ p {
}
}
-.show-more-or-less-btn {
- // Reset button style
- border: none;
- background: none;
- padding: 0;
- font-size: 0.75rem;
- color: $brand-color;
- font-weight: bold;
- cursor: pointer;
+.categorie {
+ background: $blue-color;
+ border-radius: 22px;
+ color: white;
+ margin: 0 0.8rem 0 0;
+ padding: 0.2rem 1.5rem 0.4rem 1.5rem;
+ display: inline-block;
+ margin-bottom: 0.7rem;
+}
- i {
- margin-right: 0.25rem;
- }
+.keywords {
+ background: $grey-background-color;
+ border-radius: 22px;
+ color: $grey-dark-color;
+ margin: 0 0.8rem 0 0;
+ padding: 0.2rem 1.5rem 0.4rem 1.5rem;
+ display: inline-block;
+ margin-bottom: 0.7rem;
}
-.btn-blue-text.btn-consult-license {
- margin-top: 0.4rem;
+.link {
+ display: inline-flex;
+ flex-direction: column;
+ line-height: 0.875;
}
-.summary {
- margin-top: 0.5rem;
+.link span {
+ font-size: 0.875rem;
+ text-decoration: underline;
+ color: inherit;
- div {
- display: flex;
- align-items: center;
+ &:first-of-type {
+ font-weight: bold;
}
span {
@@ -112,11 +154,27 @@ p {
div:not(:first-of-type) {
margin-top: 1em;
}
+}
- .icon-wrapper {
- width: 16px;
- text-align: center;
- display: inline-block;
- margin-right: 0.5rem;
+.geo-image {
+ min-width: 150px;
+ max-width: 200px;
+}
+
+.geo-thumbnail {
+ img {
+ height: 100px;
+ width: 130px;
+ object-fit: cover;
+ border: 1px solid $grey-super-light-color;
+ border-radius: 4px;
+ }
+}
+
+.geographical-info {
+ display: inline-block;
+
+ &:first-of-type {
+ margin-right: 4rem;
}
}
diff --git a/src/app/dataset-detail/components/dataset-info/dataset-info.component.spec.ts b/src/app/dataset-detail/components/dataset-info/dataset-info.component.spec.ts
deleted file mode 100644
index f5e4a405d754546138647de8af5c5d8b4458366b..0000000000000000000000000000000000000000
--- a/src/app/dataset-detail/components/dataset-info/dataset-info.component.spec.ts
+++ /dev/null
@@ -1,169 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { of, Observable } from 'rxjs';
-import { DatasetInfoComponent } from './dataset-info.component';
-import { DatasetDetailService } from '../../../services';
-import { Metadata } from '../../../models';
-import { RouterTestingModule } from '@angular/router/testing';
-import { DebugElement } from '@angular/core';
-import { MockComponent } from 'ng2-mock-component';
-import { By } from '@angular/platform-browser';
-import { EditorialisationService } from '../../../../editorialisation/services';
-
-const metadata = {
- title: 'Metadata Title',
- abstract: 'abstract',
- abstractTroncated: '',
- providers: [],
- keyword: ['riri', 'fifi', 'loulou'],
- getCategories: () => { return ['space_exploration', 'tintin_sur_la_lune']; },
- dataset_id: '1',
- link: [],
- contact: {
- role: '',
- organisationName: '',
- address: '',
- email: '',
- appliesTo: '',
- },
- publicationDate: '',
- category: '',
- highlight: '',
- legalConstraints: [],
- rights: [],
- total_documents: 10,
- lineage: '',
- type: '',
- denominator: 2,
- resolution: '',
- topic_category: [],
- geonet: {
- notify: '',
- schema: '',
- createDate: '',
- view: '',
- id: '',
- featured: '',
- download: '',
- changeDate: '',
- dynamic: '',
- '@xmlns:geonet': '',
- source: '',
- uuid: '',
- selected: '',
- isPublishedToAll: '',
- },
- categories: [],
- popularity: '',
- max_east: 4,
- max_south: 4,
- max_north: 4,
- updateFrequency: '',
- max_west: 4,
- crs: '',
- image: {
- url: '',
- type: '',
- },
-
-} as Metadata;
-
-describe('DatasetInfoComponent', () => {
- describe('Template', () => {
- let component: DatasetInfoComponent;
- let fixture: ComponentFixture<DatasetInfoComponent>;
- let de: DebugElement;
-
- beforeEach(async(() => {
- TestBed.configureTestingModule({
- declarations: [
- DatasetInfoComponent,
- MockComponent({ selector: 'app-dataset-description', inputs: ['description'] }),
- ],
- imports: [
- RouterTestingModule,
- ],
- providers: [
- {
- provide: DatasetDetailService,
- useValue: {
- get datasetMetadata() {
- return metadata;
- },
- get dataset$(): Observable<void> {
- return of();
- },
- get datasetChildren() {
- return { data: [] };
- },
- },
- },
- {
- provide: EditorialisationService,
- useValue: {
- getPostsByTextSearch(toto) {
- return of([]) ;
- },
- },
- },
- ],
- }).compileComponents();
- }));
-
- beforeEach(() => {
- fixture = TestBed.createComponent(DatasetInfoComponent);
- component = fixture.componentInstance;
- component.descriptions = [];
- de = fixture.debugElement;
- fixture.detectChanges();
- });
-
- it('should create component', () => {
- expect(component).toBeTruthy(); // test la config test bed
- });
-
- it('should render metadata information', () => {
- // Given
- const metadataAbstractElement = de.query(By.css('.metadata-abstract')).nativeElement;
-
- // Then
- expect(metadataAbstractElement.innerText).toBe(metadata.abstract);
- });
- });
-
- describe('Component.ts', () => {
- beforeEach(() => {
-
- });
-
- it('ngOnInit()', () => {
- // Given
- const serviceMock = {
- get datasetMetadata() {
- return metadata;
- },
- get dataset$(): Observable<void> {
- return of();
- },
- get datasetChildren() {
- return { data: [] };
- },
- } as DatasetDetailService;
- const serviceEditoMock = {
- getPostsByTextSearch(toto) {
- return of([]) ;
- },
- } as EditorialisationService;
- const datasetSpy = spyOnProperty(serviceMock, 'dataset$').and.callThrough();
-
- const component = new DatasetInfoComponent(serviceMock, serviceEditoMock);
-
- // When
- component.ngOnInit();
-
- // Then
- expect(datasetSpy).toHaveBeenCalled();
-
- });
- });
-
-});
diff --git a/src/app/dataset-detail/components/dataset-info/dataset-info.component.ts b/src/app/dataset-detail/components/dataset-info/dataset-info.component.ts
index c2cf17fae47cc6009177b1708fa055d66a2faa5b..c8f2c4f8869276ea0c522362935cb6aca3cf346b 100644
--- a/src/app/dataset-detail/components/dataset-info/dataset-info.component.ts
+++ b/src/app/dataset-detail/components/dataset-info/dataset-info.component.ts
@@ -1,8 +1,8 @@
import { Component, OnDestroy, OnInit } from '@angular/core';
import { Subscription } from 'rxjs';
-import { datatsetDataRepresentationType, geosource } from '../../../../i18n/traductions';
+import { datatsetDataRepresentationType } from '../../../../i18n/traductions';
import { AppRoutes } from '../../../routes';
-import { IResponsibleParty, Metadata, typesMetadata } from '../../../shared/models';
+import { License, Metadata, typesMetadata } from '../../../shared/models';
import { DatasetDetailService } from '../../services';
@Component({
@@ -12,8 +12,6 @@ import { DatasetDetailService } from '../../services';
})
export class DatasetInfoComponent implements OnInit, OnDestroy {
AppRoutes = AppRoutes;
- maxCharactersNumber = 500;
- displayFullAbstract = false;
metadata: Metadata;
descriptions: Object[];
@@ -31,6 +29,7 @@ export class DatasetInfoComponent implements OnInit, OnDestroy {
this.sub = this._datasetDetailService.dataset$.subscribe(() => {
this.initializeInfo();
});
+
}
ngOnDestroy() {
@@ -41,6 +40,10 @@ export class DatasetInfoComponent implements OnInit, OnDestroy {
this.metadata = this._datasetDetailService.datasetMetadata;
}
+ setBackupImage() {
+ this.metadata.image.url = './assets/img/vignette-data-geo.png';
+ }
+
get parent() {
return this.metadata.parentDataset;
}
@@ -70,25 +73,7 @@ export class DatasetInfoComponent implements OnInit, OnDestroy {
}
get abstract() {
- let value = null;
- if (this.displayFullAbstract || this.metadata.abstract.length <= this.maxCharactersNumber) {
- value = this.metadata.abstract;
- } else {
- value = `${this.metadata.abstract.slice(0, this.maxCharactersNumber)}...`;
- }
- return value;
- }
-
- toogleAbstractDisplayState() {
- this.displayFullAbstract = !this.displayFullAbstract;
- }
-
- get displayAbstractShowMoreBtn() {
- return this.metadata.abstract.length > this.maxCharactersNumber && !this.displayFullAbstract;
- }
-
- get displayAbstractShowLessBtn() {
- return this.metadata.abstract.length > this.maxCharactersNumber && this.displayFullAbstract;
+ return this.metadata.abstract;
}
getDatasetDataRepresentationType(): string {
@@ -108,36 +93,16 @@ export class DatasetInfoComponent implements OnInit, OnDestroy {
return type;
}
- get summaryInfo(): ISummaryInfo {
- return {
- // tslint:disable-next-line:max-line-length
- isOpenAccess: this._datasetDetailService.datasetEditorialMetadata.isOpenAccess,
- // tslint:disable-next-line:max-line-length
- restriction: this._datasetDetailService.datasetEditorialMetadata.isOpenAccess ? geosource.accessRestriction.open : geosource.accessRestriction.restricted,
- publicationDate: this.metadata.publicationDate,
- viewsNumber: this._datasetDetailService.datasetNumberOfViews,
- updateFrequency: this.metadata.updateFrequency ?
- geosource.updateFrequencies[this.metadata.updateFrequency] : geosource.updateFrequencies.other,
- dataType: geosource.datasetTypes[this.metadata.type],
- };
- }
-
- get producers(): IResponsibleParty[] {
- return this.metadata.contacts;
- }
-
get categories() {
- return this.metadata.getCategories().join(', ');
+ return this.metadata.getCategories();
}
- get licenceUrl(): string {
- const license = this.metadata.link.find(l => l.name.includes('Licence'));
- const url = license && license.url ? license.url : null;
- return url;
+ get license(): License {
+ return this.metadata.license;
}
get keywords() {
- return this.metadata.keyword.join(', ');
+ return this.metadata.keyword;
}
}
@@ -153,12 +118,3 @@ interface IGeographicalInfo {
};
coordinatesSystem: string;
}
-
-interface ISummaryInfo {
- isOpenAccess: boolean;
- restriction: string;
- publicationDate: string;
- viewsNumber: number;
- updateFrequency: string;
- dataType: string;
-}
diff --git a/src/app/dataset-detail/components/dataset-info/info-contact/info-contact.component.html b/src/app/dataset-detail/components/dataset-info/info-contact/info-contact.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..5aca32dde2697f31ecd45fbb4585c7ca4a813eb3
--- /dev/null
+++ b/src/app/dataset-detail/components/dataset-info/info-contact/info-contact.component.html
@@ -0,0 +1,7 @@
+<div class="info-section">
+ <span class="info-title">
+ Contact
+ </span>
+ <a class="link" i18n="@@dataset.info.contactus" [routerLink]="['/', AppRoutes.contact.uri]"
+ [queryParams]="{ subject: metadata.title }">Contact us</a>
+ </div>
\ No newline at end of file
diff --git a/src/app/dataset-detail/components/dataset-info/info-contact/info-contact.component.scss b/src/app/dataset-detail/components/dataset-info/info-contact/info-contact.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..701837024a48b77436f4b2a873235e66c433aa16
--- /dev/null
+++ b/src/app/dataset-detail/components/dataset-info/info-contact/info-contact.component.scss
@@ -0,0 +1,26 @@
+@import "../../../../../scss/variables";
+@import "../../../../../../node_modules/bulma/sass/utilities/_all";
+
+.info-section {
+ white-space: pre-line;
+ padding:1.7rem 2rem;
+ background: white;
+ box-shadow: 0px 6px 12px rgba(129, 128, 128, 0.1);
+ border-radius: 8px;
+ margin-bottom:1rem;
+ @media screen and(max-width: $tablet){
+ margin-top:1rem;
+ }
+ }
+ .info-title {
+ font-size: 0.875rem;
+ color: $grey-dark-color;
+ text-transform: uppercase;
+ margin-bottom: 1rem;
+ display: block;
+ }
+ .link{
+ font-weight: bold;
+ font-size:0.8rem;
+ text-decoration: underline;
+ }
\ No newline at end of file
diff --git a/src/app/dataset-detail/components/dataset-info/info-contact/info-contact.component.ts b/src/app/dataset-detail/components/dataset-info/info-contact/info-contact.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8e82612e09585f05a6ac9a2adaab6269dc089ca7
--- /dev/null
+++ b/src/app/dataset-detail/components/dataset-info/info-contact/info-contact.component.ts
@@ -0,0 +1,39 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { AppRoutes } from '../../../../routes';
+import { Metadata } from '../../../../shared/models';
+import { DatasetDetailService } from '../../../services';
+
+@Component({
+ selector: 'app-info-contact',
+ templateUrl: './info-contact.component.html',
+ styleUrls: ['./info-contact.component.scss']
+})
+export class InfoContactComponent implements OnInit, OnDestroy {
+ AppRoutes = AppRoutes;
+ metadata: Metadata;
+ descriptions: Object[];
+ sub: Subscription;
+
+ constructor(
+ private _datasetDetailService: DatasetDetailService,
+ ) { }
+
+ ngOnInit() {
+ // Initilize component variables with value from the service
+ this.initializeInfo();
+
+ // Subcribe to changes in the service
+ this.sub = this._datasetDetailService.dataset$.subscribe(() => {
+ this.initializeInfo();
+ });
+ }
+
+ ngOnDestroy() {
+ this.sub.unsubscribe();
+ }
+
+ initializeInfo() {
+ this.metadata = this._datasetDetailService.datasetMetadata;
+ }
+}
diff --git a/src/app/dataset-detail/components/dataset-info/info-partners/info-partners.component.html b/src/app/dataset-detail/components/dataset-info/info-partners/info-partners.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..20c685101d53059c28dd2460e4ec37bf6639ad50
--- /dev/null
+++ b/src/app/dataset-detail/components/dataset-info/info-partners/info-partners.component.html
@@ -0,0 +1,17 @@
+<div class="info-section">
+ <span class="info-title" i18n="@@dataset.info.partners">
+ Partners
+ </span>
+ <div class="partner" *ngFor="let producer of producers">
+ <div class="content">
+ <div *ngIf="producer.logo && producer.logo != 'null'"><img [src]="producer.logo"></div>
+ <p>{{producer.organisationName}}</p>
+ </div>
+ <p *ngIf="producer.individualName && producer.individualName !== 'null'">
+ {{ producer.individualName }}
+ </p>
+ <p>{{producer.address}}</p>
+ <p *ngIf="producer.email != 'null'">{{producer.email}}</p>
+ <p *ngIf="producer.telephone != 'null'">{{producer.telephone}}</p>
+ </div>
+</div>
\ No newline at end of file
diff --git a/src/app/dataset-detail/components/dataset-info/info-partners/info-partners.component.scss b/src/app/dataset-detail/components/dataset-info/info-partners/info-partners.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..44b2017488fa28c03cd343b0b737da7feae3de5b
--- /dev/null
+++ b/src/app/dataset-detail/components/dataset-info/info-partners/info-partners.component.scss
@@ -0,0 +1,42 @@
+@import "../../../../../scss/variables";
+@import "../../../../../../node_modules/bulma/sass/utilities/_all";
+
+.info-section {
+ white-space: pre-line;
+ padding:1.7rem 2rem;
+ background: white;
+ box-shadow: 0px 6px 12px rgba(129, 128, 128, 0.1);
+ border-radius: 8px;
+ margin-bottom:1rem;
+ @media screen and(max-width: $tablet){
+ margin-top:1rem;
+ }
+ }
+
+ .info-title {
+ font-size: 0.875rem;
+ color: $grey-dark-color;
+ text-transform: uppercase;
+ margin-bottom: 1rem;
+ display: block;
+ }
+ .partner{
+ min-height: 50px;
+ padding: 1rem 0;
+ .content{
+ display: flex;
+ align-items:center;
+ margin-bottom:0.5rem;
+ img {
+ margin-right:1.5rem;
+ }
+ p{
+ color: $grey-dark-color;
+ font-weight: 600;
+ }
+ }
+
+ }
+ .partner:not(:first-of-type){
+ border-top: 1px solid $grey-background-color;
+ }
\ No newline at end of file
diff --git a/src/app/dataset-detail/components/dataset-info/info-partners/info-partners.component.ts b/src/app/dataset-detail/components/dataset-info/info-partners/info-partners.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..552bedeb47e6ee4c3865be4c02cea1506c79e31e
--- /dev/null
+++ b/src/app/dataset-detail/components/dataset-info/info-partners/info-partners.component.ts
@@ -0,0 +1,40 @@
+import { Component, OnInit } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { Metadata, IResponsibleParty } from '../../../../shared/models';
+import { DatasetDetailService } from '../../../services';
+
+@Component({
+ selector: 'app-info-partners',
+ templateUrl: './info-partners.component.html',
+ styleUrls: ['./info-partners.component.scss']
+})
+export class InfoPartnersComponent implements OnInit {
+ metadata: Metadata;
+ descriptions: Object[];
+ sub: Subscription;
+
+ constructor(
+ private _datasetDetailService: DatasetDetailService,
+ ) { }
+
+ ngOnInit() {
+ // Initilize component variables with value from the service
+ this.initializeInfo();
+
+ // Subcribe to changes in the service
+ this.sub = this._datasetDetailService.dataset$.subscribe(() => {
+ this.initializeInfo();
+ });
+ }
+
+ ngOnDestroy() {
+ this.sub.unsubscribe();
+ }
+
+ initializeInfo() {
+ this.metadata = this._datasetDetailService.datasetMetadata;
+ }
+ get producers(): IResponsibleParty[] {
+ return this.metadata.contacts;
+ }
+}
diff --git a/src/app/dataset-detail/components/dataset-info/info-summary/info-summary.component.html b/src/app/dataset-detail/components/dataset-info/info-summary/info-summary.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..f7aaa0d124d9392f861f3794855949a648b794d7
--- /dev/null
+++ b/src/app/dataset-detail/components/dataset-info/info-summary/info-summary.component.html
@@ -0,0 +1,73 @@
+<div class="info-section">
+ <span class="info-title" i18n="@@dataset.info.summary">
+ Summary
+ </span>
+ <div class="summary">
+ <div>
+ <ng-container *ngIf="summaryInfo.isOpenAccess; else lockedIconTemplate">
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
+ <path id="accees_x5F_ouvert"
+ d="M13 1c-2.8 0-5 2.2-5 5v1H2C.9 7 0 7.9 0 9v6c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2h-2V6c0-1.7 1.3-3 3-3s3 1.3 3 3c0 .6.4 1 1 1s1-.4 1-1c0-2.8-2.2-5-5-5z"
+ class="greylightcolor" />
+ </svg>
+ </ng-container>
+
+ <ng-template #lockedIconTemplate>
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
+ <path id="accees_x5F_ferme"
+ d="M14 7V6c0-2.8-2.2-5-5-5S4 3.2 4 6v1c-1.1 0-2 .9-2 2v6c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2zM6 6c0-1.7 1.3-3 3-3s3 1.3 3 3v1H6V6z"
+ class="greylightcolor" />
+ </svg>
+ </ng-template>
+ <span>{{ summaryInfo.restriction }}</span>
+ </div>
+ <div>
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
+ <g id="picto_x5F_publish">
+ <path
+ d="M16.1 1.8c-1-1-2.6-1-3.5 0l-.5-.5c-.9-.9-2.2-.9-3-.1l-3 3c-.4.4-.4 1 0 1.4l.7.7 3.7-3.7s.1 0 .3.1l.5.5-4.1 4 3.5 3.5 5.4-5.3c1-1 1-2.6 0-3.6zM6.5 7.9L2 12.4c-.5.5-.9 3.8-.9 3.8-.1.4.2.7.6.6 0 0 3.3-.4 3.8-.9l4.5-4.5-3.5-3.5z"
+ class="greylightcolor" />
+ <g>
+ <path
+ d="M16.1 1.8c-1-1-2.6-1-3.5 0l-.5-.5c-.9-.9-2.2-.9-3-.1l-3 3c-.4.4-.4 1 0 1.4l.7.7 3.7-3.7s.1 0 .3.1l.5.5-4.1 4 3.5 3.5 5.4-5.3c1-1 1-2.6 0-3.6zM6.5 7.9L2 12.4c-.5.5-.9 3.8-.9 3.8-.1.4.2.7.6.6 0 0 3.3-.4 3.8-.9l4.5-4.5-3.5-3.5z"
+ class="greylightcolor" />
+ </g>
+ </g>
+ </svg>
+
+ <span i18n="@@dataset.info.publishDate">Published on
+ {{ (summaryInfo.publicationDate | date: 'dd/MM/yyyy') || '-' }}</span>
+ </div>
+ <div>
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
+ <path id="picto_x5F_refresh"
+ d="M12.7 5c-.5-.4-1.1-.8-1.7-1-.6-.3-1.3-.4-2-.4-1.2 0-2.4.4-3.4 1.1-.9.8-1.6 1.8-1.9 3 0 .1-.1.2-.1.2-.1 0-.1.1-.2.1H1.5c-.1 0-.2 0-.3-.1-.1-.2-.1-.3-.1-.4.2-1.2.7-2.3 1.5-3.3s1.7-1.8 2.8-2.3C6.5 1.3 7.7 1 9 1c1.1 0 2.1.2 3 .6.9.4 1.8.9 2.5 1.6L15.7 2c.2-.2.3-.2.5-.2s.4.1.5.2c.2.2.3.4.3.6v4.3c0 .2-.1.4-.2.5-.2.2-.3.2-.5.2H12c-.2 0-.4-.1-.5-.2-.2-.2-.2-.3-.2-.5s.1-.4.2-.5L12.7 5zM1.8 10.3h4.3c.2 0 .4.1.5.2.2.2.2.3.2.5s-.1.4-.2.5L5.3 13c.5.5 1.1.8 1.7 1.1.6.2 1.3.4 2 .4 1.2 0 2.4-.4 3.3-1.1 1-.8 1.6-1.8 1.9-3 0-.1.1-.2.1-.2.1-.1.2-.1.3-.1h1.8c.1 0 .2.1.3.2.1.1.1.2.1.3-.2 1.2-.7 2.3-1.5 3.3s-1.7 1.8-2.8 2.3c-1 .5-2.2.8-3.5.8-1.1 0-2.1-.2-3-.6s-1.8-.9-2.5-1.6L2.3 16c-.2.2-.3.2-.5.2s-.4-.1-.5-.2c-.2-.2-.3-.4-.3-.6v-4.3c0-.2.1-.4.2-.5.2-.2.4-.3.6-.3z"
+ class="greylightcolor" />
+ </svg>
+
+ <span>{{ summaryInfo.updateFrequency }}</span>
+ </div>
+ <div>
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
+ <path id="picto_x5F_view"
+ d="M17.8 8.2c-.9-1.5-2.1-2.7-3.7-3.6-1.5-.9-3.2-1.4-5.1-1.4-1.9 0-3.6.5-5.1 1.4-1.6.9-2.8 2.1-3.7 3.6-.1.3-.2.5-.2.8s.1.5.2.8c.9 1.5 2.1 2.7 3.7 3.6 1.6.9 3.3 1.4 5.1 1.4 1.9 0 3.6-.5 5.1-1.4 1.5-.9 2.8-2.1 3.7-3.6.1-.3.2-.5.2-.8s-.1-.5-.2-.8zm-8.8 5c-.8 0-1.5-.2-2.1-.6-.6-.4-1.2-.9-1.6-1.6-.4-.5-.5-1.2-.5-2s.2-1.5.6-2.1c.4-.6.9-1.2 1.6-1.5.5-.5 1.2-.6 2-.6s1.5.2 2.1.6c.6.4 1.2.9 1.5 1.5.4.6.6 1.4.6 2.1s-.2 1.5-.6 2.1c-.4.6-.9 1.2-1.5 1.6-.6.4-1.3.5-2.1.5zM12.2 9c0 .9-.3 1.7-1 2.3-.6.6-1.4.9-2.3.9s-1.7-.3-2.3-.9c-.5-.6-.8-1.4-.8-2.3 0-.5.1-1.1.4-1.5 0 .4.1.7.4 1 .3.2.6.4 1 .4s.7-.1.9-.4c.3-.3.4-.6.4-1s-.2-.7-.5-1c-.2-.2-.6-.4-.9-.4.5-.2 1-.4 1.5-.4.9 0 1.7.3 2.3 1 .6.6.9 1.4.9 2.3z"
+ class="greylightcolor" />
+ </svg>
+
+ <span *ngIf="summaryInfo.viewsNumber" i18n="@@dataset.info.viewsNumber">{{ summaryInfo.viewsNumber }}
+ view(s)during the last month</span>
+ <span *ngIf="!summaryInfo.viewsNumber">0</span>
+
+ <span i18n="@@dataset.info.view">view</span>
+ </div>
+ <div>
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
+ <path id="picto_donne"
+ d="M10 5.2V1H3.8c-.3 0-.4.1-.6.2-.1.2-.2.3-.2.6v14.5c0 .2.1.4.2.5.2.1.3.2.6.2h10.5c.2 0 .4-.1.5-.2.1-.1.2-.3.2-.5V6h-4.2c-.2 0-.4-.1-.5-.2s-.3-.3-.3-.6zm5-.4V5h-4V1h.2c.2 0 .4.1.5.2l3.1 3.1c.1.1.2.3.2.5z"
+ class="greylightcolor" />
+ </svg>
+
+ <span>{{ summaryInfo.dataType }}</span>
+ </div>
+ </div>
+ </div>
\ No newline at end of file
diff --git a/src/app/dataset-detail/components/dataset-info/info-summary/info-summary.component.scss b/src/app/dataset-detail/components/dataset-info/info-summary/info-summary.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..c9c19837bd23d72395cb6537de1b05655867ca60
--- /dev/null
+++ b/src/app/dataset-detail/components/dataset-info/info-summary/info-summary.component.scss
@@ -0,0 +1,67 @@
+@import "../../../../../scss/variables";
+@import "../../../../../../node_modules/bulma/sass/utilities/_all";
+
+.info-section {
+ white-space: pre-line;
+ padding:1.7rem 2rem;
+ background: white;
+ box-shadow: 0px 6px 12px rgba(129, 128, 128, 0.1);
+ border-radius: 8px;
+ margin-bottom: 1rem;
+ @media screen and(max-width: $tablet){
+ margin-top:1rem;
+ }
+ }
+ .info-subsection {
+ margin-bottom: 1rem;
+ }
+
+ .info-title {
+ font-size: 0.875rem;
+ color: $grey-dark-color;
+ text-transform: uppercase;
+ margin-bottom: 1rem;
+ display: block;
+ }
+
+ .info-subtitle {
+ color: $brand-color;
+ font-size: 0.875rem;
+ font-weight: 600;
+ display: block;
+ }
+ .summary {
+ margin-top: 0.5rem;
+
+ div {
+ display: flex;
+ align-items: center;
+ }
+
+ span {
+ line-height: 1;
+ color: $grey-dark-color;
+ }
+
+ svg {
+ width: 26px;
+ margin-right: 0.5rem;
+ background-color: $grey-background-color;
+ padding:0.3rem;
+ border-radius: 50%;
+ path {
+ fill: $grey-dark-color;
+ }
+ }
+
+ div:not(:first-of-type) {
+ margin-top: 1em;
+ }
+
+ .icon-wrapper {
+ width: 16px;
+ text-align: center;
+ display: inline-block;
+ margin-right: 0.5rem;
+ }
+ }
\ No newline at end of file
diff --git a/src/app/dataset-detail/components/dataset-info/info-summary/info-summary.component.ts b/src/app/dataset-detail/components/dataset-info/info-summary/info-summary.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..dd1987c0742adba5b3c387031da2e1a4f3ddbb6e
--- /dev/null
+++ b/src/app/dataset-detail/components/dataset-info/info-summary/info-summary.component.ts
@@ -0,0 +1,60 @@
+import { Component, OnInit } from '@angular/core';
+import { Metadata } from '../../../../shared/models';
+import { Subscription } from 'rxjs';
+import { DatasetDetailService } from '../../../services';
+import { geosource } from '../../../../../i18n/traductions';
+
+@Component({
+ selector: 'app-info-summary',
+ templateUrl: './info-summary.component.html',
+ styleUrls: ['./info-summary.component.scss']
+})
+export class InfoSummaryComponent implements OnInit {
+ metadata: Metadata;
+ descriptions: Object[];
+ sub: Subscription;
+
+ constructor(
+ private _datasetDetailService: DatasetDetailService,
+ ) { }
+
+ ngOnInit() {
+ // Initilize component variables with value from the service
+ this.initializeInfo();
+
+ // Subcribe to changes in the service
+ this.sub = this._datasetDetailService.dataset$.subscribe(() => {
+ this.initializeInfo();
+ });
+ }
+
+ ngOnDestroy() {
+ this.sub.unsubscribe();
+ }
+
+ initializeInfo() {
+ this.metadata = this._datasetDetailService.datasetMetadata;
+ }
+
+ get summaryInfo(): ISummaryInfo {
+ return {
+ // tslint:disable-next-line:max-line-length
+ isOpenAccess: this._datasetDetailService.datasetEditorialMetadata.isOpenAccess,
+ // tslint:disable-next-line:max-line-length
+ restriction: this._datasetDetailService.datasetEditorialMetadata.isOpenAccess ? geosource.accessRestriction.open : geosource.accessRestriction.restricted,
+ publicationDate: this.metadata.publicationDate,
+ viewsNumber: this._datasetDetailService.datasetNumberOfViews,
+ updateFrequency: this.metadata.updateFrequency ?
+ geosource.updateFrequencies[this.metadata.updateFrequency] : geosource.updateFrequencies.other,
+ dataType: geosource.datasetTypes[this.metadata.type],
+ };
+ }
+}
+interface ISummaryInfo {
+ isOpenAccess: boolean;
+ restriction: string;
+ publicationDate: string;
+ viewsNumber: number;
+ updateFrequency: string;
+ dataType: string;
+}
diff --git a/src/app/dataset-detail/components/dataset-map/dataset-map.component.ts b/src/app/dataset-detail/components/dataset-map/dataset-map.component.ts
index eaff3c9e0a7fec831ffbee882c839b6e570a85fd..efc95cefd6ea245e9a7953851b2644cce815e0b6 100644
--- a/src/app/dataset-detail/components/dataset-map/dataset-map.component.ts
+++ b/src/app/dataset-detail/components/dataset-map/dataset-map.component.ts
@@ -75,7 +75,7 @@ export class DatasetMapComponent implements OnInit, OnDestroy {
if (this.metadata && !this.mapOptions) {
this.mapOptions = {} as MapOptions;
this.mapOptions.isMVT = true;
- this.mapOptions.mvtUrl = `${APP_CONFIG.backendUrls.proxyMap}/mvt`;
+ this.mapOptions.mvtUrl = `${APP_CONFIG.backendUrls.proxyQuery}/map/mvt`;
this.mapOptions.vectorService = { ...this.metadata.link.find((e) => { return e.service === linkFormats.wfs; }) };
this.mapOptions.rasterService = { ...this.metadata.link.find((e) => { return e.service === linkFormats.wms; }) };
const dataType = {
@@ -101,7 +101,7 @@ export class DatasetMapComponent implements OnInit, OnDestroy {
// If download data, use config url.
if (this.mapOptions.rasterService.url.includes('download.data')) {
const domain = this.mapOptions.rasterService.url.split('wms')[1];
- this.mapOptions.rasterService.url = `${APP_CONFIG.backendUrls.proxyMap}/wms${domain}`;
+ this.mapOptions.rasterService.url = `${APP_CONFIG.backendUrls.proxyQuery}/map/wms${domain}`;
}
// If the data are just a sample, we will use this sample as geojson to display the interaction layer on the map.
diff --git a/src/app/dataset-detail/components/dataset-reuses/dataset-reuses.component.html b/src/app/dataset-detail/components/dataset-reuses/dataset-reuses.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..b33241f308403d9a1d7f19402d2aea6ac437c5d5
--- /dev/null
+++ b/src/app/dataset-detail/components/dataset-reuses/dataset-reuses.component.html
@@ -0,0 +1,52 @@
+<div class="main-container">
+ <p class="section-title" i18n="@@dataset.reuse.title1">They use this data</p>
+ <div class="reuses-container">
+ <div class="item">
+ <div class="add-reuse">
+ <a [routerLink]="['/', AppRoutes.contact.uri]" [queryParams]="{ subject: 'Demande d\'ajout de réutilisation '}">
+ <span class="plus">+</span>
+ <p class="text" i18n="@@dataset.reuse.add">Add a reuse</p>
+ </a>
+ </div>
+ </div>
+ <div class="item" *ngFor="let reuse of reuses" >
+
+ <div class="reuse">
+ <a [routerLink]="['/', AppRoutes.reuses.uri, reuse._id]">
+ <div class="logo-content">
+ <img [src]="reuse.logo" [alt]="reuse.name + 'logo'">
+ </div>
+ <span class="title">{{reuse.name}}</span>
+ <p>{{reuse.creator}}</p>
+
+ <div class="bottom-section">
+ <span>{{ formatReusesTypes(reuse.reuseTypes) }}</span>
+ <span>
+ {{reuse.datasetsUsed ? reuse.datasetsUsed.length : 0 }} <span
+ *ngIf="reuse.datasetsUsed.length > 1; else oneReuse" i18n="@@reuses.ngDatasetsReused">datasets
+ used</span>
+ <ng-template #oneReuse i18n="@@reuses.oneDatasetReused">dataset used</ng-template>
+ </span>
+ </div>
+ </a>
+ </div>
+ </div>
+ </div>
+ <p class="section-title" i18n="@@dataset.reuse.title2" *ngIf="hasRelatedPosts">News</p>
+ <div class="posts-container" *ngIf="hasRelatedPosts">
+
+ <div class="post-item" *ngFor="let post of relatedNews">
+ <a [routerLink]="['/', AppRoutes.articles.uri, post.slug]" class="link-without-decoration">
+ <div class="post-image" [ngStyle]="{'background-image': 'url(' + post.content.featureImage + ') '}">
+ </div>
+ <div class="post-description">
+ <p class="post-description-date">
+ {{ post.content.publicationDate | date: 'dd.MM.yyyy' }}
+ {{post.content.category ? ' - ' + post.content.category.name : ''}}
+ </p>
+ <p class="post-description-title" [innerHTML]=post.content.title></p>
+ </div>
+ </a>
+ </div>
+ </div>
+</div>
\ No newline at end of file
diff --git a/src/app/dataset-detail/components/dataset-reuses/dataset-reuses.component.scss b/src/app/dataset-detail/components/dataset-reuses/dataset-reuses.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..30f485270f0fde1249f8de6c1470a7767852896b
--- /dev/null
+++ b/src/app/dataset-detail/components/dataset-reuses/dataset-reuses.component.scss
@@ -0,0 +1,257 @@
+@import "../../../../scss/variables";
+@import "../../../../../node_modules/bulma/sass/utilities/_all";
+
+.main-container {
+ background-color: $grey-background-color;
+ width: 100%;
+ height: 100%;
+ padding: 3rem 1rem;
+
+ .section-title {
+ font-size: 0.875rem;
+ color: $grey-dark-color;
+ text-transform: uppercase;
+ margin-bottom: 1rem;
+ }
+
+ .reuses-container,
+ .posts-container {
+ display: flex;
+ flex-wrap: wrap;
+ margin-left: -1rem;
+ margin-bottom: 1.5rem;
+ }
+
+ .item,
+ .post-item {
+ display: inline-block;
+ margin: 0 0 1rem 1rem;
+ width: 100%;
+ max-width: 100%;
+ height: 270px;
+ position: relative;
+ //overflow: hidden;
+
+ @media screen and (min-width: 420px) {
+ // max-width: 705px;
+ width: 100%;
+ height: 260px;
+ }
+
+ @media screen and (min-width: 650px) {
+ // max-width: 705px;
+ width: calc((100% - 2rem) / 2);
+ height: 260px;
+ }
+
+ @media screen and (min-width: $tablet) {
+ // max-width: 705px;
+ width: calc((705px - 1rem) / 2);
+ height: 260px;
+ flex-shrink: 0;
+ }
+
+ @media screen and (min-width: $desktop) {
+ // max-width: 960px;
+ width: calc((960px - (2 * 1rem)) / 3);
+ height: 260px;
+ }
+
+ @media screen and (min-width: $widescreen) {
+ // max-width: 1152px;
+ width: calc((1152px - (3 * 1rem)) / 4);
+ height: 260px;
+ }
+
+ @media screen and (min-width: $fullhd) {
+ // max-width: 1344px;
+ width: calc((1344px - (3 * 1rem)) / 4);
+ height: 260px;
+ }
+
+ p {
+ text-align: left;
+ word-break: break-word;
+ }
+
+ .reuse {
+ background-color: white;
+ transition: box-shadow 0.3s;
+ padding: 1.2rem 1.2rem;
+ height: 100%;
+ position: relative;
+ border-radius: 8px;
+ overflow: hidden;
+
+ p {
+ color: $grey-dark-color;
+ }
+
+ &:hover {
+ box-shadow: inset 0 0 3px 0 grey;
+
+ a {
+ text-decoration: none;
+ }
+ }
+ }
+
+
+ }
+
+ .item::before {
+ content: '';
+ width: inherit;
+ height: inherit;
+ position: absolute;
+ top: 0;
+ left: 0;
+ box-shadow: 0 6px 12px 0 rgba(129, 128, 128, 0.1);
+ }
+
+ .add-reuse {
+ text-transform: initial;
+ background-color: $blue-color;
+ height: 100%;
+ position: relative;
+ border-radius: 8px;
+ transition: all 300ms ease;
+ box-shadow: 0px 6px 12px rgba(49, 110, 180, 0.35);
+
+ a {
+ display: block;
+ height: 100%;
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ transition: all 300ms ease;
+
+ .text {
+ color: white;
+ font-size: 1.2rem;
+ text-align: center;
+ transition: all 300ms ease;
+
+ }
+
+ .plus {
+ display: block;
+ text-align: center;
+ color: white;
+ font-size: 4rem;
+ margin-bottom: 2rem;
+ }
+
+ &:hover {
+ text-decoration: none;
+
+
+ .text {
+ text-decoration: none;
+
+ }
+
+ }
+ }
+ &:hover{
+ background-color: #355698;
+ }
+
+ }
+
+ .title {
+ display: block;
+ font-size: 1rem;
+ font-weight: bold;
+ margin-top: 1rem;
+ margin-bottom: 0.25rem;
+ }
+
+ .bottom-section {
+ position: absolute;
+ bottom: 1rem;
+ display: flex;
+ flex-direction: column;
+
+ span {
+ color: $grey-dark-color;
+ font-style: italic;
+ }
+ }
+
+ .logo-content {
+ text-align: center;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-bottom: 1px solid $grey-super-light-color;
+ padding-bottom: 1.2rem;
+
+ img {
+ max-height: 70px;
+ // width: unset;
+ // max-width: 80%;
+ }
+ }
+
+ .posts-container {
+ z-index: 3;
+
+ .post-item {
+ box-shadow: 0 6px 12px 0 rgba(129, 128, 128, 0.1);
+ color: $brand-color;
+
+ a {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+
+ &:hover {
+ text-decoration: none;
+ }
+ }
+
+ .post-image {
+ min-height: 7.5rem;
+ width: 100%;
+ background-position: center;
+ background-size: cover;
+ background-repeat: no-repeat;
+ border-radius: 8px 8px 0 0;
+ filter: none;
+ transition: filter 0.5s ease-in-out;
+ }
+
+ .post-description {
+ flex-grow: 1;
+ background-color: #ffff;
+ border-radius: 0 0 8pw 8px;
+ padding: 1rem;
+
+ .post-description-date {
+ margin-bottom: 0.5rem;
+ font-size: 0.75rem;
+ text-transform: uppercase;
+ color: $grey-dark-color;
+ line-height: 1;
+ }
+
+ .post-description-title {
+ font-size: 1.125rem;
+ font-weight: bold;
+ }
+ }
+
+ a:hover .post-description-title {
+ text-decoration: underline;
+ }
+
+ &:hover {
+ .post-image {
+ filter: grayscale(100%);
+ }
+ }
+ }
+ }
+}
diff --git a/src/app/dataset-detail/components/dataset-reuses/dataset-reuses.component.ts b/src/app/dataset-detail/components/dataset-reuses/dataset-reuses.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..005367d72836330e1436e22f266dee7f48ac7240
--- /dev/null
+++ b/src/app/dataset-detail/components/dataset-reuses/dataset-reuses.component.ts
@@ -0,0 +1,38 @@
+import { Component, OnInit } from '@angular/core';
+import { reusesTypes } from '../../../../i18n/traductions';
+import { CMSContent } from '../../../editorialisation/models/cms-content.model';
+import { AppRoutes } from '../../../routes';
+import { DatasetDetailService } from '../../services';
+
+@Component({
+ selector: 'app-dataset-reuses',
+ templateUrl: './dataset-reuses.component.html',
+ styleUrls: ['./dataset-reuses.component.scss'],
+})
+export class DatasetReusesComponent implements OnInit {
+ AppRoutes = AppRoutes;
+ hasRelatedPosts: boolean = false;
+
+ constructor(
+ private _datasetDetailService: DatasetDetailService,
+ ) { }
+
+ ngOnInit() {
+ if (this.relatedNews.length > 0) {
+ this.hasRelatedPosts = true;
+ }
+ }
+
+ get relatedNews(): CMSContent[] {
+ return this._datasetDetailService.dataset.relatedNews;
+ }
+
+ get reuses() {
+ return this._datasetDetailService.dataset.reuses;
+ }
+
+ formatReusesTypes(types: string[]) {
+ return types.map(e => reusesTypes[e] ? reusesTypes[e] : null).filter(e => e !== null).join(', ');
+ }
+
+}
diff --git a/src/app/dataset-detail/components/dataset-table-map/dataset-table-map.component.html b/src/app/dataset-detail/components/dataset-table-map/dataset-table-map.component.html
index a4324b51aec3bc5569a9629f9a566c6de95f7578..4a69afdd069ead09a3c72e3cd8584376890c7f39 100644
--- a/src/app/dataset-detail/components/dataset-table-map/dataset-table-map.component.html
+++ b/src/app/dataset-detail/components/dataset-table-map/dataset-table-map.component.html
@@ -9,15 +9,15 @@
(clickOutside)="closeColumsMenu()">
<div class="dropdown-trigger">
<button class="button button-with-icon" aria-haspopup="true" aria-controls="dropdown-menu"
- (click)="toogleColumsMenu()" i18n-aria-label="dataset.data.displayProperties" aria-label="Display the properties">
+ (click)="toogleColumsMenu()" i18n-aria-label="@@dataset.data.displayProperties"
+ aria-label="Display the properties">
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content has-text-left">
<div class="field dropdown-item" *ngFor="let prop of properties">
- <input class="is-checkradio has-error is-small" [disabled]=""
- [id]="prop" type="checkbox" name="selectedColumns"
- [checked]="columnIsSelected(prop) !== -1" (click)="toogleColumn(prop)">
+ <input class="is-checkradio has-error is-small" [disabled]="" [id]="prop" type="checkbox"
+ name="selectedColumns" [checked]="columnIsSelected(prop) !== -1" (click)="toogleColumn(prop)">
<label [for]="prop">{{ prop }}</label>
</div>
</div>
@@ -110,7 +110,7 @@
<div class="field has-addons has-addons-centered is-centered">
<div class="control research-input" [ngClass]="{'has-icons-right': searchInput.value}">
<input type="text" class="input" [formControl]="searchInput" placeholder="Filter records"
- i18-aria-label="@@dataset.data.filterReccordPlaceholder" aria-label="Filter records"
+ i18-aria-label="@@dataset.data.filterReccordPlaceholder" aria-label="Filter records"
i18n-placeholder="@@dataset.data.filterReccordPlaceholder" (keydown.enter)="searchChanged()" />
<span class="icon is-small is-right reset-research-icon" *ngIf="searchInput.value"
(click)="resetResearch()">
diff --git a/src/app/dataset-detail/components/dataset-table/dataset-table.component.scss b/src/app/dataset-detail/components/dataset-table/dataset-table.component.scss
index e4d11fe3a510c710df18e7932e5233e0f7ae7699..919a7f740e95e0efee919fec3cb76c24babe9724 100644
--- a/src/app/dataset-detail/components/dataset-table/dataset-table.component.scss
+++ b/src/app/dataset-detail/components/dataset-table/dataset-table.component.scss
@@ -21,7 +21,7 @@
}
.visited {
- background-color: #f1f3f8;
+ background-color: $table-selected-item-color;
}
.selected {
diff --git a/src/app/dataset-detail/components/index.ts b/src/app/dataset-detail/components/index.ts
index 3151d6a315018207deffc787eac24368c8c6ed7e..9c153071d7f04f22c9c58015b94dcf980f9cda72 100644
--- a/src/app/dataset-detail/components/index.ts
+++ b/src/app/dataset-detail/components/index.ts
@@ -13,11 +13,15 @@ import { DatasetDownloadsComponent } from './dataset-downloads/dataset-downloads
// tslint:disable-next-line: max-line-length
import { ResourceDownloadItemComponent } from './dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component';
import { DatasetInfoComponent } from './dataset-info/dataset-info.component';
+import { InfoContactComponent } from './dataset-info/info-contact/info-contact.component';
+import { InfoPartnersComponent } from './dataset-info/info-partners/info-partners.component';
+import { InfoSummaryComponent } from './dataset-info/info-summary/info-summary.component';
import { DatasetMapComponent } from './dataset-map/dataset-map.component';
+import { DatasetReusesComponent } from './dataset-reuses/dataset-reuses.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, ResourceDownloadItemComponent, DatasetAPIComponent, DatasetDownloadsComponent, ResourceQueryableComponent, DatasetMapComponent, DatasetInfoComponent, DatasetTableMapComponent, DatasetTableComponent, ResourcesQueryableComponent, IconFormatComponent, DatasetDataDetailsComponent, DatasetDataDetailPropertiesComponent };
+export { DatasetDetailComponent, ResourceDownloadItemComponent, DatasetAPIComponent, DatasetDownloadsComponent, ResourceQueryableComponent, DatasetMapComponent, DatasetInfoComponent, DatasetTableMapComponent, DatasetTableComponent, ResourcesQueryableComponent, IconFormatComponent, DatasetDataDetailsComponent, DatasetDataDetailPropertiesComponent, DatasetReusesComponent, InfoContactComponent, InfoPartnersComponent, InfoSummaryComponent };
// tslint:disable-next-line:variable-name
export const DatasetDetailComponents = [
DatasetDetailComponent,
@@ -25,7 +29,11 @@ export const DatasetDetailComponents = [
DatasetAPIComponent,
DatasetMapComponent,
DatasetInfoComponent,
+ InfoContactComponent,
+ InfoPartnersComponent,
+ InfoSummaryComponent,
DatasetDownloadsComponent,
+ DatasetReusesComponent,
DatasetTableMapComponent,
DatasetTableComponent,
ResourcesQueryableComponent,
diff --git a/src/app/dataset-detail/dataset-detail-routing.module.ts b/src/app/dataset-detail/dataset-detail-routing.module.ts
index 4cc5a3043f8b0716eb5883335cc2373b07f31944..f928fa19a3cb175080661f48a349ab11647716c5 100644
--- a/src/app/dataset-detail/dataset-detail-routing.module.ts
+++ b/src/app/dataset-detail/dataset-detail-routing.module.ts
@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AppRoutes } from '../routes';
// tslint:disable-next-line: max-line-length
-import { DatasetAPIComponent, DatasetDetailComponent, DatasetDownloadsComponent, DatasetInfoComponent, DatasetTableMapComponent } from './components';
+import { DatasetAPIComponent, DatasetDetailComponent, DatasetDownloadsComponent, DatasetInfoComponent, DatasetTableMapComponent, DatasetReusesComponent } from './components';
import { DatasetDetailResolver } from './resolvers';
export const routes: Routes = [
// Some of the parteners already used the english version of this routing so in order to not break again there link
@@ -42,6 +42,13 @@ export const routes: Routes = [
title: AppRoutes.downloads.title,
},
},
+ {
+ path: AppRoutes.dataReuses.uri,
+ component: DatasetReusesComponent,
+ data: {
+ title: AppRoutes.dataReuses.title,
+ },
+ },
],
},
];
diff --git a/src/app/dataset-detail/services/dataset-detail.service.ts b/src/app/dataset-detail/services/dataset-detail.service.ts
index fc28a106a8c49f8d3c185b1688034923f85ef41f..a410bb2d2b74e34165806c554ee0ef5214aaf3e8 100644
--- a/src/app/dataset-detail/services/dataset-detail.service.ts
+++ b/src/app/dataset-detail/services/dataset-detail.service.ts
@@ -3,6 +3,9 @@ import { Observable, of, Subject } from 'rxjs';
import { catchError, finalize, flatMap, map, tap } from 'rxjs/operators';
import { notificationMessages } from '../../../i18n/traductions';
import { ErrorService, MatomoService } from '../../core/services';
+import { Reuse } from '../../editorialisation/models';
+import { CMSContent } from '../../editorialisation/models/cms-content.model';
+import { ReusesService } from '../../editorialisation/services';
import { ElasticsearchOptions, IElasticsearchResponse } from '../../elasticsearch/models';
import { ElasticsearchService } from '../../elasticsearch/services/elasticsearch.service';
// tslint:disable-next-line: max-line-length
@@ -37,10 +40,12 @@ export class DatasetDetailService {
private _lastDatasetIdForMap: string;
private _pendingRequests: number = 0;
+
constructor(
private _errorService: ErrorService,
private _elasticsearchService: ElasticsearchService,
private _matomoService: MatomoService,
+ private _reusesService: ReusesService,
) { }
initializeDataset(slugOrUuid: string): Observable<Dataset> {
@@ -55,7 +60,6 @@ export class DatasetDetailService {
).subscribe((nbViews) => {
this._dataset.nbViews = nbViews;
});
-
// Get the metadata
return this._elasticsearchService.getDatasetMetadata(slugOrUuid).pipe(
map((e) => {
@@ -93,14 +97,11 @@ export class DatasetDetailService {
this._dataset.metadata = metadata;
this._dataset.editorialMetadata = new EditorialMetadata(e.hits.hits[0]._source['editorial-metadata']);
-
// Disable cache for real time dataset
this._elasticSearchOptions.useCache = this.datasetEditorialMetadata.isRealTime ? false : true;
-
} else {
this._dataset.metadata = new Metadata();
}
-
return this._dataset;
}),
catchError((err) => {
@@ -108,6 +109,30 @@ export class DatasetDetailService {
message: notificationMessages.geosource.getDatasetById, redirect: true,
});
}),
+ flatMap((dataset) => {
+ // Get reuses
+ return this._reusesService.getDataSetReuses(dataset.slug).pipe(
+ map((reuses) => {
+ dataset.reuses = reuses;
+ return dataset;
+ }),
+ catchError(() => {
+ return of(dataset);
+ }),
+ );
+ }),
+ flatMap((dataset) => {
+ // Get related articles
+ return this.retrieveRelatedPosts(dataset.slug).pipe(
+ map((posts) => {
+ dataset.relatedNews = posts;
+ return dataset;
+ }),
+ catchError(() => {
+ return of(dataset);
+ }),
+ );
+ }),
// Get the parent dataset if there is one
flatMap((dataset) => {
if (dataset.metadata.parentDataset.id) {
@@ -133,7 +158,7 @@ export class DatasetDetailService {
return of(dataset);
}
}),
- flatMap(() => {
+ flatMap((dataset) => {
// Get the dataset's children
return this._elasticsearchService.getDatasetChildren(this._dataset.uuid).pipe(
map((res) => {
@@ -146,16 +171,13 @@ export class DatasetDetailService {
datasetChild.slug = child._source['slug'];
this._children.data.push(datasetChild);
});
- return this._children;
+ return dataset;
}),
catchError((err) => {
throw this._errorService.handleError(err, { message: notificationMessages.geosource.getDatasetChildren });
}),
);
}),
- map(() => {
- return this.dataset;
- }),
finalize(() => {
this.asyncRequestDone();
}),
@@ -203,6 +225,28 @@ export class DatasetDetailService {
);
}
+ retrieveRelatedPosts(slug: string) {
+ this.newAsyncRequest();
+
+ const options = {
+ sortDate: true,
+ type: 'post',
+ relatedDatasetSlug: slug,
+ };
+
+ return this._elasticsearchService.getPosts(options).pipe(
+ map((posts) => {
+ return posts.hits.hits.map(result => new CMSContent(result._source));
+ }),
+ catchError((err) => {
+ throw this._errorService.handleError(err, { message: notificationMessages.edito.getDatasetRelatedPosts });
+ }),
+ finalize(() => {
+ this.asyncRequestDone();
+ }),
+ );
+ }
+
setDatasetData(res: IElasticsearchResponse): void {
res.hits.hits.forEach((e) => {
if (e._source['data-fr'] !== undefined) {
@@ -299,6 +343,9 @@ export class DatasetDetailService {
get datasetIndex() {
return this._dataset.uuid;
}
+ get datasetReuses(): Reuse[] {
+ return this._dataset.reuses;
+ }
sortBy(val: string): void {
// Reset the from of the query to start again from the beggining
diff --git a/src/app/dataset-detail/services/resources.service.ts b/src/app/dataset-detail/services/resources.service.ts
index 1efa13f9eda619fc937832107ec0c469f364daf3..e9b4569ed23233389fa04479782d6b33974c2704 100644
--- a/src/app/dataset-detail/services/resources.service.ts
+++ b/src/app/dataset-detail/services/resources.service.ts
@@ -1,38 +1,51 @@
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
+import lodashClonedeep from 'lodash.clonedeep';
+import { of } from 'rxjs';
import { map } from 'rxjs/operators';
import { APP_CONFIG } from '../../core/services/app-config.service';
import { IMetadataLink, linkFormats, Metadata } from '../../shared/models';
import { IResource, Resource } from '../models';
import { IProjection, Projection } from '../models/projection.model';
-
@Injectable()
export class ResourcesService {
linkFormats = linkFormats;
resources: Resource[];
+ projections: Projection[];
constructor(
private _httpClient: HttpClient,
) { }
getResources() {
+ if (this.resources && this.resources.length > 0) {
+ return of(this.resources);
+ }
+
return this._httpClient.get<IResource[]>(`${APP_CONFIG.backendUrls.resources}/resources`).pipe(
map((resourcesBack) => {
this.resources = resourcesBack.map(r => new Resource(r));
return this.resources;
- }));
+ }),
+ );
}
getProjections() {
+ if (this.projections && this.projections.length > 0) {
+ return of(this.projections);
+ }
+
return this._httpClient.get<IProjection[]>(`${APP_CONFIG.backendUrls.resources}/projections`).pipe(
- map((resourcesBack) => {
- return resourcesBack.map(r => new Projection(r));
- }));
+ map((projections) => {
+ this.projections = projections.map(r => new Projection(r));
+ return this.projections;
+ }),
+ );
}
getQueryableResources(link: IMetadataLink[]) {
- const queryableResources = [];
+ const queryableResources = {};
link.forEach((link) => {
if (link.service) {
this.resources.forEach((resource) => {
@@ -50,12 +63,13 @@ export class ResourcesService {
return queryableResources;
}
- getResourcesForDownload(metadata: Metadata) {
- const downloadableResources = [];
- const staticResources = [];
- const otherResources = [];
+ getResourcesForDownload(metadata: Metadata): [any, any, IMetadataLink[]] {
+ const downloadableResources = {};
+ const staticResources = {};
+ const otherResources: IMetadataLink[] = [];
- metadata.link.forEach((link) => {
+ const links = lodashClonedeep(metadata.link);
+ links.forEach((link) => {
if (link.service) {
this.resources.forEach((resource) => {
const resourceCopy = Object.assign({}, resource);
@@ -76,6 +90,14 @@ export class ResourcesService {
if (!downloadableResources[link.description]) {
downloadableResources[link.description] = [];
}
+
+ // Instead of using the direct link to the files we go through the dedicated proxy
+ // that is adding credentials of a technical account if the user has access to the requested file/data
+ resourceCopy.metadataLink.url = resourceCopy.metadataLink.url.replace(
+ 'https://download.data.grandlyon.com',
+ `${APP_CONFIG.backendUrls.proxyQuery}/download`,
+ );
+
downloadableResources[link.description].push(resourceCopy);
}
});
@@ -85,8 +107,24 @@ export class ResourcesService {
if (!staticResources[link.description]) {
staticResources[link.description] = [];
}
+
+ // Instead of using the direct link to the files we go through the dedicated proxy
+ // that is adding credentials of a technical account if the user has access to the requested file/data
+ link.url = link.url.replace(
+ 'https://download.data.grandlyon.com',
+ `${APP_CONFIG.backendUrls.proxyQuery}/download`,
+ );
+
staticResources[link.description].push(link);
} else {
+
+ // Instead of using the direct link to the files we go through the dedicated proxy
+ // that is adding credentials of a technical account if the user has access to the requested file/data
+ link.url = link.url.replace(
+ 'https://download.data.grandlyon.com',
+ `${APP_CONFIG.backendUrls.proxyQuery}/download`,
+ );
+
otherResources.push(link);
}
}
diff --git a/src/app/datasets/components/filter-list/filter-detail/filter-detail.component.html b/src/app/datasets/components/filter-list/filter-detail/filter-detail.component.html
index aa35e198a9143c246534b40f82a721e3ec434741..36ceecf6cafe13f34668ba63d863a0dd20493bab 100644
--- a/src/app/datasets/components/filter-list/filter-detail/filter-detail.component.html
+++ b/src/app/datasets/components/filter-list/filter-detail/filter-detail.component.html
@@ -15,7 +15,7 @@
[ngClass]="{'active': (aggregation.isActive == true) }">
<div class="columns filter-item justify-content-between is-mobile">
<div class="column is-9 filter-title"
- *ngIf="aggregation.subAggregations.length < 2 || aggregation.key === 'ATMO Auvergne-Rhône-Alpes'">
+ *ngIf="aggregation.subAggregations.length < 2 || aggregation.label === 'ATMO Auvergne-Rhône-Alpes'">
<div class="field no-sub">
<input type="checkbox" [(ngModel)]="aggregation.isActive" (click)="changeFilter(aggregation, filter.field)"
[disabled]="isLoading || aggregation.count_per_metadata === 0 && aggregation.isActive !== true"
@@ -48,7 +48,7 @@
+ filter.field" [checked]="isChecked(filter, aggregation)"
[indeterminate]="isUndeterminated(aggregation)">
<label [for]="aggregation.key + '_' + filter.field"
- title="{{ (filter.type === 'date') ? (aggregation.key | date: 'yyyy') : aggregation.key }}">
+ title="{{ (filter.type === 'date') ? (aggregation.key | date: 'yyyy') : aggregation.label }}">
{{ (filter.type === 'date') ? (aggregation.key | date: 'yyyy') : aggregation.troncatedLabel }}
</label>
</div>
@@ -71,7 +71,7 @@
[name]="subAgg.key+subAgg.parentAggregation.key" class="is-checkradio is-small"
[id]="subAgg.key+subAgg.parentAggregation.key">
<label [for]="subAgg.key+subAgg.parentAggregation.key"
- title="{{ (filter.type === 'date') ? (subAgg.key | date: 'yyyy') : subAgg.key }}">
+ title="{{ (filter.type === 'date') ? (subAgg.key | date: 'yyyy') : subAgg.label }}">
{{ (filter.type === 'date') ? (subAgg.key | date: 'yyyy') : subAgg.troncatedLabel }}
</label>
diff --git a/src/app/datasets/components/filter-list/filter-detail/filter-detail.component.scss b/src/app/datasets/components/filter-list/filter-detail/filter-detail.component.scss
index 51385c8d9ee1d7688a5eb81d57b808f7f080782b..d71ae77109b36efed61bee6ecf2e12ea476e9c83 100644
--- a/src/app/datasets/components/filter-list/filter-detail/filter-detail.component.scss
+++ b/src/app/datasets/components/filter-list/filter-detail/filter-detail.component.scss
@@ -86,19 +86,17 @@ aside.is-active {
.icon-toggle-sub {
cursor: pointer;
- svg {
- width: 0.8rem;
- height: 0.6rem;
- transform: rotate(-90deg);
- }
-
- svg.is-active {
- transform: rotate(0deg);
- }
- }
+ svg {
+ width: 0.8rem;
+ height: 0.6rem;
+ position: relative;
+ left: -5px;
+ transform: rotate(-90deg);
+ }
- .no-sub {
- padding-left: 1rem;
+ svg.is-active {
+ transform: rotate(0deg);
+ }
}
.column {
@@ -157,5 +155,5 @@ a.link-without-decoration:hover {
width: 0.3069375rem;
height: 0.4911rem;
top: 0.5rem;
- left: 0.4rem;
+ left: 0.35rem;
}
diff --git a/src/app/datasets/components/filter-list/filter-detail/filter-detail.component.ts b/src/app/datasets/components/filter-list/filter-detail/filter-detail.component.ts
index 5005ff01bc60295dc53c907538f3825d1fa9ade8..dbadae2bc78ad98ad2843b39a5be6de899d37c02 100644
--- a/src/app/datasets/components/filter-list/filter-detail/filter-detail.component.ts
+++ b/src/app/datasets/components/filter-list/filter-detail/filter-detail.component.ts
@@ -34,7 +34,7 @@ export class FilterDetailComponent implements OnInit {
const parentAggregationKey = (aggregation.parentAggregation) ? aggregation.parentAggregation.key : '';
this._datasetResearchService.updateAggregation(
this.filter.field, aggregation.key,
- newValueActive, parentAggregationKey);
+ newValueActive, parentAggregationKey, true);
this._datasetResearchService.triggerSearchChange();
}
diff --git a/src/app/datasets/components/filter-list/filter-list.component.html b/src/app/datasets/components/filter-list/filter-list.component.html
index aff9066cd2b634b13ad00a736440bbff0775bc3d..7e436d71a09c556508eafa5b45bd53d0fdbe8561 100644
--- a/src/app/datasets/components/filter-list/filter-list.component.html
+++ b/src/app/datasets/components/filter-list/filter-list.component.html
@@ -25,7 +25,9 @@
</div>
<div class="column is-narrow">
<button class="remove-filter-btn" (click)="removeFilter(activeAgg)">
- <img src="./assets/img/close.svg" alt="Icon de suppression du filtre">
+ <svg xmlns="http://www.w3.org/2000/svg" id="filtre-close" viewBox="0 0 15 15">
+ <path stroke="#4668AB" fill="#4668AB" d="M13.6 12.8L8.2 7.4l5.1-5.1c.2-.2.2-.5 0-.7s-.5-.2-.7 0l-5.1 5-5.1-5.1c-.2-.2-.5-.2-.7 0s-.2.5-.1.7l5.1 5.1-5.4 5.4c-.2.2-.2.5 0 .7.1.1.2.1.4.1s.3 0 .4-.1L7.5 8l5.4 5.4c.1.1.2.1.4.1s.3 0 .4-.1c.1-.1.1-.4-.1-.6z" class="white"/>
+ </svg>
</button>
</div>
</div>
diff --git a/src/app/datasets/components/filter-list/filter-list.component.scss b/src/app/datasets/components/filter-list/filter-list.component.scss
index 7c17ccdbc8573f045da5ba5279faf83d9ddc2ef6..eef6856bb33e0ff490dfaf30f5465d5598a93024 100644
--- a/src/app/datasets/components/filter-list/filter-list.component.scss
+++ b/src/app/datasets/components/filter-list/filter-list.component.scss
@@ -15,9 +15,9 @@
cursor: pointer;
display: flex;
- img {
- width: 0.75rem;
- height: 0.75rem;
+ svg {
+ width: 0.7rem;
+ height: 0.7rem;
}
}
@@ -43,12 +43,13 @@ div.filter-detail ~ div.filter-detail {
.active-filters-header {
justify-content: space-between;
- padding: 1.5rem 0.75rem;
+ padding: 1rem 0.75rem 0.5rem 0.75rem;
display: none;
.reset-button {
border: none;
padding: 1.25rem 1rem;
+ color:$blue-color;
}
.column {
@@ -87,7 +88,7 @@ div.filter-detail ~ div.filter-detail {
background-color: white;
padding: 0.4375rem 0.4375rem;
justify-content: space-between;
- border: 1px solid $warning-color;
+ border: 1px solid $blue-color;
border-radius: 200px;
align-items: center;
@@ -101,7 +102,7 @@ div.filter-detail ~ div.filter-detail {
}
span {
- color: $warning-color;
+ color: $blue-color;
font-size: $size-7;
vertical-align: top;
}
diff --git a/src/app/datasets/components/filter-list/filter-list.component.ts b/src/app/datasets/components/filter-list/filter-list.component.ts
index 21795417ec554660ade11af0b9e13fc2f03b7200..54af971f41c767e532c7ecf55f61b9e0115d3d82 100644
--- a/src/app/datasets/components/filter-list/filter-list.component.ts
+++ b/src/app/datasets/components/filter-list/filter-list.component.ts
@@ -1,7 +1,9 @@
+import { Location } from '@angular/common';
import { Component, OnDestroy, OnInit } from '@angular/core';
import { Subscription } from 'rxjs';
import { geosource } from '../../../../i18n/traductions';
import { Aggregation, Filter, IActiveFiltersTemplate } from '../../../elasticsearch/models';
+import { AppRoutes } from '../../../routes';
import { scopesResearch } from '../../../shared/variables';
import { DatasetResearchService } from '../../services';
@@ -21,6 +23,7 @@ export class FilterListComponent implements OnInit, OnDestroy {
constructor(
private _datasetResearchService: DatasetResearchService,
+ private _location: Location,
) { }
ngOnInit() {
@@ -99,6 +102,7 @@ export class FilterListComponent implements OnInit, OnDestroy {
resetActiveAggregations() {
this._datasetResearchService.resetActiveAggregations();
this._datasetResearchService.triggerSearchChange();
+ this._location.go(AppRoutes.research.uri, '');
}
ngOnDestroy() {
diff --git a/src/app/datasets/components/results/result-dataset/result-dataset.component.scss b/src/app/datasets/components/results/result-dataset/result-dataset.component.scss
index aa3d550b419e10d0a74f4c3c4fd7fca28f842a41..b84492be638b967e1bfeb7f0aae4d07cfc084876 100644
--- a/src/app/datasets/components/results/result-dataset/result-dataset.component.scss
+++ b/src/app/datasets/components/results/result-dataset/result-dataset.component.scss
@@ -52,8 +52,7 @@
padding-top: 0;
p {
- border-bottom: 1px solid $grey-super-light-color;
- padding-bottom: 1.5rem;
+ padding-bottom: 1rem;
text-align: left;
overflow-wrap: break-word;
word-break: break-word;
diff --git a/src/app/datasets/components/results/result-post/result-post.component.scss b/src/app/datasets/components/results/result-post/result-post.component.scss
index 2827dd94df3425a7873ce853e69b58f48d986594..511e8299f63f42411cfb5e8cbdd184e443f552db 100644
--- a/src/app/datasets/components/results/result-post/result-post.component.scss
+++ b/src/app/datasets/components/results/result-post/result-post.component.scss
@@ -2,11 +2,10 @@
.image-item {
padding-left: 0;
- border-bottom: 1px solid $grey-super-light-color;
+
}
.description-item {
- border-bottom: 1px solid $grey-super-light-color;
word-break: break-word;
}
diff --git a/src/app/datasets/components/results/results-tab-scope/results-tab-scope.component.scss b/src/app/datasets/components/results/results-tab-scope/results-tab-scope.component.scss
index dc77caecad953c20053e497ed9d95dbdd3f35fca..a88e966c8332cebb013b6ca68aaf8246422c2f4a 100644
--- a/src/app/datasets/components/results/results-tab-scope/results-tab-scope.component.scss
+++ b/src/app/datasets/components/results/results-tab-scope/results-tab-scope.component.scss
@@ -16,6 +16,7 @@
cursor: pointer;
position: relative;
margin-bottom: 1px;
+ width: 100%;
@media screen and (min-width: $tablet) {
width: 6rem;
diff --git a/src/app/datasets/components/results/results.component.html b/src/app/datasets/components/results/results.component.html
index adf328e7682fedc45b81aa111a12a5d11f776a15..b39e99a852b1d54f9d49f3878f7709e9decea09e 100644
--- a/src/app/datasets/components/results/results.component.html
+++ b/src/app/datasets/components/results/results.component.html
@@ -1,4 +1,4 @@
-<div class="columns is-mobile is-multiline is-marginless">
+<div class="main-content">
<div class="filter-button-touch column is-hidden-desktop"
(click)="toggleFilters()">
<div class="filter-title">
@@ -81,10 +81,12 @@
<ng-container *ngFor="let result of results">
<div class="result-dataset" *ngIf="result.metadata">
<app-result-dataset [dataset]="result"></app-result-dataset>
+ <hr>
</div>
<div class="result-post" *ngIf="!result.metadata">
<app-result-post [post]="result"></app-result-post>
+ <hr>
</div>
</ng-container>
</div>
diff --git a/src/app/datasets/components/results/results.component.scss b/src/app/datasets/components/results/results.component.scss
index 5d715f9373056ba9f51d4ce4948c4ef4e31ff162..951fd8b001531ce444ba71ae08ca1ce75595fbe6 100644
--- a/src/app/datasets/components/results/results.component.scss
+++ b/src/app/datasets/components/results/results.component.scss
@@ -1,6 +1,19 @@
@import "../../../../../node_modules/bulma/sass/utilities/_all";
@import "../../../../scss/variables.scss";
+//not working in a calc()
+$sticky-distance: $header-bar-height + 32px;
+
+.main-content {
+ display: flex;
+ padding: 2rem;
+ flex-direction: column;
+
+ @media screen and(min-width:$desktop) {
+ flex-direction: row;
+ }
+}
+
@media (max-width: $tablet) {
.header-dataset {
flex-direction: column-reverse;
@@ -27,7 +40,7 @@
justify-content: space-between;
align-items: center;
background: $grey-background-color;
- border-bottom: 1px solid $grey-super-light-color;
+ //border-bottom: 1px solid $grey-super-light-color;
cursor: pointer;
.filter-title {
@@ -65,12 +78,19 @@
.filter-column {
padding: 0;
top: 10px;
+ background: white;
+ box-shadow: 0px 6px 12px rgba(129, 128, 128, 0.1);
+ border-radius: 8px;
+ padding: 0.7rem;
+ margin-bottom: 1rem;
@media screen and (min-width: $desktop) {
height: calc(100vh - #{$header-bar-height} - #{$footer-height});
overflow-y: auto;
position: sticky;
- top: $header-bar-height;
+ top: $sticky-distance;
+ margin-right: 1rem;
+ margin-bottom: 0;
}
}
@@ -79,27 +99,31 @@
// Padding more small for mobile
padding: 0.5rem;
padding-top: 0;
+ box-shadow: 0px 6px 12px rgba(129, 128, 128, 0.1);
+ border-radius: 8px;
+ box-sizing: border-box;
+ flex-shrink: 1;
@media screen and (min-width: $tablet) {
- padding: 1.5rem;
+ padding: 2rem;
}
.tab-results {
margin-top: 1rem;
margin-bottom: 1rem;
- border-bottom: 1px solid $grey-super-light-color;
+ border-bottom: 2px solid $grey-background-color;
// Make the border have all the screen
margin-left: -0.5rem;
margin-right: -0.5rem;
- padding-left: 0.5rem;
- padding-right: 0.5rem;
+ padding-left: 1.25rem;
+ padding-right: 1.25rem;
@media screen and (min-width: $tablet) {
- margin-left: -1.5rem;
- margin-right: -1.5rem;
+ margin-left: -2rem;
+ margin-right: -2rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
- margin-top: 2rem;
+ margin-top: 0;
}
}
@@ -205,6 +229,12 @@ span.item-found {
margin-top: 0.5rem;
}
+hr {
+ margin-left: -2rem;
+ margin-right: -2rem;
+ background: $grey-background-color;
+}
+
.pagination-bottom {
display: flex;
justify-content: center;
diff --git a/src/app/datasets/components/results/results.component.ts b/src/app/datasets/components/results/results.component.ts
index f113d3ff3627c28c6a6cb395511066f6b505f551..e81ed1d27ae1052e53ccd9be32b50acfb8ef2a88 100644
--- a/src/app/datasets/components/results/results.component.ts
+++ b/src/app/datasets/components/results/results.component.ts
@@ -1,17 +1,17 @@
import { DatePipe, ViewportScroller } from '@angular/common';
import { Component, OnDestroy, OnInit } from '@angular/core';
import { Meta } from '@angular/platform-browser';
+import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs';
-import { metaDescription } from '../../../../i18n/traductions';
+import { metaDescription, notificationMessages } from '../../../../i18n/traductions';
import { Notification } from '../../../core/models';
import { NotificationService } from '../../../core/services';
-import { MatomoService } from '../../../core/services/matomo.service';
import { CMSContent } from '../../../editorialisation/models';
import { IScope } from '../../../elasticsearch/models';
import { AppRoutes } from '../../../routes';
import { Dataset, IMetadataLink, PaginatorOptions } from '../../../shared/models';
import { SearchSuggestion } from '../../models';
-import { DatasetResearchService } from '../../services';
+import { DatasetResearchService, ResearchUrlService } from '../../services';
@Component({
selector: 'app-results',
@@ -25,7 +25,7 @@ export class ResultsComponent implements OnInit, OnDestroy {
results: Dataset[] | CMSContent[];
countResults: [];
-
+ hasParams: boolean = false;
searchChangeSub: Subscription;
// Paginator options
paginator: PaginatorOptions;
@@ -39,15 +39,36 @@ export class ResultsComponent implements OnInit, OnDestroy {
private _datasetResearchService: DatasetResearchService,
private _notificationService: NotificationService,
private _datePipe: DatePipe,
- private _matomoService: MatomoService,
+ private _researchUrlService: ResearchUrlService,
private _viewportScroller: ViewportScroller,
private _meta: Meta,
+ private _route: ActivatedRoute,
) { }
ngOnInit() {
+
// Set the title and description for the research page
this._meta.updateTag({ name: 'description', content: metaDescription.research });
+ // If url with parameters too long, we reset it and display a notif
+
+ if (location.href.length > 2000) {
+ this._researchUrlService.reset();
+ this._notificationService.notify(new Notification({
+ message: notificationMessages.general.urlToolLong,
+ type: 'warning',
+ }));
+ } else {
+ this._route.queryParams.subscribe((params) => {
+ this.manageUrlParameters(params);
+ });
+ }
+
+ if (!this.hasParams) {
+ this.search();
+ this.getSuggestion();
+ }
+
this.countResults = [];
this.paginator = {
pageIndex: this._datasetResearchService.pageIndex + 1,
@@ -55,8 +76,7 @@ export class ResultsComponent implements OnInit, OnDestroy {
pageSize: this._datasetResearchService.pageSize,
pageSizeOptions: [5, 10, 20],
};
- this.search();
- this.getSuggestion();
+
this.searchChangeSub = this._datasetResearchService.searchChange$.subscribe(
(value) => {
this.search();
@@ -65,14 +85,80 @@ export class ResultsComponent implements OnInit, OnDestroy {
);
}
+ // If there are parameters, we extract them to set the ESoptions for a news search.
+ private manageUrlParameters(params) {
+ if (params && Object.keys(params).length > 0) {
+ this.hasParams = true;
+ // We need to make an initial request to get the aggregations and subaggregations
+ this._datasetResearchService.getResults().subscribe(() => {
+ // Create the ESOptions
+ const options = this._researchUrlService.getOptionsFromParameters(params);
+ this._datasetResearchService.elasticSearchOptions.setElasticsearchOptions(options);
+ // Force to recalculate the aggregate counts
+ this._datasetResearchService.shouldAggregateResultCount = true;
+ // Set the aggregations
+ const aggParameters = this._researchUrlService.aggParameters;
+
+ Object.keys(aggParameters).forEach((key) => {
+ const aggField = `metadata-fr.${key}`;
+ const oneAgg = aggParameters[key];
+
+ oneAgg.forEach((troncatedKey: string) => {
+ let newAggField = aggField;
+ let aggKey = '';
+
+ // Find out if it's an aggregation or subaggregation
+ const filters = this._datasetResearchService.elasticSearchOptions.filters;
+ let parentAgg = '';
+
+ filters.forEach((filter) => {
+
+ if (filter.field === aggField) {
+ // No need this rule. In this case we control the parameters, and we want a loose
+ // comparison to handle the filter with a 'Date' type (where the key aggregation is a number).
+ // tslint:disable-next-line: triple-equals
+ const aggregation = filter.aggregations.find(el => el.troncatedKey == troncatedKey);
+ if (aggregation) {
+ aggKey = aggregation.key;
+ }
+ }
+ if (filter.subField === aggField) {
+ // We need to find the parent aggregation
+ filter.aggregations.forEach((aggregation) => {
+ if (aggregation.subAggregations.length > 0) {
+ const index = aggregation.subAggregations.findIndex(el => el.troncatedKey === troncatedKey);
+
+ const subAggregation = aggregation.subAggregations[index];
+
+ if (subAggregation) {
+ aggKey = subAggregation.key;
+ parentAgg = subAggregation.parentAggregation.key;
+ newAggField = subAggregation.parentAggregation.field;
+ }
+ }
+ });
+ }
+ });
+
+ this._datasetResearchService.updateAggregation(newAggField, aggKey, true, parentAgg, false);
+ });
+ });
+ this._datasetResearchService.triggerSearchChange();
+ });
+ }
+ }
+
ngOnDestroy() {
this.searchChangeSub.unsubscribe();
+ // Reset the url parameters
+ this._researchUrlService.reset();
}
search() {
this._datasetResearchService.getResults().subscribe(
(res) => {
this.selectedScope = this._datasetResearchService.scopeReasearch;
+
const position = this._viewportScroller.getScrollPosition();
this.results = res;
diff --git a/src/app/datasets/components/search-bar/search-bar.component.html b/src/app/datasets/components/search-bar/search-bar.component.html
index b52e1ed495033a46ee478e23ddaaea6ac38b52c3..2c5c2fc257684e7765a279d4aff9760623891773 100644
--- a/src/app/datasets/components/search-bar/search-bar.component.html
+++ b/src/app/datasets/components/search-bar/search-bar.component.html
@@ -18,9 +18,15 @@
</div>
</div>
<div class="control button-research">
- <button class="button is-medium" (click)="searchChanged()" i18n-aria-label="@@research.researchButton" aria-label="Research">
+ <button class="button is-medium" (click)="searchChanged()" i18n-aria-label="@@research.researchButton"
+ aria-label="Research">
<span class="icon">
- <i class="fas fa-search" *ngIf="!isLoading;else spinner"></i>
+ <svg *ngIf="!isLoading;else spinner" width="17" height="18" viewBox="0 0 17 18" fill="none"
+ xmlns="http://www.w3.org/2000/svg">
+ <path
+ d="M16.8031 16.6747L13.0982 12.8219C14.1776 11.4658 14.8194 9.7089 14.8194 7.82877C14.7902 3.5137 11.4938 0 7.4097 0C3.32561 0 0 3.5137 0 7.82877C0 12.1438 3.32561 15.6575 7.4097 15.6575C9.16002 15.6575 10.7937 15.0103 12.048 13.9315L15.7529 17.7842C15.8988 17.9384 16.0738 18 16.278 18C16.453 18 16.6572 17.9384 16.8031 17.7842C17.0656 17.476 17.0656 16.9829 16.8031 16.6747ZM1.4586 7.82877C1.4586 4.34589 4.11326 1.5411 7.4097 1.5411C10.7061 1.5411 13.3608 4.34589 13.3608 7.82877C13.3608 11.3116 10.7061 14.1164 7.4097 14.1164C4.11326 14.1164 1.4586 11.2808 1.4586 7.82877Z"
+ fill="#464A57" />
+ </svg>
<ng-template #spinner>
<i class="fas fa-spinner fa-spin has-text-danger"></i>
</ng-template>
diff --git a/src/app/datasets/components/search-bar/search-bar.component.scss b/src/app/datasets/components/search-bar/search-bar.component.scss
index 6ce3e691d6579fd99c0e0a7b23e1632ddb0ff6f5..2f6288a02a656b96b3d2fbdf595d9bb338874e33 100644
--- a/src/app/datasets/components/search-bar/search-bar.component.scss
+++ b/src/app/datasets/components/search-bar/search-bar.component.scss
@@ -49,11 +49,18 @@
.field {
height: 100%;
+ @media screen and(max-width:$tablet){
+ height:40px;
+ }
.button,
.input,
.reset-research-icon {
height: 100%;
+ @media screen and(max-width:$tablet){
+ height:40px;
+ }
+
}
.reset-research-icon {
diff --git a/src/app/datasets/services/dataset-research.service.ts b/src/app/datasets/services/dataset-research.service.ts
index 333e80a14deb18360d0931e3031cdd4dbd5dc86a..af2e18bf9e504a906341b3dee4da47771a44331d 100644
--- a/src/app/datasets/services/dataset-research.service.ts
+++ b/src/app/datasets/services/dataset-research.service.ts
@@ -14,6 +14,7 @@ import { AppRoutes } from '../../routes';
import { Dataset, Highlights } from '../../shared/models';
import { scopesResearch } from '../../shared/variables';
import { SearchCompletion, SearchSuggestion } from '../models';
+import { ResearchUrlService } from './research-url.service';
@Injectable()
export class DatasetResearchService {
@@ -31,6 +32,7 @@ export class DatasetResearchService {
private _elasticsearchService: ElasticsearchService,
private angulartics2Piwik: Angulartics2Piwik,
private _router: Router,
+ private _researchUrlService: ResearchUrlService,
) {
this._searchChangeSubject = new Subject<any>();
this._datasetsReloadedSubject = new Subject<any>();
@@ -45,7 +47,6 @@ export class DatasetResearchService {
*/
getResults(): Observable<Dataset[] | CMSContent[]> {
this._pendingRequests += 1;
-
return this._elasticsearchService.getAllEntities(this._elasticsearchOptions).pipe(
map((e) => {
// Set results count
@@ -345,72 +346,6 @@ export class DatasetResearchService {
return dataset;
}
- /**
- * Update an aggregation for a specific filter.
- * Some logic is necessary depending if it's a 'parent' aggregation or a subaggregation
- * When the aggregation is updated, the searchChangeSubject is triggered.
- */
- updateAggregation(filterField: string, aggregationKey: string, value: boolean, aggregationParentKey = '') {
- const filterToUpdate = this._elasticsearchOptions.filters.find((el => el.field === filterField));
- const aggregation = filterToUpdate.findInAggregationsAndSubAggregations(aggregationKey, aggregationParentKey);
- if (aggregation) {
- aggregation.isActive = value;
- if (aggregation.subAggregations.length > 0) {
- aggregation.subAggregations.forEach((subAgg: Aggregation) => {
- subAgg.isActive = aggregation.isActive ? true : false;
- });
- }
-
- // If one subaggregation is updated:
- // - parent aggregation becomes active if all the sub aggregations are active
- // - parent aggregation becomes inactive if NOT all the sub aggregations are active
- if (aggregation.parentAggregation) {
- const parentAggregation = aggregation.parentAggregation;
- if (parentAggregation.isAllSubAggregationsActive()) {
- parentAggregation.isActive = true;
- } else {
- parentAggregation.isActive = false;
- }
- }
-
- }
-
- // By default, we set the lastclicked filter.
- // But if there is no more active aggregation for this filter, we
- // want to set it to null to force display new ES aggregations count.
- this._lastFilterClicked = filterField;
- const aggrActive = filterToUpdate.findActiveAggregations();
- if (!value && aggrActive.length === 0) {
- this._lastFilterClicked = null;
- }
-
- this._elasticsearchOptions.pageIndex = 0;
- this._elasticsearchOptions.shouldAggregateFilters = true;
- this._elasticsearchOptions.shouldAggregateResultCount = true;
-
- }
-
- resetActiveAggregations(): void {
- this._elasticsearchOptions.filters.forEach((element) => {
-
- element.aggregations.forEach((aggregation) => {
- aggregation.isActive = false;
-
- if (aggregation.subAggregations.length > 0) {
- aggregation.subAggregations.forEach((subAgg) => {
- subAgg.isActive = false;
- });
- }
- });
- });
- this._elasticsearchOptions.pageIndex = 0;
- // We don't want to recalculate the number of dataset per filter when on is removed
- // because it only depends on the search string and not on which filter is activated or not
- this._lastFilterClicked = null;
- this._elasticsearchOptions.shouldAggregateFilters = true;
- this._elasticsearchOptions.shouldAggregateResultCount = true;
- }
-
getAutoComplete(text: string): Observable<SearchCompletion[]> {
const options: SearchCompletion[] = [];
return this._elasticsearchService.getAutoComplete(text).pipe(
@@ -464,14 +399,79 @@ export class DatasetResearchService {
);
}
+ /**
+ * Update an aggregation for a specific filter.
+ * Some logic is necessary depending if it's a 'parent' aggregation or a subaggregation
+ * When the aggregation is updated, the searchChangeSubject is triggered.
+ */
+ updateAggregation(
+ filterField: string, aggregationKey: string,
+ isActive: boolean, aggregationParentKey = '', updateUrlParams = true) {
+ const filterToUpdate = this._elasticsearchOptions.filters.find((el => el.field === filterField));
+
+ if (filterToUpdate) {
+ // If we find the filter to update
+ const aggregation = filterToUpdate.findInAggregationsAndSubAggregations(aggregationKey, aggregationParentKey);
+
+ if (aggregation) {
+ filterToUpdate.setAggregationAndSubaggregation(aggregation, isActive);
+ if (updateUrlParams) {
+ this._researchUrlService.setAggParameter(aggregation, isActive);
+ }
+ }
+
+ // By default, we set the lastclicked filter.
+ // But if there is no more active aggregation for this filter, we
+ // want to set it to null to force display new ES aggregations count.
+ this._lastFilterClicked = filterField;
+ const aggrActive = filterToUpdate.findActiveAggregations();
+ if (!isActive && aggrActive.length === 0) {
+ this._lastFilterClicked = null;
+ }
+
+ this._elasticsearchOptions.pageIndex = 0;
+ this._elasticsearchOptions.shouldAggregateFilters = true;
+ this._elasticsearchOptions.shouldAggregateResultCount = true;
+ }
+
+ }
+
+ resetActiveAggregations(): void {
+ this._elasticsearchOptions.filters.forEach((element) => {
+
+ element.aggregations.forEach((aggregation) => {
+ aggregation.isActive = false;
+
+ if (aggregation.subAggregations.length > 0) {
+ aggregation.subAggregations.forEach((subAgg) => {
+ subAgg.isActive = false;
+ });
+ }
+ });
+ });
+ this._elasticsearchOptions.pageIndex = 0;
+ // We don't want to recalculate the number of dataset per filter when on is removed
+ // because it only depends on the search string and not on which filter is activated or not
+ this._lastFilterClicked = null;
+ this._elasticsearchOptions.shouldAggregateFilters = true;
+ this._elasticsearchOptions.shouldAggregateResultCount = true;
+ this._researchUrlService.reset();
+ }
+
searchChanged(value: string) {
this._lastFilterClicked = null;
this._elasticsearchOptions.searchString = value;
this._elasticsearchOptions.pageIndex = 0;
this._elasticsearchOptions.shouldAggregateResultCount = true;
if (this._router.url.split('/').pop() !== AppRoutes.research.uri) {
- this._router.navigate(['/', AppRoutes.research.uri]);
+ if (value === '') {
+ this._router.navigate(['/', `${AppRoutes.research.uri}`]);
+ } else {
+ this._router.navigate(['/', `${AppRoutes.research.uri}`], { queryParams: { q: value } });
+ }
}
+
+ this._researchUrlService.setParameter('q', value);
this._searchChangeSubject.next();
}
@@ -479,6 +479,7 @@ export class DatasetResearchService {
this._elasticsearchOptions.pageIndex = 0;
this._elasticsearchOptions.scope = scope;
this._elasticsearchOptions.shouldAggregateResultCount = false;
+ this._researchUrlService.setParameter('scope', scope.key);
this._searchChangeSubject.next();
}
@@ -525,6 +526,8 @@ export class DatasetResearchService {
sortChanged(option: ISortOption) {
this._elasticsearchOptions.shouldAggregateResultCount = false;
this._elasticsearchOptions.sortOptions = option;
+
+ this._researchUrlService.setSortParameter(option);
this._searchChangeSubject.next();
}
@@ -532,6 +535,8 @@ export class DatasetResearchService {
paginationChanged(pageSize: number, pageIndex: number) {
this._elasticsearchOptions.pageSize = pageSize;
this._elasticsearchOptions.pageIndex = pageIndex;
+
+ this._researchUrlService.setPaginationParameter(pageIndex);
this._searchChangeSubject.next();
}
@@ -577,7 +582,15 @@ export class DatasetResearchService {
return this._resultsCount;
}
- set fromAutocompletion(value) {
+ set fromAutocompletion(value: boolean) {
this._elasticsearchOptions.fromAutocompletion = value;
}
+
+ set elasticSearchOptions(esOptions: ElasticsearchOptions) {
+ this._elasticsearchOptions = esOptions;
+ }
+
+ get elasticSearchOptions() {
+ return this._elasticsearchOptions;
+ }
}
diff --git a/src/app/datasets/services/index.ts b/src/app/datasets/services/index.ts
index 181021dcf02a8f9a01c724706e826b94bbae624d..50f94c082b92142f4606263be5497ff6de17b4b7 100644
--- a/src/app/datasets/services/index.ts
+++ b/src/app/datasets/services/index.ts
@@ -1,8 +1,10 @@
import { DatasetResearchService } from './dataset-research.service';
+import { ResearchUrlService } from './research-url.service';
-export { DatasetResearchService };
+export { DatasetResearchService, ResearchUrlService };
// tslint:disable-next-line:variable-name
export const DatasetsServices = [
DatasetResearchService,
+ ResearchUrlService,
];
diff --git a/src/app/datasets/services/research-url.service.ts b/src/app/datasets/services/research-url.service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b9b5f1079d54e80a150632a34ec29333fd31785d
--- /dev/null
+++ b/src/app/datasets/services/research-url.service.ts
@@ -0,0 +1,209 @@
+import { Location } from '@angular/common';
+import { Injectable } from '@angular/core';
+import { Aggregation, IElasticsearchOptions, ISortOption } from '../../elasticsearch/models';
+import { AppRoutes } from '../../routes';
+import { scopesResearch } from '../../shared/variables';
+
+@Injectable()
+export class ResearchUrlService {
+
+ private _parameters = {};
+ private _aggParameters = {};
+
+ constructor(
+ private _location: Location,
+ ) { }
+
+ // Get the ES options from parameters
+ getOptionsFromParameters(params: Object) {
+ const options = {} as IElasticsearchOptions;
+
+ Object.keys(params).forEach((key) => {
+ // For the search query
+ if (key === 'q') {
+ options.searchString = params[key];
+ this._parameters[key] = params[key];
+ } else if (key === 'scope') {
+ this.extractScopeOptions(options, params, key);
+ } else if (key === 'sort') {
+ this.extractSortOptions(params, key, options);
+ } else if (key === 'page') {
+ this.extractPaginationOptions(key, params, options);
+ } else {
+ // First we check if it's an aggregation (it should but if someone enter a random filter)
+ const aggs = params[key].split(',');
+ this._aggParameters[key] = [];
+ aggs.forEach((agg: string) => {
+ this._aggParameters[key].push(agg);
+ });
+ }
+ });
+
+ return options;
+ }
+
+ private extractPaginationOptions(key: string, params: Object, options: IElasticsearchOptions) {
+ // Be sure we don't have a negative page index
+ const pageIndex = Math.max(0, Number(params[key]) - 1);
+ this._parameters[key] = pageIndex.toString();
+ options.pageIndex = pageIndex;
+ }
+
+ private extractSortOptions(params: Object, key: string, options: IElasticsearchOptions) {
+ // Check the sign of the value (desc or asc)
+ const startWithNeg = params[key].startsWith('-');
+ const value = params[key].split('-').join('');
+ const optionsSort = {
+ value,
+ order: startWithNeg ? 'desc' : 'asc',
+ };
+ const acceptedSortValues = ['date, relevance, alphabetical'];
+ // Check if sort value exists
+ if (acceptedSortValues.includes(optionsSort.value)) {
+ options.sortOptions = optionsSort;
+ this._parameters[key] = params[key];
+ }
+ }
+
+ private extractScopeOptions(options: IElasticsearchOptions, params: Object, key: string) {
+ const scope = scopesResearch[params[key]];
+ if (scope) {
+ options.scope = scope;
+ this._parameters[key] = scopesResearch[params[key]];
+ }
+ }
+
+ // Set a parameter in the _parameters variable, and change the url
+ setParameter(key: string, searchValue: string) {
+ this._parameters[key] = searchValue;
+ const params = this.generateUrlParams();
+ this._location.go(AppRoutes.research.uri, params);
+ }
+
+ // Set an aggregation parameter in the _aggParameters variable, and change the url
+ setAggParameter(aggregation: Aggregation, isActiveAgg: boolean) {
+ const fieldKey = aggregation.field.replace(/metadata-fr./, '');
+
+ if (isActiveAgg) {
+ this.addAggregation(fieldKey, aggregation.troncatedKey);
+ } else {
+ this.removeAggregation(fieldKey, aggregation.troncatedKey);
+ }
+
+ // We check if it's a parent aggregation,
+ // if yes, remove all the children anyway because we don't need it.
+ if (!aggregation.parentAggregation) {
+ // If it's a parent, remove all the children from the parameters
+ if (aggregation.subAggregations && aggregation.subAggregations.length > 0) {
+
+ if (aggregation.subAggregations[0].parentAggregation.key !== aggregation.key) {
+ const aggField = aggregation.subAggregations[0].field.replace(/metadata-fr./, '');
+ delete this._aggParameters[aggField];
+ }
+
+ }
+ }
+ // It's a subaggregation that is updated:
+ // - the parent aggregation becomes active if all the sub aggregations are active
+ // - the parent aggregation becomes inactive if NOT all the sub aggregations are active
+ // tslint:disable-next-line: brace-style
+ else {
+ const parentAggregation = aggregation.parentAggregation;
+ const parentFieldKey = parentAggregation.field.replace(/metadata-fr./, '');
+
+ if (parentAggregation.isAllSubAggregationsActive()) {
+ // Remove the current field for subaggregations
+ const aggField = aggregation.field.replace(/metadata-fr./, '');
+ delete this._aggParameters[aggField];
+ this.addAggregation(parentFieldKey, parentAggregation.troncatedKey);
+
+ } else {
+ // Remove the parentAgg as filter, and add all the subAgg active
+ this.removeAggregation(parentFieldKey, parentAggregation.troncatedKey);
+ aggregation.parentAggregation.subAggregations.forEach((subAgg) => {
+ const subAggFieldKey = subAgg.field.replace(/metadata-fr./, '');
+ if (subAgg.isActive) {
+ this.addAggregation(subAggFieldKey, subAgg.troncatedKey);
+ } else {
+ this.removeAggregation(subAggFieldKey, subAgg.troncatedKey);
+ }
+ });
+ }
+ }
+ const params = this.generateUrlParams();
+ this._location.go(AppRoutes.research.uri, params);
+ }
+
+ private addAggregation(fieldKey: string, aggregationKey: string) {
+ // If new, init the array
+ if (!this._aggParameters[fieldKey]) {
+ this._aggParameters[fieldKey] = [];
+ }
+ // If value not exists already
+ if (!this._aggParameters[fieldKey].includes(aggregationKey)) {
+ this._aggParameters[fieldKey].push(aggregationKey);
+ }
+ }
+
+ private removeAggregation(fieldKey: string, aggregationKey: string) {
+ if (this._aggParameters[fieldKey]) {
+ const index = this._aggParameters[fieldKey].indexOf(aggregationKey);
+ if (index !== -1) this._aggParameters[fieldKey].splice(index, 1);
+ // If array is empty, then we remove the parent field.
+ if (this._aggParameters[fieldKey].length === 0) {
+ delete this._aggParameters[fieldKey];
+ }
+ }
+ }
+
+ setPaginationParameter(pageIndex: number) {
+ this._parameters['page'] = pageIndex + 1;
+ const params = this.generateUrlParams();
+ this._location.go(AppRoutes.research.uri, params);
+ }
+
+ setSortParameter(option: ISortOption) {
+ // If desc we prefix with '-'
+ const value = option.order === 'desc' ? `-${option.value}` : option.value;
+ this._parameters['sort'] = value;
+ const params = this.generateUrlParams();
+ this._location.go(AppRoutes.research.uri, params);
+ }
+
+ // Generate the parameters to set into the url from the _parameters and _aggParametersa arrays
+ generateUrlParams() {
+ let params = '';
+
+ // Manage all the parameters except aggregations
+ Object.keys(this._parameters).forEach((key) => {
+ if (this._parameters[key]) {
+ if (params !== '') {
+ params += '&';
+ }
+ params += `${key}=${this._parameters[key]}`;
+ }
+ });
+
+ // Aggregations. If one agg key has multiple value, separate it with comma
+ Object.keys(this._aggParameters).forEach((key) => {
+ if (this._aggParameters[key]) {
+ if (params !== '') {
+ params += '&';
+ }
+ const values = this._aggParameters[key].join(',');
+ params += `${key}=${values}`;
+ }
+ });
+
+ return params;
+ }
+
+ reset() {
+ this._parameters = {};
+ this._aggParameters = {};
+ }
+
+ get aggParameters() {
+ return this._aggParameters;
+ }
+}
diff --git a/src/app/editorialisation/components/changelog/changelog.component.scss b/src/app/editorialisation/components/changelog/changelog.component.scss
index af07b1c36d4684be526def97b6c06b885036023d..098c3d045bcb0c38757298cd4be4ca4758701400 100644
--- a/src/app/editorialisation/components/changelog/changelog.component.scss
+++ b/src/app/editorialisation/components/changelog/changelog.component.scss
@@ -15,7 +15,7 @@ $line: 2px;
padding-bottom: 1.875rem;
line-height: normal;
- @media screen and (min-width: $tablet) {
+ @media screen and (min-width: $desktop) {
margin-left: 6rem;
width: 70%;
}
@@ -53,7 +53,7 @@ strong {
font-size: 0.75rem;
top: 15px;
padding: 0 5px 0 5px;
- border: 1px solid $yellow-dd-color;
+ border: 1px solid $tomato-color;
&.is-hidden-tablet {
left: 30px;
@@ -101,7 +101,7 @@ strong {
li::before {
font-family: "Open sans", sans-serif;
content: "• ";
- color: $yellow-dd-color;
+ color: $tomato-color;
font-size: 1.25rem;
vertical-align: sub;
}
@@ -149,7 +149,7 @@ strong {
&:first-of-type {
&::after {
- background: $yellow-dd-color;
+ background: $tomato-color;
height: 13px;
width: 13px;
left: round(($spacing + $line + (13 * 0.35)) * -1);
diff --git a/src/app/editorialisation/components/site-map/site-map.component.html b/src/app/editorialisation/components/site-map/site-map.component.html
index 88414fc48fcd33717cadd70185d42b13c815033b..415b67f91df3358c7b2c94cef9a1a216a0c8b3e3 100644
--- a/src/app/editorialisation/components/site-map/site-map.component.html
+++ b/src/app/editorialisation/components/site-map/site-map.component.html
@@ -9,19 +9,21 @@
<li><a class="link-1" [routerLink]="['/', AppRoutes.research.uri]" i18n="@@sitemap.research">Research</a></li>
<li><a class="link-1" [routerLink]="['/', AppRoutes.partners.uri]" i18n="@@sitemap.partners">Partners</a></li>
<li><a class="link-1" [routerLink]="['/', AppRoutes.approach.uri]" i18n="@@sitemap.approach">Approach</a></li>
- <li><a class="link-1" [routerLink]="['/', AppRoutes.documentation.uri]">Documentation</a></li>
+ <li><a class="link-1" [routerLink]="['/', AppRoutes.documentation.uri]" i18n="@@sitemap.approach">Documentation</a></li>
+ <li><a class="link-1" [routerLink]="['/', AppRoutes.reuses.uri]" i18n="@@sitemap.reuses">Reuses</a></li>
+ <li><a class="link-1" [routerLink]="['/', AppRoutes.contribution.uri]">Contribution</a></li>
</ul>
</div>
<div class="column">
<p class="pages-group-title" i18n="@@sitemap.secondaryPages">Secondary pages</p>
<ul class="pages-list">
- <li><a class="link-1" [routerLink]="['/', AppRoutes.accessibility.uri]"
- i18n="@@sitemap.accessibility">Accessibility</a></li>
+ <!-- <li><a class="link-1" [routerLink]="['/', AppRoutes.accessibility.uri]"
+ i18n="@@sitemap.accessibility">Accessibility</a></li> -->
<li><a class="link-1" [routerLink]="['/', AppRoutes.legalNotices.uri]" i18n="@@sitemap.legalNotices">Legal
notices</a></li>
<li><a class="link-1" [routerLink]="['/', AppRoutes.contact.uri]" i18n="@@sitemap.contact">Contact us</a></li>
<li><a class="link-1" [routerLink]="['/', AppRoutes.credits.uri]" i18n="@@sitemap.credits">Credits</a></li>
- <li><a class="link-1" [routerLink]="['/', AppRoutes.cgu.uri]" i18n="@@sitemap.cgu">General conditions of use</a>
+ <li><a class="link-1" [routerLink]="['/', AppRoutes.cgu.uri]" i18n="@@sitemap.cgu">Terms of use</a>
</li>
</ul>
</div>
diff --git a/src/app/editorialisation/editorialisation-routing.module.ts b/src/app/editorialisation/editorialisation-routing.module.ts
index 8aa0b3691942501819b5a14fa18b0c82d246a3d6..22342436372245ad21875411f48ac8125ab5cbdb 100644
--- a/src/app/editorialisation/editorialisation-routing.module.ts
+++ b/src/app/editorialisation/editorialisation-routing.module.ts
@@ -1,14 +1,11 @@
import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-import {
- HomeComponent, OrganizationsComponent, CMSPageComponent, CMSDraftsListComponent,
- SiteMapComponent, ChangelogComponent, ContributionComponent, ReusesListComponent, ReuseDetailComponent,
-} from './components';
-import { CMSPostDetailComponent } from './components/cms-post-detail/cms-post-detail.component';
-import { PostDetailResolver } from './resolvers/post-detail.resolver';
+import { RouterModule, Routes } from '@angular/router';
import { AppRoutes } from '../routes';
+import { ChangelogComponent, CMSDraftsListComponent, CMSPageComponent, ContributionComponent, HomeComponent, OrganizationsComponent, ReuseDetailComponent, ReusesListComponent, SiteMapComponent } from './components';
+import { CMSPostDetailComponent } from './components/cms-post-detail/cms-post-detail.component';
import { CreditsComponent } from './components/credits/credits.component';
-import { ReusesActivatedGuard, CreditsActivatedGuard, PartnersActivatedGuard, EditorialisationGuards } from './guards';
+import { CreditsActivatedGuard, EditorialisationGuards, PartnersActivatedGuard, ReusesActivatedGuard } from './guards';
+import { PostDetailResolver } from './resolvers/post-detail.resolver';
export const routes: Routes = [
{
@@ -42,14 +39,14 @@ export const routes: Routes = [
},
canActivate: [PartnersActivatedGuard],
},
- {
- path: AppRoutes.accessibility.uri,
- component: CMSPageComponent,
- data: {
- title: AppRoutes.accessibility.title,
- uri: AppRoutes.accessibility.uri,
- },
- },
+ // {
+ // path: AppRoutes.accessibility.uri,
+ // component: CMSPageComponent,
+ // data: {
+ // title: AppRoutes.accessibility.title,
+ // uri: AppRoutes.accessibility.uri,
+ // },
+ // },
{
path: AppRoutes.siteMap.uri,
component: SiteMapComponent,
@@ -135,15 +132,6 @@ export const routes: Routes = [
title: AppRoutes.drafts.title,
},
},
- {
- path: AppRoutes.beta.uri,
- component: CMSPageComponent,
- data: {
- title: AppRoutes.beta.title,
- uri: AppRoutes.beta.uri,
- hasBetaStyle: true,
- },
- },
{
path: AppRoutes.contribution.uri,
component: ContributionComponent,
diff --git a/src/app/editorialisation/services/reuses.service.ts b/src/app/editorialisation/services/reuses.service.ts
index 74f7a4b12f1cb5c36e04914a433161f6850a55d1..534cbb320fb878c8a2a7e8ceef38344f1b7a0155 100644
--- a/src/app/editorialisation/services/reuses.service.ts
+++ b/src/app/editorialisation/services/reuses.service.ts
@@ -1,8 +1,8 @@
-import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
-import { IReuse, Reuse } from '../models';
+import { Injectable } from '@angular/core';
import { map } from 'rxjs/operators';
import { APP_CONFIG } from '../../core/services/app-config.service';
+import { IReuse, Reuse } from '../models';
@Injectable()
export class ReusesService {
@@ -12,19 +12,23 @@ export class ReusesService {
) { }
getReuses() {
- return this._httpClient.get<IReuse[]>(APP_CONFIG.backendUrls.reuses, { withCredentials: true }).pipe(
+ return this._httpClient.get<IReuse[]>(`${APP_CONFIG.backendUrls.reuses}/reuses`, { withCredentials: true }).pipe(
map((reusesBack) => {
- const reuses = [];
- reusesBack.forEach((reuse) => {
- reuses.push(new Reuse(reuse));
- });
- return reuses;
+ return reusesBack.map(reuse => new Reuse(reuse));
}));
}
getReuse(id: string) {
- return this._httpClient.get<IReuse>(`${APP_CONFIG.backendUrls.reuses}/${id}`, { withCredentials: true }).pipe(
+ return this._httpClient.get<IReuse>(`${APP_CONFIG.backendUrls.reuses}/reuses/${id}`, { withCredentials: true }).pipe(
map(reuse => new Reuse(reuse)),
);
}
+
+ getDataSetReuses(slug : string) {
+ return this._httpClient.get<IReuse[]>(`${APP_CONFIG.backendUrls.reuses}/datasets/${slug}/reuses`, { withCredentials: true }).pipe(
+ map((reusesBack) => {
+ return reusesBack.map(reuse => new Reuse(reuse));
+ }),
+ );
+ }
}
diff --git a/src/app/elasticsearch/models/elasticsearch-options.model.ts b/src/app/elasticsearch/models/elasticsearch-options.model.ts
index be54ea55cfd3c7434e2dc152f5fe66bd104abf3a..26149a6db9af943a6cb08d2cc663e18db7d6ce7a 100644
--- a/src/app/elasticsearch/models/elasticsearch-options.model.ts
+++ b/src/app/elasticsearch/models/elasticsearch-options.model.ts
@@ -14,6 +14,7 @@ export interface IPostsESOptions {
sortDate?: boolean;
includeStaticContent?: boolean;
featured?: boolean;
+ relatedDatasetSlug?: string;
}
export interface IScope {
@@ -134,6 +135,29 @@ export class ElasticsearchOptions {
];
}
+ setElasticsearchOptions(data: IElasticsearchOptions) {
+ this.from = (data && data.from != null) ? data.from : 0;
+ this._pageSize = (data && data.pageSize != null) ? data.pageSize : 5;
+ this._pageIndex = (data && data.pageIndex != null) ? data.pageIndex : 0;
+ this._searchString = (data && data.searchString != null) ? data.searchString : '';
+ this.shouldAggregateResultCount = true;
+ this.shouldAggregateFilters = true;
+ this.fromAutocompletion = false;
+ this.scope = (data.scope) ? data.scope : scopesResearch.all;
+ this.otherLicenceAggregations = [];
+ this.useCache = (data && data.useCache != null) ? data.useCache : true;
+
+ // Need to be done in order to avoid object reference copy
+ this._sortOptions = {
+ value: 'relevance',
+ order: 'desc',
+ };
+ if (data && data.sortOptions != null) {
+ this._sortOptions.value = data.sortOptions.value;
+ this._sortOptions.order = data.sortOptions.order;
+ }
+ }
+
// Known licences
get knownLicences() {
return ['Licence Ouverte', 'Licence ODbL', 'Licence de réutilisation des données d\'intérêt général'];
diff --git a/src/app/elasticsearch/models/filter.model.ts b/src/app/elasticsearch/models/filter.model.ts
index 63bfa4a9af3100170a0d879c33ca282c748ebeb9..64f69438508e037704d68b0b7dc2f1dfec0e7423 100644
--- a/src/app/elasticsearch/models/filter.model.ts
+++ b/src/app/elasticsearch/models/filter.model.ts
@@ -13,6 +13,7 @@ export class Aggregation {
'doc_count': number;
'count_per_metadata': number;
isActive: boolean;
+ troncatedKey: string; // Used for url parameters, without special characters
troncatedLabel: string;
subAggregations?: Aggregation[];
parentAggregation?: Aggregation;
@@ -20,6 +21,7 @@ export class Aggregation {
type: string;
constructor(aggBucket: IAggregationBucket) {
+ this.troncatedKey = this.removeSpecialCharacters(aggBucket.key);
this.key = aggBucket.key;
this.doc_count = aggBucket.doc_count;
this.count_per_metadata = aggBucket.count_per_metadata;
@@ -34,7 +36,7 @@ export class Aggregation {
} else if (geosource.updateFrequencies[this.key]) {
this.label = geosource.updateFrequencies[this.key];
} else {
- this.label = this.key;
+ this.label = aggBucket.key;
}
// The label display needs some treatment if too long or if have special pattern:
@@ -69,6 +71,11 @@ export class Aggregation {
}
+ private removeSpecialCharacters(key: string) {
+ // return (typeof key === 'string') ? key.replace(/[^a-zA-Z ]/g, '') : key;
+ return (typeof key === 'string') ? key.replace(/[!@,#$%^&*]/g, '') : key;
+ }
+
findInSubAggregations(key: string) {
const index = this.subAggregations.findIndex(el => el.key === key);
return (index) ? this.subAggregations[index] : null;
@@ -115,6 +122,7 @@ export class Filter {
findInAggregationsAndSubAggregations(key: string, aggregationParentKey = '') {
let aggregationFound = null;
+
this.aggregations.forEach((aggregation) => {
if (aggregation.key === key && aggregationParentKey === '') {
aggregationFound = aggregation;
@@ -133,6 +141,29 @@ export class Filter {
return aggregationFound;
}
+ setAggregationAndSubaggregation(aggregation: Aggregation, value: boolean) {
+ if (aggregation) {
+ aggregation.isActive = value;
+ if (aggregation.subAggregations.length > 0) {
+ aggregation.subAggregations.forEach((subAgg: Aggregation) => {
+ subAgg.isActive = aggregation.isActive ? true : false;
+ });
+ }
+
+ // If one subaggregation is updated:
+ // - parent aggregation becomes active if all the sub aggregations are active
+ // - parent aggregation becomes inactive if NOT all the sub aggregations are active
+ if (aggregation.parentAggregation) {
+ const parentAggregation = aggregation.parentAggregation;
+ if (parentAggregation.isAllSubAggregationsActive()) {
+ parentAggregation.isActive = true;
+ } else {
+ parentAggregation.isActive = false;
+ }
+ }
+ }
+ }
+
findActiveAggregations() {
const activeAgreggations = [];
this.aggregations.forEach((aggregation) => {
diff --git a/src/app/elasticsearch/services/elasticsearch.service.ts b/src/app/elasticsearch/services/elasticsearch.service.ts
index adcabac0f10d49110456ee1f69686070998ee570..6f3baddd045431ec0640170aebd1a19875373552 100644
--- a/src/app/elasticsearch/services/elasticsearch.service.ts
+++ b/src/app/elasticsearch/services/elasticsearch.service.ts
@@ -139,7 +139,7 @@ export class ElasticsearchService {
body['sort'] = [sort];
}
- // Here the default_field is 'data', meaning that the query
+ // Here the default_field is 'data', meaning that the query
if (options.searchString !== '') {
const searchString = this.escapeSpecialCharacters(options.searchString, options.fromAutocompletion, 'AND');
body.query.bool['must'] = [
@@ -411,7 +411,6 @@ export class ElasticsearchService {
// Filters by aggregations
let shouldExpression: Object[] = [];
- //
options.filters.forEach((filter) => {
const activeAggregations = filter.findActiveAggregations();
if (activeAggregations.length > 0) {
@@ -477,7 +476,7 @@ export class ElasticsearchService {
} else {
// Special treatment for the licences
if (filter.label === geosource.filterCategories.licences &&
- !options.knownLicences.includes(activeAgg.key)) {
+ !options.knownLicences.includes(activeAgg.label)) {
options.otherLicenceAggregations.forEach((agg) => {
shouldExpression.push({
term: {
@@ -843,6 +842,13 @@ export class ElasticsearchService {
},
};
}
+ if (options.relatedDatasetSlug) {
+ requestOptions.body.query.bool['must'] = {
+ term: {
+ 'relations.datasets.slugs.keyword': options.relatedDatasetSlug,
+ },
+ };
+ }
if (options.size) {
requestOptions.body['size'] = options.size;
diff --git a/src/app/map/components/map.component.ts b/src/app/map/components/map.component.ts
index 5aa6e8ae890ac6051bc1a8ed2806895d9dac5ff5..75473bb5c9c88723c62a50be6fb2b216b14b4539 100644
--- a/src/app/map/components/map.component.ts
+++ b/src/app/map/components/map.component.ts
@@ -2,6 +2,7 @@ import { Component, Input, OnDestroy, OnInit } from '@angular/core';
import * as mapboxgl from 'mapbox-gl';
import { Subscription } from 'rxjs';
import { geosource } from '../../../i18n/traductions';
+import { APP_CONFIG } from '../../core/services/app-config.service';
import { linkFormats } from '../../shared/models';
import { MapOptions } from '../models/map-options';
import { GeocoderService } from '../services/geocoder.service';
@@ -211,22 +212,25 @@ export class MapComponent implements OnInit, OnDestroy {
this._mapService.addLayers();
});
- this.map.on('zoomend', () => {
- if (this.map.getZoom() < 14) {
- this.displayButton3d = false;
-
- if (this.map.getLayer('3d-layer')) {
- // this.display3d = false;
- this.map.removeLayer('3d-layer');
- }
-
- } else if (this.map.getZoom() > 14) {
- this.displayButton3d = true;
- if (this.display3d) {
- this._mapService.switch3DLayer();
+ // Manage the 3d layer button only if config contains the url 3d layer
+ if (APP_CONFIG.layer3d) {
+ this.map.on('zoomend', () => {
+ if (this.map.getZoom() < 14) {
+ this.displayButton3d = false;
+
+ if (this.map.getLayer('3d-layer')) {
+ // this.display3d = false;
+ this.map.removeLayer('3d-layer');
+ }
+
+ } else if (this.map.getZoom() > 14) {
+ this.displayButton3d = true;
+ if (this.display3d) {
+ this._mapService.switch3DLayer();
+ }
}
- }
- });
+ });
+ }
}
}
diff --git a/src/app/map/services/map.service.ts b/src/app/map/services/map.service.ts
index 52fb9a57304578a12b1fe25ba29668e8972b9947..77ad3ec6bc160bfded5f9d65313c3e75e514e113 100644
--- a/src/app/map/services/map.service.ts
+++ b/src/app/map/services/map.service.ts
@@ -118,16 +118,16 @@ export class MapService {
this.addWMSLayer();
// Add the 3d source. Constructed with MVT tiles from the 'fpc_fond_plan_communaut.fpctoit' dataset
- const domain = this.mapOptions.vectorService.url.split('wfs')[1];
- const url = `${this.mapOptions.mvtUrl}${domain}?LAYERS=
-fpc_fond_plan_communaut.fpctoit&map.imagetype=mvt&tilemode=gmap&tile={x}+{y}+{z}&mode=tile`;
- this._map.addSource('3d-source', {
- type: 'vector',
- tiles: [url],
- });
+ if (APP_CONFIG.layer3d) {
+ const url = APP_CONFIG.layer3d.url;
+ this._map.addSource('3d-source', {
+ type: 'vector',
+ tiles: [url],
+ });
+ }
// Add the data layer only if it comes from the Lyon Metropole
- if (this.mapOptions.rasterService.url.includes(`${APP_CONFIG.backendUrls.proxyMap}/wms`)) {
+ if (this.mapOptions.rasterService.url.includes(`${APP_CONFIG.backendUrls.proxyQuery}/map/wms`)) {
// There is two ways to add tha data layers: from a geojson or from a MVT url
if (!this.mapOptions.isMVT) {
if (this.mapOptions.geojson) {
@@ -170,7 +170,7 @@ fpc_fond_plan_communaut.fpctoit&map.imagetype=mvt&tilemode=gmap&tile={x}+{y}+{z}
this._map.addSource('raster-tiles-ign', {
type: 'raster',
tiles: [
- `${APP_CONFIG.backendUrls.proxyMap}/ign?bbox={bbox-epsg-3857}&format=image/png&service=WMS&version=1.1.1` +
+ `${APP_CONFIG.backendUrls.proxyQuery}/map/ign?bbox={bbox-epsg-3857}&format=image/png&service=WMS&version=1.1.1` +
'&request=GetMap&srs=EPSG:3857&width=512&height=512&transparent=true&layers=ORTHOIMAGERY.ORTHOPHOTOS.BDORTHO&styles=normal',
],
maxzoom: 21,
@@ -519,7 +519,7 @@ fpc_fond_plan_communaut.fpctoit&map.imagetype=mvt&tilemode=gmap&tile={x}+{y}+{z}
}
switch3DLayer() {
- if (!this._map.getLayer('3d-layer')) {
+ if (!this._map.getLayer('3d-layer') && this._map.getSource('3d-source')) {
this._map.addLayer(
{
diff --git a/src/app/routes.ts b/src/app/routes.ts
index fbb9825b40606099cbadd75032e3688883483722..c5430b442de92934bd5425a55456169a606d992a 100644
--- a/src/app/routes.ts
+++ b/src/app/routes.ts
@@ -119,13 +119,13 @@ export const AppRoutes = {
en: 'Beginners',
},
},
- accessibility: {
- uri: 'accessibilite',
- title: {
- fr: 'Accessibilité',
- en: 'Accessibility',
- },
- },
+ // accessibility: {
+ // uri: 'accessibilite',
+ // title: {
+ // fr: 'Accessibilité',
+ // en: 'Accessibility',
+ // },
+ // },
contact: {
uri: 'contact',
title: {
@@ -224,13 +224,6 @@ export const AppRoutes = {
en: 'Downloads',
},
},
- beta: {
- uri: 'pourquoi-une-version-beta',
- title: {
- fr: 'Pourquoi une version bêta ?',
- en: 'Why a beta version?',
- },
- },
contribution: {
uri: 'contribution',
title: {
@@ -245,6 +238,13 @@ export const AppRoutes = {
en: 'Reuses',
},
},
+ dataReuses: {
+ uri: 'reutilisations',
+ title: {
+ fr: 'Réutilisations',
+ en: 'Reuses',
+ },
+ },
error: {
uri: 'erreur',
title: {
diff --git a/src/app/shared/components/basic-tabs/basic-tabs.component.scss b/src/app/shared/components/basic-tabs/basic-tabs.component.scss
index 79afc83d85479be8cdf36c079fc5f3bf332930c3..490f11d3549f898304e61787454d588d42480f38 100644
--- a/src/app/shared/components/basic-tabs/basic-tabs.component.scss
+++ b/src/app/shared/components/basic-tabs/basic-tabs.component.scss
@@ -6,12 +6,13 @@
align-content: stretch;
flex-wrap: wrap;
border-bottom: 1px solid $grey-super-light-color;
+ margin-top:1.5rem;
li {
display: flex;
align-items: center;
padding-right: 2rem;
- padding-bottom: 0.4rem;
+ padding-bottom: 0.8rem;
padding-top: 0.4rem;
cursor: pointer;
position: relative;
diff --git a/src/app/shared/components/cgu-modal/cgu-modal.component.html b/src/app/shared/components/cgu-modal/cgu-modal.component.html
index 58d6767026c43193c44b5b9c503cf8f78edc3a9a..bc5b24317bae9e505bb7be51f60fe8c39227f19a 100644
--- a/src/app/shared/components/cgu-modal/cgu-modal.component.html
+++ b/src/app/shared/components/cgu-modal/cgu-modal.component.html
@@ -7,14 +7,18 @@
</header>
<section class="modal-card-body" (scroll)="modalBodyScrolled($event)">
<p class="warning-message" i18n="@@cgu.modal.warningMessage">The acceptance of the terms of use is necessary in
- order to access the datasets resources</p>
+ order to access the resources of the datasets</p>
<div class="ghost-style" [innerHTML]="safePageContent"></div>
</section>
<footer class="modal-card-foot has-text-right">
- <button class="button btn-red-text" (click)="closeCguModal()" i18n="@@cgu.modal.refuse">Refuse</button>
- <button class="button button-gl" i18n="@@cgu.modal.accept" (click)="acceptCgu()"
- [disabled]="!isCguScrolledEntirely">Accept</button>
+ <p [ngClass]="{'shakeAnimation' : shakeAnimation }" i18n="@@cgu.modal.acceptation" class="acceptation">You have to
+ read the entire Terms of Use before you can accept it.</p>
+ <div class="buttons">
+ <button class="button btn-red-text" (click)="closeCguModal()" i18n="@@cgu.modal.refuse">Refuse</button>
+ <button class="button button-gl" i18n="@@cgu.modal.accept" (click)="acceptCgu()"
+ [ngClass]="{'orange-button' : !isCguScrolledEntirely }">Accept</button>
+ </div>
</footer>
</div>
</div>
\ No newline at end of file
diff --git a/src/app/shared/components/cgu-modal/cgu-modal.component.scss b/src/app/shared/components/cgu-modal/cgu-modal.component.scss
index ecc41f093e0f425b6114edca30bebac8aaeca65f..71a610602efcaa9267d299d96336fc5154f3fec0 100644
--- a/src/app/shared/components/cgu-modal/cgu-modal.component.scss
+++ b/src/app/shared/components/cgu-modal/cgu-modal.component.scss
@@ -5,6 +5,7 @@
position: absolute;
max-width: 100%;
z-index: 1;
+ overflow-y: hidden;
}
.modal.is-active {
@@ -19,7 +20,7 @@
@media screen and (min-width: $tablet) {
width: $tablet;
- margin: 72px auto 0 auto;
+ margin: 30px auto 0 auto;
padding: 0;
}
}
@@ -60,3 +61,52 @@
font-size: 1.125rem;
font-weight: bold;
}
+footer{
+ flex-direction: column;
+ padding-top:15px;
+ .acceptation{
+ align-self:flex-end;
+ font-weight: 600;
+ font-size: 1rem;
+ color:$orange-color;
+ margin-bottom: 0.5rem;
+ position: relative;
+ @media screen and(max-width:$tablet){
+ text-align: center;
+ }
+ }
+ .buttons{
+ align-self:flex-end;
+ @media screen and(max-width:$tablet){
+ display: flex;
+ width:100%;
+ }
+ .button{
+ margin-bottom:0;
+ @media screen and(max-width:$tablet){
+ width:48%;
+ }
+ }
+ .orange-button{
+ background: $orange-color;
+ }
+ }
+ .shakeAnimation{
+ animation: shake linear;
+ animation-iteration-count: 3;
+ animation-duration: 100ms;
+ }
+ @keyframes shake{
+ 0%{
+ top:0px;
+ }
+ 50%{
+ top:-5px;
+ }
+ 100%{
+ top:0px;
+ }
+ }
+}
+
+
diff --git a/src/app/shared/components/cgu-modal/cgu-modal.component.ts b/src/app/shared/components/cgu-modal/cgu-modal.component.ts
index 9d40f5252796e3bfdaea3bcd82746f4d98680b82..0bb2bb1407db54c62591cac76eefb8778d547c68 100644
--- a/src/app/shared/components/cgu-modal/cgu-modal.component.ts
+++ b/src/app/shared/components/cgu-modal/cgu-modal.component.ts
@@ -19,6 +19,7 @@ export class CguModalComponent implements OnInit {
cguModalIsOpened: boolean;
safePageContent: SafeHtml;
isCguScrolledEntirely = false;
+ shakeAnimation = false;
@Output() cguAccepted = new EventEmitter();
@@ -53,6 +54,7 @@ export class CguModalComponent implements OnInit {
acceptCgu() {
// The div containing the cgu must be scrolled to the bottom in order to be able to accept the cgu
if (this.isCguScrolledEntirely) {
+ this.shakeAnimation = false;
const expDate = new Date(new Date().setFullYear(new Date().getFullYear() + 1));
this._cookieService.set(
environment.cguAcceptedCookieName, // Key
@@ -65,12 +67,18 @@ export class CguModalComponent implements OnInit {
);
this.cguModalIsOpened = false;
this.cguAccepted.next();
+ } else {
+ this.shakeAnimation = true;
+ // reset animation
+ setTimeout(() => {
+ this.shakeAnimation = false;
+ }, 300);
}
}
modalBodyScrolled(event) {
const target = event.target || event.srcElement;
- if (target.scrollTop + target.offsetHeight >= target.scrollHeight) {
+ if (Math.ceil(target.scrollTop) + target.offsetHeight >= target.scrollHeight) {
this.isCguScrolledEntirely = true;
}
}
diff --git a/src/app/shared/components/download-button/download-button.component.ts b/src/app/shared/components/download-button/download-button.component.ts
index e6347512e1498d46f5942910240975782ad437e6..0672bce39f2c8ab90f84473a3412cbf76f29dc25 100644
--- a/src/app/shared/components/download-button/download-button.component.ts
+++ b/src/app/shared/components/download-button/download-button.component.ts
@@ -1,5 +1,7 @@
-import { Component, HostListener, Input, OnInit } from '@angular/core';
-import { saveAs } from 'file-saver';
+import { HttpClient, HttpResponse } from '@angular/common/http';
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
import { geosource, notificationMessages } from '../../../../i18n/traductions';
import { NotificationService } from '../../../core/services';
@@ -8,84 +10,73 @@ import { NotificationService } from '../../../core/services';
templateUrl: './download-button.component.html',
styleUrls: ['./download-button.component.scss'],
})
-export class DownloadButtonComponent implements OnInit {
+export class DownloadButtonComponent implements OnInit, OnDestroy {
- loading: boolean = false;
@Input() url: string;
@Input() fileName: string;
- // Event fired when one tab is closed or refreshed. We abort the on-going request
- @HostListener('window:beforeunload')
- abortCurrentRequest() {
- this.controller.abort();
- }
-
- // Variable to manage the icon display for each resource. Possible values:
- // - 'loading': display the spinner
- // - 'cancel': display the cross to abort the on-going request
- // - null: display the download icon
- signal: AbortSignal;
- controller: AbortController;
- timeOut: number;
-
+ loading: boolean = false;
abortMessage: string = geosource.downloads.abort;
downloadMessage: string = geosource.downloads.download;
+ // Use this subject in order to be able to cancel the http request at any time
+ private ngUnsubscribe: Subject<void> = new Subject<void>();
+
constructor(
private _notificationService: NotificationService,
+ private _http: HttpClient,
) { }
- ngOnInit() {
- this.controller = new AbortController();
- this.signal = this.controller.signal;
- }
+ ngOnInit() { }
- // Temporary: put back the old download method before we can use a proxy to pass credentials
download() {
- saveAs(this.url, this.fileName);
- this._notificationService.notify(
- {
- type: 'success',
- message: notificationMessages.general.startDownload,
+ this.loading = true;
+ this._http.get<HttpResponse<Blob>>(this.url, { responseType: 'blob', observe: 'response', withCredentials: true } as Object).pipe(
+ takeUntil(this.ngUnsubscribe),
+ ).subscribe(
+ (response) => {
+ // Create a temporary link and click on it to launch the blob download
+ const url = window.URL.createObjectURL(response.body);
+ const a = document.createElement('a');
+ a.href = url;
+ a.rel = 'noopener';
+ a.download = this.fileName;
+ document.body.appendChild(a); // append the element to the dom -> otherwise it will not work in firefox
+ a.click();
+ a.remove();
+ this.loading = false;
+ },
+ (err) => {
+ let message = notificationMessages.general.failedDownloadFile;
+
+ if (err && err.status === 401) {
+
+ message = notificationMessages.general.failedDownloadFileUnauthenticated;
+ }
+
+ if (err && err.status === 403) {
+ message = notificationMessages.general.failedDownloadFileUnauthorized;
+ }
+
+ this._notificationService.notify(
+ {
+ message,
+ type: 'error',
+ },
+ );
+
+ this.abortDownload();
},
);
}
- // download() {
- // this.loading = true;
- // fetch(this.url, { signal: this.signal }).then((response) => {
- // // To allow the download, get the repsons as a blob
- // return response.blob();
- // })
- // .then((blob) => {
- // // Create a temporary link and click on it to launch the blob download
- // const url = window.URL.createObjectURL(blob);
- // const a = document.createElement('a');
- // a.href = url;
- // a.rel = 'noopener';
- // a.download = this.fileName;
- // document.body.appendChild(a); // append the element to the dom -> otherwise it will not work in firefox
- // a.click();
- // a.remove();
- // this.loading = false;
- // clearTimeout(this.timeOut); // If the download is under 2000ms, we clear the ongoing timeout
- // })
- // .catch((err) => {
- // console.log('The fetch could not succeeded', err.message);
- // });
- // }
-
abortDownload() {
-
- this.controller.abort();
+ this.ngUnsubscribe.next();
this.loading = false;
-
- // Create a new for a new DOM Request
- this.controller = new AbortController();
- this.signal = this.controller.signal;
}
ngOnDestroy() {
- this.controller.abort();
+ this.ngUnsubscribe.next();
+ this.ngUnsubscribe.complete();
}
}
diff --git a/src/app/shared/components/page-header/page-header.component.scss b/src/app/shared/components/page-header/page-header.component.scss
index 16a5057f0ffb63030c5f7cd063470bd45befb764..4d9181024329beacc35daf2fae7c6ad5e9954205 100644
--- a/src/app/shared/components/page-header/page-header.component.scss
+++ b/src/app/shared/components/page-header/page-header.component.scss
@@ -4,7 +4,7 @@
.page-header {
display: flex;
padding-top: 1.875rem;
- padding-bottom: 1rem;
+ padding-bottom: 1.875rem;
position: relative;
.title-item {
@@ -36,7 +36,7 @@
display: none;
&.has-beta-style {
- border-right-color: $yellow-dd-color;
+ border-right-color: $tomato-color;
}
@media screen and (min-width: $desktop) {
diff --git a/src/app/shared/components/page-header/page-header.component.ts b/src/app/shared/components/page-header/page-header.component.ts
index 58e020331c6e3e157769f21ace7fda2fb367b4f0..994599fd5fee2277fd1f1361b89ef3042f5c43ec 100644
--- a/src/app/shared/components/page-header/page-header.component.ts
+++ b/src/app/shared/components/page-header/page-header.component.ts
@@ -7,7 +7,6 @@ import { APP_CONFIG } from '../../../core/services/app-config.service';
import { AppRoutes } from '../../../routes';
import { IPageHeaderInfo } from '../../models';
-
@Component({
selector: 'app-page-header',
templateUrl: './page-header.component.html',
diff --git a/src/app/shared/models/dataset.model.ts b/src/app/shared/models/dataset.model.ts
index e5ca390baf025f4982fffd6d925391f7009f7831..7d4bfa3259272035ac8e99224b7a8b6d3578af92 100644
--- a/src/app/shared/models/dataset.model.ts
+++ b/src/app/shared/models/dataset.model.ts
@@ -1,3 +1,4 @@
+import { CMSContent, Reuse } from '../../editorialisation/models';
import { Data } from './data.model';
import { EditorialMetadata, IEditorialMetadata } from './editorial-metadata.model';
import { Highlights } from './highlights.model';
@@ -12,6 +13,8 @@ export interface IDataset {
data?: Data[];
fields: IDatasetFields;
editorialMetadata?: IEditorialMetadata;
+ reuses?: Reuse[];
+ relatedNews?: CMSContent[];
}
export interface IDatasetFields {
@@ -29,6 +32,8 @@ export class Dataset {
fields: IDatasetFields;
nbViews: number;
editorialMetadata: EditorialMetadata;
+ reuses: Reuse[];
+ relatedNews?: CMSContent[];
constructor(data?: IDataset) {
if (data) {
@@ -40,6 +45,8 @@ export class Dataset {
this.data = data.data ? data.data : [];
this.totalData = data.totalData ? data.totalData : 0;
this.editorialMetadata = new EditorialMetadata(data.editorialMetadata);
+ this.reuses = data.reuses ? data.reuses : [];
+ this.relatedNews = data.relatedNews ? data.relatedNews : [];
} else {
this.uuid = null;
this.slug = null;
@@ -51,6 +58,8 @@ export class Dataset {
this.data = [];
this.totalData = 0;
this.editorialMetadata = new EditorialMetadata();
+ this.reuses = [];
+ this.relatedNews = [];
}
}
diff --git a/src/app/shared/models/index.ts b/src/app/shared/models/index.ts
index a8077c3fc086713fcce66d91fd9d0c253322ea5d..e2e9fd0c7d92a3321b4c12a71bb7e47c382c2aa3 100644
--- a/src/app/shared/models/index.ts
+++ b/src/app/shared/models/index.ts
@@ -5,6 +5,6 @@ export { Dataset, IDataset, IDatasetFields } from './dataset.model';
export { EditorialMetadata, IEditorialMetadata } from './editorial-metadata.model';
export { Highlights } from './highlights.model';
// tslint:disable-next-line: max-line-length
-export { IMetadata, IMetadataLink, IParentDataset, IResponsibleParty, linkFormats, Metadata, typesMetadata } from './metadata.model';
+export { IMetadata, IMetadataLink, IParentDataset, IResponsibleParty, License, linkFormats, Metadata, typesMetadata } from './metadata.model';
export { PaginatorOptions } from './paginator-options.model';
diff --git a/src/app/shared/models/metadata.model.ts b/src/app/shared/models/metadata.model.ts
index 8824c361de4926b9ba5dd77093959d86ae4f1dc7..78003e8df5f68eb3ae1572647729360221749867 100644
--- a/src/app/shared/models/metadata.model.ts
+++ b/src/app/shared/models/metadata.model.ts
@@ -1,4 +1,5 @@
import { geosource } from '../../../i18n/traductions';
+import { APP_CONFIG } from '../../core/services/app-config.service';
export interface IMetadata {
'dataset_id'?: string;
@@ -50,6 +51,7 @@ interface IMetadataGeonet {
}
export interface IResponsibleParty {
+ logo: string;
role: string;
organisationName: string;
individualName: string;
@@ -116,6 +118,31 @@ export interface IParentDataset {
imageUrl?: string;
}
+export interface ILicense {
+ matchingKeys?: string[];
+ nameFr?: string;
+ nameEn?: string;
+ acronymFr?: string;
+ acronymEn?: string;
+ url?: string;
+}
+
+export class License {
+ nameFr: string;
+ nameEn: string;
+ acronymFr: string;
+ acronymEn: string;
+ url: string;
+
+ constructor(data: ILicense) {
+ this.nameFr = data && data.nameFr ? data.nameFr : null;
+ this.nameEn = data && data.nameEn ? data.nameEn : null;
+ this.acronymFr = data && data.acronymFr ? data.acronymFr : null;
+ this.acronymEn = data && data.acronymEn ? data.acronymEn : null;
+ this.url = data && data.url ? data.url : null;
+ }
+}
+
export class Metadata {
'dataset_id'?: string;
'dataset_index'?: string;
@@ -130,7 +157,7 @@ export class Metadata {
'topic_category': string[];
highlight: any;
legalConstraints: string[];
- license: string;
+ license: License;
rights: string[];
'total_documents': number;
lineage: string;
@@ -189,7 +216,7 @@ export class Metadata {
this.topic_category = data.topic_category;
this.highlight = data.highlight;
this.legalConstraints = data.legalConstraints;
- this.license = data.license;
+ this.license = this.setLicense(data.license);
this.rights = data.rights;
this.total_documents = data.total_documents;
this.lineage = data.lineage;
@@ -239,4 +266,15 @@ export class Metadata {
return category.labelCategory;
});
}
+
+ private setLicense(licenseLabel): License {
+
+ const matchingLicense = APP_CONFIG.licenses.find(licence => licence.matchingKeys.find(item => licenseLabel.includes(item)));
+
+ const license = matchingLicense ? new License(matchingLicense) : new License(
+ { nameFr: licenseLabel, nameEn: licenseLabel, acronymFr: licenseLabel, acronymEn: licenseLabel }
+ );
+
+ return license;
+ }
}
diff --git a/src/app/shared/variables.ts b/src/app/shared/variables.ts
index 69a3e772872f097876596f02843676b353a576da..1ce8326326ffc7ccea049107c0e095010992f7e5 100644
--- a/src/app/shared/variables.ts
+++ b/src/app/shared/variables.ts
@@ -35,4 +35,4 @@ export const scopesResearch = {
elasticType: ['page'],
errorItem: geosource.errorItem.pages,
},
-};
\ No newline at end of file
+};
diff --git a/src/app/user/components/access-management/access-management.component.html b/src/app/user/components/access-management/access-management.component.html
index 36c74da0a0e6b0c76df03924024e96ccff069976..d96fa1762e97b83eb132cf5c0676ed46f6170291 100644
--- a/src/app/user/components/access-management/access-management.component.html
+++ b/src/app/user/components/access-management/access-management.component.html
@@ -1,7 +1,8 @@
-<div class="page-container has-padding has-white-background is-fullwidth">
+<div class="main-container">
+ <div class="header-section">
<app-page-header [pageInfo]="pageHeaderInfo" [customGoToPreviousPage]="goToPreviousPage"></app-page-header>
<app-basic-tabs class="tabs" [tabs]="tabs"></app-basic-tabs>
-
+</div>
<router-outlet></router-outlet>
</div>
\ No newline at end of file
diff --git a/src/app/user/components/access-management/access-management.component.scss b/src/app/user/components/access-management/access-management.component.scss
index baf7d5297bee4fb04f0442360ab97603a273ffc6..555952d08f4c2571807e4495e995e70e8bf9c2f8 100644
--- a/src/app/user/components/access-management/access-management.component.scss
+++ b/src/app/user/components/access-management/access-management.component.scss
@@ -1,3 +1,13 @@
.tabs {
margin-bottom: 1rem;
}
+
+.main-container{
+ margin-top:0.5rem;
+}
+
+.header-section{
+ background-color: white;
+ padding:0 2rem;
+}
+
diff --git a/src/app/user/components/access-management/available-data/available-data.component.html b/src/app/user/components/access-management/available-data/available-data.component.html
index 504a50e73c8aaebbc8221258a4efccf71d049e1b..ccccf280979ef64796c98013278aee0fc7ca0278 100644
--- a/src/app/user/components/access-management/available-data/available-data.component.html
+++ b/src/app/user/components/access-management/available-data/available-data.component.html
@@ -6,12 +6,12 @@
<div class="column is-4">
<span class="column-name">Service</span>
</div>
- <div class="column is-2 has-text-centered">
+ <div class="column is-2 has-text-right">
</div>
</div>
<div class="requestable-services-content">
<ng-container *ngFor="let resource of requestableResources; let index = index; let odd = odd">
- <div class="columns is-mobile is-marginless" [ngClass]="{'is-odd': odd === true}" *ngIf="resource.datasetTitle">
+ <div [ngClass]="{'is-open': isRowOpened(index, openedRow)}" class="columns is-mobile is-marginless" *ngIf="resource.datasetTitle">
<div class="column is-2-touch is-1-desktop vcenter-column has-text-centered is-clickable"
(click)="toggleRow(index, openedRow)">
<span [ngClass]="{'is-open': isRowOpened(index, openedRow)}">
@@ -35,7 +35,7 @@
<div class="column is-hidden-touch is-4-desktop">
<span>{{ getResourceServices(resource) }}</span>
</div>
- <div class="column is-3-touch is-2-desktop vcenter-column has-text-centered">
+ <div class="column is-3-touch is-2-desktop vcenter-column has-text-right">
<div class="field">
<input class="is-checkradio is-small" [id]="resource.datasetId + '_all'" type="checkbox"
[name]="resource.datasetName + '_all'" (click)="toggleResource(resource.datasetId, requestableResources)"
@@ -46,7 +46,7 @@
</div>
</div>
- <div class="columns is-marginless is-multiline" [ngClass]="{'is-odd': odd === true}"
+ <div class="columns is-marginless is-multiline service-details" [ngClass]="{'is-open': isRowOpened(index, openedRow)}"
*ngIf="isRowOpened(index, openedRow)">
<div class="column is-12 is-paddingless" *ngFor="let service of resource.services;">
<div class="columns is-marginless is-mobile services-columns">
@@ -54,7 +54,7 @@
<span>{{ service.name }}</span>
</div>
<div class="column is-hidden-touch is-4-desktop"></div>
- <div class="column is-3-touch is-2-desktop has-text-centered vcenter-column">
+ <div class="column is-3-touch is-2-desktop has-text-right vcenter-column">
<div class="field">
<input class="is-checkradio is-small" [id]="resource.datasetId + '_' + service.id" type="checkbox"
[name]="resource.datasetName + '_' + service.name" [(ngModel)]="service.selected"
@@ -69,7 +69,7 @@
</div>
</div>
<div class="action-button-wrapper">
- <button type="button" class="button btn-blue-text" [ngClass]="{'is-loading': isLoading}"
+ <button type="button" class="button button-gl" [ngClass]="{'is-loading': isLoading}"
[disabled]="selectedResources(requestableResources).length <= 0 || isLoading" (click)="requestAccess()"
i18n="@@userService.sendRequest">
Send my request
diff --git a/src/app/user/components/access-management/available-data/available-data.component.scss b/src/app/user/components/access-management/available-data/available-data.component.scss
index 4dffa623b8bd5385a33e96274b04d81c9f8d1d38..8a312a0d7ed670e70f7183f26fba1d562cd121e0 100644
--- a/src/app/user/components/access-management/available-data/available-data.component.scss
+++ b/src/app/user/components/access-management/available-data/available-data.component.scss
@@ -63,17 +63,38 @@ a {
overflow-y: auto;
.columns {
- align-items: stretch;
+ align-items: center;
+ padding: 0.5rem;
+
+ &:not(:last-of-type) {
+ border-bottom: 1px solid $grey-background-color;
+ }
+ }
+
+ .columns.service-details {
+ padding-top: 0;
+ }
+
+ .services-columns {
+ border: none;
+ padding: 0rem;
}
}
.requestable-services-wrapper {
- border: 1px solid $grey-super-light-color;
margin-top: 1rem;
+ margin: 2rem;
+ padding: 2rem 0;
+ background: white;
+ box-shadow: 0px 6px 12px rgba(129, 128, 128, 0.1);
+ border-radius: 8px;
+
+ .is-open {
+ background-color: $table-selected-item-color;
+ }
}
.requestable-services-header {
- border-bottom: 1px solid $grey-super-light-color;
display: none;
@media screen and (min-width: $tablet) {
@@ -81,29 +102,12 @@ a {
}
}
-.columns.services-columns .column {
- border-top: 1px solid $grey-background-color;
-}
-
-.is-odd {
- background-color: $grey-background-color;
- .requestable-services-wrapper {
- border: 1px solid white;
- }
-
- .requestable-services-header {
- border-bottom: 1px solid white;
- }
-
- .columns.services-columns .column {
- border-top: 1px solid white;
- }
-}
.action-button-wrapper {
display: flex;
justify-content: flex-end;
- margin-top: 1rem;
+ margin: 1rem 2rem 4rem 0;
+
&:not(:last-child) {
margin-bottom: 1rem;
diff --git a/src/app/user/components/access-management/user-services/user-services.component.html b/src/app/user/components/access-management/user-services/user-services.component.html
index 1395806d21ce63a2a4deb7aa66f79fbdae1f1663..88f2240d714c5f67ea0eec1b3b2dc43add9b0263 100644
--- a/src/app/user/components/access-management/user-services/user-services.component.html
+++ b/src/app/user/components/access-management/user-services/user-services.component.html
@@ -13,8 +13,8 @@
</div>
<div class="user-services-content">
<ng-container *ngFor="let resource of userResources; let index = index; let odd = odd">
- <div class="columns is-mobile is-marginless" [ngClass]="{'is-odd': odd === true}">
- <div class="column is-1 is-clickable has-text-centered" (click)="toggleRow(index, userResourcesOpenedRow)">
+ <div class="columns is-mobile is-marginless" [ngClass]="{'is-open': isRowOpened(index, userResourcesOpenedRow)}">
+ <div class="column is-1 is-clickable has-text-centered" (click)="toggleRow(index, userResourcesOpenedRow)">
<span [ngClass]="{'is-open': isRowOpened(index, userResourcesOpenedRow)}">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 9">
<path
@@ -52,7 +52,7 @@
</div>
</div>
- <div class="columns is-marginless is-multiline is-mobile" [ngClass]="{'is-odd': odd === true}"
+ <div class="columns is-marginless is-multiline is-mobile service-details" [ngClass]="{'is-open': isRowOpened(index, userResourcesOpenedRow)}"
*ngIf="isRowOpened(index, userResourcesOpenedRow)">
<div class="column is-12 is-paddingless" *ngFor="let service of resource.services;">
<div class="columns is-marginless is-mobile services-columns">
@@ -82,7 +82,7 @@
</div>
<div class="user-services-mobile">
<ng-container *ngFor="let resource of userResources; let index = index; let odd = odd">
- <div class="columns is-mobile is-marginless is-multiline" [ngClass]="{'is-odd': odd === true}">
+ <div class="columns is-mobile is-marginless is-multiline">
<div class="column is-2 is-clickable vcenter-column has-text-centered"
(click)="toggleRow(index, userResourcesOpenedRow)">
<span [ngClass]="{'is-open': isRowOpened(index, userResourcesOpenedRow)}">
@@ -113,7 +113,7 @@
</div>
</div>
</div>
- <div class="columns is-mobile is-marginless is-multiline" [ngClass]="{'is-odd': odd === true}"
+ <div class="columns is-mobile is-marginless is-multiline"
*ngIf="isRowOpened(index, userResourcesOpenedRow)">
<div class="column is-12 is-paddingless">
<div class="columns is-mobile is-marginless is-multiline services-columns-mobile"
@@ -150,7 +150,7 @@
Remove access
</button>
- <button type="button" class="button btn-blue-text" [ngClass]="{'is-loading': isRenewingAccess}"
+ <button type="button" class="button button-gl" [ngClass]="{'is-loading': isRenewingAccess}"
[disabled]="selectedResources(userResources).length <= 0 || isLoading" (click)="renewAccesses()"
i18n="@@userService.renewButton">
Renew access
diff --git a/src/app/user/components/access-management/user-services/user-services.component.scss b/src/app/user/components/access-management/user-services/user-services.component.scss
index 99fff39f14b6ae98060676b97dbf65b2207b6162..ea41e9fba2c1c2fcb12bb97ef46cc54bb3cf54fa 100644
--- a/src/app/user/components/access-management/user-services/user-services.component.scss
+++ b/src/app/user/components/access-management/user-services/user-services.component.scss
@@ -41,9 +41,6 @@ i {
color: $warning-color;
}
-.is-odd {
- background-color: $grey-background-color;
-}
.is-checkradio {
display: none;
@@ -92,32 +89,47 @@ i {
.user-services-over-mobile,
.user-services-mobile {
- border: 1px solid $grey-super-light-color;
- margin-top: 1rem;
+ margin:2rem;
+ padding:2rem 0;
+ background: white;
+ box-shadow: 0px 6px 12px rgba(129, 128, 128, 0.1);
+ border-radius: 8px;
+ .is-open {
+ background-color: $table-selected-item-color;
+ }
}
+
.user-services-content {
.columns {
- align-items: stretch;
- }
-}
+ align-items: center;
+ padding:0.5rem;
-.user-services-header {
- border-bottom: 1px solid $grey-super-light-color;
-}
+ &:not(:last-of-type) {
+ border-bottom: 1px solid $grey-background-color;
+ }
+ }
-.columns.services-columns .column {
- border-top: 1px solid $grey-background-color;
-}
+ .columns.service-details {
+ padding-top: 0;
+ }
-.columns.services-columns-mobile {
- border-bottom: 1px solid $grey-background-color;
+ .services-columns{
+ border:none;
+ padding:0rem;
+ }
}
.action-button-wrapper {
display: flex;
justify-content: flex-end;
- margin-top: 1rem;
+ margin: 1rem 2rem 4rem 0;
+ @media screen and(max-width:$tablet){
+ flex-direction: column;
+ align-items: center;
+ margin-bottom:4rem;
+ margin-right:0;
+ }
&:not(:last-child) {
margin-bottom: 1rem;
@@ -125,6 +137,10 @@ i {
.button:not(:first-child) {
margin-left: 1rem;
+ @media screen and(max-width:$tablet){
+ margin-left: 0;
+ margin-top:0.5rem;
+ }
}
}
diff --git a/src/app/user/components/auth/login/login.component.html b/src/app/user/components/auth/login/login.component.html
index e7f6b2baed6d1ec18de6f8026e2c2642dd6d08ef..6ade64e302340795e4e78e6a7b14f42a7969ec09 100644
--- a/src/app/user/components/auth/login/login.component.html
+++ b/src/app/user/components/auth/login/login.component.html
@@ -1,11 +1,11 @@
<div class="login-container">
-
+ <div class="header-section">
+ <app-page-header [pageInfo]="pageHeaderInfo"></app-page-header>
+ </div>
<div class="login-page">
<div class="login-page-login">
<div class="wrapper">
- <app-page-header [pageInfo]="pageHeaderInfo"></app-page-header>
-
<form [formGroup]="form" (ngSubmit)="login()">
<div class="column-title">
<span i18n="@@login.login">Log in</span>
@@ -70,20 +70,23 @@
<div class="field">
<label class="label" for="password" i18n="@@login.password">Password</label>
- <div class="control password-control">
- <input id="password" class="input" type="password" formControlName="password"
- type="{{ showPassword ? 'text' : 'password' }}" placeholder="Enter your password"
- i18n-placeholder="@@login.passwordPlaceholder"
- [ngClass]="{'has-error': fieldIsInvalid('password'), 'is-valid': fieldIsValid('password')}">
- <p class="field show-password">
- <input class="is-checkradio is-small" id="exampleCheckbox" type="checkbox" name="exampleCheckbox"
- [value]="showPassword" (change)="showPassword = !showPassword">
- <label i18n="@@login.showPassword" for="exampleCheckbox">Display password</label>
- </p>
- </div>
- <div *ngIf="fieldIsInvalid('password')" class="form-incorrect-field-message">
- <div *ngIf="password.errors['required']" i18n="@@login.passwordRequired">
- Password is required.
+ <span class="password-info">Votre mot de passe doit contenir au minimum :</span><span class="password-info has-text-weight-bold"> 6 caractères, un caractère spécial, un caractère en majuscule et un chiffre.</span>
+ <div class="password-input-wrapper">
+ <div class="control password-control">
+ <input id="password" class="input" type="password" formControlName="password"
+ type="{{ showPassword ? 'text' : 'password' }}" placeholder="Enter your password"
+ i18n-placeholder="@@login.passwordPlaceholder"
+ [ngClass]="{'has-error': fieldIsInvalid('password'), 'is-valid': fieldIsValid('password')}">
+ <p class="field show-password">
+ <input class="is-checkradio is-small" id="exampleCheckbox" type="checkbox" name="exampleCheckbox"
+ [value]="showPassword" (change)="showPassword = !showPassword">
+ <label i18n="@@login.showPassword" for="exampleCheckbox">Display password</label>
+ </p>
+ </div>
+ <div *ngIf="fieldIsInvalid('password')" class="form-incorrect-field-message">
+ <div *ngIf="password.errors['required']" i18n="@@login.passwordRequired">
+ Password is required.
+ </div>
</div>
</div>
</div>
diff --git a/src/app/user/components/auth/login/login.component.scss b/src/app/user/components/auth/login/login.component.scss
index 0ce92245c244eace803383d767e8fa468217ba73..527b41f1c3c54dea0bb550fc148a4676f1f999f7 100644
--- a/src/app/user/components/auth/login/login.component.scss
+++ b/src/app/user/components/auth/login/login.component.scss
@@ -9,19 +9,31 @@
height: 100%;
display: grid;
grid-template-columns: repeat(5, 1fr);
+
+ @media screen and (min-width: $desktop) {
+ height: calc(100% - 115px); // 115px is the height of page header
+ }
}
.login-page-login {
grid-column: 1 / 4;
- background-color: white;
- padding-top: 2rem;
+ background-color:$grey-background-color;
+ display: flex;
.wrapper {
- max-width: 500px;
display: flex;
flex-direction: column;
align-items: flex-start;
margin: auto;
+ background-color: white;
+ padding: 2rem 8rem 2rem 2rem;
+ max-width: 650px;
+ box-shadow: 0px 6px 12px rgba(129, 128, 128, 0.1);
+ border-radius: 8px;
+
+ @media screen and (max-width: $desktop) {
+ width: 100%;
+ }
}
.wrapper form {
@@ -32,7 +44,13 @@
.password-control {
display: flex;
}
-
+ .password-info{
+ font-style: italic;
+ font-size:0.85rem;
+ }
+ .password-input-wrapper {
+ margin-top:0.8rem;
+ }
.show-password {
display: flex;
margin-left: 1.5rem;
@@ -63,23 +81,27 @@
.login-page-signup {
grid-column: 4 / 6;
- padding: 1.25rem;
background-color: $grey-background-color;
display: flex;
align-items: center;
flex-direction: column;
- padding-top: 4.5rem;
+ justify-content: center;
img {
margin-bottom: 2rem;
}
+
+ @media screen and (max-width: $desktop) {
+ padding-top: 4.5rem;
+ padding-bottom: 4.5rem;
+ }
}
@media screen and (max-width: $desktop) {
.login-page-login {
grid-column: 1 / 6;
padding: 1rem;
- padding-top: 0;
+ padding-top: 4.5rem;
}
.login-page-signup {
diff --git a/src/app/user/components/auth/password-forgotten/password-forgotten.component.html b/src/app/user/components/auth/password-forgotten/password-forgotten.component.html
index 5b20f7b3dbf0be7fa5d3f7c593d67c1ddcb9b321..00b05c86bb5eee1d60c49188e985e3577196b0fd 100644
--- a/src/app/user/components/auth/password-forgotten/password-forgotten.component.html
+++ b/src/app/user/components/auth/password-forgotten/password-forgotten.component.html
@@ -1,37 +1,40 @@
-<div class="page-container has-padding has-white-background is-fullwidth">
+<div class="main-container">
+ <div class="header-section">
+ <app-page-header [pageInfo]="pageHeaderInfo"></app-page-header>
+ </div>
- <app-page-header [pageInfo]="pageHeaderInfo"></app-page-header>
- <p i18n="@@passwordForgotten.info">
- Forgot your password? Enter your email address below, we will send you the instructions to create a new one.
- </p>
- <div class="columns password-forgotten-form-container">
- <div class="column is-12-mobile is-8-tablet is-6">
- <form [formGroup]="form" (ngSubmit)="send()">
- <div class="field">
- <label class="label" for="email" i18n="@@form.email">Email</label>
- <p class="control">
- <input id="email" class="input" type="email" formControlName="email"
- [ngClass]="{'has-error': fieldIsInvalid('email'), 'is-valid': fieldIsValid('email')}">
+ <form [formGroup]="form" (ngSubmit)="send()" class="centered-form">
+ <div class="form-content">
+ <div class="columns">
+ <div class="column is-10">
+ <p i18n="@@passwordForgotten.info">
+ Forgot your password? Enter your email address below, we will send you the instructions to create a new one.
</p>
- <div class="form-incorrect-field-message" *ngIf="fieldIsInvalid('email')">
- <div *ngIf="email.errors['required']" i18n="@@form.errors.missingEmail">
- You must enter your email address.
- </div>
-
- <div *ngIf="email.errors['email']" i18n="@@form.errors.invalidEmail">
- You must enter a valid email address.
+ <div class="field">
+ <label class="label" for="email" i18n="@@form.email">Email</label>
+ <p class="control">
+ <input id="email" class="input" type="email" formControlName="email"
+ [ngClass]="{'has-error': fieldIsInvalid('email'), 'is-valid': fieldIsValid('email')}">
+ </p>
+ <div class="form-incorrect-field-message" *ngIf="fieldIsInvalid('email')">
+ <div *ngIf="email.errors['required']" i18n="@@form.errors.missingEmail">
+ You must enter your email address.
+ </div>
+
+ <div *ngIf="email.errors['email']" i18n="@@form.errors.invalidEmail">
+ You must enter a valid email address.
+ </div>
</div>
</div>
</div>
- <div class="button-container">
- <button [routerLink]="['/', AppRoutes.signin.uri]" class="button btn-red-text" [disabled]="form.disabled"
- i18n="@@passwordForgotten.cancel">Cancel</button>
- <button class="button button-gl send-btn" type="submit"
- [ngClass]="{'is-loading': passwordForgottenRequestIsPending}" [disabled]="form.invalid || form.disabled"
- i18n="@@passwordForgotten.sendButton">Send</button>
- </div>
-
- </form>
+ </div>
</div>
- </div>
+ <div class="button-container">
+ <button [routerLink]="['/', AppRoutes.signin.uri]" class="button btn-red-text" [disabled]="form.disabled"
+ i18n="@@passwordForgotten.cancel">Cancel</button>
+ <button class="button button-gl send-btn" type="submit"
+ [ngClass]="{'is-loading': passwordForgottenRequestIsPending}" [disabled]="form.invalid || form.disabled"
+ i18n="@@passwordForgotten.sendButton">Send</button>
+ </div>
+ </form>
</div>
\ No newline at end of file
diff --git a/src/app/user/components/auth/password-forgotten/password-forgotten.component.scss b/src/app/user/components/auth/password-forgotten/password-forgotten.component.scss
index ba156316d39a0d616fdca891bf19af6ba5347f79..5b7855037594c70d3d384d73c64a2b699bb66d8d 100644
--- a/src/app/user/components/auth/password-forgotten/password-forgotten.component.scss
+++ b/src/app/user/components/auth/password-forgotten/password-forgotten.component.scss
@@ -5,9 +5,13 @@
.password-forgotten-form-container {
margin-top: 1rem;
}
+label{
+ margin-top:1rem;
+}
.button-container {
display: flex;
justify-content: flex-end;
margin-top: 1.75rem;
+ margin-right:2rem;
}
diff --git a/src/app/user/components/auth/password-reset/password-reset.component.html b/src/app/user/components/auth/password-reset/password-reset.component.html
index 09b2f82e61c085ec1bc81a7d877bbe6c02b14a7f..d1ede0f118f9e70db4b4c5b203b5e068ebd1321c 100644
--- a/src/app/user/components/auth/password-reset/password-reset.component.html
+++ b/src/app/user/components/auth/password-reset/password-reset.component.html
@@ -1,111 +1,107 @@
-<div class="page-container has-padding has-white-background is-fullwidth">
- <app-page-header [pageInfo]="pageHeaderInfo"></app-page-header>
-
+<div class="main-container">
+ <div class="header-section">
+ <app-page-header [pageInfo]="pageHeaderInfo"></app-page-header>
+ </div>
<div class="password-reset-form-container">
<div *ngIf="passwordResetTokenIsValid !== null">
<ng-container *ngIf="passwordResetTokenIsValid; else passwordResetTokenIsInvalidTemplate">
- <form [formGroup]="form" (ngSubmit)="updatePassword()">
- <div class="columns">
- <div class="column is-8-touch is-6">
- <div class="field">
- <label class="label" for="newPassword"><span i18n="@@passwordReset.newPassword">New password</span><span
- class="required-field">*</span></label>
- <p class="control has-icons-right">
- <input id="newPassword" class="input" type="password" formControlName="newPassword"
- [ngClass]="{'has-error': fieldIsInvalid('newPassword'), 'is-valid': fieldIsValid('newPassword')}">
- <span class="icon is-small is-right is-icon-success" *ngIf="fieldIsValid('newPassword')">
- <i class="fas fa-check-circle"></i>
- </span>
- <span class="icon is-small is-right is-icon-warning" *ngIf="fieldIsInvalid('newPassword')">
- <i class="fas fa-exclamation-circle"></i>
- </span>
- </p>
+ <form [formGroup]="form" class="centered-form" (ngSubmit)="updatePassword()">
+ <div class="form-content">
+ <div class="columns">
+ <div class="column is-10">
+ <div class="field">
+ <label class="label" for="newPassword"><span i18n="@@passwordReset.newPassword">New
+ password</span><span class="required-field">*</span></label>
+ <p class="control has-icons-right">
+ <input id="newPassword" class="input" type="password" formControlName="newPassword"
+ [ngClass]="{'has-error': fieldIsInvalid('newPassword'), 'is-valid': fieldIsValid('newPassword')}">
+ <span class="icon is-small is-right is-icon-success" *ngIf="fieldIsValid('newPassword')">
+ <i class="fas fa-check-circle"></i>
+ </span>
+ <span class="icon is-small is-right is-icon-warning" *ngIf="fieldIsInvalid('newPassword')">
+ <i class="fas fa-exclamation-circle"></i>
+ </span>
+ </p>
- <div class="form-incorrect-field-message" *ngIf="fieldIsInvalid('newPassword')">
- <div *ngIf="newPassword.errors['required']" i18n="@@form.errors.missingpassword">
- You must enter a password.
- </div>
+ <div class="form-incorrect-field-message" *ngIf="fieldIsInvalid('newPassword')">
+ <div *ngIf="newPassword.errors['required']" i18n="@@form.errors.missingpassword">
+ You must enter a password.
+ </div>
- <div *ngIf="newPassword.errors['minlength']" i18n="@@form.errors.minLength">
- Your password must at least contain {{ passwordMinLength }} characters.
- </div>
+ <div *ngIf="newPassword.errors['minlength']" i18n="@@form.errors.minLength">
+ Your password must at least contain {{ passwordMinLength }} characters.
+ </div>
- <div *ngIf="newPassword.errors['invalidCharacters']" i18n="@@form.errors.invalidCharacters">
- Your password contains some forbidden characters (€, ô, é, è, …).
- </div>
+ <div *ngIf="newPassword.errors['invalidCharacters']" i18n="@@form.errors.invalidCharacters">
+ Your password contains some forbidden characters (€, ô, é, è, …).
+ </div>
- <div *ngIf="newPassword.errors['missingSpecialCharacters']"
- i18n="@@form.errors.missingSpecialCharacters">
- Your password must contain at least one special character.
- </div>
+ <div *ngIf="newPassword.errors['missingSpecialCharacters']"
+ i18n="@@form.errors.missingSpecialCharacters">
+ Your password must contain at least one special character.
+ </div>
- <div *ngIf="newPassword.errors['missingUppercasedLetter']"
- i18n="@@form.errors.missingUppercasedLetter">
- Your password must contain at least one uppercased character.
- </div>
+ <div *ngIf="newPassword.errors['missingUppercasedLetter']"
+ i18n="@@form.errors.missingUppercasedLetter">
+ Your password must contain at least one uppercased character.
+ </div>
- <div *ngIf="newPassword.errors['missingLowercasedLetter']"
- i18n="@@form.errors.missingLowercasedLetter">
- Your password must contain at least one lowercased character.
- </div>
+ <div *ngIf="newPassword.errors['missingLowercasedLetter']"
+ i18n="@@form.errors.missingLowercasedLetter">
+ Your password must contain at least one lowercased character.
+ </div>
- <div *ngIf="newPassword.errors['missingNumber']" i18n="@@form.errors.missingNumber">
- Your password must contain at least one number.
- </div>
+ <div *ngIf="newPassword.errors['missingNumber']" i18n="@@form.errors.missingNumber">
+ Your password must contain at least one number.
+ </div>
- <div *ngIf="newPassword.errors['forbiddenWord']" i18n="@@form.errors.forbiddenWord">
- Your password must not contain obvious words.
+ <div *ngIf="newPassword.errors['forbiddenWord']" i18n="@@form.errors.forbiddenWord">
+ Your password must not contain obvious words.
+ </div>
</div>
</div>
</div>
</div>
- </div>
- <div class="columns">
- <div class="column is-8-touch is-6">
- <div class="field">
- <label class="label" for="newPasswordConfirmation"><span
- i18n="@@passwordReset.newPasswordConfirmation">New
- password confirmation</span><span class="required-field">*</span></label>
- <p class="control has-icons-right">
- <input id="newPasswordConfirmation" class="input" type="password"
- formControlName="newPasswordConfirmation"
- [ngClass]="{'has-error': newPasswordConfirmationError || fieldIsInvalid('newPasswordConfirmation'), 'is-valid': !newPasswordConfirmationError && fieldIsValid('newPasswordConfirmation')}">
- <span class="icon is-small is-right is-icon-success"
- *ngIf="!newPasswordConfirmationError && fieldIsValid('newPasswordConfirmation')">
- <i class="fas fa-check-circle"></i>
- </span>
- <span class="icon is-small is-right is-icon-warning"
- *ngIf="newPasswordConfirmationError || fieldIsInvalid('newPasswordConfirmation')">
- <i class="fas fa-exclamation-circle"></i>
- </span>
- </p>
+ <div class="columns">
+ <div class="column is-10">
+ <div class="field">
+ <label class="label" for="newPasswordConfirmation"><span
+ i18n="@@passwordReset.newPasswordConfirmation">New
+ password confirmation</span><span class="required-field">*</span></label>
+ <p class="control has-icons-right">
+ <input id="newPasswordConfirmation" class="input" type="password"
+ formControlName="newPasswordConfirmation"
+ [ngClass]="{'has-error': newPasswordConfirmationError || fieldIsInvalid('newPasswordConfirmation'), 'is-valid': !newPasswordConfirmationError && fieldIsValid('newPasswordConfirmation')}">
+ <span class="icon is-small is-right is-icon-success"
+ *ngIf="!newPasswordConfirmationError && fieldIsValid('newPasswordConfirmation')">
+ <i class="fas fa-check-circle"></i>
+ </span>
+ <span class="icon is-small is-right is-icon-warning"
+ *ngIf="newPasswordConfirmationError || fieldIsInvalid('newPasswordConfirmation')">
+ <i class="fas fa-exclamation-circle"></i>
+ </span>
+ </p>
- <div class="form-incorrect-field-message" *ngIf="fieldIsInvalid('newPasswordConfirmation')">
- <div *ngIf="newPasswordConfirmation.errors['required']"
- i18n="@@form.errors.missingConfirmationPassword">
- You must confirm your password.
+ <div class="form-incorrect-field-message" *ngIf="fieldIsInvalid('newPasswordConfirmation')">
+ <div *ngIf="newPasswordConfirmation.errors['required']"
+ i18n="@@form.errors.missingConfirmationPassword">
+ You must confirm your password.
+ </div>
</div>
- </div>
- <div class="form-incorrect-field-message" *ngIf="newPasswordConfirmationError">
- <div i18n="@@form.errors.passwordConfirmationError">
- The password confirmation doesn't match with the password.
+ <div class="form-incorrect-field-message" *ngIf="newPasswordConfirmationError">
+ <div i18n="@@form.errors.passwordConfirmationError">
+ The password confirmation doesn't match with the password.
+ </div>
</div>
</div>
</div>
</div>
</div>
- <div class="columns">
- <div class="column is-8-touch is-6 has-text-right">
- <div class="field">
- <div>
- <button type="submit" class="button button-gl"
- [ngClass]="{'is-loading': passwordUpdateRequestIsPending}"
- [disabled]="passwordResetFormIsInvalid || form.disabled" i18n="@@passwordReset.resetButton">
- Reset the password
- </button>
- </div>
- </div>
- </div>
+ <div class="button-container">
+ <button type="submit" class="button button-gl" [ngClass]="{'is-loading': passwordUpdateRequestIsPending}"
+ [disabled]="passwordResetFormIsInvalid || form.disabled" i18n="@@passwordReset.resetButton">
+ Reset the password
+ </button>
</div>
</form>
</ng-container>
diff --git a/src/app/user/components/auth/password-reset/password-reset.component.scss b/src/app/user/components/auth/password-reset/password-reset.component.scss
index 37be82deeaea968ba774c77d7c9cec213e01297b..2bfcc6ac79f35cd9d0783540f71dcc345f691357 100644
--- a/src/app/user/components/auth/password-reset/password-reset.component.scss
+++ b/src/app/user/components/auth/password-reset/password-reset.component.scss
@@ -3,3 +3,8 @@
.is-warning {
color: $warning-color;
}
+
+.button-container {
+ text-align: right;
+ margin-right: 2rem;
+}
\ No newline at end of file
diff --git a/src/app/user/components/auth/sign-up/sign-up.component.html b/src/app/user/components/auth/sign-up/sign-up.component.html
index 1daa10bcd45c7c56da69f49749ee94e8a0b9520c..2ecec1fa9fafdba0b94456cda8fef30ff106fa0d 100644
--- a/src/app/user/components/auth/sign-up/sign-up.component.html
+++ b/src/app/user/components/auth/sign-up/sign-up.component.html
@@ -1,324 +1,330 @@
-<div class="page-container has-padding has-white-background is-fullwidth">
- <app-page-header [pageInfo]="pageHeaderInfo"></app-page-header>
-
+<div class="main-container">
+ <div class="header-section">
+ <app-page-header [pageInfo]="pageHeaderInfo"></app-page-header>
+ </div>
<div class="signup-form-container">
- <form [formGroup]="form" (ngSubmit)="send()">
- <div class="columns is-multiline">
- <div class="column is-12-mobile is-6-tablet">
- <div class="field">
- <label class="label" for="firstname"><span i18n="@@form.firstname">First Name </span><span
- class="required-field">*</span></label>
- <p class="control has-icons-right">
- <input id="firstname" class="input" type="text" formControlName="firstName"
- (keyup)="toUppercase('firstName')"
- [ngClass]="{'has-error': fieldIsInvalid('firstName'), 'is-valid': fieldIsValid('firstName')}">
- <span class="icon is-small is-right is-icon-success" *ngIf="fieldIsValid('firstName')">
- <i class="fas fa-check-circle"></i>
- </span>
- <span class="icon is-small is-right is-icon-warning" *ngIf="fieldIsInvalid('firstName')">
- <i class="fas fa-exclamation-circle"></i>
- </span>
- </p>
+ <form [formGroup]="form" class="centered-form" (ngSubmit)="send()">
+ <div class="form-content">
+ <div class="columns is-multiline">
+ <div class="column is-12-mobile is-6-tablet">
+ <div class="field">
+ <label class="label" for="firstname"><span i18n="@@form.firstname">First Name </span><span
+ class="required-field">*</span></label>
+ <p class="control has-icons-right">
+ <input id="firstname" class="input" type="text" formControlName="firstName"
+ (keyup)="toUppercase('firstName')"
+ [ngClass]="{'has-error': fieldIsInvalid('firstName'), 'is-valid': fieldIsValid('firstName')}">
+ <span class="icon is-small is-right is-icon-success" *ngIf="fieldIsValid('firstName')">
+ <i class="fas fa-check-circle"></i>
+ </span>
+ <span class="icon is-small is-right is-icon-warning" *ngIf="fieldIsInvalid('firstName')">
+ <i class="fas fa-exclamation-circle"></i>
+ </span>
+ </p>
- <div class="form-incorrect-field-message" *ngIf="fieldIsInvalid('firstName')">
- <div *ngIf="firstName.errors['required']" i18n="@@form.errors.invalidFirstname">
- You must enter your first name.
- </div>
- <div *ngIf="firstName.errors['pattern']" i18n="@@form.errors.forbiddenCharacters">
- Special characters are forbidden.
+ <div class="form-incorrect-field-message" *ngIf="fieldIsInvalid('firstName')">
+ <div *ngIf="firstName.errors['required']" i18n="@@form.errors.invalidFirstname">
+ You must enter your first name.
+ </div>
+ <div *ngIf="firstName.errors['pattern']" i18n="@@form.errors.forbiddenCharacters">
+ Special characters are forbidden.
+ </div>
</div>
</div>
</div>
- </div>
- <div class="column is-12-mobile is-6-tablet">
- <div class="field">
- <label class="label" for="lastname"><span i18n="@@form.lastname">Last Name </span><span
- class="required-field">*</span></label>
- <p class="control has-icons-right">
- <input id="lastname" class="input" type="text" formControlName="lastName"
- (keyup)="toUppercase('lastName')"
- [ngClass]="{'has-error': fieldIsInvalid('lastName'), 'is-valid': fieldIsValid('lastName')}">
- <span class="icon is-small is-right is-icon-success" *ngIf="fieldIsValid('lastName')">
- <i class="fas fa-check-circle"></i>
- </span>
- <span class="icon is-small is-right is-icon-warning" *ngIf="fieldIsInvalid('lastName')">
- <i class="fas fa-exclamation-circle"></i>
- </span>
- </p>
+ <div class="column is-12-mobile is-6-tablet">
+ <div class="field">
+ <label class="label" for="lastname"><span i18n="@@form.lastname">Last Name </span><span
+ class="required-field">*</span></label>
+ <p class="control has-icons-right">
+ <input id="lastname" class="input" type="text" formControlName="lastName"
+ (keyup)="toUppercase('lastName')"
+ [ngClass]="{'has-error': fieldIsInvalid('lastName'), 'is-valid': fieldIsValid('lastName')}">
+ <span class="icon is-small is-right is-icon-success" *ngIf="fieldIsValid('lastName')">
+ <i class="fas fa-check-circle"></i>
+ </span>
+ <span class="icon is-small is-right is-icon-warning" *ngIf="fieldIsInvalid('lastName')">
+ <i class="fas fa-exclamation-circle"></i>
+ </span>
+ </p>
- <div class="form-incorrect-field-message" *ngIf="fieldIsInvalid('lastName')">
- <div *ngIf="lastName.errors['required']" i18n="@@form.errors.invalidLastname">
- You must enter your last name.
- </div>
- <div *ngIf="lastName.errors['pattern']" i18n="@@form.errors.forbiddenCharacters">
- Special characters are forbidden.
+ <div class="form-incorrect-field-message" *ngIf="fieldIsInvalid('lastName')">
+ <div *ngIf="lastName.errors['required']" i18n="@@form.errors.invalidLastname">
+ You must enter your last name.
+ </div>
+ <div *ngIf="lastName.errors['pattern']" i18n="@@form.errors.forbiddenCharacters">
+ Special characters are forbidden.
+ </div>
</div>
</div>
</div>
- </div>
- <div class="column is-12-mobile is-6-tablet">
- <div class="field">
- <label class="label" for="email"><span i18n="@@form.email">Email </span><span
- class="required-field">*</span></label>
- <p class="control has-icons-right">
- <input id="email" class="input" type="email" formControlName="email"
- [ngClass]="{'has-error': fieldIsInvalid('email'), 'is-valid': fieldIsValid('email')}">
- <span class="icon is-small is-right is-icon-success" *ngIf="fieldIsValid('email')">
- <i class="fas fa-check-circle"></i>
- </span>
- <span class="icon is-small is-right is-icon-warning" *ngIf="fieldIsInvalid('email')">
- <i class="fas fa-exclamation-circle"></i>
- </span>
- </p>
+ <div class="column is-12-mobile is-6-tablet">
+ <div class="field">
+ <label class="label" for="email"><span i18n="@@form.email">Email </span><span
+ class="required-field">*</span></label>
+ <p class="control has-icons-right">
+ <input id="email" class="input" type="email" formControlName="email"
+ [ngClass]="{'has-error': fieldIsInvalid('email'), 'is-valid': fieldIsValid('email')}">
+ <span class="icon is-small is-right is-icon-success" *ngIf="fieldIsValid('email')">
+ <i class="fas fa-check-circle"></i>
+ </span>
+ <span class="icon is-small is-right is-icon-warning" *ngIf="fieldIsInvalid('email')">
+ <i class="fas fa-exclamation-circle"></i>
+ </span>
+ </p>
- <div class="form-incorrect-field-message" *ngIf="fieldIsInvalid('email')">
- <div *ngIf="email.errors['required']" i18n="@@form.errors.missingEmail">
- You must enter your email address.
- </div>
+ <div class="form-incorrect-field-message" *ngIf="fieldIsInvalid('email')">
+ <div *ngIf="email.errors['required']" i18n="@@form.errors.missingEmail">
+ You must enter your email address.
+ </div>
- <div *ngIf="email.errors['email']" i18n="@@form.errors.invalidEmail">
- You must enter a valid email address.
+ <div *ngIf="email.errors['email']" i18n="@@form.errors.invalidEmail">
+ You must enter a valid email address.
+ </div>
</div>
</div>
</div>
- </div>
- <div class="column is-12-mobile is-6-tablet">
- <div class="field">
- <label class="label" for="emailConfirmation"><span i18n="@@signup.emailConfirmation">Email confirmation
- </span><span class="required-field">*</span></label>
- <p class="control has-icons-right">
- <input id="emailConfirmation" class="input" type="email" formControlName="emailConfirmation"
- [ngClass]="{'has-error': emailConfirmationError || fieldIsInvalid('emailConfirmation'), 'is-valid': !emailConfirmationError && fieldIsValid('emailConfirmation')}">
- <span class="icon is-small is-right is-icon-success"
- *ngIf="!emailConfirmationError && fieldIsValid('emailConfirmation')">
- <i class="fas fa-check-circle"></i>
- </span>
- <span class="icon is-small is-right is-icon-warning"
- *ngIf="emailConfirmationError || fieldIsInvalid('emailConfirmation')">
- <i class="fas fa-exclamation-circle"></i>
- </span>
- </p>
+ <div class="column is-12-mobile is-6-tablet">
+ <div class="field">
+ <label class="label" for="emailConfirmation"><span i18n="@@signup.emailConfirmation">Email confirmation
+ </span><span class="required-field">*</span></label>
+ <p class="control has-icons-right">
+ <input id="emailConfirmation" class="input" type="email" formControlName="emailConfirmation"
+ [ngClass]="{'has-error': emailConfirmationError || fieldIsInvalid('emailConfirmation'), 'is-valid': !emailConfirmationError && fieldIsValid('emailConfirmation')}">
+ <span class="icon is-small is-right is-icon-success"
+ *ngIf="!emailConfirmationError && fieldIsValid('emailConfirmation')">
+ <i class="fas fa-check-circle"></i>
+ </span>
+ <span class="icon is-small is-right is-icon-warning"
+ *ngIf="emailConfirmationError || fieldIsInvalid('emailConfirmation')">
+ <i class="fas fa-exclamation-circle"></i>
+ </span>
+ </p>
- <div class="form-incorrect-field-message" *ngIf="fieldIsInvalid('emailConfirmation')">
- <div *ngIf="emailConfirmation.errors['required']" i18n="@@signup.errors.missingConfirmationEmail">
- You must confirm your email address.
- </div>
+ <div class="form-incorrect-field-message" *ngIf="fieldIsInvalid('emailConfirmation')">
+ <div *ngIf="emailConfirmation.errors['required']" i18n="@@signup.errors.missingConfirmationEmail">
+ You must confirm your email address.
+ </div>
- <div *ngIf="emailConfirmation.errors['email']" i18n="@@form.errors.invalidEmail">
- You must enter a valid email address.
+ <div *ngIf="emailConfirmation.errors['email']" i18n="@@form.errors.invalidEmail">
+ You must enter a valid email address.
+ </div>
</div>
- </div>
- <div class="form-incorrect-field-message" *ngIf="emailConfirmationError">
- <div i18n="@@signup.errors.emailConfirmationError">
- You must enter the same email address.
+ <div class="form-incorrect-field-message" *ngIf="emailConfirmationError">
+ <div i18n="@@signup.errors.emailConfirmationError">
+ You must enter the same email address.
+ </div>
</div>
</div>
</div>
- </div>
-
- <div class="column is-12-mobile is-6-tablet">
- <div class="field">
- <label class="label" for="password"><span i18n="@@signup.password">Password </span><span
- class="required-field">*</span></label>
- <div class="password-rule">
- <span class="not-bold" i18n="@@signup.password.rule.intro">Your password must contain at least</span>:
- <span i18n="@@signup.password.rule.length">{{ passwordMinLength }} characters</span>
- , <span i18n="@@signup.password.rule.special">one special character</span>,
- <span i18n="@@signup.password.rule.uppercase">one uppercased character</span>,
- <span i18n="@@signup.password.rule.lowercase">one lowercased character</span>
- <span class="not-bold" i18n="@@signup.password.rule.and"> and </span>
- <span i18n="@@signup.password.rule.number">one number</span>.
- </div>
- <p class="control has-icons-right">
- <input id="password" class="input" type="password" formControlName="password"
- [ngClass]="{'has-error': fieldIsInvalid('password'), 'is-valid': fieldIsValid('password')}">
- <span class="icon is-small is-right is-icon-success" *ngIf="fieldIsValid('password')">
- <i class="fas fa-check-circle"></i>
- </span>
- <span class="icon is-small is-right is-icon-warning" *ngIf="fieldIsInvalid('password')">
- <i class="fas fa-exclamation-circle"></i>
- </span>
- </p>
- <div class="form-incorrect-field-message" *ngIf="fieldIsInvalid('password')">
- <div *ngIf="password.errors['required']" i18n="@@form.errors.missingpassword">
- You must enter a password.
+ <div class="column is-12-mobile is-6-tablet">
+ <div class="field">
+ <label class="label" for="password"><span i18n="@@signup.password">Password </span><span
+ class="required-field">*</span></label>
+ <div class="password-rule">
+ <span class="not-bold" i18n="@@signup.password.rule.intro">Your password must contain at least</span>:
+ <span i18n="@@signup.password.rule.length">{{ passwordMinLength }} characters</span>
+ , <span i18n="@@signup.password.rule.special">one special character</span>,
+ <span i18n="@@signup.password.rule.uppercase">one uppercased character</span>,
+ <span i18n="@@signup.password.rule.lowercase">one lowercased character</span>
+ <span class="not-bold" i18n="@@signup.password.rule.and"> and </span>
+ <span i18n="@@signup.password.rule.number">one number</span>.
</div>
+ <p class="control has-icons-right">
+ <input id="password" class="input" type="password" formControlName="password"
+ [ngClass]="{'has-error': fieldIsInvalid('password'), 'is-valid': fieldIsValid('password')}">
+ <span class="icon is-small is-right is-icon-success" *ngIf="fieldIsValid('password')">
+ <i class="fas fa-check-circle"></i>
+ </span>
+ <span class="icon is-small is-right is-icon-warning" *ngIf="fieldIsInvalid('password')">
+ <i class="fas fa-exclamation-circle"></i>
+ </span>
+ </p>
- <div *ngIf="password.errors['minlength']" i18n="@@form.errors.minLength">
- Your password must at least contain {{ passwordMinLength }} characters.
- </div>
+ <div class="form-incorrect-field-message" *ngIf="fieldIsInvalid('password')">
+ <div *ngIf="password.errors['required']" i18n="@@form.errors.missingpassword">
+ You must enter a password.
+ </div>
- <div *ngIf="password.errors['invalidCharacters']" i18n="@@form.errors.invalidCharacters">
- Your password contains invalid characters.
- </div>
+ <div *ngIf="password.errors['minlength']" i18n="@@form.errors.minLength">
+ Your password must at least contain {{ passwordMinLength }} characters.
+ </div>
- <div *ngIf="password.errors['missingSpecialCharacters']" i18n="@@form.errors.missingSpecialCharacters">
- Your password must contain at least one special character.
- </div>
+ <div *ngIf="password.errors['invalidCharacters']" i18n="@@form.errors.invalidCharacters">
+ Your password contains invalid characters.
+ </div>
- <div *ngIf="password.errors['missingUppercasedLetter']" i18n="@@form.errors.missingUppercasedLetter">
- Your password must contain at least one uppercased character.
- </div>
+ <div *ngIf="password.errors['missingSpecialCharacters']" i18n="@@form.errors.missingSpecialCharacters">
+ Your password must contain at least one special character.
+ </div>
- <div *ngIf="password.errors['missingLowercasedLetter']" i18n="@@form.errors.missingLowercasedLetter">
- Your password must contain at least one lowercased character.
- </div>
+ <div *ngIf="password.errors['missingUppercasedLetter']" i18n="@@form.errors.missingUppercasedLetter">
+ Your password must contain at least one uppercased character.
+ </div>
- <div *ngIf="password.errors['missingNumber']" i18n="@@form.errors.missingNumber">
- Your password must contain at least one number.
- </div>
+ <div *ngIf="password.errors['missingLowercasedLetter']" i18n="@@form.errors.missingLowercasedLetter">
+ Your password must contain at least one lowercased character.
+ </div>
- <div *ngIf="password.errors['forbiddenWord']" i18n="@@form.errors.forbiddenWord">
- Your password must not contain obvious words.
+ <div *ngIf="password.errors['missingNumber']" i18n="@@form.errors.missingNumber">
+ Your password must contain at least one number.
+ </div>
+
+ <div *ngIf="password.errors['forbiddenWord']" i18n="@@form.errors.forbiddenWord">
+ Your password must not contain obvious words.
+ </div>
</div>
</div>
</div>
- </div>
- <div class="column is-12-mobile is-6-tablet">
- <div class="field">
- <label class="label" for="passwordConfirmation"><span i18n="@@signup.passwordConfirmation">Password
- confirmation </span><span class="required-field">*</span></label>
- <p class="control has-icons-right">
- <input id="passwordConfirmation" class="input" type="password" formControlName="passwordConfirmation"
- [ngClass]="{'has-error': passwordConfirmationError || fieldIsInvalid('passwordConfirmation'), 'is-valid': !passwordConfirmationError && fieldIsValid('passwordConfirmation')}">
- <span class="icon is-small is-right is-icon-success"
- *ngIf="!passwordConfirmationError && fieldIsValid('passwordConfirmation')">
- <i class="fas fa-check-circle"></i>
- </span>
- <span class="icon is-small is-right is-icon-warning"
- *ngIf="passwordConfirmationError || fieldIsInvalid('passwordConfirmation')">
- <i class="fas fa-exclamation-circle"></i>
- </span>
- </p>
+ <div class="column is-12-mobile is-6-tablet">
+ <div class="field">
+ <label class="label" for="passwordConfirmation"><span i18n="@@signup.passwordConfirmation">Password
+ confirmation </span><span class="required-field">*</span></label>
+ <p class="control has-icons-right">
+ <input id="passwordConfirmation" class="input" type="password" formControlName="passwordConfirmation"
+ [ngClass]="{'has-error': passwordConfirmationError || fieldIsInvalid('passwordConfirmation'), 'is-valid': !passwordConfirmationError && fieldIsValid('passwordConfirmation')}">
+ <span class="icon is-small is-right is-icon-success"
+ *ngIf="!passwordConfirmationError && fieldIsValid('passwordConfirmation')">
+ <i class="fas fa-check-circle"></i>
+ </span>
+ <span class="icon is-small is-right is-icon-warning"
+ *ngIf="passwordConfirmationError || fieldIsInvalid('passwordConfirmation')">
+ <i class="fas fa-exclamation-circle"></i>
+ </span>
+ </p>
- <div class="form-incorrect-field-message" *ngIf="fieldIsInvalid('passwordConfirmation')">
- <div *ngIf="passwordConfirmation.errors['required']" i18n="@@form.errors.missingConfirmationPassword">
- You must confirm your password.
+ <div class="form-incorrect-field-message" *ngIf="fieldIsInvalid('passwordConfirmation')">
+ <div *ngIf="passwordConfirmation.errors['required']" i18n="@@form.errors.missingConfirmationPassword">
+ You must confirm your password.
+ </div>
</div>
- </div>
- <div class="form-incorrect-field-message" *ngIf="passwordConfirmationError">
- <div i18n="@@form.errors.passwordConfirmationError">
- The password confirmation doesn't match with the password.
+ <div class="form-incorrect-field-message" *ngIf="passwordConfirmationError">
+ <div i18n="@@form.errors.passwordConfirmationError">
+ The password confirmation doesn't match with the password.
+ </div>
</div>
</div>
</div>
- </div>
- <div class="column is-12-mobile is-6-tablet">
- <div class="field">
- <label class="label" for="entreprise" i18n="@@form.entreprise">Company</label>
- <p class="control">
- <input id="entreprise" class="input" type="text" formControlName="entreprise">
- </p>
+ <div class="column is-12-mobile is-6-tablet">
+ <div class="field">
+ <label class="label" for="entreprise" i18n="@@form.entreprise">Company</label>
+ <p class="control">
+ <input id="entreprise" class="input" type="text" formControlName="entreprise">
+ </p>
+ </div>
</div>
- </div>
- <div class="column is-12-mobile is-6-tablet">
- <div class="field">
- <label class="label" for="address" i18n="@@form.address">Address</label>
- <p class="control">
- <input id="address" class="input" type="text" formControlName="address">
- </p>
+ <div class="column is-12-mobile is-6-tablet">
+ <div class="field">
+ <label class="label" for="address" i18n="@@form.address">Address</label>
+ <p class="control">
+ <input id="address" class="input" type="text" formControlName="address">
+ </p>
+ </div>
</div>
- </div>
- <div class="column is-12-mobile is-6-tablet">
- <div class="field">
- <label class="label" for="zipcode" i18n="@@form.zipcode">Zipcode</label>
- <p class="control">
- <input id="zipcode" class="input" type="text" formControlName="zipcode">
- </p>
+ <div class="column is-12-mobile is-6-tablet">
+ <div class="field">
+ <label class="label" for="zipcode" i18n="@@form.zipcode">Zipcode</label>
+ <p class="control">
+ <input id="zipcode" class="input" type="text" formControlName="zipcode">
+ </p>
+ </div>
</div>
- </div>
- <div class="column is-12-mobile is-6-tablet">
- <div class="field">
- <label class="label" for="city" i18n="@@form.city">City</label>
- <p class="control">
- <input id="city" class="input" type="text" formControlName="city">
- </p>
+ <div class="column is-12-mobile is-6-tablet">
+ <div class="field">
+ <label class="label" for="city" i18n="@@form.city">City</label>
+ <p class="control">
+ <input id="city" class="input" type="text" formControlName="city">
+ </p>
+ </div>
</div>
- </div>
- <div class="column is-12-mobile is-6-tablet">
- <div class="field">
- <label class="label" for="country" i18n="@@form.country">Country</label>
- <p class="control">
- <input id="country" class="input" type="text" formControlName="country">
- </p>
+ <div class="column is-12-mobile is-6-tablet">
+ <div class="field">
+ <label class="label" for="country" i18n="@@form.country">Country</label>
+ <p class="control">
+ <input id="country" class="input" type="text" formControlName="country">
+ </p>
+ </div>
</div>
- </div>
- <div class="column is-12">
- <div class="field">
- <input id="acceptMessages" class="is-checkradio" type="checkbox" formControlName="acceptMessages">
- <label for="acceptMessages" class="label checkbox-label accept-messages-label"
- i18n="@@form.messagesAgreement">I agree to
- receive information</label>
- <p class="acceptMessagesInfo" i18n="@@form.acceptMessagesInfo">
- Check this box if you agree to receive information emails from Data about the operation of services, model
- changes, new formats, maintenance operations. Your data will not be sent to partners.
- </p>
+ <div class="column is-12">
+ <div class="field">
+ <input id="acceptMessages" class="is-checkradio" type="checkbox" formControlName="acceptMessages">
+ <label for="acceptMessages" class="label checkbox-label accept-messages-label"
+ i18n="@@form.messagesAgreement">I agree to
+ receive information</label>
+ <p class="acceptMessagesInfo" i18n="@@form.acceptMessagesInfo">
+ Check this box if you agree to receive information emails from Data about the operation of services,
+ model
+ changes, new formats, maintenance operations. Your data will not be sent to partners.
+ </p>
+ </div>
</div>
- </div>
- <div class="column is-12">
- <div class="field">
- <input id="cgu" class="is-checkradio" type="checkbox" formControlName="cgu">
- <label for="cgu" class="label checkbox-label">
- <p>
- <span i18n="@@cgu.partOne">I accept the</span><a i18n="@@cgu.partTwo"
- [routerLink]="['/', AppRoutes.cgu.uri]"> general terms of use.</a>
- <span class="required-field">*</span>
- </p>
- </label>
- <div class="form-incorrect-field-message" *ngIf="fieldIsInvalid('cgu')">
- <div *ngIf="cgu.errors['required']" i18n="@@cgu.error">
- You must accept the general terms of use.
+ <div class="column is-12">
+ <div class="field">
+ <input id="cgu" class="is-checkradio" type="checkbox" formControlName="cgu">
+ <label for="cgu" class="label checkbox-label">
+ <p>
+ <span i18n="@@cgu.partOne">I accept the</span><a i18n="@@cgu.partTwo"
+ [routerLink]="['/', AppRoutes.cgu.uri]"> general terms of use.</a>
+ <span class="required-field">*</span>
+ </p>
+ </label>
+ <div class="form-incorrect-field-message" *ngIf="fieldIsInvalid('cgu')">
+ <div *ngIf="cgu.errors['required']" i18n="@@cgu.error">
+ You must accept the general terms of use.
+ </div>
</div>
</div>
</div>
- </div>
- <div class="column is-12">
- <div class="field">
- <input id="consent" class="is-checkradio" type="checkbox" formControlName="consent">
- <label for="consent" class="label checkbox-label consent-label">
- <p>
- <span i18n="@@consent.withoutCGU">I accept the processing of the information
- entered in this form to respond to my request.</span><span class="required-field">*</span>
- </p>
- </label>
- <div class="form-incorrect-field-message" *ngIf="fieldIsInvalid('consent')">
- <div *ngIf="consent.errors['required']" i18n="@@consent.error">
- You must accept the processing of the information entered in this form to
- respond to your request.
+ <div class="column is-12">
+ <div class="field">
+ <input id="consent" class="is-checkradio" type="checkbox" formControlName="consent">
+ <label for="consent" class="label checkbox-label consent-label">
+ <p>
+ <span i18n="@@consent.withoutCGU">I accept the processing of the information
+ entered in this form to respond to my request.</span><span class="required-field">*</span>
+ </p>
+ </label>
+ <div class="form-incorrect-field-message" *ngIf="fieldIsInvalid('consent')">
+ <div *ngIf="consent.errors['required']" i18n="@@consent.error">
+ You must accept the processing of the information entered in this form to
+ respond to your request.
+ </div>
</div>
+ <p class="consent-text" i18n="@@consent.text">
+ Fields with an asterisk (*) are mandatory. Information in these fields will be processed to respond to
+ your request. The data is kept for a period of 12 months. Recipients of this
+ information are the metropolitan departments in charge of processing your request. In compliance with
+ the
+ “Digital Technology and Freedom” law dated January 6, 1978, you have the right to access and rectify
+ information that concerns you. To exercise this right, please contact the service of the Data Protection
+ Officer (DPD): Métropole de Lyon – Délégué à la Protection des Données - Direction des Affaires
+ Juridiques et de la Commande Publique - 20, rue du Lac - BP 33569 - 69505 Lyon Cedex 03 or use the
+ following form https://demarches.toodego.com/sve/proteger-mes-donnees-personnelles/. You may also oppose
+ processing of your personal data for a legitimate reason. In this case, we will
+ not be able to process the request submitted using this form.
+ </p>
</div>
- <p class="consent-text" i18n="@@consent.text">
- Fields with an asterisk (*) are mandatory. Information in these fields will be processed to respond to
- your request. The data is kept for a period of 12 months. Recipients of this
- information are the metropolitan departments in charge of processing your request. In compliance with the
- “Digital Technology and Freedom” law dated January 6, 1978, you have the right to access and rectify
- information that concerns you. To exercise this right, please contact: Lyon Métropole - Direction des
- Affaires Juridiques et de la Commande Publique - 20 Rue du Lac - BP 33569 - 69505 Lyon Cedex 03, by postal
- mail. You may also oppose processing of your personal data for a legitimate reason. In this case, we will
- not be able to process the request submitted using this form.
- </p>
</div>
</div>
-
- <div class="column is-12 has-text-right">
- <div class="field">
- <div>
- <button type="submit" class="button button-gl" [ngClass]="{'is-loading': formDisabled}"
- [disabled]="formIsInvalid || formDisabled" i18n="@@signup.createAccount">Create an account</button>
- </div>
+ </div>
+ <div class="column is-12 has-text-right">
+ <div class="field">
+ <div class="validation">
+ <button type="submit" class="button button-gl" [ngClass]="{'is-loading': formDisabled}"
+ [disabled]="formIsInvalid || formDisabled" i18n="@@signup.createAccount">Create an account</button>
</div>
</div>
</div>
diff --git a/src/app/user/components/auth/sign-up/sign-up.component.scss b/src/app/user/components/auth/sign-up/sign-up.component.scss
index 023f2ea310068479c6009728cbdae09c88b7616c..579a46302bce813ff5397882e4344f7a641acc37 100644
--- a/src/app/user/components/auth/sign-up/sign-up.component.scss
+++ b/src/app/user/components/auth/sign-up/sign-up.component.scss
@@ -46,3 +46,6 @@ h1 {
font-weight: 600;
}
}
+.validation{
+ padding-right:1rem;
+}
diff --git a/src/app/user/components/user-profil/user-info/user-info.component.html b/src/app/user/components/user-profil/user-info/user-info.component.html
index a30cf4aea82664e1a462a899046a26fd3f4d8e34..7941452fa2d34a71cbdee1e0ebc2d5aea3672f6b 100644
--- a/src/app/user/components/user-profil/user-info/user-info.component.html
+++ b/src/app/user/components/user-profil/user-info/user-info.component.html
@@ -1,168 +1,174 @@
-<form [formGroup]="userInfoUpdateForm" (ngSubmit)="updateUserInfo()">
- <div class="columns is-multiline">
- <div class="column is-12-mobile is-6-tablet">
- <div class="field">
- <label class="label" for="firstname"><span i18n="@@form.firstname">First Name </span><span
- class="required-field">*</span></label>
- <p class="control has-icons-right">
- <input id="firstname" class="input" type="text" formControlName="firstName"
- (keyup)="toUppercase(userInfoUpdateForm, 'firstName')"
- [ngClass]="{'has-error': fieldIsInvalid(userInfoUpdateForm, 'firstName'), 'is-valid': fieldIsValid(userInfoUpdateForm, 'firstName')}">
- <span class="icon is-small is-right is-icon-success" *ngIf="fieldIsValid(userInfoUpdateForm, 'firstName')">
- <i class="fas fa-check-circle"></i>
- </span>
- <span class="icon is-small is-right is-icon-warning" *ngIf="fieldIsInvalid(userInfoUpdateForm, 'firstName')">
- <i class="fas fa-exclamation-circle"></i>
- </span>
- </p>
+<form [formGroup]="userInfoUpdateForm" class="centered-form" (ngSubmit)="updateUserInfo()">
+ <div class="form-content">
+ <div class="columns is-multiline">
+ <div class="column is-12-mobile is-6-tablet">
+ <div class="field">
+ <label class="label" for="firstname"><span i18n="@@form.firstname">First Name </span><span
+ class="required-field">*</span></label>
+ <p class="control has-icons-right">
+ <input id="firstname" class="input" type="text" formControlName="firstName"
+ (keyup)="toUppercase(userInfoUpdateForm, 'firstName')"
+ [ngClass]="{'has-error': fieldIsInvalid(userInfoUpdateForm, 'firstName'), 'is-valid': fieldIsValid(userInfoUpdateForm, 'firstName')}">
+ <span class="icon is-small is-right is-icon-success" *ngIf="fieldIsValid(userInfoUpdateForm, 'firstName')">
+ <i class="fas fa-check-circle"></i>
+ </span>
+ <span class="icon is-small is-right is-icon-warning"
+ *ngIf="fieldIsInvalid(userInfoUpdateForm, 'firstName')">
+ <i class="fas fa-exclamation-circle"></i>
+ </span>
+ </p>
- <div class="form-incorrect-field-message" *ngIf="fieldIsInvalid(userInfoUpdateForm, 'firstName')">
- <div *ngIf="firstName.errors['required']" i18n="@@form.errors.invalidFirstname">
- You must enter your first name.
- </div>
- <div *ngIf="firstName.errors['pattern']" i18n="@@form.errors.forbiddenCharacters">
- Special characters are forbidden.
+ <div class="form-incorrect-field-message" *ngIf="fieldIsInvalid(userInfoUpdateForm, 'firstName')">
+ <div *ngIf="firstName.errors['required']" i18n="@@form.errors.invalidFirstname">
+ You must enter your first name.
+ </div>
+ <div *ngIf="firstName.errors['pattern']" i18n="@@form.errors.forbiddenCharacters">
+ Special characters are forbidden.
+ </div>
</div>
</div>
</div>
- </div>
- <div class="column is-12-mobile is-6-tablet">
- <div class="field">
- <label class="label" for="lastname"><span i18n="@@form.lastname">Last Name </span><span
- class="required-field">*</span></label>
- <p class="control has-icons-right">
- <input id="lastname" class="input" type="text" formControlName="lastName"
- (keyup)="toUppercase(userInfoUpdateForm,'lastName')"
- [ngClass]="{'has-error': fieldIsInvalid(userInfoUpdateForm, 'lastName'), 'is-valid': fieldIsValid(userInfoUpdateForm, 'lastName')}">
- <span class="icon is-small is-right is-icon-success" *ngIf="fieldIsValid(userInfoUpdateForm, 'lastName')">
- <i class="fas fa-check-circle"></i>
- </span>
- <span class="icon is-small is-right is-icon-warning" *ngIf="fieldIsInvalid(userInfoUpdateForm, 'lastName')">
- <i class="fas fa-exclamation-circle"></i>
- </span>
- </p>
+ <div class="column is-12-mobile is-6-tablet">
+ <div class="field">
+ <label class="label" for="lastname"><span i18n="@@form.lastname">Last Name </span><span
+ class="required-field">*</span></label>
+ <p class="control has-icons-right">
+ <input id="lastname" class="input" type="text" formControlName="lastName"
+ (keyup)="toUppercase(userInfoUpdateForm,'lastName')"
+ [ngClass]="{'has-error': fieldIsInvalid(userInfoUpdateForm, 'lastName'), 'is-valid': fieldIsValid(userInfoUpdateForm, 'lastName')}">
+ <span class="icon is-small is-right is-icon-success" *ngIf="fieldIsValid(userInfoUpdateForm, 'lastName')">
+ <i class="fas fa-check-circle"></i>
+ </span>
+ <span class="icon is-small is-right is-icon-warning" *ngIf="fieldIsInvalid(userInfoUpdateForm, 'lastName')">
+ <i class="fas fa-exclamation-circle"></i>
+ </span>
+ </p>
- <div class="form-incorrect-field-message" *ngIf="fieldIsInvalid(userInfoUpdateForm, 'lastName')">
- <div *ngIf="lastName.errors['required']" i18n="@@form.errors.invalidLastname">
- You must enter your last name.
- </div>
- <div *ngIf="lastName.errors['pattern']" i18n="@@form.errors.forbiddenCharacters">
- Special characters are forbidden.
+ <div class="form-incorrect-field-message" *ngIf="fieldIsInvalid(userInfoUpdateForm, 'lastName')">
+ <div *ngIf="lastName.errors['required']" i18n="@@form.errors.invalidLastname">
+ You must enter your last name.
+ </div>
+ <div *ngIf="lastName.errors['pattern']" i18n="@@form.errors.forbiddenCharacters">
+ Special characters are forbidden.
+ </div>
</div>
</div>
</div>
- </div>
- <div class="column is-12-mobile is-6-tablet">
- <div class="field">
- <label class="label" for="email"><span i18n="@@form.email">Email </span><span
- class="required-field">*</span></label>
- <p class="control has-icons-right">
- <input id="email" class="input" type="email" [value]="email.value" disabled>
- </p>
+ <div class="column is-12-mobile is-6-tablet">
+ <div class="field">
+ <label class="label" for="email"><span i18n="@@form.email">Email </span><span
+ class="required-field">*</span></label>
+ <p class="control has-icons-right">
+ <input id="email" class="input" type="email" [value]="email.value" disabled>
+ </p>
+ </div>
</div>
- </div>
- <div class="column is-12">
- <div class="field">
- <input id="acceptMessages" class="is-checkradio" type="checkbox" formControlName="acceptMessages">
- <label for="acceptMessages" class="label acceptMessagesLabel checkbox-label" i18n="@@form.messagesAgreement">I
- agree
- to
- receive information</label>
- <p class="acceptMessagesInfo" i18n="@@form.acceptMessagesInfo">
- Check this box if you agree to receive information emails from Data about the operation of services, model
- changes, new formats, maintenance operations. Your data will not be sent to partners.
- </p>
+ <div class="column is-12">
+ <div class="field">
+ <input id="acceptMessages" class="is-checkradio" type="checkbox" formControlName="acceptMessages">
+ <label for="acceptMessages" class="label acceptMessagesLabel checkbox-label" i18n="@@form.messagesAgreement">I
+ agree
+ to
+ receive information</label>
+ <p class="acceptMessagesInfo" i18n="@@form.acceptMessagesInfo">
+ Check this box if you agree to receive information emails from Data about the operation of services, model
+ changes, new formats, maintenance operations. Your data will not be sent to partners.
+ </p>
+ </div>
</div>
- </div>
- <div class="column is-12-mobile is-6-tablet">
- <div class="field">
- <label class="label" for="entreprise" i18n="@@form.entreprise">Company</label>
- <p class="control">
- <input id="entreprise" class="input" type="text" formControlName="entreprise">
- </p>
+ <div class="column is-12-mobile is-6-tablet">
+ <div class="field">
+ <label class="label" for="entreprise" i18n="@@form.entreprise">Company</label>
+ <p class="control">
+ <input id="entreprise" class="input" type="text" formControlName="entreprise">
+ </p>
+ </div>
</div>
- </div>
- <div class="column is-hidden-mobile is-6-tablet"></div>
+ <div class="column is-hidden-mobile is-6-tablet"></div>
- <div class="column is-12-mobile is-6-tablet">
- <div class="field">
- <label class="label" for="address" i18n="@@form.address">Address</label>
- <p class="control">
- <input id="address" class="input" type="text" formControlName="address">
- </p>
+ <div class="column is-12-mobile is-6-tablet">
+ <div class="field">
+ <label class="label" for="address" i18n="@@form.address">Address</label>
+ <p class="control">
+ <input id="address" class="input" type="text" formControlName="address">
+ </p>
+ </div>
</div>
- </div>
- <div class="column is-12-mobile is-6-tablet">
- <div class="field">
- <label class="label" for="zipcode" i18n="@@form.zipcode">Zipcode</label>
- <p class="control">
- <input id="zipcode" class="input" type="text" formControlName="zipcode">
- </p>
+ <div class="column is-12-mobile is-6-tablet">
+ <div class="field">
+ <label class="label" for="zipcode" i18n="@@form.zipcode">Zipcode</label>
+ <p class="control">
+ <input id="zipcode" class="input" type="text" formControlName="zipcode">
+ </p>
+ </div>
</div>
- </div>
- <div class="column is-12-mobile is-6-tablet">
- <div class="field">
- <label class="label" for="city" i18n="@@form.city">City</label>
- <p class="control">
- <input id="city" class="input" type="text" formControlName="city">
- </p>
+ <div class="column is-12-mobile is-6-tablet">
+ <div class="field">
+ <label class="label" for="city" i18n="@@form.city">City</label>
+ <p class="control">
+ <input id="city" class="input" type="text" formControlName="city">
+ </p>
+ </div>
</div>
- </div>
- <div class="column is-12-mobile is-6-tablet">
- <div class="field">
- <label class="label" for="country" i18n="@@form.country">Country</label>
- <p class="control">
- <input id="country" class="input" type="text" formControlName="country">
- </p>
+ <div class="column is-12-mobile is-6-tablet">
+ <div class="field">
+ <label class="label" for="country" i18n="@@form.country">Country</label>
+ <p class="control">
+ <input id="country" class="input" type="text" formControlName="country">
+ </p>
+ </div>
</div>
- </div>
- <div class="column is-12">
- <div class="field">
- <input id="consent" class="is-checkradio" type="checkbox" formControlName="consent">
- <label for="consent" class="label checkbox-label consent-label">
- <p>
- <span i18n="@@consent.withoutCGU">I accept the processing of the information
- entered in this form to respond to my request.</span><span class="required-field">*</span>
- </p>
- </label>
- <div class="form-incorrect-field-message" *ngIf="fieldIsInvalid(userInfoUpdateForm,'consent')">
- <div *ngIf="consent.errors['required']" i18n="@@consent.error">
- You must accept the processing of the information entered in this form to
- respond to your request.
+ <div class="column is-12">
+ <div class="field">
+ <input id="consent" class="is-checkradio" type="checkbox" formControlName="consent">
+ <label for="consent" class="label checkbox-label consent-label">
+ <p>
+ <span i18n="@@consent.withoutCGU">I accept the processing of the information
+ entered in this form to respond to my request.</span><span class="required-field">*</span>
+ </p>
+ </label>
+ <div class="form-incorrect-field-message" *ngIf="fieldIsInvalid(userInfoUpdateForm,'consent')">
+ <div *ngIf="consent.errors['required']" i18n="@@consent.error">
+ You must accept the processing of the information entered in this form to
+ respond to your request.
+ </div>
</div>
+ <p class="consent-text" i18n="@@consent.text">
+ Fields with an asterisk (*) are mandatory. Information in these fields will be processed to respond to
+ your request. The data is kept for a period of 12 months. Recipients of this
+ information are the metropolitan departments in charge of processing your request. In compliance with
+ the
+ “Digital Technology and Freedom” law dated January 6, 1978, you have the right to access and rectify
+ information that concerns you. To exercise this right, please contact the service of the Data Protection
+ Officer (DPD): Métropole de Lyon – Délégué à la Protection des Données - Direction des Affaires
+ Juridiques et de la Commande Publique - 20, rue du Lac - BP 33569 - 69505 Lyon Cedex 03 or use the
+ following form https://demarches.toodego.com/sve/proteger-mes-donnees-personnelles/. You may also oppose
+ processing of your personal data for a legitimate reason. In this case, we will
+ not be able to process the request submitted using this form.
+ </p>
</div>
- <p class="consent-text" i18n="@@consent.text">
- Fields with an asterisk (*) are mandatory. Information in these fields will be processed to respond to
- your request. The data is kept for a period of 12 months. Recipients of this
- information are the metropolitan departments in charge of processing your request. In compliance with the
- “Digital Technology and Freedom” law dated January 6, 1978, you have the right to access and rectify
- information that concerns you. To exercise this right, please contact: Lyon Métropole - Direction des
- Affaires Juridiques et de la Commande Publique - 20 Rue du Lac - BP 33569 - 69505 Lyon Cedex 03, by postal
- mail. You may also oppose processing of your personal data for a legitimate reason. In this case, we will
- not be able to process the request submitted using this form.
- </p>
</div>
</div>
-
- <div class="column is-12 action-profile">
- <button type="button" class="button btn-red-text" i18n="@@userProfil.deleteAccount"
- [disabled]="userAccountDeletionRequestIsPending" (click)="openDeleteAccountModal()">Delete
- my account</button>
- <button type="submit" class="button button-gl" [ngClass]="{'is-loading': userInfoUpdateRequestIsPending}"
- i18n="@@userProfil.updateProfil"
- [disabled]="userInfoUpdateFormIsInvalid || userInfoUpdateFormDisabled || !userInfoUpdateForm.dirty">Update
- my profil</button>
- </div>
</div>
+ <div class="column is-12 action-profile">
+ <button type="button" class="button btn-red-text" i18n="@@userProfil.deleteAccount"
+ [disabled]="userAccountDeletionRequestIsPending" (click)="openDeleteAccountModal()">Delete
+ my account</button>
+ <button type="submit" class="button button-gl" [ngClass]="{'is-loading': userInfoUpdateRequestIsPending}"
+ i18n="@@userProfil.updateProfil"
+ [disabled]="userInfoUpdateFormIsInvalid || userInfoUpdateFormDisabled || !userInfoUpdateForm.dirty">Update
+ my profil</button>
+ </div>
+
</form>
<div class="modal" [ngClass]="{'is-active': deleteAccountModalIsOpened}">
diff --git a/src/app/user/components/user-profil/user-info/user-info.component.scss b/src/app/user/components/user-profil/user-info/user-info.component.scss
index 8d48f21cb28f64c8cd5684f14b0da9a55c987e4d..2a79c836be5883ce13099e50df83326bc9887952 100644
--- a/src/app/user/components/user-profil/user-info/user-info.component.scss
+++ b/src/app/user/components/user-profil/user-info/user-info.component.scss
@@ -1,8 +1,5 @@
@import '../../../../../../node_modules/bulma/sass/utilities/_all.sass';
-
-form {
- margin-top: 1rem;
-}
+@import '../../../../../scss/variables.scss';
.btn-red-text {
margin-right: 1.25rem;
@@ -38,6 +35,10 @@ form {
.action-profile {
text-align: center;
+ padding-right:2rem;
+ @media screen and(max-width:$tablet){
+ padding-right: 0.5rem;
+ }
button:first-of-type {
margin-bottom: 0.5rem;
diff --git a/src/app/user/components/user-profil/user-password-update/user-password-update.component.html b/src/app/user/components/user-profil/user-password-update/user-password-update.component.html
index a1bf094644cb44d9c1059b8fca4d80d13f03cb0a..122f3cc93418ed617426c095a66449325aebcb40 100644
--- a/src/app/user/components/user-profil/user-password-update/user-password-update.component.html
+++ b/src/app/user/components/user-profil/user-password-update/user-password-update.component.html
@@ -1,4 +1,5 @@
-<form [formGroup]="passwordUpdateForm" (ngSubmit)="updatePassword()">
+<form [formGroup]="passwordUpdateForm" class="centered-form" (ngSubmit)="updatePassword()">
+ <div class="form-content">
<div class="columns is-multiline">
<div class="column is-12-mobile is-6-tablet">
<div class="field">
@@ -107,6 +108,8 @@
</div>
</div>
</div>
+ </div>
+ </div>
<div class="column is-12 has-text-right">
<div class="field">
<div>
@@ -117,5 +120,4 @@
</div>
</div>
</div>
- </div>
</form>
\ No newline at end of file
diff --git a/src/app/user/components/user-profil/user-password-update/user-password-update.component.scss b/src/app/user/components/user-profil/user-password-update/user-password-update.component.scss
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..2369b023c61c46ffa8279c1e059e5ea9db8644a8 100644
--- a/src/app/user/components/user-profil/user-password-update/user-password-update.component.scss
+++ b/src/app/user/components/user-profil/user-password-update/user-password-update.component.scss
@@ -0,0 +1,7 @@
+@import '../../../../../scss/variables.scss';
+@import '../../../../../../node_modules/bulma/sass/utilities/_all.sass';
+
+ .button-gl{
+ margin-right:1.5rem;
+ margin-bottom:3rem;
+ }
\ No newline at end of file
diff --git a/src/app/user/components/user-profil/user-profil.component.html b/src/app/user/components/user-profil/user-profil.component.html
index 36c74da0a0e6b0c76df03924024e96ccff069976..f837bb07a5e5424998d162cd1e3b3707fc80f3fa 100644
--- a/src/app/user/components/user-profil/user-profil.component.html
+++ b/src/app/user/components/user-profil/user-profil.component.html
@@ -1,7 +1,8 @@
-<div class="page-container has-padding has-white-background is-fullwidth">
- <app-page-header [pageInfo]="pageHeaderInfo" [customGoToPreviousPage]="goToPreviousPage"></app-page-header>
-
- <app-basic-tabs class="tabs" [tabs]="tabs"></app-basic-tabs>
+<div class="main-container">
+ <div class="header-section">
+ <app-page-header [pageInfo]="pageHeaderInfo" [customGoToPreviousPage]="goToPreviousPage"></app-page-header>
+ <app-basic-tabs class="tabs" [tabs]="tabs"></app-basic-tabs>
+ </div>
<router-outlet></router-outlet>
</div>
\ No newline at end of file
diff --git a/src/app/user/components/user-profil/user-profil.component.scss b/src/app/user/components/user-profil/user-profil.component.scss
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..ab8467a7b7f0005e943ce5403e70321bd6021bfd 100644
--- a/src/app/user/components/user-profil/user-profil.component.scss
+++ b/src/app/user/components/user-profil/user-profil.component.scss
@@ -0,0 +1,12 @@
+@import '../../../../scss/variables.scss';
+
+
+.main-container{
+ margin-top:0.5rem;
+}
+
+.header-section{
+ background-color: white;
+ padding:0 2rem;
+}
+
diff --git a/src/assets/config/config.json b/src/assets/config/config.json
deleted file mode 100644
index 3b4e163bbcd71af7d928af278f93268da6594210..0000000000000000000000000000000000000000
--- a/src/assets/config/config.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
- "backendUrls": {
- "organizations": "https://data-reloaded-dev.alpha.grandlyon.com/api/organizations",
- "resources": "https://data-reloaded-dev.alpha.grandlyon.com/api/resources",
- "changelog": "https://data-reloaded-dev.alpha.grandlyon.com/api/changelog",
- "credits": "https://data-reloaded-dev.alpha.grandlyon.com/api/credits/credits",
- "auth": "https://data-reloaded-dev.alpha.grandlyon.com/api/authentication/",
- "middlewareLegacyAuth": "https://data-reloaded-dev.alpha.grandlyon.com/api/middleware-legacy/",
- "email": "http://localhost:3001",
- "matomo": "https://matomo-intothesky.alpha.grandlyon.com",
- "elasticsearch": "https://data-reloaded-dev.alpha.grandlyon.com/api/elasticsearch",
- "catalogue": "https://data-reloaded-dev.alpha.grandlyon.com/api/catalogue",
- "reuses": "https://data-reloaded-dev.alpha.grandlyon.com/api/reuses/reuses",
- "proxyMap": "https://data-reloaded-dev.alpha.grandlyon.com/api/map-services",
- "geocoder": "https://download.data.grandlyon.com/geocoding/photon",
- "seo": "/share"
- },
- "theFunctionalitiesInterruptor": {
- "credits": true,
- "reuses": true,
- "partners": true
- }
-}
\ No newline at end of file
diff --git a/src/assets/config/config.template.json b/src/assets/config/config.template.json
index 9e0572e40891d037b6c327ad6e1dd6789c411c35..2ba7baf4ace1580e048574b17db90af1ed4bf59f 100644
--- a/src/assets/config/config.template.json
+++ b/src/assets/config/config.template.json
@@ -11,7 +11,7 @@
"elasticsearch": "",
"catalogue": "",
"reuses": "",
- "proxyMap": "",
+ "proxyQuery": "",
"geocoder": "",
"seo": ""
},
@@ -19,5 +19,6 @@
"credits": true,
"reuses": true,
"partners": true
- }
+ },
+ "licenses": []
}
\ No newline at end of file
diff --git a/src/assets/img/header_logo_data.svg b/src/assets/img/header_logo_data.svg
index d3bfe202cbcfa6fd2ff722074e088c6d3419be2d..41aa241faef2d9cd166384240835e80567f61b8d 100644
--- a/src/assets/img/header_logo_data.svg
+++ b/src/assets/img/header_logo_data.svg
@@ -1,78 +1 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 23.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
-<svg version="1.1" id="a1be3bfa-168f-43e0-a147-2e2f0a2270c0"
- xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 548 48.1"
- style="enable-background:new 0 0 548 48.1;" xml:space="preserve">
-<style type="text/css">
- .Style_x0020_graphique_x0020_2{fill:#FFFFFF;}
- .Style_x0020_graphique{fill:#E93232;}
- .Style_x0020_graphique_yellow{fill:#ffdc26;}
- .Style_x0020_graphique_brand{fill:242b3f;}
-</style>
-<title>logo_data_alpha_mini</title>
-<path class="Style_x0020_graphique_yellow" d="M464.1,0h61c12.6,0,22.8,10.2,22.9,22.8l0,0c-0.1,12.6-10.3,22.8-22.9,22.9h-61
- c-12.5,0.1-22.8-10-22.9-22.5c0-0.1,0-0.1,0-0.2v-0.2l0,0C441.2,10.2,451.4,0,464,0c0,0,0,0,0,0H464.1z"/>
-<path class="Style_x0020_graphique_brand" d="M472.8,31.1h-2.4c-0.3,0-0.5,0-0.7-0.2c-0.2-0.1-0.3-0.3-0.4-0.5l-1.2-3.3h-6.9
- l-1.2,3.3c-0.1,0.2-0.2,0.4-0.4,0.5c-0.1,0.2-0.4,0.2-0.6,0.2h-2.4l6.5-16.5h3.1L472.8,31.1z M462,24.9h5.3l-2-5.5l-0.3-0.9
- l-0.3-1.1c-0.1,0.4-0.3,0.8-0.4,1.1l-0.3,0.9L462,24.9z"/>
-<path class="Style_x0020_graphique_brand" d="M477.6,28.6h6.6v2.5h-9.7V14.6h3.1V28.6z"/>
-<path class="Style_x0020_graphique_brand" d="M489.5,25.3v5.8h-3.1V14.6h5.4c1,0,1.9,0.1,2.9,0.3c0.7,0.3,1.4,0.6,2,1.1
- c0.5,0.5,0.9,1.1,1.2,1.7c0.2,0.7,0.4,1.4,0.4,2.1c0,0.8-0.2,1.6-0.4,2.3c-0.3,0.6-0.7,1.2-1.2,1.7c-0.6,0.5-1.3,0.9-2,1.1
- c-0.9,0.3-1.9,0.4-2.9,0.4L489.5,25.3z M489.5,22.9h2.3l1.5-0.2l1.1-0.6l0.6-1c0.1-0.4,0.2-0.9,0.2-1.3c0-0.4-0.1-0.8-0.2-1.2
- l-0.6-0.9l-1.1-0.6l-1.5-0.2h-2.3V22.9z"/>
-<path class="Style_x0020_graphique_brand" d="M514.7,31.1h-3.2v-7.2h-7.7v7.2h-3.1V14.6h3.1v7.1h7.7v-7.1h3.2V31.1z"/>
-<path class="Style_x0020_graphique_brand" d="M532.6,31.1h-2.4c-0.5,0.1-0.9-0.2-1-0.7l-1.3-3.3H521l-1.2,3.3
- c0,0.2-0.2,0.4-0.4,0.5c-0.1,0.2-0.3,0.2-0.6,0.2h-2.4l6.5-16.5h3.2L532.6,31.1z M521.8,24.9h5.3l-2-5.5l-0.3-0.9l-0.3-1.1l-0.3,1.1
- l-0.3,0.9L521.8,24.9z"/>
-<path class="Style_x0020_graphique" d="M24.5,36.5V0.1h-7.1v12c-1.1-0.4-2.6-0.8-4.5-0.8C5.8,11.3,1.3,16.6,1.3,25
- c0,8.5,5,13.5,13.1,13.5C18.7,38.5,22.4,37.5,24.5,36.5z M17.4,32.7c-0.7,0.2-1.6,0.4-3,0.4c-4,0-6-3.2-6-8.4c0-4.9,1.6-8.3,5.8-8.3
- c1.3,0,2.4,0.4,3.2,0.7V32.7z"/>
-<path class="Style_x0020_graphique" d="M50.9,36.8V22.3c0-1.1,0-2.1-0.1-3.1c-0.6-5.4-4.1-8.1-10.3-8.1c-3.9,0-7.3,1-9.1,1.7
- l1.2,5.1c1.7-0.8,4.2-1.5,6.9-1.5c3.5,0,4.5,1.9,4.6,4.7c-0.6,0-1.7-0.1-2.6,0c-6.6,0.4-12,2.6-12,8.9c0,5.9,4.1,8.4,11,8.4
- C45,38.4,48.9,37.7,50.9,36.8z M44.2,33.1c-0.9,0.3-1.7,0.4-3.3,0.4c-2.8,0-4.6-1.1-4.6-3.7c0-3,2.3-3.9,5.1-4.2c1.1-0.1,2,0,2.8,0
- V33.1z"/>
-<path class="Style_x0020_graphique" d="M72.8,37.2c-0.2-1.7-0.4-3.4-0.6-5.1c-1.2,0.6-2.5,0.8-3.8,0.7c-2.3-0.2-2.7-1.7-2.7-5.3
- V17.1h6.6v-5.4h-6.6V4.9h-7.1v6.9h-3.4v5.3h3.4c0,2.9,0,7.9,0.1,10.8c0.3,5.6,1.5,10.8,9.4,10.5C70.1,38.2,71.7,37.7,72.8,37.2z"/>
-<path class="Style_x0020_graphique" d="M97.2,36.8V22.3c0-1.1,0-2.1-0.1-3.1c-0.6-5.4-4.1-8.1-10.3-8.1c-3.9,0-7.3,1-9.1,1.7
- l1.2,5.1c1.7-0.8,4.2-1.5,6.9-1.5c3.5,0,4.5,1.9,4.6,4.7c-0.6,0-1.7-0.1-2.6,0c-6.6,0.4-12,2.6-12,8.9c0,5.9,4.1,8.4,11,8.4
- C91.3,38.4,95.1,37.7,97.2,36.8z M90.4,33.1c-0.9,0.3-1.7,0.4-3.3,0.4c-2.8,0-4.6-1.1-4.6-3.7c0-3,2.3-3.9,5.1-4.2
- c1.1-0.1,2,0,2.8,0V33.1z"/>
-<path class="Style_x0020_graphique" d="M110.5,34.2c0-2.5-1.9-4.3-4.3-4.3c-2.4,0-4.3,1.8-4.3,4.3c0,2.5,2,4.2,4.3,4.2
- C108.6,38.4,110.5,36.7,110.5,34.2z"/>
-<path class="Style_x0020_graphique_x0020_2" d="M131.5,33.3c-1.1,0.8-3,1.5-5.1,1.5c-4.4,0-7.2-3.2-7.2-9.6c0-6.1,2.6-10.2,7.8-10.2
- c2.2,0,3.6,0.2,4.6,0.7V33.3z M135.3,37.5V13.6c-1.7-0.8-4.4-1.6-8.4-1.6c-7.6,0-11.9,5.5-11.9,13.2c0,8.2,4.5,12.5,10.7,12.5
- c2.8,0,4.8-0.9,5.8-1.4v1.6c0,2.4-0.7,4.1-2.2,5.2c-1.2,1.1-3,1.7-5.4,1.7c-2.4,0-4.9-0.7-6.3-1.4c-0.4,1.1-0.7,2.1-1,3.1
- c1.9,0.9,4.6,1.5,7.9,1.5C131.6,48,135.3,44.6,135.3,37.5z"/>
-<path class="Style_x0020_graphique_x0020_2" d="M156.4,12.5c-1.2-0.2-2.8-0.3-4.3-0.3h-0.6c-3.4,0.1-5.8,0.9-7.5,1.7v24.3h3.9V16
- c0.6-0.3,1.9-0.8,3.7-0.8h0.7c1.2,0,2.2,0.1,3.2,0.4C155.9,14.6,156.1,13.5,156.4,12.5z"/>
-<path class="Style_x0020_graphique_x0020_2" d="M175.1,35.1c-1.2,0.4-2.8,0.6-4.8,0.6c-3.8,0-6.1-1.4-6.1-5c0-4.1,3.1-5.3,6.9-5.8
- c0.6,0,1.2-0.1,1.7-0.1c0.9,0,1.7,0.1,2.4,0.1V35.1z M178.9,37.1V23.3c0-1,0-1.9,0-2.8c-0.1-5.6-3.5-8.4-9.1-8.4
- c-3.3,0-6,0.9-7.3,1.5l0.7,2.9c1.2-0.6,3.2-1.3,6.2-1.3c4.8,0,5.7,2.7,5.8,7.2c-0.7,0-1.8-0.1-2.9-0.1c-0.3,0-0.7,0-1,0
- c-6.2,0.5-10.9,2.9-10.9,8.6c0,5.2,3.6,7.8,9.6,7.8C173.7,38.6,177.1,37.9,178.9,37.1z"/>
-<path class="Style_x0020_graphique_x0020_2" d="M205.7,38.1V23.6c0-5.4-0.6-11.6-9.6-11.6c-4.4,0-7.5,0.7-9.6,1.7v24.3h3.9V15.9
- c1-0.4,2.6-0.8,5.2-0.8c6,0,6.1,4.1,6.1,9.2v13.8H205.7z"/>
-<path class="Style_x0020_graphique_x0020_2" d="M229.3,34.9c-0.9,0.4-2.3,0.7-4.6,0.7c-5.3,0-8-4-8-10.2c0-5.5,2-10.3,7.9-10.3
- c1.9,0,3.6,0.7,4.7,1.2V34.9z M233.2,37V0.6h-3.9v12.8c-1.2-0.5-3-1.2-5.2-1.2c-7,0-11.3,5.2-11.3,13.4c0,7.9,4.4,13.1,11.9,13.1
- C228.5,38.6,231.5,37.8,233.2,37z"/>
-<path class="Style_x0020_graphique_x0020_2" d="M250.4,36.1c-3.4-1-4.2-1.5-4.2-9.3V0.6h-3.9V30c0,6.5,2.4,8.1,7.3,8.6L250.4,36.1z"
- />
-<path class="Style_x0020_graphique_x0020_2" d="M273.5,12.5h-3.8c-1.7,6.5-3.2,12.1-5.2,18.1c-0.4,1.2-0.9,3.4-1.1,3.5
- c-0.3-0.7-0.7-2.1-1.2-3.6c-2.3-6.2-4.3-12.4-5.7-18.1h-4.2c2.5,8.7,5.8,17.5,9.3,25.6c-0.6,1.9-1.3,5-3.3,5c-0.9,0-1.7-0.5-2.9-1.2
- l-0.8,2.5c1,0.5,2.3,1.4,4.6,1.4c2.7,0,4-2.5,5.4-6.1C268,31.3,270.8,22.1,273.5,12.5z"/>
-<path class="Style_x0020_graphique_x0020_2" d="M294.2,25.3c0,5.6-1.9,10.1-6.8,10.1c-4.9,0-6.9-4.6-6.9-10.1c0-5.5,2-10.3,6.9-10.3
- C292.2,15,294.2,19.8,294.2,25.3z M298.1,25.3c0-7.8-3.9-13.3-10.8-13.3c-6.9,0-10.8,5.5-10.8,13.3c0,7.8,3.9,13.3,10.8,13.3
- C294.2,38.6,298.1,33.1,298.1,25.3z"/>
-<path class="Style_x0020_graphique_x0020_2" d="M325,38.1V23.6c0-5.4-0.6-11.6-9.6-11.6c-4.4,0-7.5,0.7-9.6,1.7v24.3h3.9V15.9
- c1-0.4,2.6-0.8,5.2-0.8c6,0,6.1,4.1,6.1,9.2v13.8H325z"/>
-<path class="Style_x0020_graphique_x0020_2" d="M338.4,35.7c0-1.6-1.2-2.8-2.8-2.8c-1.6,0-2.8,1.2-2.8,2.8c0,1.6,1.2,2.8,2.8,2.8
- C337.2,38.5,338.4,37.3,338.4,35.7z"/>
-<path class="Style_x0020_graphique_x0020_2" d="M360,37l-0.9-3c-1,0.6-2.6,1.3-4.8,1.3c-5.2,0-7.5-4.1-7.5-10.1
- c0-6.1,2.3-10.1,7.3-10.1c2.3,0,3.6,0.5,4.7,1.2c0.3-1,0.6-1.9,1-2.8c-1.2-0.7-3.3-1.5-6.2-1.5c-6.6,0-10.8,5.2-10.8,13.3
- c0,8.1,4.1,13.2,10.9,13.2C356.5,38.6,358.8,37.8,360,37z"/>
-<path class="Style_x0020_graphique_x0020_2" d="M381.4,25.3c0,5.6-1.9,10.1-6.8,10.1c-4.9,0-6.9-4.6-6.9-10.1c0-5.5,2-10.3,6.9-10.3
- C379.5,15,381.4,19.8,381.4,25.3z M385.4,25.3c0-7.8-3.9-13.3-10.8-13.3c-6.9,0-10.8,5.5-10.8,13.3c0,7.8,3.9,13.3,10.8,13.3
- C381.5,38.6,385.4,33.1,385.4,25.3z"/>
-<path class="Style_x0020_graphique_x0020_2" d="M426.6,38.1V23.6c0-5.2-0.3-11.6-8.8-11.6c-3.9,0-6.7,1.7-8.1,2.9
- c-1.5-1.8-3.8-2.9-7.3-2.9c-4.4,0-7.1,0.8-9.3,1.6v24.4h3.9V15.9c1-0.4,2.6-0.8,5-0.8c5.6,0,5.9,3.5,5.9,9.1v13.9h3.9V24.7
- c0-2.5-0.1-5.1-0.4-7.4c1.1-1.1,3.1-2.2,5.9-2.2c5.2,0,5.4,4,5.4,9.1v13.8H426.6z"/>
-</svg>
+<svg version="1.1" id="a1be3bfa-168f-43e0-a147-2e2f0a2270c0" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 548 48.1" xml:space="preserve"><style>.st0{fill:#da322f}.st1{fill:#fff}</style><path class="st0" d="M84.5 36.5V.1h-7.1v12c-1.1-.4-2.6-.8-4.5-.8-7.1 0-11.6 5.3-11.6 13.7 0 8.5 5 13.5 13.1 13.5 4.4 0 8-1 10.1-2zm-7.1-3.8c-.7.2-1.6.4-3 .4-4 0-6-3.2-6-8.4 0-4.9 1.6-8.3 5.8-8.3 1.3 0 2.4.4 3.2.7v15.6zM110.9 36.8V22.3c0-1.1 0-2.1-.1-3.1-.6-5.4-4.1-8.1-10.3-8.1-3.9 0-7.3 1-9.1 1.7l1.2 5.1c1.7-.8 4.2-1.5 6.9-1.5 3.5 0 4.5 1.9 4.6 4.7-.6 0-1.7-.1-2.6 0-6.6.4-12 2.6-12 8.9 0 5.9 4.1 8.4 11 8.4 4.5 0 8.4-.7 10.4-1.6zm-6.7-3.7c-.9.3-1.7.4-3.3.4-2.8 0-4.6-1.1-4.6-3.7 0-3 2.3-3.9 5.1-4.2 1.1-.1 2 0 2.8 0v7.5zM132.9 37.2l-.6-5.1c-1.2.6-2.5.8-3.8.7-2.3-.2-2.7-1.7-2.7-5.3V17.1h6.6v-5.4h-6.6V4.9h-7.1v6.9h-3.4v5.3h3.4c0 2.9 0 7.9.1 10.8.3 5.6 1.5 10.8 9.4 10.5 1.9-.2 3.6-.7 4.7-1.2zM157.2 36.8V22.3c0-1.1 0-2.1-.1-3.1-.6-5.4-4.1-8.1-10.3-8.1-3.9 0-7.3 1-9.1 1.7l1.2 5.1c1.7-.8 4.2-1.5 6.9-1.5 3.5 0 4.5 1.9 4.6 4.7-.6 0-1.7-.1-2.6 0-6.6.4-12 2.6-12 8.9 0 5.9 4.1 8.4 11 8.4 4.6 0 8.3-.7 10.4-1.6zm-6.8-3.7c-.9.3-1.7.4-3.3.4-2.8 0-4.6-1.1-4.6-3.7 0-3 2.3-3.9 5.1-4.2 1.1-.1 2 0 2.8 0v7.5zM170.6 34.2c0-2.5-1.9-4.3-4.3-4.3s-4.3 1.8-4.3 4.3 2 4.2 4.3 4.2 4.3-1.7 4.3-4.2z"/><path class="st1" d="M191.6 33.3c-1.1.8-3 1.5-5.1 1.5-4.4 0-7.2-3.2-7.2-9.6 0-6.1 2.6-10.2 7.8-10.2 2.2 0 3.6.2 4.6.7v17.6h-.1zm3.8 4.2V13.6c-1.7-.8-4.4-1.6-8.4-1.6-7.6 0-11.9 5.5-11.9 13.2 0 8.2 4.5 12.5 10.7 12.5 2.8 0 4.8-.9 5.8-1.4v1.6c0 2.4-.7 4.1-2.2 5.2-1.2 1.1-3 1.7-5.4 1.7-2.4 0-4.9-.7-6.3-1.4-.4 1.1-.7 2.1-1 3.1 1.9.9 4.6 1.5 7.9 1.5 7.1 0 10.8-3.4 10.8-10.5zM216.4 12.5c-1.2-.2-2.8-.3-4.3-.3h-.6c-3.4.1-5.8.9-7.5 1.7v24.3h3.9V16c.6-.3 1.9-.8 3.7-.8h.7c1.2 0 2.2.1 3.2.4.4-1 .7-2.1.9-3.1zM235.2 35.1c-1.2.4-2.8.6-4.8.6-3.8 0-6.1-1.4-6.1-5 0-4.1 3.1-5.3 6.9-5.8.6 0 1.2-.1 1.7-.1.9 0 1.7.1 2.4.1l-.1 10.2zm3.7 2V23.3v-2.8c-.1-5.6-3.5-8.4-9.1-8.4-3.3 0-6 .9-7.3 1.5l.7 2.9c1.2-.6 3.2-1.3 6.2-1.3 4.8 0 5.7 2.7 5.8 7.2-.7 0-1.8-.1-2.9-.1h-1c-6.2.5-10.9 2.9-10.9 8.6 0 5.2 3.6 7.8 9.6 7.8 3.8-.1 7.2-.8 8.9-1.6zM265.8 38.1V23.6c0-5.4-.6-11.6-9.6-11.6-4.4 0-7.5.7-9.6 1.7V38h3.9V15.9c1-.4 2.6-.8 5.2-.8 6 0 6.1 4.1 6.1 9.2v13.8h4zM289.4 34.9c-.9.4-2.3.7-4.6.7-5.3 0-8-4-8-10.2 0-5.5 2-10.3 7.9-10.3 1.9 0 3.6.7 4.7 1.2v18.6zm3.8 2.1V.6h-3.9v12.8c-1.2-.5-3-1.2-5.2-1.2-7 0-11.3 5.2-11.3 13.4 0 7.9 4.4 13.1 11.9 13.1 3.8-.1 6.8-.9 8.5-1.7zM310.4 36.1c-3.4-1-4.2-1.5-4.2-9.3V.6h-3.9V30c0 6.5 2.4 8.1 7.3 8.6l.8-2.5zM333.5 12.5h-3.8c-1.7 6.5-3.2 12.1-5.2 18.1-.4 1.2-.9 3.4-1.1 3.5-.3-.7-.7-2.1-1.2-3.6-2.3-6.2-4.3-12.4-5.7-18.1h-4.2c2.5 8.7 5.8 17.5 9.3 25.6-.6 1.9-1.3 5-3.3 5-.9 0-1.7-.5-2.9-1.2l-.8 2.5c1 .5 2.3 1.4 4.6 1.4 2.7 0 4-2.5 5.4-6.1 3.4-8.3 6.2-17.5 8.9-27.1zM354.2 25.3c0 5.6-1.9 10.1-6.8 10.1s-6.9-4.6-6.9-10.1 2-10.3 6.9-10.3c4.8 0 6.8 4.8 6.8 10.3zm3.9 0c0-7.8-3.9-13.3-10.8-13.3s-10.8 5.5-10.8 13.3 3.9 13.3 10.8 13.3 10.8-5.5 10.8-13.3zM385 38.1V23.6c0-5.4-.6-11.6-9.6-11.6-4.4 0-7.5.7-9.6 1.7V38h3.9V15.9c1-.4 2.6-.8 5.2-.8 6 0 6.1 4.1 6.1 9.2v13.8h4zM398.4 35.7c0-1.6-1.2-2.8-2.8-2.8-1.6 0-2.8 1.2-2.8 2.8s1.2 2.8 2.8 2.8c1.6 0 2.8-1.2 2.8-2.8zM420 37l-.9-3c-1 .6-2.6 1.3-4.8 1.3-5.2 0-7.5-4.1-7.5-10.1 0-6.1 2.3-10.1 7.3-10.1 2.3 0 3.6.5 4.7 1.2.3-1 .6-1.9 1-2.8-1.2-.7-3.3-1.5-6.2-1.5-6.6 0-10.8 5.2-10.8 13.3s4.1 13.2 10.9 13.2c2.8.1 5.1-.7 6.3-1.5zM441.4 25.3c0 5.6-1.9 10.1-6.8 10.1s-6.9-4.6-6.9-10.1 2-10.3 6.9-10.3 6.8 4.8 6.8 10.3zm4 0c0-7.8-3.9-13.3-10.8-13.3s-10.8 5.5-10.8 13.3 3.9 13.3 10.8 13.3 10.8-5.5 10.8-13.3zM486.6 38.1V23.6c0-5.2-.3-11.6-8.8-11.6-3.9 0-6.7 1.7-8.1 2.9-1.5-1.8-3.8-2.9-7.3-2.9-4.4 0-7.1.8-9.3 1.6V38h3.9V15.9c1-.4 2.6-.8 5-.8 5.6 0 5.9 3.5 5.9 9.1v13.9h3.9V24.7c0-2.5-.1-5.1-.4-7.4 1.1-1.1 3.1-2.2 5.9-2.2 5.2 0 5.4 4 5.4 9.1V38l3.9.1z"/></svg>
\ No newline at end of file
diff --git a/src/assets/img/header_logo_data_mobile.svg b/src/assets/img/header_logo_data_mobile.svg
index 449d0ec4bf9718830c2f77234226167c40f4acbe..c70f193943da49acd84f48f4de0e9b52910e3369 100644
--- a/src/assets/img/header_logo_data_mobile.svg
+++ b/src/assets/img/header_logo_data_mobile.svg
@@ -1,22 +1 @@
-<svg width="122" height="33" viewBox="0 0 122 33" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M50.7196 12.1503V0H48.412V4.01265C48.0666 3.86819 47.5643 3.73979 46.952 3.73979C44.6287 3.73979 43.1374 5.50536 43.1374 8.31421C43.1374 11.1712 44.77 12.8244 47.4073 12.8244C48.8515 12.8244 50.0603 12.4874 50.7196 12.1503ZM48.412 10.8984C48.1922 10.9786 47.8782 11.0428 47.4387 11.0428C46.1357 11.0428 45.4607 9.98347 45.4607 8.23396C45.4607 6.58075 45.9788 5.4572 47.3602 5.4572C47.784 5.4572 48.1608 5.58561 48.412 5.69796V10.8984Z" fill="#DA322F"/>
-<path d="M59.3806 12.2787V7.43143C59.3806 7.06226 59.3649 6.7252 59.3335 6.38814C59.1294 4.59047 57.9835 3.69164 55.9584 3.69164C54.6712 3.69164 53.5723 4.01265 52.9915 4.25341L53.3996 5.95477C53.9648 5.69796 54.7654 5.4572 55.6602 5.4572C56.7904 5.4572 57.1201 6.08318 57.1515 7.03016C56.9474 7.01411 56.6021 6.99806 56.2881 7.01411C54.1375 7.15857 52.3479 7.89689 52.3479 9.98347C52.3479 11.9577 53.6979 12.8084 55.9584 12.8084C57.4497 12.8084 58.7056 12.5516 59.3806 12.2787ZM57.1672 11.0428C56.8846 11.1391 56.602 11.1712 56.0997 11.1712C55.1735 11.1712 54.5927 10.8181 54.5927 9.91927C54.5927 8.92413 55.3305 8.61917 56.2567 8.52287C56.6177 8.49077 56.916 8.50682 57.1672 8.50682V11.0428Z" fill="#DA322F"/>
-<path d="M66.526 12.4071C66.4632 11.8293 66.4004 11.2675 66.3377 10.6897C65.9295 10.8823 65.5214 10.9626 65.0818 10.9305C64.3283 10.8663 64.187 10.3687 64.187 9.16489V5.66586H66.3377V3.86819H64.187V1.60506H61.8637V3.9003H60.7649V5.68191H61.8637C61.8637 6.64495 61.8794 8.33026 61.8951 9.27725C61.9893 11.1391 62.3818 12.8726 64.9719 12.7763C65.6469 12.7442 66.1807 12.5676 66.526 12.4071Z" fill="#DA322F"/>
-<path d="M74.5114 12.2787V7.43143C74.5114 7.06226 74.4957 6.7252 74.4643 6.38814C74.2603 4.59047 73.1143 3.69164 71.0893 3.69164C69.802 3.69164 68.7032 4.01265 68.1223 4.25341L68.5305 5.95477C69.0956 5.69796 69.8962 5.4572 70.791 5.4572C71.9213 5.4572 72.2509 6.08318 72.2823 7.03016C72.0782 7.01411 71.7329 6.99806 71.4189 7.01411C69.2683 7.15857 67.4787 7.89689 67.4787 9.98347C67.4787 11.9577 68.8287 12.8084 71.0893 12.8084C72.5806 12.8084 73.8364 12.5516 74.5114 12.2787ZM72.298 11.0428C72.0154 11.1391 71.7329 11.1712 71.2305 11.1712C70.3044 11.1712 69.7235 10.8181 69.7235 9.91927C69.7235 8.92413 70.4613 8.61917 71.3875 8.52287C71.7486 8.49077 72.0468 8.50682 72.298 8.50682V11.0428Z" fill="#DA322F"/>
-<path d="M78.8626 11.3799C78.8626 10.5452 78.2347 9.95137 77.4655 9.95137C76.6963 9.95137 76.0527 10.5452 76.0527 11.3959C76.0527 12.2466 76.6963 12.8084 77.4655 12.8084C78.2347 12.8084 78.8626 12.2466 78.8626 11.3799Z" fill="#DA322F"/>
-<path d="M5.84281 28.1698C5.48244 28.4378 4.87139 28.6584 4.16633 28.6584C2.74053 28.6584 1.80045 27.6182 1.80045 25.5061C1.80045 23.5044 2.6622 22.1489 4.35434 22.1489C5.07507 22.1489 5.52945 22.2277 5.84281 22.3695V28.1698ZM7.09625 29.5411V21.6918C6.54787 21.4396 5.67046 21.1716 4.37001 21.1716C1.87879 21.1716 0.5 22.9842 0.5 25.5219C0.5 28.2171 1.9728 29.6199 3.97831 29.6199C4.88706 29.6199 5.56078 29.3362 5.85847 29.147V29.6672C5.85847 30.4395 5.62345 31.0227 5.13774 31.3852C4.74604 31.7477 4.16633 31.9369 3.36726 31.9369C2.58385 31.9211 1.76911 31.7004 1.31474 31.464C1.18939 31.8108 1.07972 32.1418 0.985712 32.4885C1.59677 32.7722 2.48984 32.9771 3.57094 32.9771C5.87414 32.9771 7.09625 31.858 7.09625 29.5411Z" fill="white"/>
-<path d="M13.9929 21.3135C13.5855 21.2504 13.0685 21.2032 12.5828 21.2032H12.3791C11.2666 21.2504 10.4989 21.4869 9.93486 21.7548V29.7302H11.2196V22.4641C11.4077 22.3538 11.8307 22.2119 12.4417 22.2119H12.6768C13.0685 22.2119 13.3818 22.2434 13.7109 22.338C13.8049 22.007 13.8989 21.6603 13.9929 21.3135Z" fill="white"/>
-<path d="M20.0736 28.753C19.6819 28.8791 19.1648 28.9579 18.5067 28.9579C17.269 28.9579 16.5012 28.5008 16.5012 27.3187C16.5012 25.9789 17.5197 25.5849 18.7418 25.4273C18.9455 25.4115 19.1335 25.3958 19.3058 25.3958C19.6035 25.3958 19.8542 25.4273 20.0736 25.443V28.753ZM21.3113 29.3992V24.8599C21.3113 24.5446 21.2957 24.2294 21.2957 23.9299C21.2487 22.1016 20.1519 21.1559 18.3187 21.1559C17.2376 21.1559 16.3446 21.4396 15.9215 21.6602L16.1565 22.6217C16.5639 22.4168 17.2063 22.1804 18.1934 22.1804C19.7445 22.1804 20.0579 23.0788 20.0736 24.5446C19.8542 24.5289 19.4782 24.4973 19.1178 24.4973C19.0081 24.4973 18.8985 24.5131 18.7888 24.5131C16.7676 24.6865 15.2321 25.4746 15.2321 27.3344C15.2321 29.0367 16.3916 29.8878 18.3657 29.8878C19.6349 29.8878 20.7473 29.6514 21.3113 29.3992Z" fill="white"/>
-<path d="M30.0643 29.7302V24.9702C30.0643 23.1891 29.8763 21.1716 26.9307 21.1716C25.5049 21.1716 24.4864 21.4081 23.8127 21.7391V29.7302H25.0975V22.4326C25.4265 22.3065 25.9436 22.1804 26.7896 22.1804C28.7481 22.1804 28.7951 23.5201 28.7951 25.1909V29.7302H30.0643Z" fill="white"/>
-<path d="M37.7771 28.6742C37.4951 28.816 37.025 28.8949 36.2886 28.8949C34.5652 28.8949 33.6721 27.5709 33.6721 25.5534C33.6721 23.7566 34.3301 22.1804 36.2573 22.1804C36.884 22.1804 37.4481 22.401 37.7771 22.5744V28.6742ZM39.0462 29.3677V17.4046H37.7771V21.5972C37.3854 21.4238 36.79 21.2189 36.0693 21.2189C33.7974 21.2189 32.3716 22.9369 32.3716 25.6164C32.3716 28.2171 33.8131 29.9036 36.2416 29.9036C37.5264 29.9036 38.4978 29.6357 39.0462 29.3677Z" fill="white"/>
-<path d="M44.6544 29.084C43.542 28.753 43.2756 28.5796 43.2756 26.042V17.4046H42.0065V27.0823C42.0065 29.2101 42.7899 29.7302 44.388 29.9194L44.6544 29.084Z" fill="white"/>
-<path d="M52.2158 21.3293H50.9781C50.414 23.4571 49.9283 25.3012 49.2859 27.2872C49.1606 27.697 49.0039 28.4062 48.9412 28.4378C48.8472 28.2171 48.7219 27.76 48.5652 27.2714C47.8288 25.2381 47.1707 23.1891 46.7007 21.3293H45.3376C46.168 24.1821 47.2334 27.0823 48.3615 29.746C48.1735 30.3764 47.9228 31.3852 47.2961 31.3852C47.014 31.3852 46.7477 31.2118 46.3403 30.9912L46.0896 31.8108C46.403 31.9684 46.8417 32.2678 47.5937 32.2678C48.4868 32.2678 48.8942 31.4482 49.3642 30.2504C50.414 27.4921 51.3384 24.4658 52.2158 21.3293Z" fill="white"/>
-<path d="M58.9462 25.5376C58.9462 27.366 58.3195 28.8633 56.737 28.8633C55.1389 28.8633 54.4965 27.366 54.4965 25.5376C54.4965 23.725 55.1389 22.1489 56.737 22.1489C58.3195 22.1489 58.9462 23.725 58.9462 25.5376ZM60.2467 25.5376C60.2467 22.9685 58.9776 21.1559 56.7214 21.1559C54.4808 21.1559 53.1961 22.9685 53.1961 25.5376C53.1961 28.091 54.4808 29.9036 56.737 29.9036C58.9776 29.9036 60.2467 28.091 60.2467 25.5376Z" fill="white"/>
-<path d="M69.0202 29.7302V24.9702C69.0202 23.1891 68.8322 21.1716 65.8866 21.1716C64.4608 21.1716 63.4424 21.4081 62.7686 21.7391V29.7302H64.0534V22.4326C64.3824 22.3065 64.8995 22.1804 65.7456 22.1804C67.7041 22.1804 67.7511 23.5201 67.7511 25.1909V29.7302H69.0202Z" fill="white"/>
-<path d="M73.38 28.9421C73.38 28.4062 73.004 28.0122 72.4713 28.0122C71.9386 28.0122 71.5469 28.4062 71.5469 28.9421C71.5469 29.4623 71.9386 29.8563 72.4713 29.8563C73.004 29.8563 73.38 29.4623 73.38 28.9421Z" fill="white"/>
-<path d="M80.426 29.3835L80.1283 28.4062C79.7993 28.6111 79.2666 28.8318 78.5615 28.8318C76.8537 28.8318 76.1016 27.4921 76.1016 25.5219C76.1016 23.5044 76.8537 22.2119 78.4989 22.2119C79.2353 22.2119 79.674 22.3853 80.0343 22.5902C80.144 22.275 80.238 21.9755 80.3477 21.6602C79.9717 21.4238 79.2823 21.1559 78.3265 21.1559C76.18 21.1559 74.7855 22.8581 74.7855 25.5376C74.7855 28.1856 76.133 29.8878 78.3578 29.8878C79.2823 29.8878 80.05 29.6357 80.426 29.3835Z" fill="white"/>
-<path d="M87.4364 25.5376C87.4364 27.366 86.8096 28.8633 85.2272 28.8633C83.629 28.8633 82.9866 27.366 82.9866 25.5376C82.9866 23.725 83.629 22.1489 85.2272 22.1489C86.8096 22.1489 87.4364 23.725 87.4364 25.5376ZM88.7368 25.5376C88.7368 22.9685 87.4677 21.1559 85.2115 21.1559C82.971 21.1559 81.6862 22.9685 81.6862 25.5376C81.6862 28.091 82.971 29.9036 85.2272 29.9036C87.4677 29.9036 88.7368 28.091 88.7368 25.5376Z" fill="white"/>
-<path d="M102.179 29.7302V24.9702C102.179 23.2522 102.085 21.1716 99.3121 21.1716C98.043 21.1716 97.1343 21.7233 96.6799 22.1331C96.1942 21.5342 95.4421 21.1716 94.2827 21.1716C92.8569 21.1716 91.9638 21.4238 91.2588 21.7075V29.7302H92.5435V22.4326C92.8726 22.2907 93.3896 22.1804 94.173 22.1804C95.9905 22.1804 96.0845 23.331 96.0845 25.1593V29.7302H97.3693V25.3485C97.3693 24.5289 97.3223 23.662 97.2283 22.9212C97.5887 22.5744 98.231 22.1961 99.1555 22.1961C100.863 22.1961 100.91 23.5044 100.91 25.1909V29.7302H102.179Z" fill="white"/>
-<circle cx="114" cy="24.5001" r="7.5" fill="#FFDC26"/>
-<path d="M116.598 21.8101C116.348 22.7727 115.768 24.5277 115.609 25.034C115.411 25.6669 114.759 27.3283 113.315 27.3283C111.871 27.3283 110.823 26.3987 110.823 24.5396C110.823 22.6804 111.849 21.6119 113.168 21.6119C114.258 21.6119 114.944 22.0772 115.25 23.0079L116.181 26.3878C116.339 26.9416 116.581 27.3283 116.977 27.3283C117.471 27.3283 117.748 26.735 117.748 26.201" stroke="#242B3F"/>
-</svg>
+<svg width="122" height="33" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 122 33" xml:space="preserve"><style>.st0{fill:#da322f}.st1{fill:#fff}</style><path class="st0" d="M50.7 12.2V0h-2.3v4c-.3-.1-.8-.3-1.5-.3-2.3 0-3.8 1.8-3.8 4.6 0 2.9 1.6 4.5 4.3 4.5 1.5 0 2.7-.3 3.3-.6zm-2.3-1.3c-.2.1-.5.1-1 .1-1.3 0-2-1.1-2-2.8 0-1.7.5-2.8 1.9-2.8.4 0 .8.1 1.1.2v5.3zM59.4 12.3V7.4v-1C59.1 4.6 58 3.7 56 3.7c-1.3 0-2.4.3-3 .6l.4 1.7c.6-.3 1.4-.5 2.3-.5 1.1 0 1.5.6 1.5 1.6h-.9c-2.2.1-3.9.9-3.9 3 0 2 1.3 2.8 3.6 2.8 1.4-.1 2.7-.3 3.4-.6zM57.2 11c-.3.1-.6.1-1.1.1-.9 0-1.5-.4-1.5-1.3 0-1 .7-1.3 1.7-1.4h.9V11zM66.5 12.4c-.1-.6-.1-1.1-.2-1.7-.4.2-.8.3-1.3.2-.8-.1-.9-.6-.9-1.8V5.7h2.2V3.9h-2.2V1.6h-2.3v2.3h-1.1v1.8h1.1v3.6c.1 1.9.5 3.6 3.1 3.5.7-.1 1.3-.2 1.6-.4zM74.5 12.3V7.4v-1c-.2-1.8-1.3-2.7-3.4-2.7-1.3 0-2.4.3-3 .6l.4 1.7c.6-.3 1.4-.5 2.3-.5 1.1 0 1.5.6 1.5 1.6h-.9c-2.2.1-3.9.9-3.9 3 0 2 1.3 2.8 3.6 2.8 1.5-.1 2.7-.3 3.4-.6zM72.3 11c-.3.1-.6.1-1.1.1-.9 0-1.5-.4-1.5-1.3 0-1 .7-1.3 1.7-1.4h.9V11zM78.9 11.4c0-.8-.6-1.4-1.4-1.4s-1.4.6-1.4 1.4c0 .9.6 1.4 1.4 1.4s1.4-.6 1.4-1.4z"/><g><path class="st1" d="M15.5 28.2c-.4.3-1 .5-1.7.5-1.4 0-2.4-1-2.4-3.2 0-2 .9-3.4 2.6-3.4.7 0 1.2.1 1.5.2v5.9zm1.3 1.3v-7.8c-.5-.3-1.4-.5-2.7-.5-2.5 0-3.9 1.8-3.9 4.4 0 2.7 1.5 4.1 3.5 4.1.9 0 1.6-.3 1.9-.5v.5c0 .8-.2 1.4-.7 1.7-.4.4-1 .6-1.8.6s-1.6-.2-2.1-.5c-.1.3-.2.7-.3 1 .6.3 1.5.5 2.6.5 2.2 0 3.5-1.1 3.5-3.5zM23.7 21.3c-.4-.1-.9-.1-1.4-.1H22c-1.1 0-1.9.3-2.4.6v8h1.3v-7.3c.2-.1.6-.3 1.2-.3h.2c.4 0 .7 0 1 .1.2-.3.3-.6.4-1zM29.7 28.8c-.4.1-.9.2-1.6.2-1.2 0-2-.5-2-1.6 0-1.3 1-1.7 2.2-1.9h1.4v3.3zm1.3.6v-4.5-.9c0-1.8-1.1-2.8-3-2.8-1.1 0-2 .3-2.4.5l.2 1c.4-.2 1-.4 2-.4 1.6 0 1.9.9 1.9 2.4h-1.3c-2 .2-3.6 1-3.6 2.8 0 1.7 1.2 2.6 3.1 2.6 1.4-.2 2.5-.4 3.1-.7zM39.7 29.7V25c0-1.8-.2-3.8-3.1-3.8-1.4 0-2.4.2-3.1.6v8h1.3v-7.3c.3-.1.8-.3 1.7-.3 2 0 2 1.3 2 3v4.5h1.2zM47.4 28.7c-.3.1-.8.2-1.5.2-1.7 0-2.6-1.3-2.6-3.3 0-1.8.7-3.4 2.6-3.4.6 0 1.2.2 1.5.4v6.1zm1.3.7v-12h-1.3v4.2c-.4-.2-1-.4-1.7-.4-2.3 0-3.7 1.7-3.7 4.4 0 2.6 1.4 4.3 3.9 4.3 1.3 0 2.3-.3 2.8-.5zM54.3 29.1c-1.1-.3-1.4-.5-1.4-3v-8.6h-1.3v9.7c0 2.1.8 2.6 2.4 2.8l.3-.9zM61.9 21.3h-1.2c-.6 2.1-1 4-1.7 6-.1.4-.3 1.1-.3 1.2-.1-.2-.2-.7-.4-1.2-.7-2-1.4-4.1-1.9-5.9H55c.8 2.9 1.9 5.8 3 8.4-.2.6-.4 1.6-1.1 1.6-.3 0-.5-.2-1-.4l-.3.8c.3.2.8.5 1.5.5.9 0 1.3-.8 1.8-2 1.2-2.8 2.1-5.8 3-9zM68.6 25.5c0 1.8-.6 3.3-2.2 3.3s-2.2-1.5-2.2-3.3c0-1.8.6-3.4 2.2-3.4s2.2 1.6 2.2 3.4zm1.3 0c0-2.6-1.3-4.4-3.5-4.4s-3.5 1.8-3.5 4.4c0 2.6 1.3 4.4 3.5 4.4s3.5-1.8 3.5-4.4zM78.7 29.7V25c0-1.8-.2-3.8-3.1-3.8-1.4 0-2.4.2-3.1.6v8h1.3v-7.3c.3-.1.8-.3 1.7-.3 2 0 2 1.3 2 3v4.5h1.2zM83 28.9c0-.5-.4-.9-.9-.9s-.9.4-.9.9.4.9.9.9.9-.3.9-.9zM90.1 29.4l-.3-1c-.3.2-.9.4-1.6.4-1.7 0-2.5-1.3-2.5-3.3 0-2 .8-3.3 2.4-3.3.7 0 1.2.2 1.5.4l.3-.9c-.4-.2-1.1-.5-2-.5-2.1 0-3.5 1.7-3.5 4.4 0 2.6 1.3 4.4 3.6 4.4.9-.1 1.7-.4 2.1-.6zM97.1 25.5c0 1.8-.6 3.3-2.2 3.3s-2.2-1.5-2.2-3.3c0-1.8.6-3.4 2.2-3.4s2.2 1.6 2.2 3.4zm1.3 0c0-2.6-1.3-4.4-3.5-4.4s-3.5 1.8-3.5 4.4c0 2.6 1.3 4.4 3.5 4.4s3.5-1.8 3.5-4.4zM111.8 29.7V25c0-1.7-.1-3.8-2.9-3.8-1.3 0-2.2.6-2.6 1-.5-.6-1.2-1-2.4-1-1.4 0-2.3.3-3 .5v8h1.3v-7.3c.3-.1.8-.3 1.6-.3 1.8 0 1.9 1.2 1.9 3v4.6h1.3v-4.4c0-.8 0-1.7-.1-2.4.4-.3 1-.7 1.9-.7 1.7 0 1.8 1.3 1.8 3v4.5h1.2z"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/img/home_logo_data.svg b/src/assets/img/home_logo_data.svg
index c9854fd4838445a4703cb9b864c060c1083ac833..0b52dbcde3c6dbc60a65c7529962900c921e65c0 100644
--- a/src/assets/img/home_logo_data.svg
+++ b/src/assets/img/home_logo_data.svg
@@ -1,78 +1 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 23.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
-<svg version="1.1" id="b64850fe-2e14-40d7-8c6c-d81e0fedf6b3"
- xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 509 48.1"
- style="enable-background:new 0 0 509 48.1;" xml:space="preserve">
-<style type="text/css">
- .Style_x0020_graphique_x0020_2{fill:#FFFFFF;}
- .Style_x0020_graphique{fill:#da322f;}
- .Style_graphique_yellow{fill:#ffdc26;}
- .Style_graphique_brand_color{fill:#242b3f;}
-</style>
-<title>logo_data_alpha</title>
-<path class="Style_graphique_yellow" d="M457.1,10h37.8c7.8,0,14.1,6.3,14.1,14.1c0,0,0,0,0,0l0,0c0,7.8-6.3,14.1-14.1,14.2h-37.8
- c-7.8-0.1-14.1-6.4-14.1-14.2l0,0C443,16.3,449.3,10,457.1,10L457.1,10z"/>
-<path class="Style_graphique_brand_color" d="M462,29.2h-1.9l-0.2-0.3l-0.7-2.1H455l-0.8,2.1l-0.2,0.3h-1.9l4-10.1h1.9L462,29.2z
- M455.4,25.4h3.3l-1.3-3.4c0-0.2-0.1-0.3-0.1-0.5c-0.1-0.2-0.2-0.5-0.2-0.7c-0.1,0.2-0.2,0.5-0.2,0.7c-0.1,0.2-0.2,0.3-0.2,0.5
- L455.4,25.4z"/>
-<path class="Style_graphique_brand_color" d="M464.9,27.6h4.1v1.6h-5.9V19.1h1.8V27.6z"/>
-<path class="Style_graphique_brand_color" d="M472.3,25.6v3.6h-1.9V19.1h3.3c0.6,0,1.2,0,1.7,0.2l1.3,0.7c0.3,0.3,0.5,0.6,0.7,1
- c0.1,0.4,0.2,0.9,0.2,1.3c0,0.4-0.1,0.9-0.2,1.3c-0.1,0.4-0.4,0.8-0.8,1.1c-0.3,0.3-0.8,0.5-1.2,0.7c-0.5,0.2-1.1,0.2-1.7,0.2
- L472.3,25.6z M472.3,24.2h1.4l0.9-0.2l0.6-0.3l0.4-0.6c0.1-0.3,0.1-0.5,0.1-0.8c0-0.2,0-0.5-0.1-0.7c0-0.2-0.2-0.5-0.4-0.6
- c-0.1-0.2-0.4-0.3-0.6-0.4h-2.3V24.2z"/>
-<path class="Style_graphique_brand_color" d="M487.6,29.2h-1.9v-4.4H481v4.4h-1.9V19.1h1.9v4.3h4.7v-4.3h1.9V29.2z"/>
-<path class="Style_graphique_brand_color" d="M498.6,29.2h-1.9l-0.2-0.3l-0.7-2.1h-4.2l-0.8,2.1l-0.2,0.3h-1.9l4-10.1h1.9
- L498.6,29.2z M492,25.4h3.3L494,22c0-0.2-0.1-0.3-0.1-0.5c-0.1-0.2-0.2-0.5-0.2-0.7c-0.1,0.2-0.2,0.5-0.2,0.7
- c-0.1,0.2-0.2,0.3-0.2,0.5L492,25.4z"/>
-<path class="Style_x0020_graphique" d="M24.5,36.5V0.1h-7.1v12c-1.1-0.4-2.6-0.8-4.5-0.8C5.8,11.3,1.3,16.6,1.3,25
- c0,8.5,5,13.5,13.1,13.5C18.7,38.5,22.4,37.5,24.5,36.5z M17.4,32.7c-0.7,0.2-1.6,0.4-3,0.4c-4,0-6-3.2-6-8.4c0-4.9,1.6-8.3,5.8-8.3
- c1.3,0,2.4,0.4,3.2,0.7V32.7z"/>
-<path class="Style_x0020_graphique" d="M50.9,36.8V22.3c0-1.1,0-2.1-0.1-3.1c-0.6-5.4-4.1-8.1-10.3-8.1c-3.9,0-7.3,1-9.1,1.7
- l1.2,5.1c1.7-0.8,4.2-1.5,6.9-1.5c3.5,0,4.5,1.9,4.6,4.7c-0.6,0-1.7-0.1-2.6,0c-6.6,0.4-12,2.6-12,8.9c0,5.9,4.1,8.4,11,8.4
- C45,38.4,48.9,37.7,50.9,36.8z M44.2,33.1c-0.9,0.3-1.7,0.4-3.3,0.4c-2.8,0-4.6-1.1-4.6-3.7c0-3,2.3-3.9,5.1-4.2c1.1-0.1,2,0,2.8,0
- V33.1z"/>
-<path class="Style_x0020_graphique" d="M72.8,37.2c-0.2-1.7-0.4-3.4-0.6-5.1c-1.2,0.6-2.5,0.8-3.8,0.7c-2.3-0.2-2.7-1.7-2.7-5.3
- V17.1h6.6v-5.4h-6.6V4.9h-7.1v6.9h-3.4v5.3h3.4c0,2.9,0,7.9,0.1,10.8c0.3,5.6,1.5,10.8,9.4,10.5C70.1,38.2,71.7,37.7,72.8,37.2z"/>
-<path class="Style_x0020_graphique" d="M97.2,36.8V22.3c0-1.1,0-2.1-0.1-3.1c-0.6-5.4-4.1-8.1-10.3-8.1c-3.9,0-7.3,1-9.1,1.7
- l1.2,5.1c1.7-0.8,4.2-1.5,6.9-1.5c3.5,0,4.5,1.9,4.6,4.7c-0.6,0-1.7-0.1-2.6,0c-6.6,0.4-12,2.6-12,8.9c0,5.9,4.1,8.4,11,8.4
- C91.3,38.4,95.1,37.7,97.2,36.8z M90.4,33.1c-0.9,0.3-1.7,0.4-3.3,0.4c-2.8,0-4.6-1.1-4.6-3.7c0-3,2.3-3.9,5.1-4.2
- c1.1-0.1,2,0,2.8,0V33.1z"/>
-<path class="Style_x0020_graphique" d="M110.5,34.2c0-2.5-1.9-4.3-4.3-4.3c-2.4,0-4.3,1.8-4.3,4.3c0,2.5,2,4.2,4.3,4.2
- C108.6,38.4,110.5,36.7,110.5,34.2z"/>
-<path class="Style_x0020_graphique_x0020_2" d="M131.5,33.3c-1.1,0.8-3,1.5-5.1,1.5c-4.4,0-7.2-3.2-7.2-9.6c0-6.1,2.6-10.2,7.8-10.2
- c2.2,0,3.6,0.2,4.6,0.7V33.3z M135.3,37.5V13.6c-1.7-0.8-4.4-1.6-8.4-1.6c-7.6,0-11.9,5.5-11.9,13.2c0,8.2,4.5,12.5,10.7,12.5
- c2.8,0,4.8-0.9,5.8-1.4v1.6c0,2.4-0.7,4.1-2.2,5.2c-1.2,1.1-3,1.7-5.4,1.7c-2.4,0-4.9-0.7-6.3-1.4c-0.4,1.1-0.7,2.1-1,3.1
- c1.9,0.9,4.6,1.5,7.9,1.5C131.6,48,135.3,44.6,135.3,37.5z"/>
-<path class="Style_x0020_graphique_x0020_2" d="M156.4,12.5c-1.2-0.2-2.8-0.3-4.3-0.3h-0.6c-3.4,0.1-5.8,0.9-7.5,1.7v24.3h3.9V16
- c0.6-0.3,1.9-0.8,3.7-0.8h0.7c1.2,0,2.2,0.1,3.2,0.4C155.9,14.6,156.1,13.5,156.4,12.5z"/>
-<path class="Style_x0020_graphique_x0020_2" d="M175.1,35.1c-1.2,0.4-2.8,0.6-4.8,0.6c-3.8,0-6.1-1.4-6.1-5c0-4.1,3.1-5.3,6.9-5.8
- c0.6,0,1.2-0.1,1.7-0.1c0.9,0,1.7,0.1,2.4,0.1V35.1z M178.9,37.1V23.3c0-1,0-1.9,0-2.8c-0.1-5.6-3.5-8.4-9.1-8.4
- c-3.3,0-6,0.9-7.3,1.5l0.7,2.9c1.2-0.6,3.2-1.3,6.2-1.3c4.8,0,5.7,2.7,5.8,7.2c-0.7,0-1.8-0.1-2.9-0.1c-0.3,0-0.7,0-1,0
- c-6.2,0.5-10.9,2.9-10.9,8.6c0,5.2,3.6,7.8,9.6,7.8C173.7,38.6,177.1,37.9,178.9,37.1z"/>
-<path class="Style_x0020_graphique_x0020_2" d="M205.7,38.1V23.6c0-5.4-0.6-11.6-9.6-11.6c-4.4,0-7.5,0.7-9.6,1.7v24.3h3.9V15.9
- c1-0.4,2.6-0.8,5.2-0.8c6,0,6.1,4.1,6.1,9.2v13.8H205.7z"/>
-<path class="Style_x0020_graphique_x0020_2" d="M229.3,34.9c-0.9,0.4-2.3,0.7-4.6,0.7c-5.3,0-8-4-8-10.2c0-5.5,2-10.3,7.9-10.3
- c1.9,0,3.6,0.7,4.7,1.2V34.9z M233.2,37V0.6h-3.9v12.8c-1.2-0.5-3-1.2-5.2-1.2c-7,0-11.3,5.2-11.3,13.4c0,7.9,4.4,13.1,11.9,13.1
- C228.5,38.6,231.5,37.8,233.2,37z"/>
-<path class="Style_x0020_graphique_x0020_2" d="M250.4,36.1c-3.4-1-4.2-1.5-4.2-9.3V0.6h-3.9V30c0,6.5,2.4,8.1,7.3,8.6L250.4,36.1z"
- />
-<path class="Style_x0020_graphique_x0020_2" d="M273.5,12.5h-3.8c-1.7,6.5-3.2,12.1-5.2,18.1c-0.4,1.2-0.9,3.4-1.1,3.5
- c-0.3-0.7-0.7-2.1-1.2-3.6c-2.3-6.2-4.3-12.4-5.7-18.1h-4.2c2.5,8.7,5.8,17.5,9.3,25.6c-0.6,1.9-1.3,5-3.3,5c-0.9,0-1.7-0.5-2.9-1.2
- l-0.8,2.5c1,0.5,2.3,1.4,4.6,1.4c2.7,0,4-2.5,5.4-6.1C268,31.3,270.8,22.1,273.5,12.5z"/>
-<path class="Style_x0020_graphique_x0020_2" d="M294.2,25.3c0,5.6-1.9,10.1-6.8,10.1c-4.9,0-6.9-4.6-6.9-10.1c0-5.5,2-10.3,6.9-10.3
- C292.2,15,294.2,19.8,294.2,25.3z M298.1,25.3c0-7.8-3.9-13.3-10.8-13.3c-6.9,0-10.8,5.5-10.8,13.3c0,7.8,3.9,13.3,10.8,13.3
- C294.2,38.6,298.1,33.1,298.1,25.3z"/>
-<path class="Style_x0020_graphique_x0020_2" d="M325,38.1V23.6c0-5.4-0.6-11.6-9.6-11.6c-4.4,0-7.5,0.7-9.6,1.7v24.3h3.9V15.9
- c1-0.4,2.6-0.8,5.2-0.8c6,0,6.1,4.1,6.1,9.2v13.8H325z"/>
-<path class="Style_x0020_graphique_x0020_2" d="M338.4,35.7c0-1.6-1.2-2.8-2.8-2.8c-1.6,0-2.8,1.2-2.8,2.8c0,1.6,1.2,2.8,2.8,2.8
- C337.2,38.5,338.4,37.3,338.4,35.7z"/>
-<path class="Style_x0020_graphique_x0020_2" d="M360,37l-0.9-3c-1,0.6-2.6,1.3-4.8,1.3c-5.2,0-7.5-4.1-7.5-10.1
- c0-6.1,2.3-10.1,7.3-10.1c2.3,0,3.6,0.5,4.7,1.2c0.3-1,0.6-1.9,1-2.8c-1.2-0.7-3.3-1.5-6.2-1.5c-6.6,0-10.8,5.2-10.8,13.3
- c0,8.1,4.1,13.2,10.9,13.2C356.5,38.6,358.8,37.8,360,37z"/>
-<path class="Style_x0020_graphique_x0020_2" d="M381.4,25.3c0,5.6-1.9,10.1-6.8,10.1c-4.9,0-6.9-4.6-6.9-10.1c0-5.5,2-10.3,6.9-10.3
- C379.5,15,381.4,19.8,381.4,25.3z M385.4,25.3c0-7.8-3.9-13.3-10.8-13.3c-6.9,0-10.8,5.5-10.8,13.3c0,7.8,3.9,13.3,10.8,13.3
- C381.5,38.6,385.4,33.1,385.4,25.3z"/>
-<path class="Style_x0020_graphique_x0020_2" d="M426.6,38.1V23.6c0-5.2-0.3-11.6-8.8-11.6c-3.9,0-6.7,1.7-8.1,2.9
- c-1.5-1.8-3.8-2.9-7.3-2.9c-4.4,0-7.1,0.8-9.3,1.6v24.4h3.9V15.9c1-0.4,2.6-0.8,5-0.8c5.6,0,5.9,3.5,5.9,9.1v13.9h3.9V24.7
- c0-2.5-0.1-5.1-0.4-7.4c1.1-1.1,3.1-2.2,5.9-2.2c5.2,0,5.4,4,5.4,9.1v13.8H426.6z"/>
-</svg>
+<svg version="1.1" id="b64850fe-2e14-40d7-8c6c-d81e0fedf6b3" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 509 48.1" xml:space="preserve"><style>.st0{fill:#da322f}.st1{fill:#fff}</style><path class="st0" d="M65 36.5V.1h-7.1v12c-1.1-.4-2.6-.8-4.5-.8-7.1 0-11.6 5.3-11.6 13.7 0 8.5 5 13.5 13.1 13.5 4.3 0 8-1 10.1-2zm-7.1-3.8c-.7.2-1.6.4-3 .4-4 0-6-3.2-6-8.4 0-4.9 1.6-8.3 5.8-8.3 1.3 0 2.4.4 3.2.7v15.6zM91.4 36.8V22.3c0-1.1 0-2.1-.1-3.1-.6-5.4-4.1-8.1-10.3-8.1-3.9 0-7.3 1-9.1 1.7l1.2 5.1c1.7-.8 4.2-1.5 6.9-1.5 3.5 0 4.5 1.9 4.6 4.7-.6 0-1.7-.1-2.6 0-6.6.4-12 2.6-12 8.9 0 5.9 4.1 8.4 11 8.4 4.5 0 8.4-.7 10.4-1.6zm-6.6-3.7c-.9.3-1.7.4-3.3.4-2.8 0-4.6-1.1-4.6-3.7 0-3 2.3-3.9 5.1-4.2 1.1-.1 2 0 2.8 0v7.5zM113.3 37.2l-.6-5.1c-1.2.6-2.5.8-3.8.7-2.3-.2-2.7-1.7-2.7-5.3V17.1h6.6v-5.4h-6.6V4.9h-7.1v6.9h-3.4v5.3h3.4c0 2.9 0 7.9.1 10.8.3 5.6 1.5 10.8 9.4 10.5 2-.2 3.6-.7 4.7-1.2zM137.8 36.8V22.3c0-1.1 0-2.1-.1-3.1-.6-5.4-4.1-8.1-10.3-8.1-3.9 0-7.3 1-9.1 1.7l1.2 5.1c1.7-.8 4.2-1.5 6.9-1.5 3.5 0 4.5 1.9 4.6 4.7-.6 0-1.7-.1-2.6 0-6.6.4-12 2.6-12 8.9 0 5.9 4.1 8.4 11 8.4 4.5 0 8.2-.7 10.4-1.6zm-6.9-3.7c-.9.3-1.7.4-3.3.4-2.8 0-4.6-1.1-4.6-3.7 0-3 2.3-3.9 5.1-4.2 1.1-.1 2 0 2.8 0v7.5zM151.1 34.2c0-2.5-1.9-4.3-4.3-4.3s-4.3 1.8-4.3 4.3 2 4.2 4.3 4.2 4.3-1.7 4.3-4.2z"/><path class="st1" d="M172.1 33.3c-1.1.8-3 1.5-5.1 1.5-4.4 0-7.2-3.2-7.2-9.6 0-6.1 2.6-10.2 7.8-10.2 2.2 0 3.6.2 4.6.7v17.6h-.1zm3.8 4.2V13.6c-1.7-.8-4.4-1.6-8.4-1.6-7.6 0-11.9 5.5-11.9 13.2 0 8.2 4.5 12.5 10.7 12.5 2.8 0 4.8-.9 5.8-1.4v1.6c0 2.4-.7 4.1-2.2 5.2-1.2 1.1-3 1.7-5.4 1.7-2.4 0-4.9-.7-6.3-1.4-.4 1.1-.7 2.1-1 3.1 1.9.9 4.6 1.5 7.9 1.5 7.1 0 10.8-3.4 10.8-10.5zM196.9 12.5c-1.2-.2-2.8-.3-4.3-.3h-.6c-3.4.1-5.8.9-7.5 1.7v24.3h3.9V16c.6-.3 1.9-.8 3.7-.8h.7c1.2 0 2.2.1 3.2.4.4-1 .7-2.1.9-3.1zM215.7 35.1c-1.2.4-2.8.6-4.8.6-3.8 0-6.1-1.4-6.1-5 0-4.1 3.1-5.3 6.9-5.8.6 0 1.2-.1 1.7-.1.9 0 1.7.1 2.4.1l-.1 10.2zm3.7 2V23.3v-2.8c-.1-5.6-3.5-8.4-9.1-8.4-3.3 0-6 .9-7.3 1.5l.7 2.9c1.2-.6 3.2-1.3 6.2-1.3 4.8 0 5.7 2.7 5.8 7.2-.7 0-1.8-.1-2.9-.1h-1c-6.2.5-10.9 2.9-10.9 8.6 0 5.2 3.6 7.8 9.6 7.8 3.7-.1 7.2-.8 8.9-1.6zM246.2 38.1V23.6c0-5.4-.6-11.6-9.6-11.6-4.4 0-7.5.7-9.6 1.7V38h3.9V15.9c1-.4 2.6-.8 5.2-.8 6 0 6.1 4.1 6.1 9.2v13.8h4zM269.9 34.9c-.9.4-2.3.7-4.6.7-5.3 0-8-4-8-10.2 0-5.5 2-10.3 7.9-10.3 1.9 0 3.6.7 4.7 1.2v18.6zm3.9 2.1V.6h-3.9v12.8c-1.2-.5-3-1.2-5.2-1.2-7 0-11.3 5.2-11.3 13.4 0 7.9 4.4 13.1 11.9 13.1 3.7-.1 6.7-.9 8.5-1.7zM290.9 36.1c-3.4-1-4.2-1.5-4.2-9.3V.6h-3.9V30c0 6.5 2.4 8.1 7.3 8.6l.8-2.5zM314 12.5h-3.8c-1.7 6.5-3.2 12.1-5.2 18.1-.4 1.2-.9 3.4-1.1 3.5-.3-.7-.7-2.1-1.2-3.6-2.3-6.2-4.3-12.4-5.7-18.1h-4.2c2.5 8.7 5.8 17.5 9.3 25.6-.6 1.9-1.3 5-3.3 5-.9 0-1.7-.5-2.9-1.2l-.8 2.5c1 .5 2.3 1.4 4.6 1.4 2.7 0 4-2.5 5.4-6.1 3.4-8.3 6.2-17.5 8.9-27.1zM334.8 25.3c0 5.6-1.9 10.1-6.8 10.1s-6.9-4.6-6.9-10.1 2-10.3 6.9-10.3c4.8 0 6.8 4.8 6.8 10.3zm3.8 0c0-7.8-3.9-13.3-10.8-13.3S317 17.5 317 25.3s3.9 13.3 10.8 13.3 10.8-5.5 10.8-13.3zM365.5 38.1V23.6c0-5.4-.6-11.6-9.6-11.6-4.4 0-7.5.7-9.6 1.7V38h3.9V15.9c1-.4 2.6-.8 5.2-.8 6 0 6.1 4.1 6.1 9.2v13.8h4zM378.9 35.7c0-1.6-1.2-2.8-2.8-2.8-1.6 0-2.8 1.2-2.8 2.8s1.2 2.8 2.8 2.8c1.7 0 2.8-1.2 2.8-2.8zM400.5 37l-.9-3c-1 .6-2.6 1.3-4.8 1.3-5.2 0-7.5-4.1-7.5-10.1 0-6.1 2.3-10.1 7.3-10.1 2.3 0 3.6.5 4.7 1.2.3-1 .6-1.9 1-2.8-1.2-.7-3.3-1.5-6.2-1.5-6.6 0-10.8 5.2-10.8 13.3s4.1 13.2 10.9 13.2c2.8.1 5.1-.7 6.3-1.5zM421.9 25.3c0 5.6-1.9 10.1-6.8 10.1s-6.9-4.6-6.9-10.1 2-10.3 6.9-10.3 6.8 4.8 6.8 10.3zm4 0c0-7.8-3.9-13.3-10.8-13.3s-10.8 5.5-10.8 13.3 3.9 13.3 10.8 13.3 10.8-5.5 10.8-13.3zM467.1 38.1V23.6c0-5.2-.3-11.6-8.8-11.6-3.9 0-6.7 1.7-8.1 2.9-1.5-1.8-3.8-2.9-7.3-2.9-4.4 0-7.1.8-9.3 1.6V38h3.9V15.9c1-.4 2.6-.8 5-.8 5.6 0 5.9 3.5 5.9 9.1v13.9h3.9V24.7c0-2.5-.1-5.1-.4-7.4 1.1-1.1 3.1-2.2 5.9-2.2 5.2 0 5.4 4 5.4 9.1V38l3.9.1z"/></svg>
\ No newline at end of file
diff --git a/src/environments/environment.production.ts b/src/environments/environment.production.ts
index be01c656deade1a539867ce14d6d7058809e427a..be02a9883e6ebd9628c56d0d77c964cbb3685041 100644
--- a/src/environments/environment.production.ts
+++ b/src/environments/environment.production.ts
@@ -32,11 +32,10 @@ export const environment = {
// Use variable route names (AppRoutes.credits...) for each static page to attribute the corresponding
// cms page in order to make sure that if the name of the route change in the config file (routes.ts),
// the cms page will still be served.
-environment.cmsStaticPages[AppRoutes.accessibility.uri] = 'accessibilite';
+// environment.cmsStaticPages[AppRoutes.accessibility.uri] = 'accessibilite';
environment.cmsStaticPages[AppRoutes.approach.uri] = 'la-demarche';
environment.cmsStaticPages[AppRoutes.documentation.uri] = 'utiliser-la-plateforme-data-du-grand-lyon';
environment.cmsStaticPages[AppRoutes.legalNotices.uri] = 'mentions-legales';
environment.cmsStaticPages[AppRoutes.credits.uri] = 'credits';
environment.cmsStaticPages[AppRoutes.cgu.uri] = 'conditions-generales-dutilisation';
environment.cmsStaticPages[AppRoutes.beginners.uri] = 'le-coin-des-debutants';
-environment.cmsStaticPages[AppRoutes.beta.uri] = 'pourquoi-une-version-beta';
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index aa5fd8afff92f0cf5a8d10c313e566108737fc0d..1eabaac1bf3f39ff3bb2b85553007165d204ec2e 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -33,10 +33,9 @@ export const environment = {
// Use variable route names (AppRoutes.credits...) for each static page to attribute the corresponding
// cms page in order to make sure that if the name of the route change in the config file (routes.ts),
// the cms page will still be served.
-environment.cmsStaticPages[AppRoutes.accessibility.uri] = 'accessibilite';
+// environment.cmsStaticPages[AppRoutes.accessibility.uri] = 'accessibilite';
environment.cmsStaticPages[AppRoutes.approach.uri] = 'la-demarche';
environment.cmsStaticPages[AppRoutes.documentation.uri] = 'utiliser-la-plateforme-data-du-grand-lyon';
environment.cmsStaticPages[AppRoutes.legalNotices.uri] = 'mentions-legales';
environment.cmsStaticPages[AppRoutes.cgu.uri] = 'conditions-generales-dutilisation';
environment.cmsStaticPages[AppRoutes.beginners.uri] = 'le-coin-des-debutants';
-environment.cmsStaticPages[AppRoutes.beta.uri] = 'pourquoi-une-version-beta';
diff --git a/src/i18n/messages.en.xlf b/src/i18n/messages.en.xlf
index 117f148014631e02a27e6f475dd954d1abe352da..578982784979ce812750b7150829641981c0137a 100644
--- a/src/i18n/messages.en.xlf
+++ b/src/i18n/messages.en.xlf
@@ -443,6 +443,22 @@
<source>API</source>
<target>API</target>
</trans-unit>
+ <trans-unit id="dataset.detail.reuse" datatype="html">
+ <source>Reuse</source>
+ <target>Reuse</target>
+ </trans-unit>
+ <trans-unit id="dataset.reuse.add" datatype="html">
+ <source>Add a reuse</source>
+ <target>Add a reuse</target>
+ </trans-unit>
+ <trans-unit id="dataset.reuse.title1" datatype="html">
+ <source>They use these data</source>
+ <target>They use these data</target>
+ </trans-unit>
+ <trans-unit id="dataset.reuse.title2" datatype="html">
+ <source>News</source>
+ <target>News</target>
+ </trans-unit>
<trans-unit id="dataset.detail.info" datatype="html">
<source>This dataset doesn't contain geographical data.</source>
<target>This dataset doesn't contain geographical data.</target>
@@ -455,6 +471,14 @@
<source>Show less</source>
<target>Show less</target>
</trans-unit>
+ <trans-unit id="dataset.info.dashboard" datatype="html">
+ <source>Dashboard</source>
+ <target>Dashboard</target>
+ </trans-unit>
+ <trans-unit id="dataset.info.partners" datatype="html">
+ <source>Partners</source>
+ <target>Partners</target>
+ </trans-unit>
<trans-unit id="dataset.info.parentDataset" datatype="html">
<source>Parent dataset</source>
<target>Parent dataset</target>
@@ -507,6 +531,10 @@
<x id="INTERPOLATION"/>
view(s) during the last month</target>
</trans-unit>
+ <trans-unit id="dataset.info.view" datatype="html">
+ <source>view</source>
+ <target>view</target>
+ </trans-unit>
<trans-unit id="dataset.info.publishDate" datatype="html">
<source>Published on <x id="INTERPOLATION"/>
</source>
@@ -1088,6 +1116,10 @@ Here is the list of the last evolutions of the portal. If you wish to contribute
<source>Approach</source>
<target>Approach</target>
</trans-unit>
+ <trans-unit id="sitemap.reuses" datatype="html">
+ <source>Reuses</source>
+ <target>Reuses</target>
+ </trans-unit>
<trans-unit id="sitemap.secondaryPages" datatype="html">
<source>Secondary pages</source>
<target>Secondary pages</target>
@@ -1109,8 +1141,8 @@ Here is the list of the last evolutions of the portal. If you wish to contribute
<target>Credits</target>
</trans-unit>
<trans-unit id="sitemap.cgu" datatype="html">
- <source>General conditions of use</source>
- <target>General conditions of use</target>
+ <source>Terms of use</source>
+ <target>Terms of use</target>
</trans-unit>
<!-- Results page -->
@@ -1201,13 +1233,69 @@ Here is the list of the last evolutions of the portal. If you wish to contribute
<target>Ouch!</target>
</trans-unit>
<trans-unit id="cookieBanner.message" datatype="html">
- <source>By continuing to browse this site, you agree to the use of cookies. </source>
- <target>By continuing to browse this site, you agree to the use of cookies. </target>
+ <source>We care about your personal data and we use cookies in order to improve your experience.</source>
+ <target>We care about your personal data and we use cookies in order to improve your experience.</target>
</trans-unit>
<trans-unit id="cookieBanner.more" datatype="html">
<source>Learn more</source>
<target>Learn more</target>
</trans-unit>
+ <trans-unit id="cookieBanner.close" datatype="html">
+ <source>Close</source>
+ <target>Close</target>
+ </trans-unit>
+ <trans-unit id="cookieModal.title" datatype="html">
+ <source>Cookies manager</source>
+ <target>Cookies manager</target>
+ </trans-unit>
+ <trans-unit id="cookieModal.tab1title" datatype="html">
+ <source>Why do we use cookies?</source>
+ <target>Why do we use cookies?</target>
+ </trans-unit>
+ <trans-unit id="cookieModal.tab1" datatype="html">
+ <source>Why do we use cookies?</source>
+ <target>Why do we use cookies?</target>
+ </trans-unit>
+ <trans-unit id="cookieModal.tab1.p1" datatype="html">
+ <source>We use cookies to learn about how you interact with us, improve your experience on our site and personalize your relationship with the platform data.grandlyon.com.</source>
+ <target>We use cookies to learn about how you interact with us, improve your experience on our site and personalize your relationship with the platform data.grandlyon.com.</target>
+ </trans-unit>
+ <trans-unit id="cookieModal.tab1.p2" datatype="html">
+ <source>Cookies are not used for commercial purposes.</source>
+ <target>Cookies are not used for commercial purposes.</target>
+ </trans-unit>
+ <trans-unit id="cookieModal.tab1.p3" datatype="html">
+ <source>Click on the « Necessary cookies » tab to find out more.</source>
+ <target>Click on the « Necessary cookies » tab to find out more.</target>
+ </trans-unit>
+ <trans-unit id="cookieModal.tab2" datatype="html">
+ <source>Necessary cookies</source>
+ <target>Necessary cookies</target>
+ </trans-unit>
+ <trans-unit id="cookieModal.tab2title" datatype="html">
+ <source>Necessary cookies</source>
+ <target>Necessary cookies</target>
+ </trans-unit>
+ <trans-unit id="cookieModal.tab2.p1" datatype="html">
+ <source>Active cookies allow to :</source>
+ <target>Active cookies allow to :</target>
+ </trans-unit>
+ <trans-unit id="cookieModal.tab2.p2" datatype="html">
+ <source>- save your awareness of how cookies are managed, so that you will not have to go through it at each visit.</source>
+ <target>- save your awareness of how cookies are managed, so that you will not have to go through it at each visit.</target>
+ </trans-unit>
+ <trans-unit id="cookieModal.tab2.p3" datatype="html">
+ <source>- save your awareness and acceptance of the Terms of use, so that we will not have to ask you to renew this acceptance at each visit.</source>
+ <target>- save your awareness and acceptance of the Terms of use, so that we will not have to ask you to renew this acceptance at each visit.</target>
+ </trans-unit>
+ <trans-unit id="cookieModal.tab2.p4" datatype="html">
+ <source>- avoid, during authenticated sessions, to systematically prompt you for your credentials at each visit or new page</source>
+ <target>- avoid, during authenticated sessions, to systematically prompt you for your credentials at each visit or new page</target>
+ </trans-unit>
+ <trans-unit id="cookieModal.tab2.p5" datatype="html">
+ <source>- measure the data.grandlyon.com platform's traffic</source>
+ <target>- measure the data.grandlyon.com platform's traffic</target>
+ </trans-unit>
<trans-unit id="cgu.partOne" datatype="html">
<source>I accept the</source>
<target>I accept the</target>
@@ -1222,21 +1310,27 @@ Here is the list of the last evolutions of the portal. If you wish to contribute
</trans-unit>
<trans-unit id="consent.text" datatype="html">
<source>Fields with an asterisk (*) are mandatory. Information in these fields will be processed to respond to
- your request. The data is kept for a period of 12 months. Recipients of this
- information are the metropolitan departments in charge of processing your request. In compliance with the
- “Digital Technology and Freedom” law dated January 6, 1978, you have the right to access and rectify
- information that concerns you. To exercise this right, please contact: Lyon Métropole - Direction des
- Affaires Juridiques et de la Commande Publique - 20 Rue du Lac - BP 33569 - 69505 Lyon Cedex 03, by postal
- mail. You may also oppose processing of your personal data for a legitimate reason. In this case, we will
- not be able to process the request submitted using this form.</source>
+ your request. The data is kept for a period of 12 months. Recipients of this
+ information are the metropolitan departments in charge of processing your request. In compliance with
+ the
+ “Digital Technology and Freedom” law dated January 6, 1978, you have the right to access and rectify
+ information that concerns you. To exercise this right, please contact the service of the Data Protection
+ Officer (DPD): Métropole de Lyon – Délégué à la Protection des Données - Direction des Affaires
+ Juridiques et de la Commande Publique - 20, rue du Lac - BP 33569 - 69505 Lyon Cedex 03 or use the
+ following form https://demarches.toodego.com/sve/proteger-mes-donnees-personnelles/. You may also oppose
+ processing of your personal data for a legitimate reason. In this case, we will
+ not be able to process the request submitted using this form.</source>
<target>Fields with an asterisk (*) are mandatory. Information in these fields will be processed to respond to
- your request. The data is kept for a period of 12 months. Recipients of this
- information are the metropolitan departments in charge of processing your request. In compliance with the
- “Digital Technology and Freedom” law dated January 6, 1978, you have the right to access and rectify
- information that concerns you. To exercise this right, please contact: Lyon Métropole - Direction des
- Affaires Juridiques et de la Commande Publique - 20 Rue du Lac - BP 33569 - 69505 Lyon Cedex 03, by postal
- mail. You may also oppose processing of your personal data for a legitimate reason. In this case, we will
- not be able to process the request submitted using this form.</target>
+ your request. The data is kept for a period of 12 months. Recipients of this
+ information are the metropolitan departments in charge of processing your request. In compliance with
+ the
+ “Digital Technology and Freedom” law dated January 6, 1978, you have the right to access and rectify
+ information that concerns you. To exercise this right, please contact the service of the Data Protection
+ Officer (DPD): Métropole de Lyon – Délégué à la Protection des Données - Direction des Affaires
+ Juridiques et de la Commande Publique - 20, rue du Lac - BP 33569 - 69505 Lyon Cedex 03 or use the
+ following form https://demarches.toodego.com/sve/proteger-mes-donnees-personnelles/. You may also oppose
+ processing of your personal data for a legitimate reason. In this case, we will
+ not be able to process the request submitted using this form.</target>
</trans-unit>
<trans-unit id="consent.error" datatype="html">
<source>You must accept the processing of the information entered in this form to respond to your request.</source>
@@ -1321,8 +1415,12 @@ Here is the list of the last evolutions of the portal. If you wish to contribute
<target>Terms of use</target>
</trans-unit>
<trans-unit id="cgu.modal.warningMessage" datatype="html">
- <source>The acceptance of the terms of use is necessary in order to access the datasets resources</source>
- <target>The acceptance of the terms of use is necessary in order to access the datasets resources</target>
+ <source>The acceptance of the terms of use is necessary in order to access the resources of the datasets</source>
+ <target>The acceptance of the terms of use is necessary in order to access the resources of the datasets</target>
+ </trans-unit>
+ <trans-unit id="cgu.modal.acceptation" datatype="html">
+ <source>You have to read the entire Terms of Use before you can accept it.</source>
+ <target>You have to read the entire Terms of Use before you can accept it.</target>
</trans-unit>
<trans-unit id="cgu.modal.refuse" datatype="html">
<source>Refuse</source>
diff --git a/src/i18n/messages.fr.xlf b/src/i18n/messages.fr.xlf
index 6034b7fa2655a7f5600823e0aa6ab774702fa0cc..48c5e116b34db2618b798841f1bde73878576b92 100644
--- a/src/i18n/messages.fr.xlf
+++ b/src/i18n/messages.fr.xlf
@@ -443,6 +443,22 @@
<source>API</source>
<target>API</target>
</trans-unit>
+ <trans-unit id="dataset.detail.reuse" datatype="html">
+ <source>Reuse</source>
+ <target>Réutilisations</target>
+ </trans-unit>
+ <trans-unit id="dataset.reuse.add" datatype="html">
+ <source>Add a reuse</source>
+ <target>Ajouter une réutilisation</target>
+ </trans-unit>
+ <trans-unit id="dataset.reuse.title1" datatype="html">
+ <source>They use these data</source>
+ <target>Ils utilisent ces données</target>
+ </trans-unit>
+ <trans-unit id="dataset.reuse.title2" datatype="html">
+ <source>News</source>
+ <target>Actualités</target>
+ </trans-unit>
<trans-unit id="dataset.detail.info" datatype="html">
<source>This dataset doesn't contain geographical data.</source>
<target>Ce jeu de données ne contient pas de données géographiques.</target>
@@ -455,6 +471,14 @@
<source>Show less</source>
<target>Voir moins</target>
</trans-unit>
+ <trans-unit id="dataset.info.dashboard" datatype="html">
+ <source>Dashboard</source>
+ <target>Tableau de bord</target>
+ </trans-unit>
+ <trans-unit id="dataset.info.partners" datatype="html">
+ <source>Partners</source>
+ <target>Partenaires</target>
+ </trans-unit>
<trans-unit id="dataset.info.parentDataset" datatype="html">
<source>Parent dataset</source>
<target>Jeu de données parent</target>
@@ -507,6 +531,10 @@
<x id="INTERPOLATION"/>
vue(s) dans le dernier mois</target>
</trans-unit>
+ <trans-unit id="dataset.info.view" datatype="html">
+ <source>view</source>
+ <target>vue</target>
+ </trans-unit>
<trans-unit id="dataset.info.publishDate" datatype="html">
<source>Published on <x id="INTERPOLATION"/>
</source>
@@ -1097,6 +1125,10 @@ Voici la liste des dernières évolutions du portail. Si vous souhaitez contribu
<source>Approach</source>
<target>La démarche</target>
</trans-unit>
+ <trans-unit id="sitemap.reuses" datatype="html">
+ <source>Reuses</source>
+ <target>Réutilisations</target>
+ </trans-unit>
<trans-unit id="sitemap.secondaryPages" datatype="html">
<source>Secondary pages</source>
<target>Pages secondaires</target>
@@ -1118,7 +1150,7 @@ Voici la liste des dernières évolutions du portail. Si vous souhaitez contribu
<target>Crédits</target>
</trans-unit>
<trans-unit id="sitemap.cgu" datatype="html">
- <source>General conditions of use</source>
+ <source>Terms of use</source>
<target>Conditions générales d'utilisation</target>
</trans-unit>
@@ -1157,13 +1189,9 @@ Voici la liste des dernières évolutions du portail. Si vous souhaitez contribu
<source>Share your opinion</source>
<target>Donnez-nous votre avis</target>
</trans-unit>
- <trans-unit id="feedback.thisIsABeta" datatype="html">
- <source>This website is in beta.</source>
- <target>Ce site est dans sa version bêta.</target>
- </trans-unit>
<trans-unit id="feedback.itNeedsYou" datatype="html">
- <source>It needs your feedback to improve:</source>
- <target>Il a besoin de vous pour s’améliorer :</target>
+ <source>data.grandlyon.com needs your feedback to improve :</source>
+ <target>data.grandlyon.com a besoin de vous pour s’améliorer :</target>
</trans-unit>
<trans-unit id="feedback.yourOpinion" datatype="html">
<source>Your opinion of this website:</source>
@@ -1210,12 +1238,68 @@ Voici la liste des dernières évolutions du portail. Si vous souhaitez contribu
<target>Aïe !</target>
</trans-unit>
<trans-unit id="cookieBanner.message" datatype="html">
- <source>By continuing to browse this site, you agree to the use of cookies. </source>
- <target>En poursuivant votre navigation sur ce site, vous acceptez l’utilisation de cookies. </target>
+ <source>We care about your personal data and we use cookies in order to improve your experience.</source>
+ <target>Nous nous soucions de vos données personnelles et utilisons des cookies afin d’améliorer votre expérience.</target>
</trans-unit>
<trans-unit id="cookieBanner.more" datatype="html">
<source>Learn more</source>
- <target>En savoir plus</target>
+ <target>En savoir +</target>
+ </trans-unit>
+ <trans-unit id="cookieBanner.close" datatype="html">
+ <source>Close</source>
+ <target>Fermer</target>
+ </trans-unit>
+ <trans-unit id="cookieModal.title" datatype="html">
+ <source>Cookies manager</source>
+ <target>Gestionnaire de cookies</target>
+ </trans-unit>
+ <trans-unit id="cookieModal.tab1title" datatype="html">
+ <source>Why do we use cookies?</source>
+ <target>Pourquoi des cookies ?</target>
+ </trans-unit>
+ <trans-unit id="cookieModal.tab1" datatype="html">
+ <source>Why do we use cookies?</source>
+ <target>Pourquoi des cookies ?</target>
+ </trans-unit>
+ <trans-unit id="cookieModal.tab1.p1" datatype="html">
+ <source>We use cookies to learn about how you interact with us, improve your experience on our site and personalize your relationship with the platform data.grandlyon.com.</source>
+ <target>Nous utilisons des cookies pour nous informer sur la façon dont vous interagissez avec nous, afin d’enrichir votre expérience utilisateur et pour personnaliser votre relation avec la plateforme data.grandlyon.com.</target>
+ </trans-unit>
+ <trans-unit id="cookieModal.tab1.p2" datatype="html">
+ <source>Cookies are not used for commercial purposes.</source>
+ <target>Les cookies ne sont pas utilisés à des fins commerciales.</target>
+ </trans-unit>
+ <trans-unit id="cookieModal.tab1.p3" datatype="html">
+ <source>Click on the « Necessary cookies » tab to find out more.</source>
+ <target>Cliquez sur l’onglet « Cookies nécessaires » pour en savoir plus.</target>
+ </trans-unit>
+ <trans-unit id="cookieModal.tab2" datatype="html">
+ <source>Necessary cookies</source>
+ <target>Cookies nécessaires</target>
+ </trans-unit>
+ <trans-unit id="cookieModal.tab2title" datatype="html">
+ <source>Necessary cookies</source>
+ <target>Cookies nécessaires</target>
+ </trans-unit>
+ <trans-unit id="cookieModal.tab2.p1" datatype="html">
+ <source>Active cookies allow to :</source>
+ <target>Les cookies toujours actifs permettent :</target>
+ </trans-unit>
+ <trans-unit id="cookieModal.tab2.p2" datatype="html">
+ <source>- save your awareness of how cookies are managed, so that you will not have to go through it at each visit.</source>
+ <target>- de sauvegarder votre prise de connaissance du mode de gestion des cookies, pour ne pas vous le proposer à chaque visite</target>
+ </trans-unit>
+ <trans-unit id="cookieModal.tab2.p3" datatype="html">
+ <source>- save your awareness and acceptance of the Terms of use, so that we will not have to ask you to renew this acceptance at each visit.</source>
+ <target>- de sauvegarder votre prise de connaissance et acceptation des Conditions Générales d’Utilisation, afin de ne pas vous demander de renouveler cette acceptation à chaque visite</target>
+ </trans-unit>
+ <trans-unit id="cookieModal.tab2.p4" datatype="html">
+ <source>- avoid, during authenticated sessions, to systematically prompt you for your credentials at each visit or new page</source>
+ <target>- d’éviter, lors de votre connexion authentifiée, de vous demander systématiquement à chaque visite ou nouvelle page, vos identifiants et mot de passe</target>
+ </trans-unit>
+ <trans-unit id="cookieModal.tab2.p5" datatype="html">
+ <source>- measure the data.grandlyon.com platform's traffic</source>
+ <target>- de mesurer l’audience de la plateforme data.grandlyon.com</target>
</trans-unit>
<trans-unit id="cgu.partOne" datatype="html">
<source>I accept the</source>
@@ -1231,14 +1315,17 @@ Voici la liste des dernières évolutions du portail. Si vous souhaitez contribu
</trans-unit>
<trans-unit id="consent.text" datatype="html">
<source>Fields with an asterisk (*) are mandatory. Information in these fields will be processed to respond to
- your request. The data is kept for a period of 12 months. Recipients of this
- information are the metropolitan departments in charge of processing your request. In compliance with the
- “Digital Technology and Freedom” law dated January 6, 1978, you have the right to access and rectify
- information that concerns you. To exercise this right, please contact: Lyon Métropole - Direction des
- Affaires Juridiques et de la Commande Publique - 20 Rue du Lac - BP 33569 - 69505 Lyon Cedex 03, by postal
- mail. You may also oppose processing of your personal data for a legitimate reason. In this case, we will
- not be able to process the request submitted using this form.</source>
- <target>Les champs suivi d'un astérisque (*) sont obligatoires. Les informations contenues dans ces champs font l’objet d’un traitement informatisé destiné à répondre à votre demande. Les données sont conservées pendant une durée de 12 mois. Les destinataires des informations sont les services métropolitains en charge du traitement de votre demande. Conformément à la loi "informatique et libertés" du 6 janvier 1978 modifiée, vous bénéficiez d’un droit d’accès et de rectification aux informations vous concernant. Si vous souhaitez exercer ce droit, vous pouvez vous adresser à : Métropole de Lyon - Direction des Affaires Juridiques et de la Commande Publique - 20, rue du Lac - BP 33569 - 69505 Lyon Cedex 03 : par courrier. Si toutefois vous souhaitez, pour des motifs légitimes, vous opposer au traitement des données vous concernant, nous ne pourrons pas traiter la demande soumise via ce formulaire.
+ your request. The data is kept for a period of 12 months. Recipients of this
+ information are the metropolitan departments in charge of processing your request. In compliance with
+ the
+ “Digital Technology and Freedom” law dated January 6, 1978, you have the right to access and rectify
+ information that concerns you. To exercise this right, please contact the service of the Data Protection
+ Officer (DPD): Métropole de Lyon – Délégué à la Protection des Données - Direction des Affaires
+ Juridiques et de la Commande Publique - 20, rue du Lac - BP 33569 - 69505 Lyon Cedex 03 or use the
+ following form https://demarches.toodego.com/sve/proteger-mes-donnees-personnelles/. You may also oppose
+ processing of your personal data for a legitimate reason. In this case, we will
+ not be able to process the request submitted using this form.</source>
+ <target>Les champs suivi d'un astérisque (*) sont obligatoires. Les informations contenues dans ces champs font l’objet d’un traitement informatisé destiné à répondre à votre demande. Les données sont conservées pendant une durée de 12 mois. Les destinataires des informations sont les services métropolitains en charge du traitement de votre demande. Conformément à la loi "informatique et libertés" du 6 janvier 1978 modifiée, vous bénéficiez d’un droit d’accès et de rectification aux informations vous concernant. Si vous souhaitez exercer ce droit, vous pouvez vous adresser au service du Délégué à la Protection des Données (DPD) : Métropole de Lyon – Délégué à la Protection des Données - Direction des Affaires Juridiques et de la Commande Publique - 20, rue du Lac - BP 33569 - 69505 Lyon Cedex 03 ou via le formulaire https://demarches.toodego.com/sve/proteger-mes-donnees-personnelles/. Si toutefois vous souhaitez, pour des motifs légitimes, vous opposer au traitement des données vous concernant, nous ne pourrons pas traiter la demande soumise via ce formulaire.
</target>
</trans-unit>
<trans-unit id="consent.error" datatype="html">
@@ -1324,9 +1411,13 @@ Voici la liste des dernières évolutions du portail. Si vous souhaitez contribu
<target>Conditions générales d’utilisation</target>
</trans-unit>
<trans-unit id="cgu.modal.warningMessage" datatype="html">
- <source>The acceptance of the terms of use is necessary in order to access the datasets resources</source>
+ <source>The acceptance of the terms of use is necessary in order to access the resources of the datasets</source>
<target>L’acceptation des CGU est nécessaire afin d’accéder aux ressources des jeux de données</target>
</trans-unit>
+ <trans-unit id="cgu.modal.acceptation" datatype="html">
+ <source>You have to read the entire Terms of Use before you can accept it.</source>
+ <target>Vous devez lire l’intégralité des Conditions Générales d’Utilisation avant de pouvoir les accepter.</target>
+ </trans-unit>
<trans-unit id="cgu.modal.refuse" datatype="html">
<source>Refuse</source>
<target>Refuser</target>
diff --git a/src/i18n/traductions.fr.ts b/src/i18n/traductions.fr.ts
index 47047378c8650ac42d37486cceafb2f023e0a0a4..26f60509493e2b1a51242b23b0b4b94a1809c1db 100644
--- a/src/i18n/traductions.fr.ts
+++ b/src/i18n/traductions.fr.ts
@@ -15,10 +15,11 @@ export const notificationMessages = {
getCategoriesAndPost: 'Impossible de chager le post et les catégories',
getHomeVideoPost: 'Impossible de charger le contenu du post',
getMediaUrl: 'Impossible de récupérer l\'url du média',
- getDataProducers: 'Impossible de charger la liste des producteurs de données.',
+ getDataProducers: 'Impossible de charger la liste des partenaires.',
getCredits: 'Impossible de charger la liste des crédits.',
getReuses: 'Impossible de charger la liste des réutilisations.',
news: 'actualité',
+ getDatasetRelatedPosts: 'Impossible de charger la liste des actualités associées à ce jeux de données.',
},
geosource: {
getResults: 'Impossible de charger la liste de datasets',
@@ -70,7 +71,9 @@ export const notificationMessages = {
},
general: {
failedDownloadFile: 'Désolé, il n\'a pas été possible de télécharger le fichier. Essayez plus tard !',
- startDownload: 'Le téléchargement a démarré, veuillez patienter.',
+ failedDownloadFileUnauthorized: 'Vous n\'avez pas les droits nécéssaires pour télécharger ce fichier.',
+ failedDownloadFileUnauthenticated: 'Vous devez être connecté pour accéder à ce fichier.',
+ urlToolLong: 'L\'url est trop longue, elle ne peut pas être utilisée.',
},
userPasswordForgotten: {
failed: 'Une erreur s\'est produite lors du lancement de la procédure de réinitialisation du mot de passe.',
@@ -97,7 +100,7 @@ export const notificationMessages = {
export const geosource = {
accessRestriction: {
open: 'Accès ouvert',
- restricted: 'Accès restreint',
+ restricted: 'Accès sous condition',
},
updateFrequencies: {
weekly: 'Mises à jour hebdomadaires',
@@ -154,7 +157,7 @@ export const geosource = {
filterCategories: {
categories: 'Thématiques',
keywords: 'Mots clés',
- dataProducers: 'Producteurs',
+ dataProducers: 'Partenaires',
licences: 'Licences',
formats: 'Formats',
services: 'Services',
@@ -316,6 +319,7 @@ export const reusesTypes = {
app: 'Application',
web: 'Site web',
article: 'Article',
+ news: 'Actualité',
};
export const buttonCopyLinkToCliboardMessages = {
diff --git a/src/i18n/traductions.ts b/src/i18n/traductions.ts
index 6acc919d5944ac6d7c7093979cef7822d5576870..3b001e199ad4a488dd0c17313ca53beb930dd2e4 100644
--- a/src/i18n/traductions.ts
+++ b/src/i18n/traductions.ts
@@ -16,10 +16,11 @@ export const notificationMessages = {
getCategoriesAndPost: 'Failed to get the post and the categories',
getHomeVideoPost: 'Failed to load home video post',
getMediaUrl: 'Failed to get media url',
- getDataProducers: 'Failed to get the list of data producers.',
+ getDataProducers: 'Failed to get the list of patners.',
getCredits: 'Failed to get the list of credits.',
getReuses: 'Failed to get the list of reuses.',
news: 'news',
+ getDatasetRelatedPosts: 'Failed to get the news related to this dataset.',
},
geosource: {
getResults: 'Failed to get the list of datasets',
@@ -71,7 +72,9 @@ export const notificationMessages = {
},
general: {
failedDownloadFile: 'Sorry, it was not possible to download the file. Try later !',
- startDownload: 'The download have been started, please wait.',
+ failedDownloadFileUnauthorized: 'You don\'t have the necessary rights to download this file.',
+ failedDownloadFileUnauthenticated: 'You need to be authenticated to download this file.',
+ urlToolLong: 'The url is too long, it can not be used.',
},
userPasswordForgotten: {
failed: 'An error occured while initiating the password reset procedure',
@@ -98,7 +101,7 @@ export const notificationMessages = {
export const geosource = {
accessRestriction: {
open: 'Open access',
- restricted: 'Restricted access',
+ restricted: 'Conditional access',
},
updateFrequencies: {
weekly: 'Weekly updates',
@@ -155,7 +158,7 @@ export const geosource = {
filterCategories: {
categories: 'Themes',
keywords: 'Keywords',
- dataProducers: 'Producers',
+ dataProducers: 'Partners',
licences: 'Licences',
formats: 'Formats',
services: 'Services',
@@ -258,7 +261,7 @@ export const pageTitles = {
changelog: 'Last changes',
actors: 'Actors',
signup: 'Sign up',
- login: 'Login',
+ login: 'Log in',
passwordReset: 'Password reset',
passwordForgotten: 'Password forgotten',
contact: 'Contact us',
@@ -318,6 +321,7 @@ export const reusesTypes = {
app: 'App',
web: 'Website',
article: 'Article',
+ news: 'News',
};
export const buttonCopyLinkToCliboardMessages = {
diff --git a/src/scss/variables.scss b/src/scss/variables.scss
index 4f837ff409bb54c0dd2f1e3161db8c7a4800bfc6..9f290ac9f4e297b5a3626c39a0893e9a4b154d14 100644
--- a/src/scss/variables.scss
+++ b/src/scss/variables.scss
@@ -13,6 +13,8 @@ $menu-selected-color: #c8c8d0;
$link-color: #0057a8;
$yellow-dd-color: #ffdc26;
$blue-color: #4668ab;
+$table-selected-item-color: #f1f3f8;
+$orange-color: #B9541D;
// Colors for the files (in api and downloads)
$unknown-color: #64768b;
@@ -61,6 +63,7 @@ $background-link-hover-color: #191c27;
// Header height
$header-bar-height: 70px;
+$header-bar-height-mobile: 115px;
// Footer
$footer-height: 75px;
diff --git a/src/styles.scss b/src/styles.scss
index 4f70e82c3cdaa1f49fc2f6a7bff30a113a7a6c6a..4371453f56a4be74d340179e96e4120f1e09033f 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -319,10 +319,9 @@ span.required-field,
border-bottom-color: $link-color;
}
}
-
.btn-red-text {
- background: transparent;
- border-radius: 2px;
+ background: white;
+ border-radius: 4px;
font-size: 0.875rem;
color: $tomato-color;
border: 1px solid $grey-super-light-color;
@@ -361,7 +360,7 @@ span.required-field,
width: 13.75rem;
height: 3.14em;
background: $tomato-color;
- border-radius: 2px;
+ border-radius: 4px;
border-width: 0;
font-size: 0.875rem;
font-weight: 600;
@@ -411,7 +410,26 @@ span.required-field,
}
}
}
+.main-container{
+ margin-top:0;
+}
+.header-section{
+ background-color: white;
+ padding:0 2rem;
+}
+.centered-form{
+ padding-bottom: 5rem;
+ max-width:850px;
+ margin:auto;
+ .form-content{
+ margin: 2rem;
+ padding:2rem;
+ background-color: white;
+ box-shadow: 0px 6px 12px rgba(129, 128, 128, 0.1);
+ border-radius: 8px;
+ }
+}
.page-container {
margin: auto;
min-height: calc(100% - 1rem);
diff --git a/tsconfig.json b/tsconfig.json
index 6c9edee4654ca221e996228188cbcdd240e91a35..1eded8c691dfbbf5c3f060cb583086791ca4688e 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -5,6 +5,7 @@
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
+ "allowSyntheticDefaultImports" : true,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,