Fix/news

src/app/post/components/post-card/post-card.component.scss

@@ -19,6 +19,9 @@
       }
     }
     .title {
+      @media #{$large-phone} {
+        @include cn-bold-22;
+      }
       @include cn-bold-30;
     }
     .description {
@@ -27,6 +30,7 @@
     }
   }
   .imageContainer {
+    margin-bottom: 12px !important;
     .image {
       object-fit: cover;
       height: 88px;

src/app/post/components/post-details/post-details.component.scss

@@ -7,8 +7,8 @@
 $margin-post: 20px;
 
 .postContainer {
-  max-width: 832px;
-  margin: $margin-post auto;
+  max-width: 860px;
+  margin: $margin-post 0;
   min-height: calc(
     var(--vh, 1vh) * 100 - #{$header-height} - #{$footer-height} - #{$header-post-height} - #{$margin-post} * 3
   );
@@ -67,6 +67,8 @@ $margin-post: 20px;
   ::ng-deep a {
     @include hyperlink;
     padding: 0;
-    font-size: 18px;
+  }
+  ::ng-deep p {
+    @include cn-regular-18;
   }
 }

src/app/post/components/post-details/post-details.component.ts

 import { Component, OnInit } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { ActivatedRoute, Router } from '@angular/router';
+import { RouterListenerService } from '../../../services/routerListener.service';
 import { Post } from '../../models/post.model';
 import { PostService } from '../../services/post.service';
 
@@ -14,7 +15,8 @@ export class PostDetailsComponent implements OnInit {
     private activatedRoute: ActivatedRoute,
     private router: Router,
     private postService: PostService,
-    private sanitizer: DomSanitizer
+    private sanitizer: DomSanitizer,
+    private routerListener: RouterListenerService
   ) {}
   post: Post;
   ngOnInit(): void {
@@ -31,6 +33,6 @@ export class PostDetailsComponent implements OnInit {
   }
 
   public backToPosts(): void {
-    this.router.navigateByUrl('/news');
+    this.routerListener.goToPreviousUrl();
   }
 }

src/app/post/components/post-header/post-header.component.html

 <div class="header-container">
   <div class="section-container" fxLayout="column" fxLayoutAlign="space-between">
-    <h1>Actualités</h1>
+    <h1>
+      Fil d’actualité
+      <p class="onlyOnDesktop">du réseau d’inclusion numérique</p>
+    </h1>
     <div fxLayout="row" fxLayoutGap="5px" fxLayoutAlign="space-between flex-end" class="overflow">
       <div fxLayout="row" class="row-mobile">
         <div fxLayout="row" fxLayoutAlign="center center" *ngFor="let tag of tags.others">
@@ -9,7 +12,7 @@
             tabindex="0"
             (click)="activateTag(tag)"
             (keydown.enter)="activateTag(tag)"
-            [ngClass]="{ active: tag.slug === mainActiveTag.slug }"
+            [ngClass]="{ active: tag.slug === mainActiveTag.slug || tag.name === mainActiveTag.slug }"
             >{{ tag.name }}</span
           >
         </div>
@@ -35,7 +38,7 @@
           <app-svg-icon
             class="icon"
             [type]="'ico'"
-            [iconClass]="modalTypeOpened === TypeModal.public ? 'white' : 'grey-1'"
+            [iconClass]="modalTypeOpened === TypeModal.public ? 'white icon-32' : 'grey-1 icon-32'"
             [icon]="'news-public'"
           ></app-svg-icon>
           <div class="arrow"></div>

src/app/post/components/post-header/post-header.component.scss

@@ -5,11 +5,24 @@
 @import '../../../../assets/scss/layout';
 
 h1 {
+  margin-top: 25px;
   margin-bottom: 0px;
+  .onlyOnDesktop {
+    margin: 0;
+  }
+  @media #{$large-phone} {
+    @include cn-bold-28;
+    .onlyOnDesktop {
+      display: none;
+    }
+  }
 }
 
 .header-container {
   height: #{$header-post-height};
+  @media #{$large-phone} {
+    height: #{$header-post-height-mobile};
+  }
   background: $white;
 }
 
