Skip to content

GitLab

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
Pipeline #4339 passed with stage
in 3 minutes and 27 seconds
Hide whitespace changes
Inline Side-by-side
src/app/dataset-detail/components/dataset-detail/dataset-detail.component.ts
View file @ c8990cf3
......@@ -20,6 +20,10 @@ export class DatasetDetailComponent implements OnInit, OnDestroy {
AppRoutes = AppRoutes;
pageHeaderInfo: IPageHeaderInfo = {
title: '',
shareButtons: {
isActive: true,
matchingUriInSeoService: 'datasets',
},
};
readonly typesMetadata = typesMetadata;
position: any;
......@@ -133,6 +137,7 @@ export class DatasetDetailComponent implements OnInit, OnDestroy {
initDatasetInfo() {
this.pageHeaderInfo = {
...this.pageHeaderInfo,
title: this.metadata.title,
metadataSubtitle: this.metadata.subtitle,
subtitle: this.metadata.contacts.map(c => c.organisationName).join(', '),
......
src/app/shared/components/page-header/page-header.component.html
View file @ c8990cf3
<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">
<ng-container i18n="@@dataset.detail.back">Back</ng-container>
</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">
<span>{{ pageInfo.surtitle }}</span>
</div>
......@@ -18,7 +20,8 @@
</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">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 25 25">
<path fill="#3B5998"
......@@ -58,12 +61,42 @@
</a>
<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">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20">
i18n-aria-label="@@cmsPostDetail.share" (click)="copyToClipboard()" (keydown.enter)="copyToClipboard()"
[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"
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" />
</svg>
</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>
\ No newline at end of file
src/app/shared/components/page-header/page-header.component.scss
View file @ c8990cf3
......@@ -5,16 +5,12 @@
display: flex;
padding-top: 1.875rem;
padding-bottom: 1rem;
position: relative;
.title-item {
font-size: 1.25rem;
}
@media screen and (max-width: $tablet) {
padding-top: 0.8rem;
padding-bottom: 0.6rem;
}
@media screen and (min-width: $tablet) {
.title-item {
font-size: 1.5625rem;
......@@ -43,7 +39,7 @@
border-right-color: $yellow-dd-color;
}
@media screen and (min-width: $tablet) {
@media screen and (min-width: $desktop) {
display: flex;
}
......@@ -60,6 +56,17 @@
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 {
display: flex;
flex-direction: column;
......@@ -99,24 +106,84 @@
.share-buttons {
position: absolute;
top: 10px;
right: 10px;
top: 1rem;
right: 0;
display: flex;
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,
.facebook-button,
.linkedin-button {
.linkedin-button,
.copy-link-button,
.toogle-share-button {
padding: 0;
height: 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,
.facebook-button,
.linkedin-button {
margin-right: 0.5rem;
line-height: 0;
@media screen and (min-width: $desktop) {
margin-right: 0.5rem;
}
}
src/app/shared/components/page-header/page-header.component.ts
View file @ c8990cf3
......@@ -25,6 +25,7 @@ export class PageHeaderComponent implements OnInit {
@Input() pageInfo: IPageHeaderInfo;
@Input() customGoToPreviousPage: any;
messageClipboard: string = buttonCopyLinkToCliboardMessages.hover;
isMediaShareButtonsDisplayed = false;
ngOnInit() {
}
......@@ -45,7 +46,9 @@ export class PageHeaderComponent implements OnInit {
copyToClipboard() {
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.style.position = 'absolute';
el.style.left = '-9999px'; // Move outside the screen to make it invisible
......
src/scss/ghost-style.scss
View file @ c8990cf3
......@@ -12,7 +12,7 @@
font-size: 1.375rem;
font-weight: bold;
line-height: 1.2;
margin-top: 4rem;
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
......@@ -72,6 +72,12 @@
iframe:not([width]) {
width: 100%;
}
@media screen and (max-width: $tablet) {
h2 {
font-size: 1.125rem;
}
}
}
.cgu-modal .ghost-style {
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment