add news page, extract News class

oser-app/src/app/showcase-site/about-page/about-page.component.html

+<p>
+  about-page works!
+</p>

oser-app/src/app/showcase-site/about-page/about-page.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AboutPageComponent } from './about-page.component';
+
+describe('AboutPageComponent', () => {
+  let component: AboutPageComponent;
+  let fixture: ComponentFixture<AboutPageComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AboutPageComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AboutPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

oser-app/src/app/showcase-site/about-page/about-page.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-about-page',
+  templateUrl: './about-page.component.html',
+  styleUrls: ['./about-page.component.scss']
+})
+export class AboutPageComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

oser-app/src/app/showcase-site/actions-page/actions-page.component.html

+<p>
+  actions-page works!
+</p>

oser-app/src/app/showcase-site/actions-page/actions-page.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ActionsPageComponent } from './actions-page.component';
+
+describe('ActionsPageComponent', () => {
+  let component: ActionsPageComponent;
+  let fixture: ComponentFixture<ActionsPageComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ActionsPageComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ActionsPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

oser-app/src/app/showcase-site/actions-page/actions-page.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-actions-page',
+  templateUrl: './actions-page.component.html',
+  styleUrls: ['./actions-page.component.scss']
+})
+export class ActionsPageComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

oser-app/src/app/showcase-site/landing-page/landing-page.component.ts

 import { Component, OnInit } from '@angular/core';
