fix(css): content background color inconsistent

SteveVanOpstal · Sep 13, 2017 · de55b9d · de55b9d
1 parent eb6597e
commit de55b9d
Show file tree

Hide file tree

Showing 13 changed files with 97 additions and 62 deletions.
diff --git a/src/client/build/build.component.scss b/src/client/build/build.component.scss
@@ -1,3 +1,5 @@
+@import '../content.scss';
+
 .content {
   background-color: #fff;
 }

diff --git a/src/client/build/build.component.ts b/src/client/build/build.component.ts
@@ -8,19 +8,21 @@ import {ShopComponent} from './shop/shop.component';
   selector: 'lb-build',
   styleUrls: ['./build.component.scss'],
   template: `
-    <div class="title">
-      <img *ngIf="champion"
-          [attr.alt]="champion?.name"
-          [attr.src]="'champion/' + champion?.image?.full | lbDDragon">
-      <h2>{{ champion?.name }}</h2>
-    </div>
-    <lb-loading [observable]="lolApi.getCurrentChampion()">
-      <lb-graph></lb-graph>
-      <!--<lb-abilities></lb-abilities>
-      <lb-masteries></lb-masteries>-->
-      <lb-items (itemSelected)="shop.selectItem($event)" #items></lb-items>
-      <lb-shop #shop></lb-shop>
-    </lb-loading>`
+    <div class="content">
+      <div class="title">
+        <img *ngIf="champion"
+            [attr.alt]="champion?.name"
+            [attr.src]="'champion/' + champion?.image?.full | lbDDragon">
+        <h2>{{ champion?.name }}</h2>
+      </div>
+      <lb-loading [observable]="lolApi.getCurrentChampion()">
+        <lb-graph></lb-graph>
+        <!--<lb-abilities></lb-abilities>
+        <lb-masteries></lb-masteries>-->
+        <lb-items (itemSelected)="shop.selectItem($event)" #items></lb-items>
+        <lb-shop #shop></lb-shop>
+      </lb-loading>
+    </div>`
 })
 
 export class BuildComponent implements OnInit {

diff --git a/src/client/champion/champions.component.scss b/src/client/champion/champions.component.scss
@@ -1,3 +1,5 @@
+@import '../content.scss';
+
 .content {
   background-color: #fff;
 }

diff --git a/src/client/champion/champions.component.ts b/src/client/champion/champions.component.ts
@@ -9,17 +9,19 @@ import {ChampionComponent} from './champion.component';
   selector: 'lb-champions',
   styleUrls: ['./champions.component.scss'],
   template: `
-    <lb-filters [(tags)]="tags" [(name)]="name" [(sort)]="sort" (enterHit)="enterHit()">
-    </lb-filters>
-    <lb-loading [observable]="lolApi.getChampions()">
-      <lb-champion *ngFor="let champion of champions
-                          | toArray
-                          | fuzzyBy:'name':name
-                          | lbSort:sort
-                          | lbTags:tags"
-                  [champion]="champion">
-      </lb-champion>
-    </lb-loading>`
+    <div class="content">
+      <lb-filters [(tags)]="tags" [(name)]="name" [(sort)]="sort" (enterHit)="enterHit()">
+      </lb-filters>
+      <lb-loading [observable]="lolApi.getChampions()">
+        <lb-champion *ngFor="let champion of champions
+                            | toArray
+                            | fuzzyBy:'name':name
+                            | lbSort:sort
+                            | lbTags:tags"
+                    [champion]="champion">
+        </lb-champion>
+      </lb-loading>
+    </div>`
 })
 
 export class ChampionsComponent implements OnInit {

diff --git a/src/client/content.scss b/src/client/content.scss
@@ -0,0 +1,11 @@
+.content {
+  border-radius: 10px;
+  margin: 0 10%;
+  padding: 10px;
+}
+
+@media (max-width: 1200px) {
+  .content {
+    margin: 0;
+  }
+}
diff --git a/src/client/main/main.component.scss b/src/client/main/main.component.scss
@@ -1,8 +1,16 @@
-div {
-  display: flex;
-  padding: 15px;
-}
+@import '../content.scss';
 
-.content {
+:host > div > div {
   background-color: #fff;
+  border-radius: 10px;
+  padding: 20px;
+  width: 200px;
+}
+
+:host > div > div > div {
+  width: 100px;
+}
+
+h2 {
+  margin-top: 0;
 }
diff --git a/src/client/main/main.component.ts b/src/client/main/main.component.ts
@@ -4,7 +4,14 @@ import {Component} from '@angular/core';
   selector: 'lb-main',
   styleUrls: ['./main.component.scss'],
   template: `
-    <button [routerLink]="['build']"><span class="align-center">Start Building</span></button>`
+  <div class="content">
+    <div class="align-center">
+      <div class="align-center">
+        <h2>Welcome</h2>
+        <button [routerLink]="['build']"><span class="align-center">Start Building</span></button>
+      </div>
+    </div>
+  </div>`
 })
 
 export class MainComponent {

diff --git a/src/client/region/region.component.scss b/src/client/region/region.component.scss
@@ -1,4 +1,6 @@
-:host > div {
+@import '../content.scss';
+
+:host > div > div {
   background-color: #fff;
   border-radius: 10px;
   padding: 20px;

diff --git a/src/client/region/region.component.ts b/src/client/region/region.component.ts
@@ -6,16 +6,18 @@ import {LolApiService} from '../services';
   selector: 'lb-region',
   styleUrls: ['./region.component.scss'],
   template: `
-  <div class="align-center">
-    <h2>Select your region</h2>
-    <lb-loading [observable]="lolApi.getRegions()">
-      <button *ngFor="let region of lolApi.getRegions() | async">
-        <a [routerLink]="[region?.slug]">
-          <span>{{ region?.slug | uppercase }}</span>
-          <span>{{ region?.name }}</span>
-        </a>
-      </button>
-    </lb-loading>
+  <div class="content">
+    <div class="align-center">
+      <h2>Select your region</h2>
+      <lb-loading [observable]="lolApi.getRegions()">
+        <button *ngFor="let region of lolApi.getRegions() | async">
+          <a [routerLink]="[region?.slug]">
+            <span>{{ region?.slug | uppercase }}</span>
+            <span>{{ region?.name }}</span>
+          </a>
+        </button>
+      </lb-loading>
+    </div>
   </div>`
 })
 

diff --git a/src/client/summoner/summoner.component.scss b/src/client/summoner/summoner.component.scss
@@ -1,4 +1,6 @@
-:host {
+@import '../content.scss';
+
+:host > div {
   display: flex;
 
    > div {
@@ -10,11 +12,11 @@
 }
 
 label {
-  width: 340px;
+  width: 305px;
 }
 
 label > div {
-  width: 230px;
+  width: 220px;
 }
 
 h2 {

diff --git a/src/client/summoner/summoner.component.ts b/src/client/summoner/summoner.component.ts
@@ -16,16 +16,18 @@ const errors = {
   selector: 'lb-summoner',
   styleUrls: ['./summoner.component.scss'],
   template: `
-    <div class="align-center">
-      <label class="align-center">
-        <h2>Enter your summoner name</h2>
-        <div class="align-center">
-          <input type="text" name="name" #name (keyup.enter)="getAccountId(name.value)">
-          <button (click)="getAccountId(name.value)">Go</button>
-        </div>
-      </label>
-      <lb-error [error]="error" [message]="message"></lb-error>
-      <lb-icon-load *ngIf="loading"></lb-icon-load>
+    <div class="content">
+      <div class="align-center">
+        <label class="align-center">
+          <h2>Enter your summoner name</h2>
+          <div class="align-center">
+            <input type="text" name="name" #name (keyup.enter)="getAccountId(name.value)" autofocus>
+            <button (click)="getAccountId(name.value)">Go</button>
+          </div>
+        </label>
+        <lb-error [error]="error" [message]="message"></lb-error>
+        <lb-icon-load *ngIf="loading"></lb-icon-load>
+      </div>
     </div>`
 })
 

diff --git a/src/index.html b/src/index.html
@@ -29,7 +29,7 @@ <h1>Legend Builder</h1>
       </div>
     </div>
   </header>
-  <section class="content">
+  <section>
     <lb-app>
       <div class="loading">
         <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-load" width="32" height="32" viewBox="0 0 32 32">

diff --git a/src/styles.scss b/src/styles.scss
@@ -74,13 +74,6 @@ footer a:hover {
   color: #222;
 }
 
-/* content */
-
-.content {
-  margin: 0 10%;
-  padding: 10px;
-}
-
 /* misc */
 
 .align-center {