From c6307e3b2f7e4444c7bce0d30ffe160d3687dd45 Mon Sep 17 00:00:00 2001
From: Hetty de Vries <hetty82@gmail.com>
Date: Fri, 13 Apr 2018 13:46:20 +0200
Subject: [PATCH] Add some editor settings and base styles

---
 .vscode/settings.json                         |  4 ++
 .../components/layout/layout.component.html   | 25 ++++++------
 .../components/layout/layout.component.sass   | 17 ++++++++
 .../components/layout/layout.component.ts     |  4 +-
 .../core/containers/app/app.component.html    |  5 +--
 src/app/core/containers/app/app.component.ts  |  3 +-
 .../containers/games/games.component.html     | 11 ++++--
 .../containers/login/login.component.html     | 10 +++--
 src/styles/_layout.sass                       |  4 ++
 src/styles/_typography.sass                   | 13 ++++++-
 src/styles/_variables.sass                    | 39 ++++++++++++++++---
 src/styles/global.sass                        |  8 ++--
 src/styles/mixins/__index.sass                |  2 +
 src/styles/mixins/_layout.sass                |  4 ++
 tslint.json                                   |  5 ++-
 15 files changed, 115 insertions(+), 39 deletions(-)
 create mode 100644 src/styles/_layout.sass
 create mode 100644 src/styles/mixins/__index.sass
 create mode 100644 src/styles/mixins/_layout.sass

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 1a708d7..3486176 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,3 +1,7 @@
 {
   "tslint.autoFixOnSave": true,
+  "csscomb.preset": {
+  },
+  "csscomb.formatOnSave": false,
+
 }
diff --git a/src/app/core/components/layout/layout.component.html b/src/app/core/components/layout/layout.component.html
index 827164d..e07be84 100644
--- a/src/app/core/components/layout/layout.component.html
+++ b/src/app/core/components/layout/layout.component.html
@@ -1,20 +1,19 @@
 <header class="header">
-  <div class="container">
-    <div class="left">
-      <ng-content></ng-content>
-    </div>
+  <div class="left">
+    <h1 class="title">{{ title }}</h1>
+    <p>{{ subTitle }}</p>
+  </div>
+
+  <div class="center">
+    <a routerLink="/login" routerLinkActive="active">Login</a>
+    <a routerLink="/games" routerLinkActive="active">Games</a>
+  </div>
 
-    <div class="right">
-      <a routerLink="/login" routerLinkActive="active">Login</a>
-      <a routerLink="/games" routerLinkActive="active">Games</a>
-    </div>
+  <div class="right">
+    [ account ]
   </div>
 </header>
 
 <main class="main">
-  <div class="container">
-    --/ router-outlet \--
-    <router-outlet></router-outlet>
-    --\ router-outlet /--
-  </div>
+  <router-outlet></router-outlet>
 </main>
diff --git a/src/app/core/components/layout/layout.component.sass b/src/app/core/components/layout/layout.component.sass
index e69de29..14efe22 100644
--- a/src/app/core/components/layout/layout.component.sass
+++ b/src/app/core/components/layout/layout.component.sass
@@ -0,0 +1,17 @@
+@import '~styles/variables'
+
+
+.header
+  display: flex
+  align-items: center
+  margin-bottom: $spacing-xxl
+  padding: $spacing-sm $spacing-default
+  border-bottom: $border-light-double
+
+.center
+  flex: 1
+  text-align: center
+
+.title
+  font-size: $font-size-lg
+  margin-bottom: 0
diff --git a/src/app/core/components/layout/layout.component.ts b/src/app/core/components/layout/layout.component.ts
index 42c5fa4..af2fc93 100644
--- a/src/app/core/components/layout/layout.component.ts
+++ b/src/app/core/components/layout/layout.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core'
+import { Component, OnInit, Input } from '@angular/core'
 
 @Component({
   selector: 'app-layout',
@@ -6,6 +6,8 @@ import { Component, OnInit } from '@angular/core'
   styleUrls: ['./layout.component.sass']
 })
 export class LayoutComponent implements OnInit {
+  @Input() title: string
+  @Input() subTitle: string
 
   constructor() { }
 
diff --git a/src/app/core/containers/app/app.component.html b/src/app/core/containers/app/app.component.html
index 1eb18be..7332946 100644
--- a/src/app/core/containers/app/app.component.html
+++ b/src/app/core/containers/app/app.component.html
@@ -1,4 +1 @@
-<app-layout>
-  <h1>Games</h1>
-  <h2>Made with Angular by hetty82</h2>
-</app-layout>
+<app-layout [title]="title" [subTitle]="subTitle"></app-layout>
diff --git a/src/app/core/containers/app/app.component.ts b/src/app/core/containers/app/app.component.ts
index 74343b5..4a5d2ee 100644
--- a/src/app/core/containers/app/app.component.ts
+++ b/src/app/core/containers/app/app.component.ts
@@ -6,5 +6,6 @@ import { Component } from '@angular/core'
   styleUrls: ['./app.component.sass']
 })
 export class AppComponent {
-  title = 'app'
+  title = 'Games'
+  subTitle = 'Made with Angular by hetty82'
 }
