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

src/app/dataset-detail/components/dataset-detail/dataset-detail.component.ts

@@ -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

 <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

@@ -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

@@ -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

@@ -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 {