book desc and toc aligned and styled

IanKBovard · Sep 18, 2018 · 29d49e3 · 29d49e3
1 parent e36a25d
commit 29d49e3
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 14 deletions.
diff --git a/src/book-description.js b/src/book-description.js
@@ -16,15 +16,12 @@ class BookDescription extends PolymerElement {
     return html`
       <style>
         :host {
-          float: left;
-          width: 30%;
           margin-left: 1%;
           margin-right: 1%;
+          float: left;
         }
         iron-image {
-          width: 100%;
-          border-radius: 3px;
-
+          border-radius: 5px;
         }
         .book-details {
           font-family: Aspira-Bold, Helvetica, Arial, Sans-serif;

diff --git a/src/book-title.js b/src/book-title.js
@@ -19,7 +19,7 @@ class BookTitle extends PolymerElement {
         }
         .title {
           font-family: Aspira-Medium, Helvetica, Arial, Sans-serif;
-          font-size: 28px;
+          font-size: 25px;
           color: #333;
           margin-left: 1%;
         }

diff --git a/src/my-app.js b/src/my-app.js
@@ -28,14 +28,19 @@ class MyApp extends PolymerElement {
       <style>
         :host {
         }
+        .book-data {
+          width: 100%;
+          overflow: hidden;
+          white-space: nowrap;
+        }
       </style>
       <iron-ajax
         auto
         url="https://d1re4mvb3lawey.cloudfront.net/pg1017/index.json"
         handle-as="json"
         on-response="handleResponse">
       </iron-ajax>
-      <div>
+      <div class="book-data">
         <book-title title="{{bookData.title}}">
         </book-title>
         <book-description isbn="{{bookData.isbn}}" authors="{{bookData.contributors}}">

diff --git a/src/table-of-contents.js b/src/table-of-contents.js
@@ -15,15 +15,36 @@ class TableOfContents extends PolymerElement {
     return html`
       <style>
         :host {
-          float: right;
-          width: 66.66%;
+        }
+        .toc-container {
+          position: relative;
+          display: inline-block;
+          width: 500px;
+          height: 252px;
+          font-family: Aspira-Bold, Helvetica, Arial, Sans-serif;
+          color: #000;
+        }
+        .toc-text {
+          font-weight: bold;
+          font-size: 18px;
+          position: relative;
+          display: inline-block;
+          padding-left: 20px;
+          padding-top: 20px;
+        }
+        .toc-content {
+          position: relative;
+          padding-left: 30px;
+
         }
       </style>
-      <div>
-        <h1>TABLE OF CONTENTS</h1>
-        <template is="dom-repeat" items="[[toc]]">
-          <p>{{item}}</p>
-        </template>
+      <div class="toc-container">
+        <span class="toc-text">Contents</span>
+        <div class="toc-content">
+          <template is="dom-repeat" items="[[toc]]">
+            <p>{{item}}</p>
+          </template>
+        </div>
       </div>
     `;
   }