Affichage statique

7b7e297d · Emile TAVERNE · 2ed0bae7 · 7b7e297d · 7b7e297d · 7b7e297d
Commit 7b7e297d authored Nov 10, 2017 by Emile TAVERNE
12 changed files
--- a/trombinoscope/src/app/app.component.css
+++ b/trombinoscope/src/app/app.component.css
+header {
+  background-color: #1976D2;
+  color: #ffffff;
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .3);
+}
+
+header h1 {
+  font-weight: 400;
+  letter-spacing: 0.6px;
+}
--- a/trombinoscope/src/app/app.component.html
+++ b/trombinoscope/src/app/app.component.html
-<!--The content below is only a placeholder and can be replaced.-->
-<div style="text-align:center">
-  <h1>
-    Welcome to {{title}}!
+<header class="w100">
+  <h1 class="txtcenter pas">
+    <img class="fl" src="/assets/angular.png">
+    Trombinoscope
  </h1>
-  <img width="300" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
+</header>
+<div class="w80 center ptm">
+  <div class="grid-4 has-gutter">
+    <app-card></app-card>
+    <app-card></app-card>
+    <app-card></app-card>
+  </div>
 </div>
-<h2>Here are some links to help you start: </h2>
-<ul>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
-  </li>
-</ul>
-
--- a/trombinoscope/src/app/app.component.ts
+++ b/trombinoscope/src/app/app.component.ts
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';

 @Component({
  selector: 'app-root',
@@ -6,5 +6,5 @@ import { Component } from '@angular/core';
  styleUrls: ['./app.component.css']
 })
 export class AppComponent {
-  title = 'app';
+
 }
--- a/trombinoscope/src/app/app.module.ts
+++ b/trombinoscope/src/app/app.module.ts
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-
-
-import { AppComponent } from './app.component';
+import {BrowserModule} from '@angular/platform-browser';
+import {NgModule} from '@angular/core';

+import {AppComponent} from './app.component';
+import * as Components from './components';

 @NgModule({
  declarations: [
-    AppComponent
+    AppComponent,
+    Components.CardComponent
  ],
  imports: [
    BrowserModule

--- a/trombinoscope/src/app/components/card/card.component.css
+++ b/trombinoscope/src/app/components/card/card.component.css
+.card {
+  background-color: #ffffff;
+  box-shadow: 0 6px 6px rgba(10, 16, 20, .15), 0 0 52px rgba(10, 16, 20, .12);
+}
+
+.card h2 {
+  font-size: 24px;
+  font-weight: 500;
+}
--- a/trombinoscope/src/app/components/card/card.component.html
+++ b/trombinoscope/src/app/components/card/card.component.html
+<div class="card pam">
+  <h2 class="txtcenter">{{prenom}} {{nom | uppercase}}</h2>
+  <img class="center w100" [src]="image">
+</div>
--- a/trombinoscope/src/app/components/card/card.component.ts
+++ b/trombinoscope/src/app/components/card/card.component.ts
--- a/trombinoscope/src/app/components/index.ts
+++ b/trombinoscope/src/app/components/index.ts
+export * from './card/card.component';
--- a/trombinoscope/src/assets/angular.png
+++ b/trombinoscope/src/assets/angular.png
--- a/trombinoscope/src/assets/knacss.css
+++ b/trombinoscope/src/assets/knacss.css
--- a/trombinoscope/src/index.html
+++ b/trombinoscope/src/index.html
@@ -6,6 +6,7 @@
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
 <body>

--- a/trombinoscope/src/styles.css
+++ b/trombinoscope/src/styles.css
-/* You can add global styles to this file, and also import other style files */
+@import url("assets/knacss.css");
+
+body {
+  background-color: #fafafa;
+}
+
+* {
+  font-family: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif !important;
+}