Merge pull request #730 from Mallikki/feature/news-component-improvement

feat(showcase): reimplementation of stark news

showcase/src/app/news/news-component/_news.component.scss

@@ -1,49 +1,28 @@
-:root {
-  --my-color: #00f;
+.first-news-image {
+  background: url("/assets/images/screenshots/showcase-screenshot.png") no-repeat center center;
+  width: 250px;
+  height: 60px;
+  display: inline-block;
+  background-size: contain;
 }
 
-div {
-  .mat-card-title {
-    color: #000;
-    size: 120%;
-  }
-}
-
-.news-page-header {
-  margin-bottom: 15px;
-}
-
-.mat-header-image {
-  background-image: url("/assets/images/app-icons/favicon-32x32.png");
-  background-size: cover;
+.second-news-image {
+  background: url("/assets-base/stark_logo_white.png") no-repeat center center;
+  width: 250px;
+  height: 60px;
+  background-size: contain;
 }
 
 @media #{$desktop-query} {
   .first-news-image {
-    background-image: url("/assets/images/screenshots/showcase-screenshot.png");
-    margin: 8px;
-    background-size: cover;
-    width: 700px;
-    height: 370px;
+    width: 750px;
+    height: 200px;
   }
 }
 
 @media #{$tablet-only-query} {
   .first-news-image {
-    background-image: url("/assets/images/screenshots/showcase-screenshot.png");
-    margin: 8px;
-    background-size: cover;
-    width: 400px;
-    height: 280px;
-  }
-}
-
-@media #{$mobile-only-query} {
-  .first-news-image {
-    background-image: url("/assets/images/screenshots/showcase-screenshot.png");
-    margin: 3px;
-    background-size: cover;
-    width: 200px;
-    height: 150px;
+    width: 500px;
+    height: 100px;
   }
 }

showcase/src/app/news/news-component/news.component.html

@@ -1,21 +1,20 @@
-<h1 class="mat-display-3" translate>Stark news</h1>
-<h2 class="mat-display-1">Discover here the latest news about the Stark framework!</h2>
+<div class="mat-display-3 ">Stark news</div>
+<div class="mat-display-1">Discover here the latest news about the Stark framework!</div>
 
-<news-item [release]="'1.1.0'" [newsDate]="'19/07/2018'">
-	<div class="news-item-title">Stark News page is finally here! </div>
+<news-item [release]="'10.0.0-beta.0'" [newsDate]="'27/09/2018'">
+	<div class="news-image second-news-image"></div>
+	<h2 class="news-item-title">A very happy occasion</h2>
 	<div class="news-item-content">
-		The news page is there, get happy! <br>
-		Below is an image of this first news displayed as a full example of the news-item component <br>
-		<img class="first-news-image">
+		<p>Stark Logo was born this week! </p>
+		<p>Let's all make a round of applause for our java consultant, Maxime, that had the good idea to mix Angular's pretty logo with the name of our project! </p>
 	</div>
 </news-item>
 
-<news-item [release]="'1.0.1'" [newsDate]="'19/08/2018'">
-	<div class="news-item-title">This is another test of a news</div>
+<news-item [release]="'10.0.0-beta.0'" [newsDate]="'19/07/2018'">
+	<div class="news-image first-news-image"></div>
+	<h2 class="news-item-title">Stark News page is finally here! </h2>
 	<div class="news-item-content">
-		Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br> 
-		Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <br>
-		Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br>
-		Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
+		<p>The news page is there, get happy! </p>
+		<p>Don't mind me, I'm just an example with a bigger image, just so you know how I look like.  </p>
 	</div>
 </news-item>

showcase/src/app/news/news-item-component/_news-item.component.scss