@@ -22,7 +35,7 @@ h1 {
   button {
     background: $white;
     height: 40px;
-    width: 100%;
+    width: 210px;
     border: 1px solid $grey-4;
     padding: 3px 16px 3px 16px;
     outline: none;
@@ -81,50 +94,6 @@ h1 {
   }
 }
 
-// .btnSection {
-//   padding: 16px 0 0px 0;
-//   button {
-//     background: $white;
-//     height: 40px;
-//     width: 210px;
-//     border: 1px solid $grey-4;
-//     padding: 3px 16px 3px 16px;
-//     outline: none;
-//     border-radius: 4px;
-//     cursor: pointer;
-//     white-space: nowrap;
-//     @include btn-normal;
-//     .arrow {
-//       background-color: transparent;
-//       border-bottom: 1px solid $grey-2;
-//       border-right: 1px solid $grey-2;
-//       transform: translateY(-25%) rotate(45deg);
-//       margin: 0 5px 0 10px;
-//       height: 7px;
-//       width: 7px;
-//     }
-//     &:focus {
-//       border-color: $blue-hover;
-//     }
-//   }
-//   .selected {
-//     border-color: $primary-color !important;
-//     color: inherit;
-//     .arrow {
-//       background-color: transparent;
-//       border-bottom: 1px solid $primary-color;
-//       border-right: 1px solid $primary-color;
-//       transform: translateY(25%) rotate(-135deg);
-//       margin: 0 5px 0 10px;
-//       height: 7px;
-//       width: 7px;
-//     }
-//   }
-//   .containCheckedFilters {
-//     border-color: $secondary-color;
-//   }
-// }
-
 .tag-button {
   padding: 8px 10px;
   @include cn-regular-16;

src/app/post/components/post-header/post-header.component.ts

@@ -27,6 +27,12 @@ export class PostHeaderComponent implements OnInit {
     this.route.data.subscribe((data) => {
       if (data.tags) {
         this.tags = data.tags;
+        this.tags.others.forEach((tag) => {
+          tag.slug == TagEnum.aLaUne ? (tag.name = 'Les + récentes') : tag.name;
+        });
+        this.tags.commune.sort((tagA, tagB) => {
+          return this.sortArray(tagA, tagB);
+        });
       }
     });
 
@@ -43,6 +49,14 @@ export class PostHeaderComponent implements OnInit {
     });
   }
 
+  private sortArray(tagA: Tag, tagB: Tag): number {
+    const nameTagA = tagA.name.toUpperCase();
+    const nameTagB = tagB.name.toUpperCase();
+    if (nameTagA < nameTagB) {
+      return -1;
+    }
+    return 1;
+  }
   // Open the modal and display the list according to the right filter button
   public openModal(modalType: TypeModalNews): void {
     // if modal already opened, reset type
@@ -96,7 +110,7 @@ export class PostHeaderComponent implements OnInit {
     this.router.navigate([], {
       relativeTo: this.route,
       queryParams: {
-        mainTag: this.mainActiveTag.slug,
+        mainTag: this.mainActiveTag.slug == this.tagEnum.etudes ? this.mainActiveTag.name : this.mainActiveTag.slug,
         publicTags: this.checkedPublicTags.map((tag) => tag.slug),
         locationTags: this.checkedLocationTags.map((tag) => tag.slug),
       },

src/app/post/components/post-list/post-list.component.html

@@ -17,7 +17,7 @@
     </div>
     <div fxLayout="column" *ngIf="isALaUneTag() && !displayTags()">
       <div fxLayout="row" class="row-border" fxLayoutAlign="space-between center">
-        <h2>à la une</h2>
+        <h2>dernières actualités</h2>
         <app-button
           [type]="'button'"
           [style]="'buttonWithHash'"
@@ -25,7 +25,7 @@
           (action)="togglePublishNews()"
         ></app-button>
       </div>
-      <app-post-card [class]="'bigNew'" [post]="bigNews"></app-post-card>
+      <app-post-card *ngIf="bigNews" [class]="'bigNew'" [post]="bigNews"></app-post-card>
     </div>
     <div fxLayout="column" fxLayoutAlign=" center" class="project-container mobile">
       <div class="background-project-container">
@@ -46,18 +46,22 @@
       </div>
     </div>
     <div fxLayout="column">
-      <div fxLayout="row" class="row-border" fxLayoutAlign="space-between center">
-        <h2 [ngClass]="{ 'padding-16-Top': isALaUneTag() && !displayTags() }">{{ getDisplayedTag() }}</h2>
+      <div
+        *ngIf="!isALaUneTag() || displayTags()"
+        fxLayout="row"
+        class="row-border"
+        fxLayoutAlign="space-between center"
+      >
+        <h2>{{ getDisplayedTag() }}</h2>
         <app-button
-          *ngIf="displayTags() || !isALaUneTag()"
           [type]="'button'"
           [style]="'buttonWithHash'"
           [text]="'Publier votre actu'"
-          (action)="publishNews()"
+          (action)="togglePublishNews()"
         ></app-button>
       </div>
       <div *ngIf="leftColumnPosts.length <= 0" fxLayout="column">
-        <p>Aucun résultat ne correspond a votre recherche.</p>
+        <p>Aucun résultat ne correspond à votre recherche.</p>
       </div>
       <div fxLayout="row" fxLayoutGap="33px">
         <div fxLayout="column" class="columnPosts">

src/app/post/components/post-list/post-list.component.scss

@@ -5,7 +5,6 @@
 
 .section-container {
   background: $grey-6;
-  margin-top: 40px;
   min-height: 68vh;
   width: 100%;
   .row-border {
@@ -31,7 +30,7 @@ h2 {
   @media #{$tablet} {
     width: 100%;
   }
-  width: 70%;
+  width: 80%;
   h2 {
     @media #{$large-phone} {
       @include cn-bold-22;
@@ -111,7 +110,3 @@ h2 {
     margin-bottom: 0;
   }
 }
-
-.padding-16-Top {
-  padding-top: 16px;
-}

src/app/post/components/post-list/post-list.component.ts

@@ -52,9 +52,12 @@ export class PostListComponent implements OnInit {
       this.projectsNew = projectNews;
     });
     this.postService.getPosts(1, [TagEnum.aLaUne]).subscribe((news) => {
-      this.bigNews = this.addAuthorToPost(news.posts[0]);
+      if (news.posts[0]) {
+        this.bigNews = this.addAuthorToPost(news.posts[0]);
+      }
     });
     this.route.queryParams.subscribe((queryParams) => {
+      this.isPublishMode = false;
       // If main tag is in route, set it
       if (queryParams.mainTag) {
         this.selectedMainTagSlug = queryParams.mainTag;

src/app/post/components/post-publish/post-publish.component.html

@@ -27,7 +27,9 @@
       <br />
     </div>
     <div>
-      <a class="btn-primary" href="mailto:inclusionnumerique@grandlyon.com?subject=Nouvelle actualité à intégrer"
+      <a
+        class="btn-primary"
+        [href]="'mailto:inclusionnumerique@grandlyon.com?subject=Nouvelle actualité à intégrer&body=' + bodyMail"
         >Envoyer votre actu par mail</a
       >
     </div>

src/app/post/components/post-publish/post-publish.component.scss

@@ -5,9 +5,8 @@
 $margin-post: 20px;
 
 .container {
-  max-width: 832px;
-  width: 95%;
-  margin: $margin-post auto;
+  max-width: 860px;
+  margin: $margin-post 0 100px 0;
   min-height: calc(
     var(--vh, 1vh) * 100 - #{$header-height} - #{$footer-height} - #{$header-post-height} - #{$margin-post} * 2
   );

src/app/post/components/post-publish/post-publish.component.ts

@@ -8,7 +8,8 @@ import { Component, EventEmitter, OnInit, Output } from '@angular/core';
 export class PostPublishComponent implements OnInit {
   @Output() closePublish = new EventEmitter<boolean>();
   constructor() {}
-
+  public bodyMail =
+    "Bonjour,%0D Je souhaite ajouter cette publication sur Rés'in :%0D- Titre :%0D- Texte :%0D- Auteur :%0D- Image : à joindre en pièce jointe";
   ngOnInit(): void {}
 
   public backToPosts(): void {

src/assets/ico/sprite.svg

@@ -218,12 +218,10 @@
 <rect x="21.7109" y="16.4634" width="1.33333" height="9.11111"/>
 </symbol>
 
-<symbol id="news-public" viewBox="0 0 29 26" xmlns="http://www.w3.org/2000/svg">
-<path d="M15.8488 19.9496C16.7844 19.3911 17.4109 18.3687 17.4109 17.2C17.4109 15.4327 15.9782 14 14.2109 14C12.4436 14 11.0109 15.4327 11.0109 17.2C11.0109 18.3687 11.6375 19.3911 12.573 19.9496C11.1806 20.5754 10.2109 21.9745 10.2109 23.6V26H18.2109V23.6C18.2109 21.9745 17.2413 20.5754 15.8488 19.9496Z" />
-<path d="M5.84883 19.9496C6.78438 19.3911 7.41094 18.3687 7.41094 17.2C7.41094 15.4327 5.97825 14 4.21094 14C2.44363 14 1.01094 15.4327 1.01094 17.2C1.01094 18.3687 1.6375 19.3911 2.57304 19.9496C1.18059 20.5754 0.210938 21.9745 0.210938 23.6V26H8.21094V23.6C8.21094 21.9745 7.24128 20.5754 5.84883 19.9496Z" />
-<path d="M10.8488 5.94963C11.7844 5.39114 12.4109 4.36874 12.4109 3.2C12.4109 1.43269 10.9782 0 9.21094 0C7.44363 0 6.01094 1.43269 6.01094 3.2C6.01094 4.36874 6.6375 5.39114 7.57304 5.94963C6.18059 6.57538 5.21094 7.97445 5.21094 9.6V12H13.2109V9.6C13.2109 7.97445 12.2413 6.57538 10.8488 5.94963Z" />
-<path d="M25.8488 19.9496C26.7844 19.3911 27.4109 18.3687 27.4109 17.2C27.4109 15.4327 25.9782 14 24.2109 14C22.4436 14 21.0109 15.4327 21.0109 17.2C21.0109 18.3687 21.6375 19.3911 22.573 19.9496C21.1806 20.5754 20.2109 21.9745 20.2109 23.6V26H28.2109V23.6C28.2109 21.9745 27.2413 20.5754 25.8488 19.9496Z" />
-<path d="M20.8488 5.94963C21.7844 5.39114 22.4109 4.36874 22.4109 3.2C22.4109 1.43269 20.9782 0 19.2109 0C17.4436 0 16.0109 1.43269 16.0109 3.2C16.0109 4.36874 16.6375 5.39114 17.573 5.94963C16.1806 6.57538 15.2109 7.97445 15.2109 9.6V12H23.2109V9.6C23.2109 7.97445 22.2413 6.57538 20.8488 5.94963Z"/>
+<symbol id="news-public" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.5985 23.9446C24.6326 23.3273 25.3251 22.1973 25.3251 20.9055C25.3251 18.9522 23.7416 17.3687 21.7882 17.3687C19.8349 17.3687 18.2514 18.9522 18.2514 20.9055C18.2514 22.1973 18.9439 23.3273 19.9779 23.9446C18.4389 24.6362 17.3672 26.1825 17.3672 27.9792V29.5265H26.2093V27.9792C26.2093 26.1825 25.1376 24.6362 23.5985 23.9446Z" stroke="none"/>
+<path d="M11.4423 23.9446C12.4763 23.3273 13.1688 22.1973 13.1688 20.9055C13.1688 18.9522 11.5853 17.3687 9.63199 17.3687C7.67865 17.3687 6.09515 18.9522 6.09515 20.9055C6.09515 22.1973 6.78766 23.3273 7.82169 23.9446C6.28266 24.6362 5.21094 26.1825 5.21094 27.9792V29.5265H14.053V27.9792C14.053 26.1825 12.9813 24.6362 11.4423 23.9446Z" stroke="none"/>
+<path d="M16.9696 9.5759C18.0037 8.95863 18.6962 7.82861 18.6962 6.53684C18.6962 4.5835 17.1127 3 15.1593 3C13.206 3 11.6225 4.5835 11.6225 6.53684C11.6225 7.82861 12.315 8.95863 13.349 9.5759C11.81 10.2675 10.7383 11.8139 10.7383 13.6105V15.1579H19.5804V13.6105C19.5804 11.8139 18.5087 10.2675 16.9696 9.5759Z" stroke="none"/>
 </symbol>
 
 

src/assets/scss/_layout.scss

@@ -3,4 +3,5 @@ $footer-height: 56px;
 $header-height-phone: 70px;
 $footer-height-phone: 75px;
 $progressBar-height: 50px;
-$header-post-height: 140px;
+$header-post-height: 180px;
+$header-post-height-mobile: 140px;