diff --git a/src/app/core/containers/games/games.component.html b/src/app/core/containers/games/games.component.html
index 1d7ddf2..6edeab2 100644
--- a/src/app/core/containers/games/games.component.html
+++ b/src/app/core/containers/games/games.component.html
@@ -1,5 +1,8 @@
-<h2>Game list</h2>
+<section class="container">
+  <h1 class="page-title">Game list</h1>
+
+  <ul>
+    <li *ngFor="let game of (games$ | async)">{{ game.name }}</li>
+  </ul>
+</section>
 
-<ul>
-  <li *ngFor="let game of (games$ | async)">{{ game.name }}</li>
-</ul>
diff --git a/src/app/core/containers/login/login.component.html b/src/app/core/containers/login/login.component.html
index 75ae91f..7470990 100644
--- a/src/app/core/containers/login/login.component.html
+++ b/src/app/core/containers/login/login.component.html
@@ -1,5 +1,7 @@
-<h2>User list</h2>
+<section class="container">
+  <h1 class="page-title">User list</h1>
 
-<ul>
-  <li *ngFor="let user of (users$ | async)">{{ user.name }}</li>
-</ul>
+  <ul>
+    <li *ngFor="let user of (users$ | async)">{{ user.name }}</li>
+  </ul>
+</section>
diff --git a/src/styles/_layout.sass b/src/styles/_layout.sass
new file mode 100644
index 0000000..760da87
--- /dev/null
+++ b/src/styles/_layout.sass
@@ -0,0 +1,4 @@
+.container
+  max-width: $container-max
+  margin: 0 auto
+  padding: 0 $spacing-default
diff --git a/src/styles/_typography.sass b/src/styles/_typography.sass
index c1aa076..316b25c 100644
--- a/src/styles/_typography.sass
+++ b/src/styles/_typography.sass
@@ -2,14 +2,15 @@ html
   font-size: 16px
 
 body
-  font-family: $font-family-sans
+  font-family: $font-family-default
   font-size: 1em
   line-height: 1.5
+  color: $text-color
 
 h1,
 h2,
 h3
-  font-family: $font-family-serif
+  font-family: $font-family-special
   margin-bottom: $spacing-default
   font-weight: bold
   line-height: 1.2
@@ -24,3 +25,11 @@ p
   &:last-child
     margin: 0
 
+ul,
+ol
+  margin: 0
+  padding: 0
+  list-style: none
+
+.page-title
+  font-size: $font-size-xs
diff --git a/src/styles/_variables.sass b/src/styles/_variables.sass
index 51f4660..d465591 100644
--- a/src/styles/_variables.sass
+++ b/src/styles/_variables.sass
@@ -1,13 +1,40 @@
 @import url(https://fonts.googleapis.com/css?family=Ubuntu:400,400i,700,700i)
+@import url(https://fonts.googleapis.com/css?family=Oswald:400,600)
 
-$font-family-sans: Ubuntu, Verdana, Geneva, sans-serif
-$font-family-serif: Georgia, serif
+// fonts
+$font-family-default: Ubuntu, Verdana, Geneva, sans-serif
+$font-family-special: Oswald, sans-serif
 
-$blue: lightblue
+$font-size-xs: 0.75em
+$font-size-sm: 0.875em
+$font-size-default: 1em
+$font-size-lg: 1.25em
+$font-size-xs: 1.5em
 
-$spacing-small: 0.5rem
-$spacing-default: 1rem
 
-$border-default: 1px solid #ddd
+// colors
+$blue: #00bfff
+
+$gray-darker-1: #333333
+$gray: #666666
+$gray-lighter-1: #999999
+$gray-lighter-2: #dddddd
+
+// general
+$spacing-sm: 0.5em
+$spacing-default: 1em
+$spacing-lg: 1.5em
+$spacing-xl: 2em
+$spacing-xxl: 3em
+
+$border-default: 1px solid $gray
+$border-light: 1px solid $gray-lighter-2
+$border-light-double: 2px solid $gray-lighter-2
+
 $border-radius: 3px
 
+$container-max: 60rem
+
+// color mapping
+$text-color: $gray-darker-1
+
diff --git a/src/styles/global.sass b/src/styles/global.sass
index 35625c1..2617ef2 100644
--- a/src/styles/global.sass
+++ b/src/styles/global.sass
@@ -1,4 +1,6 @@
-@import "reset"
-@import "variables"
-@import "typography"
+@import 'reset'
+@import 'variables'
+@import 'mixins/index'
+@import 'typography'
+@import 'layout'
 
diff --git a/src/styles/mixins/__index.sass b/src/styles/mixins/__index.sass
new file mode 100644
index 0000000..ebe24da
--- /dev/null
+++ b/src/styles/mixins/__index.sass
@@ -0,0 +1,2 @@
+@import 'layout'
+
diff --git a/src/styles/mixins/_layout.sass b/src/styles/mixins/_layout.sass
new file mode 100644
index 0000000..e5d47ce
--- /dev/null
+++ b/src/styles/mixins/_layout.sass
@@ -0,0 +1,4 @@
+// =container
+//   max-width: $container-max
+//   margin: 0 auto
+
diff --git a/tslint.json b/tslint.json
index cc6ad37..ba1c76b 100644
--- a/tslint.json
+++ b/tslint.json
@@ -10,7 +10,10 @@
       true,
       "check-space"
     ],
-    "curly": true,
+    "curly": [
+      true,
+      "ignore-same-line"
+    ],
     "deprecation": {
       "severity": "warn"
     },