Skip to content
Snippets Groups Projects
Commit c8990cf3 authored by FORESTIER Fabien's avatar FORESTIER Fabien
Browse files

Add social media share button on dataset detail page + modify some sizes and...

Add social media share button on dataset detail page + modify some sizes and margin in articles page
parent 64692878
Branches
Tags
1 merge request!62v2.5.0
Pipeline #4339 passed
...@@ -20,6 +20,10 @@ export class DatasetDetailComponent implements OnInit, OnDestroy { ...@@ -20,6 +20,10 @@ export class DatasetDetailComponent implements OnInit, OnDestroy {
AppRoutes = AppRoutes; AppRoutes = AppRoutes;
pageHeaderInfo: IPageHeaderInfo = { pageHeaderInfo: IPageHeaderInfo = {
title: '', title: '',
shareButtons: {
isActive: true,
matchingUriInSeoService: 'datasets',
},
}; };
readonly typesMetadata = typesMetadata; readonly typesMetadata = typesMetadata;
position: any; position: any;
...@@ -133,6 +137,7 @@ export class DatasetDetailComponent implements OnInit, OnDestroy { ...@@ -133,6 +137,7 @@ export class DatasetDetailComponent implements OnInit, OnDestroy {
initDatasetInfo() { initDatasetInfo() {
this.pageHeaderInfo = { this.pageHeaderInfo = {
...this.pageHeaderInfo,
title: this.metadata.title, title: this.metadata.title,
metadataSubtitle: this.metadata.subtitle, metadataSubtitle: this.metadata.subtitle,
subtitle: this.metadata.contacts.map(c => c.organisationName).join(', '), subtitle: this.metadata.contacts.map(c => c.organisationName).join(', '),
......
<div class="page-header"> <div class="page-header">
<div class="back-button" (click)="goToPreviousPage()" [ngClass]="{'has-beta-style': pageInfo.hasBetaStyle}"> <div class="back-button" tabindex="0" (click)="goToPreviousPage()"
[ngClass]="{'has-beta-style': pageInfo.hasBetaStyle}">
<img class="icon-left-arrow" src="./assets/img/left_arrow.svg" alt="Picto de la flèche retour"> <img class="icon-left-arrow" src="./assets/img/left_arrow.svg" alt="Picto de la flèche retour">
<ng-container i18n="@@dataset.detail.back">Back</ng-container> <ng-container i18n="@@dataset.detail.back">Back</ng-container>
</div> </div>
<div class="page-title" [ngClass]="{'has-surtitle': pageInfo.surtitle}"> <div class="page-title"
[ngClass]="{'has-surtitle': pageInfo.surtitle, 'has-padding': !pageInfo.surtitle && pageInfo.shareButtons && pageInfo.shareButtons.isActive}">
<div class="surtitle-item" *ngIf="pageInfo.surtitle"> <div class="surtitle-item" *ngIf="pageInfo.surtitle">
<span>{{ pageInfo.surtitle }}</span> <span>{{ pageInfo.surtitle }}</span>
</div> </div>
...@@ -18,7 +20,8 @@ ...@@ -18,7 +20,8 @@
</div> </div>
</div> </div>
<div class="share-buttons" *ngIf="pageInfo.shareButtons && pageInfo.shareButtons.isActive"> <div class="share-buttons" *ngIf="pageInfo.shareButtons && pageInfo.shareButtons.isActive"
[ngClass]="{'displayed': isMediaShareButtonsDisplayed}">
<a (click)="share('facebook')" (keydown.enter)="share('facebook')" tabindex="0" class="facebook-button"> <a (click)="share('facebook')" (keydown.enter)="share('facebook')" tabindex="0" class="facebook-button">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 25 25"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 25 25">
<path fill="#3B5998" <path fill="#3B5998"
...@@ -58,12 +61,42 @@ ...@@ -58,12 +61,42 @@
</a> </a>
<button class="button copy-link-button has-tooltip-left tooltip" type="button" aria-label="Share the post" <button class="button copy-link-button has-tooltip-left tooltip" type="button" aria-label="Share the post"
i18n-aria-label="@@cmsPostDetail.share" (click)="copyToClipboard()" [attr.data-tooltip]="messageClipboard"> i18n-aria-label="@@cmsPostDetail.share" (click)="copyToClipboard()" (keydown.enter)="copyToClipboard()"
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20"> [attr.data-tooltip]="messageClipboard">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
<path fill="#818080" fill-rule="evenodd" <path fill="#818080" fill-rule="evenodd"
d="M1.852 7.777a2.619 2.619 0 0 1 0-3.703l2.222-2.222a2.619 2.619 0 0 1 3.704 0l2.963 2.963a2.619 2.619 0 0 1 0 3.703l-.37.37.74.741.37-.37a2.619 2.619 0 0 1 3.704 0l2.963 2.963a2.619 2.619 0 0 1 0 3.704l-2.222 2.222a2.619 2.619 0 0 1-3.704 0L9.26 15.185a2.619 2.619 0 0 1 0-3.704l.37-.37-.74-.741-.37.37a2.619 2.619 0 0 1-3.704 0L1.852 7.777zm7.037-.37l-.74-.74a1.048 1.048 0 0 0-1.482 1.48l.74.742-.37.37a.524.524 0 0 1-.74 0L3.332 6.296a.524.524 0 0 1 0-.74l2.223-2.223a.524.524 0 0 1 .74 0L9.26 6.296a.524.524 0 0 1 0 .74l-.37.371zm2.222 5.185l-.37.37a.524.524 0 0 0 0 .742l2.963 2.962a.524.524 0 0 0 .74 0l2.223-2.222a.524.524 0 0 0 0-.74l-2.963-2.963a.524.524 0 0 0-.741 0l-.37.37.74.74a1.047 1.047 0 1 1-1.481 1.482l-.74-.74z" d="M1.852 7.777a2.619 2.619 0 0 1 0-3.703l2.222-2.222a2.619 2.619 0 0 1 3.704 0l2.963 2.963a2.619 2.619 0 0 1 0 3.703l-.37.37.74.741.37-.37a2.619 2.619 0 0 1 3.704 0l2.963 2.963a2.619 2.619 0 0 1 0 3.704l-2.222 2.222a2.619 2.619 0 0 1-3.704 0L9.26 15.185a2.619 2.619 0 0 1 0-3.704l.37-.37-.74-.741-.37.37a2.619 2.619 0 0 1-3.704 0L1.852 7.777zm7.037-.37l-.74-.74a1.048 1.048 0 0 0-1.482 1.48l.74.742-.37.37a.524.524 0 0 1-.74 0L3.332 6.296a.524.524 0 0 1 0-.74l2.223-2.223a.524.524 0 0 1 .74 0L9.26 6.296a.524.524 0 0 1 0 .74l-.37.371zm2.222 5.185l-.37.37a.524.524 0 0 0 0 .742l2.963 2.962a.524.524 0 0 0 .74 0l2.223-2.222a.524.524 0 0 0 0-.74l-2.963-2.963a.524.524 0 0 0-.741 0l-.37.37.74.74a1.047 1.047 0 1 1-1.481 1.482l-.74-.74z"
clip-rule="evenodd" /> clip-rule="evenodd" />
</svg> </svg>
</button> </button>
<a tabindex="0" class="button toogle-share-button"
(click)="isMediaShareButtonsDisplayed = !isMediaShareButtonsDisplayed"
(keydown.enter)="isMediaShareButtonsDisplayed = !isMediaShareButtonsDisplayed">
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 25 25" style="enable-background:new 0 0 25 25;" xml:space="preserve">
<style type="text/css">
.st0 {
clip-path: url(#SVGID_2_);
}
.st1 {
fill: #00ACEE;
}
.st2 {
fill: #0076B2;
}
.st3 {
fill: #818080;
}
</style>
<path class="st3" d="M5.9,12.5c0,1.3,1,2.3,2.3,2.3c0.6,0,1.2-0.2,1.6-0.6l4.7,2.7c0,0.1,0,0.2,0,0.3c0,1.3,1,2.3,2.3,2.3
c1.3,0,2.3-1,2.3-2.3s-1-2.3-2.3-2.3c-0.6,0-1.2,0.2-1.6,0.6l-4.7-2.7c0-0.1,0-0.2,0-0.3s0-0.2,0-0.3l4.7-2.7c0.4,0.4,1,0.6,1.6,0.6
c1.3,0,2.3-1,2.3-2.3s-1-2.3-2.3-2.3c-1.3,0-2.3,1-2.3,2.3c0,0.1,0,0.2,0,0.3l-4.7,2.7c-0.4-0.4-1-0.6-1.6-0.6
C6.9,10.2,5.9,11.2,5.9,12.5z" />
</svg>
</a>
</div> </div>
</div> </div>
\ No newline at end of file
...@@ -5,16 +5,12 @@ ...@@ -5,16 +5,12 @@
display: flex; display: flex;
padding-top: 1.875rem; padding-top: 1.875rem;
padding-bottom: 1rem; padding-bottom: 1rem;
position: relative;
.title-item { .title-item {
font-size: 1.25rem; font-size: 1.25rem;
} }
@media screen and (max-width: $tablet) {
padding-top: 0.8rem;
padding-bottom: 0.6rem;
}
@media screen and (min-width: $tablet) { @media screen and (min-width: $tablet) {
.title-item { .title-item {
font-size: 1.5625rem; font-size: 1.5625rem;
...@@ -43,7 +39,7 @@ ...@@ -43,7 +39,7 @@
border-right-color: $yellow-dd-color; border-right-color: $yellow-dd-color;
} }
@media screen and (min-width: $tablet) { @media screen and (min-width: $desktop) {
display: flex; display: flex;
} }
...@@ -60,6 +56,17 @@ ...@@ -60,6 +56,17 @@
align-self: center; align-self: center;
} }
// Add padding right in order to avoid the text to go under the share buttons
.page-title.has-padding {
// On mobile there is only one button
padding-right: 35px;
// On desktop there are four buttons
@media screen and (min-width: $desktop) {
padding-right: 150px;
}
}
.page-title.has-surtitle { .page-title.has-surtitle {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -99,24 +106,84 @@ ...@@ -99,24 +106,84 @@
.share-buttons { .share-buttons {
position: absolute; position: absolute;
top: 10px; top: 1rem;
right: 10px; right: 0;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
background-color: white;
@media screen and (min-width: $tablet) {
top: 1.25rem;
}
@media screen and (max-width: $desktop) {
&.displayed {
width: 165px;
height: 25px;
.facebook-button {
right: 140px;
}
.twitter-button {
right: 105px;
}
.linkedin-button {
right: 70px;
}
.copy-link-button {
right: 35px;
}
}
}
} }
.copy-link-button,
.twitter-button, .twitter-button,
.facebook-button, .facebook-button,
.linkedin-button { .linkedin-button,
.copy-link-button,
.toogle-share-button {
padding: 0; padding: 0;
height: 25px; height: 25px;
width: 25px; width: 25px;
border-radius: 3px;
background-color: white;
@media screen and (max-width: $desktop) {
position: absolute;
right: 0;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
}
.copy-link-button svg {
width: 16px;
height: 16px;
}
.toogle-share-button {
@media screen and (min-width: $desktop) {
display: none;
}
svg {
width: 25px;
height: 25px;
}
} }
.twitter-button, .twitter-button,
.facebook-button, .facebook-button,
.linkedin-button { .linkedin-button {
margin-right: 0.5rem;
line-height: 0; line-height: 0;
@media screen and (min-width: $desktop) {
margin-right: 0.5rem;
}
} }
...@@ -25,6 +25,7 @@ export class PageHeaderComponent implements OnInit { ...@@ -25,6 +25,7 @@ export class PageHeaderComponent implements OnInit {
@Input() pageInfo: IPageHeaderInfo; @Input() pageInfo: IPageHeaderInfo;
@Input() customGoToPreviousPage: any; @Input() customGoToPreviousPage: any;
messageClipboard: string = buttonCopyLinkToCliboardMessages.hover; messageClipboard: string = buttonCopyLinkToCliboardMessages.hover;
isMediaShareButtonsDisplayed = false;
ngOnInit() { ngOnInit() {
} }
...@@ -45,7 +46,9 @@ export class PageHeaderComponent implements OnInit { ...@@ -45,7 +46,9 @@ export class PageHeaderComponent implements OnInit {
copyToClipboard() { copyToClipboard() {
const el = document.createElement('input'); // Create a <input> element const el = document.createElement('input'); // Create a <input> element
el.value = window.location.href; // Set its value to the string that you want copied // Set its value to the string that you want copied
// tslint:disable-next-line: max-line-length
el.value = `${window.location.origin}${APP_CONFIG.backendUrls.seo}/${this.pageInfo.shareButtons.matchingUriInSeoService}/${this._activatedRoute.snapshot.params.id}`;
el.setAttribute('readonly', ''); // Make it readonly to be tamper-proof el.setAttribute('readonly', ''); // Make it readonly to be tamper-proof
el.style.position = 'absolute'; el.style.position = 'absolute';
el.style.left = '-9999px'; // Move outside the screen to make it invisible el.style.left = '-9999px'; // Move outside the screen to make it invisible
......
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
font-size: 1.375rem; font-size: 1.375rem;
font-weight: bold; font-weight: bold;
line-height: 1.2; line-height: 1.2;
margin-top: 4rem; margin-top: 1.5rem;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
...@@ -72,6 +72,12 @@ ...@@ -72,6 +72,12 @@
iframe:not([width]) { iframe:not([width]) {
width: 100%; width: 100%;
} }
@media screen and (max-width: $tablet) {
h2 {
font-size: 1.125rem;
}
}
} }
.cgu-modal .ghost-style { .cgu-modal .ghost-style {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment