UI Cleanup

src/app/app.module.ts

@@ -39,6 +39,7 @@ import { PuzzleConfigurationComponent } from './puzzle-configuration/puzzle-conf
 import { PuzzleSolutionComponent } from './puzzle-solution/puzzle-solution.component';
 import { HomeComponent } from './home/home.component';
 import { PuzzleListingComponent } from './puzzle-listing/puzzle-listing.component';
+import { MapKeyComponent } from './map-key/map-key.component';
 
 @NgModule({
   declarations: [
@@ -50,6 +51,7 @@ import { PuzzleListingComponent } from './puzzle-listing/puzzle-listing.componen
     PuzzleSolutionComponent,
     HomeComponent,
     PuzzleListingComponent,
+    MapKeyComponent,
   ],
   imports: [
     BrowserModule,

src/app/home/home.component.html

@@ -13,9 +13,15 @@ <h1 class="display-4">Genshin Impact Puzzle Solver</h1>
         >
         page.
       </p>
-
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-xs-12 col-sm-12 col-md-8">
       <app-map id="mapArea" class="card-text" [fixedHeight]="true"></app-map>
     </div>
+    <div class="col-xs-12 col-sm-12 col-md-4">
+      <app-map-key></app-map-key>
+    </div>
   </div>
   <div class="row">
     <!--
@@ -59,19 +65,7 @@ <h5>{{ island }}</h5>
       </div>
     </div>
 
-    <div class="col col-md-4">
-      <div class="card" style="width: 18rem">
-        <div class="card-body">
-          <h5 class="card-title">Map Key</h5>
-          <p class="card-text">
-            <img src="assets/waypoint.png" /> Teleport Waypoint<br />
-            <img src="assets/seven.png" /> Statue of the Seven<br />
-            <img src="assets/puzzle.png" /> Working Puzzle<br />
-            <img src="assets/bad-puzzle.png" /> Broken Puzzle<br />
-          </p>
-        </div>
-      </div>
-    </div>
+    <div class="col col-md-4"></div>
     <!--
     <div class="col col-md-4">
       <div class="card" style="width: 18rem">

src/app/map-key/map-key.component.html

@@ -0,0 +1,11 @@
+<div class="card">
+  <div class="card-body">
+    <h5 class="card-title">Map Key</h5>
+    <p class="card-text">
+      <img src="assets/waypoint.png" /> Teleport Waypoint<br />
+      <img src="assets/seven.png" /> Statue of the Seven<br />
+      <img src="assets/puzzle.png" /> Working Puzzle<br />
+      <img src="assets/bad-puzzle.png" /> Broken Puzzle<br />
+    </p>
+  </div>
+</div>

src/app/map-key/map-key.component.scss

@@ -0,0 +1,3 @@
+div.card {
+  margin-top: 4px;
+}

src/app/map-key/map-key.component.spec.ts

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

src/app/map-key/map-key.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-map-key',
+  templateUrl: './map-key.component.html',
+  styleUrls: ['./map-key.component.scss']
+})
+export class MapKeyComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/puzzle-listing/puzzle-listing.component.html

@@ -4,29 +4,29 @@ <h2>{{ pageName }}</h2>
   <div class="row">
     <ng-container *ngIf="items && items.length > 0; else noSolutionBlock">
       <div
-        class="col col-md-4"
+        class="col-xs-12 col-sm-12 col-md-4"
         *ngFor="let puzzleInfo of items; else: noSolutionBlock"
       >
-        <div class="card" style="width: 18rem">
+        <div class="card">
           <img
             src="assets/backgrounds/{{ puzzleInfo.id }}.jpg"
             class="card-img-top"
-            alt="Preview Image {{ puzzleInfo.id }}"
+            alt="Puzzle Image {{ puzzleInfo.id }}"
           />
           <div class="card-body">
-            <h5 class="card-title">{{ puzzleInfo.id }}</h5>
+            <h5
+              class="card-title"
+              title="View Pizzle Details"
+              routerLink="/puzzle/{{ puzzleInfo.id }}"
+            >
+              {{ puzzleInfo.id }}
+            </h5>
             <h6 class="card-subtitle mb-2 text-muted">
               {{ getPuzzleType(puzzleInfo) }}
             </h6>
             <p class="card-text">
               {{ puzzleInfo.description }}
             </p>
-            <a
-              href="#"
-              class="card-link"
-              routerLink="/puzzle/{{ puzzleInfo.id }}"
-              >View</a
-            >
           </div>
         </div>
       </div>

src/app/puzzle-listing/puzzle-listing.component.scss

@@ -0,0 +1,17 @@
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/variables";
+@import "~bootstrap/scss/mixins";
+
+h5.card-title {
+  color: $link-color;
+  cursor: pointer;
+
+  &:hover {
+    color: $link-hover-color;
+    text-decoration: $link-hover-decoration;
+  }
+}
+
+div.card {
+  margin-top: 4px;
+}

src/app/puzzle-view/puzzle-view.component.html

@@ -57,10 +57,15 @@ <h2>
     </div>
   </div>
   <div class="row">
-    <app-map
-      id="mapArea"
-      [puzzleInfo]="puzzleInfo"
-      [fixedHeight]="true"
-    ></app-map>
+    <div class="col-xs-12 col-sm-12 col-md-8">
+      <app-map
+        id="mapArea"
+        [puzzleInfo]="puzzleInfo"
+        [fixedHeight]="true"
+      ></app-map>
+    </div>
+    <div class="col-xs-12 col-sm-12 col-md-4">
+      <app-map-key></app-map-key>
+    </div>
   </div>
 </div>

src/styles.scss

@@ -1,5 +1,9 @@
 /* You can add global styles to this file, and also import other style files */
 
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/variables";
+@import "~bootstrap/scss/mixins";
+
 /* Importing Bootstrap SCSS file. */
 @import "~bootstrap/scss/bootstrap";