Finished project

codecraft-tv · Feb 4, 2017 · 95752f7 · 95752f7
1 parent 71dfb4d
commit 95752f7
Show file tree

Hide file tree

Showing 9 changed files with 118 additions and 79 deletions.
diff --git a/src/app/book-list/book-list.component.html b/src/app/book-list/book-list.component.html
@@ -1,11 +1,13 @@
 <div class="row m-3">
   <div class="col-md-4 col-lg-3 col-sm-1"
        *ngFor="let book of books">
-    <div class="card">
-      <div class="card-block text-center">
-        <h4 class="card-title">
+    <div class="panel panel-default">
+      <div class="panel-heading">
+        <h3 class="panel-title">
           <a [routerLink]="['/book', book.id]">{{ book.title }}</a>
-        </h4>
+        </h3>
+      </div>
+      <div class="panel-body text-center">
         <h6 class="card-subtitle mb-2 text-muted">{{ book.subTitle }}</h6>
         <div class="card-text">
           <span *ngFor="let category of book?.categories"
@@ -17,7 +19,7 @@ <h6 class="card-subtitle mb-2 text-muted">{{ book.subTitle }}</h6>
       <img class="book-thumbnail"
            src="{{book.smallThumbnail}}"
            alt="">
-      <div class="card-footer">
+      <div class="panel-footer">
         <span *ngIf="book.authors">
           by
           <span *ngFor="let author of book.authors; let isLast = last;">

diff --git a/src/app/book/book.component.html b/src/app/book/book.component.html
@@ -1,11 +1,11 @@
 <div class="row m-3">
-  <div class="col-md-6 offset-md-3">
-    <h4 class="text-center display-4">{{ book?.title }}</h4>
+  <div class="col-md-6 col-md-offset-3">
+    <h2 class="text-center">{{ book?.title }}</h2>
 
     <h6 class="text-center">{{ book?.subTitle }}</h6>
 
     <div class=" m-3">
-      <img class="rounded mx-auto d-block"
+      <img class="rounded center-block"
            src="{{ book?.thumbnail }}">
     </div>
 
@@ -20,7 +20,7 @@ <h6 class="text-center">{{ book?.subTitle }}</h6>
       <dt>Categories</dt>
       <dd>
         <span *ngFor="let category of book?.categories"
-              class="badge badge-pill badge-default">
+              class="mr-1 badge badge-pill badge-default">
           {{ category }}
         </span>
       </dd>

diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
@@ -1,19 +1,34 @@
-<nav class="navbar navbar-light bg-faded">
-  <a class="navbar-brand"
-     [routerLink]="['home']">BookShelf
-  </a>
-  <ul class="nav navbar-nav">
-    <li class="nav-item"
-        [routerLinkActive]="['active']">
-      <a class="nav-link"
-         [routerLink]="['search']">Search
+<div class="navbar navbar-default">
+  <div class="container">
+    <div class="navbar-header">
+      <a href="../"
+         class="navbar-brand">BookShelf
       </a>
-    </li>
-    <li class="nav-item"
-        [routerLinkActive]="['active']">
-      <a class="nav-link"
-         [routerLink]="['library']">Library
-      </a>
-    </li>
-  </ul>
-</nav>
+      <button class="navbar-toggle"
+              type="button"
+              data-toggle="collapse"
+              data-target="#navbar-main">
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+      </button>
+    </div>
+    <div class="navbar-collapse collapse"
+         id="navbar-main">
+      <ul class="nav navbar-nav">
+        <li class="nav-item"
+            [routerLinkActive]="['active']">
+          <a class="nav-link"
+             [routerLink]="['search']">Search
+          </a>
+        </li>
+        <li class="nav-item"
+            [routerLinkActive]="['active']">
+          <a class="nav-link"
+             [routerLink]="['library']">Library
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>
diff --git a/src/app/library/library.component.html b/src/app/library/library.component.html
@@ -1 +1,8 @@
-<app-book-list [books]="libraryService.books"></app-book-list>
+<div class="container">
+  <div class="page-header">
+    <h4>Library
+    </h4>
+  </div>
+
+  <app-book-list [books]="libraryService.books"></app-book-list>
+</div>
diff --git a/src/app/pager/pager.component.html b/src/app/pager/pager.component.html
@@ -1,21 +1,15 @@
-<nav>
-  <ul  class="pagination justify-content-center">
-    <li class="page-item" [class.disabled]="page === 0">
-      <button class="page-link"
-         (click)="prev()">Previous
-      </button>
+<nav aria-label="...">
+  <ul class="pager">
+    <li>
+      <a
+        [class.disabled]="page === 0"
+        (click)="prev()"> &larr; Previous
+      </a>
     </li>