-import { News } from './news';
-import { NEWS } from './mock-news';
+import { News } from '../news';
+import { NEWS } from '../mock-news';
 
 class Action {
   title: string;
@@ -36,7 +36,8 @@ export class LandingPageComponent implements OnInit {
   }
 
   getNews(): void {
-    this.news = NEWS;
+    // Get the last 3 news
+    this.news = NEWS.slice(0, 3);
   }
 
   ngOnInit() {

oser-app/src/app/showcase-site/landing-page/news-card/news-card.component.ts

 import { Component, Input, OnInit } from '@angular/core';
-import { News } from '../news';
+import { News } from '../../news';
 
 @Component({
   selector: 'app-news-card',

oser-app/src/app/showcase-site/landing-page/mock-news.ts → oser-app/src/app/showcase-site/mock-news.ts

@@ -2,25 +2,36 @@ import { News } from './news';
 
 /*
 This is a mock array of News objects.
-TODO Implement a NewsService to get the last 3 news from the news page and
-add them on the landing page.
+TODO Implement a NewsService to:
+- get the last n news
+- get all the news
 */
 export const NEWS: News[] = [{
   title: 'Journée de Clôture 2017',
   description: "La fin de l'année scolaire sonne aussi la fin du tutorat pour les tutorés. Pour fêter cette belle année passée ensemble, les tutorés et les tuteurs se sont retrouvés ce samedi 5 juin sur le campus de CentraleSupélec […]",
   date: '15/06/17',
-  src: 'assets/img/news-jdc.jpg'
+  src: 'assets/img/news-jdc.jpg',
+  pinned: false
 },
 {
   title: 'Retour sur Focus Europe 2017',
   description: "Il est l'heure de faire le bilan de cette édition 2017 de Focus Europe, qui a emmené les tutorés à Prague. L'équipe organisatrice vous a préparé une belle brochette de photos ainsi qu'un montage souvenir […]",
   date: '30/04/17',
-  src: 'assets/img/news-focus-bilan.jpg'
+  src: 'assets/img/news-focus-bilan.jpg',
+  pinned: false
 },
 {
   title: "Focus Europe 2017 : c'est parti !",
   description: "Les lycéens sont arrivés ce jeudi 13 avril à Prague, capitale de la République Tchèque. Au programme : découverte de la ville, visites culturelles, jeu de piste, et surtout beaucoup de bonne humeur ! […]",
   date: '03/04/17',
-  src: 'assets/img/news-focus-c-est-parti.jpg'
+  src: 'assets/img/news-focus-c-est-parti.jpg',
+  pinned: false
+},
+{
+  title: "OSER et Véolia signent un nouveau partenariat",
+  description: "Depuis le 11 décembre 2017, OSER peut compter sur un nouveau partenaire. Véolia est un grand groupe de la gestion énergétique et sanitaire, et s'engage à nos côtés pour favoriser le tissu social.",
+  date: "14/12/2017",
+  src: "assets/img/logo-veolia.png",
+  pinned: true
 }
 ]

oser-app/src/app/showcase-site/navbar/navbar.component.ts

 import { Component, OnInit } from '@angular/core';
 
-
 class Link {
   href: string;
   text: string;
@@ -14,12 +13,11 @@ class Link {
 export class NavbarComponent implements OnInit {
 
   visible: boolean;
-  // todo add real hrefs (router links) once implemented
   links: Link[] = [
-    { href: '.', text: 'Qui sommes-nous ?' },
+    { href: 'about', text: 'Qui sommes-nous ?' },
     { href: 'donate', text: 'Soutenez-nous' },
-    { href: '.', text: 'Nos actions' },
-    { href: '.', text: 'Actualités' },
+    { href: 'actions', text: 'Nos actions' },
+    { href: 'news', text: 'Actualités' },
     { href: 'contact', text: 'Contact' }
   ];
   // TODO change to real login route once implemented

oser-app/src/app/showcase-site/news-page/filters.ts

+export class Filter {
+  name: string;
+  // TODO implement filter() action
+}
+
+export class FilterGroup {
+  name: string;
+  filters: Filter[];
+}

oser-app/src/app/showcase-site/news-page/news-item/news-item.component.html

+<div class="news-card">
+  <div class="image">
+    <img [src]="news.src" [alt]="news.title"/>
+  </div>
+  <div class="news-card-body">
+    <h3>
+      {{ news.title }}
+      <span *ngIf="news.pinned" class="pinned">&nbsp;<i class="fa fa-map-pin"></i>&nbsp;À&nbsp;la&nbsp;une</span>
+    </h3>
+    <h5 class="date">Publié le {{ news.date }}</h5>
+    <p>
+      {{ news.description }}
+    </p>
+    <a href="#">Lire la suite</a>
+  </div>
+</div>

oser-app/src/app/showcase-site/news-page/news-item/news-item.component.scss

+@import '~app/showcase-site/sass/variables';
+@import '~app/showcase-site/sass/mixins';
+$padding: 1em 1.5em;
+
+.news-card {
+  display: grid;
+  grid-template-columns: 1fr;
+  @include media-md {
+    grid-template-columns: 0.4fr 1fr;
+  }
+  grid-column-gap: 0.5em;
+  // display: flex;
+  min-height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+.image {
+  display: none;
+  margin: 0 0.5em auto 0;
+  @include media-md {
+    display: block;
+  }
+
+  img {
+    width: 100%;
+    height: auto;
+    border-radius: 4px;
+    overflow: hidden;
+  }
+}
+
+.news-card-body {
+  h3 {
+    font-weight: bold;
+    margin: 0;
+  }
+
+  h5 {
+    color: gray;
+    font-weight: normal;
+    margin-top: 0.5em;
+  }
+  .date {
+    margin-bottom: 0;
+  }
+  p {
+    $m: .5em;
+    margin-top: $m;
+    margin-bottom: $m;
+  }
+}
+
+.pinned {
+  color: $color-dark-blue;
+  font-size: 10pt;
+}

oser-app/src/app/showcase-site/news-page/news-item/news-item.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NewsItemComponent } from './news-item.component';
+
+describe('NewsItemComponent', () => {
+  let component: NewsItemComponent;
+  let fixture: ComponentFixture<NewsItemComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NewsItemComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NewsItemComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

oser-app/src/app/showcase-site/news-page/news-item/news-item.component.ts

+import { Component, Input, OnInit } from '@angular/core';
+import { News } from '../../news';
+
+@Component({
+  selector: 'app-news-item',
+  templateUrl: './news-item.component.html',
+  styleUrls: ['./news-item.component.scss']
+})
+export class NewsItemComponent implements OnInit {
+
+  @Input() news: News;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

oser-app/src/app/showcase-site/news-page/news-page.component.html

+<div class="wrapper">
+  <div class="header">
+    <h1>L'actualité d'OSER</h1>
+  </div>
+
+  <div class="search">
+    <h3>Rechercher</h3>
+    <div class="search-bar">
+      <input type="text" (keyup)="searchTerm$.next($event.target.value)">
+    </div>
+    <h3>Filtrer</h3>
+    <ul class="group-list">
+      <li *ngFor="let group of filterGroups">
+        {{ group.name }}
+        <ul class="filter-list">
+          <li *ngFor="let filter of group.filters">
+            {{ filter.name }}
+          </li>
+        </ul>
+      </li>
+    </ul>
+  </div>
+
+  <div class="main">
+    <ul>
+      <app-news-item *ngFor="let newsItem of news" [news]="newsItem"></app-news-item>
+    </ul>
+  </div>
+
+  <div class="feeds">
+    <!-- OSER's Twitter feed -->
+    <!-- TODO Only appears when refreshing news page, coming from other pages does not work -->
+    <a class="twitter-timeline" data-lang="fr" data-link-color="#19CF86" data-height="1000" href="https://twitter.com/OSER_CS?ref_src=twsrc%5Etfw">
+      Tweets de @OSER_CS</a>
+  </div>
+</div>

oser-app/src/app/showcase-site/news-page/news-page.component.scss

+@import '~app/showcase-site/sass/mixins';
+
+.wrapper {
+  @include margin-page;
+  display: grid;
+
+  grid-template-areas:
+    "hd"
+    "search"
+    "main"
+    "feeds";
+  grid-row-gap: 1em;
+
+  @include media-sm {
+    grid-template-areas:
+      "hd hd"
+      "main search"
+      "main feeds";
+    grid-template-columns: auto 1fr;
+    grid-column-gap: 2em;
+    grid-row-gap: 1em;
+  }
+
+  @include media-md {
+    grid-template-areas:
+      ". hd ."
+      "search main feeds";
+    grid-template-columns: 1fr auto 1fr;
+  }
+}
+
+.header {
+  grid-area: hd;
+}
+
+.search {
+  grid-area: search;
+  ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    font-weight: bold;
+  }
+  ul.filter-list {
+    font-weight: normal;
+  }
+  li > ul {
+    margin-left: 1em;
+  }
+}
+
+.main {
+  grid-area: main;
+  ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+  }
+  /* Add space between news items */
+  app-news-item + app-news-item {
+    margin-top: 2em;
+  }
+}
+.feeds {
+  grid-area: feeds;
+}

oser-app/src/app/showcase-site/news-page/news-page.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NewsPageComponent } from './news-page.component';
+
+describe('NewsPageComponent', () => {
+  let component: NewsPageComponent;
+  let fixture: ComponentFixture<NewsPageComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NewsPageComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NewsPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});