@@ -1,14 +1,5 @@
-div {
-  & h4 {
-    color: #888;
-  }
-
-  & h2 {
-    color: #000;
-    size: 120%;
-  }
-}
-
-.news-item {
-  margin-bottom: 15px;
+.section-border {
+  padding-bottom: 26px;
+  border-bottom: 1px solid mat-color($grey-palette, 400);
+  margin-bottom: 20px;
 }

showcase/src/app/news/news-item-component/news-item.component.html

@@ -1,12 +1,8 @@
-<mat-card class="news-item">
-	<div class="mat-card-title">
-		<h2><ng-content select=".news-item-title"></ng-content></h2>
+<div class="section-border">
+	<div fxLayout="column" fxLayoutAlign="space-between" fxLayout.gt-xs="row wrap">
+		<ng-content class="mat-display-2" select=".news-item-title"></ng-content>
+		<ng-content class="image" select=".news-image"></ng-content>
 	</div>
-	<div class="mat-card-subtitle">
-		<h4>Release: {{ release }} <br>Date: {{ newsDate }}
-		</h4>
-	</div>
-	<div class="mat-card-content">
-		<ng-content select=".news-item-content"></ng-content>
-	</div>
-</mat-card>
+	<div class="mat-body-2 information">Release: {{ release }} ({{ newsDate }})</div>
+	<ng-content select=".news-item-content"></ng-content>
+</div>

showcase/src/app/news/news-item-component/news-item.component.ts

@@ -4,7 +4,6 @@ const componentName: string = "news-item-component";
 
 @Component({
 	selector: "news-item",
-	styleUrls: ["./_news-item.component.scss"],
 	templateUrl: "./news-item.component.html"
 })
 export class NewsItemComponent implements OnInit {

showcase/src/app/news/news.module.ts

@@ -4,9 +4,10 @@ import { NewsItemComponent } from "./news-item-component";
 import { MatIconModule } from "@angular/material/icon";
 import { MatCardModule } from "@angular/material/card";
 import { CommonModule } from "@angular/common";
+import { SharedModule } from "../shared";
 
 @NgModule({
-	imports: [MatCardModule, MatIconModule, CommonModule],
+	imports: [MatCardModule, MatIconModule, CommonModule, SharedModule],
 	declarations: [NewsComponent, NewsItemComponent],
 	exports: [NewsComponent, NewsItemComponent]
 })

showcase/src/assets-base/stark_logo.txt

@@ -0,0 +1,30 @@
+Inspiration for Stark logo
+--------------------------
+
+Our logo is based on Angular logo available there :  https://angular.io/presskit.
+The Angular project is available on gitHub at the following location : https://github.com/angular?locale=en.
+
+Creator of the logo
+-------------------
+
+Maxime Sauvage is the creator of this logo: [email protected]
+
+Reminder of CC 4.0
+------------------
+
+Attribution 4.0 International (CC BY 4.0)
+This is a human-readable summary of (and not a substitute for) the license. Disclaimer.
+You are free to:
+
+Share — copy and redistribute the material in any medium or format
+Adapt — remix, transform, and build upon the material for any purpose, even commercially.
+This license is acceptable for Free Cultural Works.
+The licensor cannot revoke these freedoms as long as you follow the license terms.
+Under the following terms:
+
+Attribution — You must give appropriate credit, provide a link to the license, and indicate if changes were made. You may do so in any reasonable manner,but not in any way that suggests the licensor endorses you or your use.
+No additional restrictions — You may not apply legal terms or technological measures that legally restrict others from doing anything the license permits.
+Notices:
+
+You do not have to comply with the license for elements of the material in the public domain or where your use is permitted by an applicable exception or limitation.
+No warranties are given. The license may not give you all of the permissions necessary for your intended use. For example, other rights such as publicity, privacy, or moral rights may limit how you use the material.

showcase/src/styles/styles.scss

@@ -1,7 +1,8 @@
 @import "theme";
 @import "stark-styles.scss";
 
-@import "../app/news/news-component/news.component";
-
 @import "~basscss/css/basscss.css";
 @import "~prismjs/themes/prism-okaidia.css";
+
+@import "../app/news/news-component/news.component";
+@import "../app/news/news-item-component/news-item.component";