-    <!--<li *ngFor="let page of pages; let i = index;"-->
-        <!--class="page-item">-->
-      <!--<button *ngIf="i < 10"-->
-              <!--class="page-link"-->
-         <!--(click)="page(page)">{{ page }}-->
-      <!--</button>-->
-    <!--</li>-->
-    <li class="page-item">
-      <button class="page-link"
-         (click)="next()">Next
-      </button>
+    <li>
+      <a
+        (click)="next()">Next &rarr;
+      </a>
     </li>
   </ul>
 </nav>
diff --git a/src/app/search/search.component.html b/src/app/search/search.component.html
@@ -1,39 +1,41 @@
-<div class="m-3 text-center">
-  <form class="form-inline"
-        (ngSubmit)="doSearch()">
-    <div class="form-group">
-      <input type="search"
-             class="form-control"
-             placeholder="Enter search string"
-             name="search"
-             [(ngModel)]="term"
-             required>
-    </div>
-    <button type="submit"
-            class="btn btn-primary">
-      Search
-    </button>
-  </form>
-  <hr />
+<div class="container">
+  <div class="m-3 text-center">
+    <form class="form-inline"
+          (ngSubmit)="doSearch()">
+      <div class="form-group">
+        <input type="search"
+               class="form-control"
+               placeholder="Enter search string"
+               name="search"
+               [(ngModel)]="term"
+               required>
+      </div>
+      <button type="submit"
+              class="btn btn-primary">
+        Search
+      </button>
+    </form>
+    <hr />
 
-  <div class="text-center">
-    <p class="lead"
-       *ngIf="googleBooksService.initialised && googleBooksService.loading">Loading...</p>
+    <div class="text-center">
+      <p class="lead"
+         *ngIf="googleBooksService.initialised && googleBooksService.loading">Loading...</p>
 
-    <p class="lead"
-       *ngIf="googleBooksService.initialised && !googleBooksService.loading && googleBooksService.books?.length === 0">No results returned</p>
+      <p class="lead"
+         *ngIf="googleBooksService.initialised && !googleBooksService.loading && googleBooksService.books?.length === 0">No results returned</p>
 
-    <p class="lead"
-       *ngIf="!googleBooksService.initialised">Enter a search string above and press search</p>
+      <p class="lead"
+         *ngIf="!googleBooksService.initialised">Enter a search string above and press search</p>
+    </div>
   </div>
-</div>
 
-<app-book-list [books]="googleBooksService.books"></app-book-list>
+  <app-book-list [books]="googleBooksService.books"></app-book-list>
 
-<div class="d-flex justify-content-center">
-  <app-pager
-    [page]="googleBooksService.page"
-    [totalPages]="googleBooksService.totalPages"
-    (changePage)="googleBooksService.page = $event">
-  </app-pager>
+  <div class="d-flex justify-content-center">
+    <app-pager
+      [page]="googleBooksService.page"
+      [totalPages]="googleBooksService.totalPages"
+      (changePage)="googleBooksService.page = $event">
+    </app-pager>
+  </div>
 </div>
diff --git a/src/app/shared/google-books.service.ts b/src/app/shared/google-books.service.ts
@@ -157,7 +157,7 @@ export class GoogleBooksService {
       item.volumeInfo.publisher,
       item.volumeInfo.publishedDate,
       item.volumeInfo.description,
-      item.volumeInfo.categories,
+      item.volumeInfo.categories ? item.volumeInfo.categories.map( (item) => item.split("/").pop() ) : ['N/A'],
       item.volumeInfo.imageLinks.thumbnail,
       item.volumeInfo.imageLinks.smallThumbnail
     )

diff --git a/src/index.html b/src/index.html
@@ -9,7 +9,7 @@
         <!--href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">-->
 
     <link rel="stylesheet"
-        href="https://bootswatch.com/paper/bootstrap.css">
+        href="https://bootswatch.com/flatly/bootstrap.css">
 
 
 

diff --git a/src/styles.css b/src/styles.css
@@ -1 +1,20 @@
 /* You can add global styles to this file, and also import other style files */
+.mr-1 {
+  margin-right: 2px;
+}
+
+.ml-1 {
+  margin-left: 2px;
+}
+
+.m-1 {
+  margin: 1em;
+}
+
+.m-2 {
+  margin: 2em;
+}
+
+.m-3 {
+  margin: 3em;
+}