Merge pull request #6 from NisanurBulut/dev-orhunFront

Dev orhun front is complated

Author: NisanurBulut

Orhun/src/app/book-list/book-item/book-item.component.html

@@ -1,10 +1,10 @@
 <article class="book-element" (click)="addToProfile(bookItem)">
+    <div class="col-2">
+        <img src="{{bookItem.imageLink}}" style="width: 160px;" />
+    </div>
     <div class="col-1">
-        <h3>{{bookItem.title}}</h3>
+        <h4>{{bookItem.title}}</h4>
+        <h5>{{bookItem.authors}}</h5>
         <p class="info">{{bookItem.description | slice: 0:150}}</p>
     </div>
-    <div class="col-2">
-        <div class="author">{{bookItem.authors}}</div>
-        <img src="{{bookItem.imageLink}}" />
-    </div>
 </article>

Orhun/src/app/book-list/book-item/book-item.component.scss

@@ -1,11 +1,11 @@
 .col-1 {
   width: 60%;
-  margin: 10px 10px 10px  10px;
+  margin: 10px 10px 10px  0px;
 }
 
 .col-2 {
   width: 40%;
-  margin: 10px 10 10px 10px;
+  display: flex;
 }
 .col-1 h3 {
   font-size: 22px;
@@ -14,11 +14,11 @@
 
 .book-element {
   display: flex;
-  width: 100%;
+  width: 500px;
   margin: 10px 10px 10px 10px;
   box-shadow: 3px 3px 10px #fff;
   border-radius: 5px;
-  background-color: #61729c;
+  background-color: #413c69;
   color: white;
   cursor: pointer;
 }

Orhun/src/app/book-list/book-list.component.scss

@@ -1,6 +1,6 @@
 .some-page-wrapper {
   margin: 15px;
-  width: 60%;
+  width: 100%;
 }
 
 .row {
@@ -19,17 +19,11 @@
 
 .profile-column {
   position: relative;
-  height: 100%;
-  width: 100%;
-
   display: flex;
   justify-content: center;
 }
 
 .book-column {
-
-  height: 100%;
-  width: 100%;
   display: flex;
   justify-content: center;
 }

Orhun/src/app/book-list/book-search/book-search.component.scss

@@ -16,7 +16,7 @@
 
 
     button {
-      background-color: #2ecc71;
+      background-color: #276678;
       border: none;
       border-radius: 0 5px 5px 0;
       box-shadow: 1px 1px 1px #95a5a6;

Orhun/src/app/db/profile.db.json

@@ -1,3 +1,30 @@
 {
-  "profiles": []
+  "profiles": [
+    {
+      "profileName": "TLaODwAAQBAJ",
+      "bookItem": {
+        "id": "TLaODwAAQBAJ",
+        "title": "J. K. Rowling",
+        "description": "A new series of empowering biographies featuring modern women in the world of work. When Joanne Rowling was a young woman, she found herself down and out of luck. But, she had a best-selling idea and a tenacious spirit. If only she could find someone who wanted to publish her book... Discover how J. K. Rowling became a best-selling author and publishing sensation in this true story of her life. Then, learn 10 key lessons from her work you can apply to your own life.",
+        "imageLink": "http://books.google.com/books/content?id=TLaODwAAQBAJ&printsec=frontcover&img=1&zoom=5&edge=curl&source=gbs_api",
+        "authors": "Caroline Moss",
+        "infoLink": "http://books.google.com.tr/books?id=TLaODwAAQBAJ&dq=jk&hl=&source=gbs_api",
+        "publisher": "Frances Lincoln Children's Books"
+      },
+      "id": 2
+    },
+    {
+      "profileName": "Qc6nDwAAQBAJ",
+      "bookItem": {
+        "id": "Qc6nDwAAQBAJ",
+        "title": "Be Bold, Baby: J.K. Rowling",
+        "description": "Introduce your little ones to bold women like J.K. Rowling and important values like imagination, always being yourself, and being a good friend with this board book series! Celebrate J. K. Rowling's most motivational and powerful moments, with quotes from the literary genius responsible for the creation of Harry Potter and vibrant illustrations by Alison Oliver (Moon; BabyLit series.) Be imaginative. Be a friend. Be you. Each book ends with a mirror! Look for the companion volumes, Be Bold, Baby: Michelle Obama; Be Bold Baby: Oprah Winfrey; and Be Bold Baby: Sonia Sotomayor.",
+        "imageLink": "http://books.google.com/books/content?id=Qc6nDwAAQBAJ&printsec=frontcover&img=1&zoom=5&edge=curl&source=gbs_api",
+        "authors": "Alison Oliver",
+        "infoLink": "http://books.google.com.tr/books?id=Qc6nDwAAQBAJ&dq=jk&hl=&source=gbs_api",
+        "publisher": "HMH Books For Young Readers"
+      },
+      "id": 3
+    }
+  ]
 }

Orhun/src/app/profile/profile.component.html

@@ -3,15 +3,17 @@ <h3 *ngIf="profiles.length > 0">Saved Profile</h3>
 <article
   #profile
   class="profile"
-  *ngFor="let profile of (profileList | async).profileList; let i=index"
+  *ngFor="let profile of (profileList | async).profileList; let i = index"
   (click)="onLoadProfile(profile)"
 >
-  <h4>{{ profile.bookItem.title }}</h4>
   <div class="profile-content">
-    <p>{{ profile.bookItem.authors }}</p>
-    <br />
-    <p style="font-style: italic">{{ profile.bookItem.publisher }}</p>
     <img src="{{ profile.bookItem.imageLink }}" />
+    <div class="description">
+     <ul>
+      <li>{{ profile.bookItem.authors }}</li>
+      <li>{{ profile.bookItem.publisher }}</li>
+     </ul>
+    </div>
   </div>
-  <span (click)="onDeleteProfile($event, profile)" class="delete">❌</span>
+  <span (click)="onDeleteProfile($event, profile)" class="delete">X</span>
 </article>

Orhun/src/app/profile/profile.component.scss

@@ -4,50 +4,32 @@ h3 {
   font-size: 18px;
 }
 .profile-content {
-  margin: 0 20px 5px 10px;
-  padding-right: 5px;
+  margin: 20px 20px 5px 10px;
+  padding: 10px;
+  display: flex;
+  width: 100%;
+}
+.description{
+  margin-top: 2rem;
+  margin-right:5px;
 }
-
 .profile {
-  img {
-    width: 50px;
-    height: 50px;
-  }
+  color:#fff;
   position: relative;
-  width: 400px;
-  background-color: #8cb4ce;
+  background-color: #ad6c80;
   cursor: pointer;
   border-radius: 5px;
-  p {
-    float: right;
-  }
-  h4 {
-    margin-top: 5px;
-    margin-left: 5px;
-    margin-right: 5px;
-    padding-top: 5px;
-    font-style: italic;
-  }
-
-  p {
-    margin: 0;
-    padding: 0;
-  }
-
+  width: 500px;
   .delete {
     position: absolute;
-    top: 2px;
-    right: 5px;
-    font-size: 14px;
-    font-style: bold;
-  }
-
-  .delete:hover {
-    color: red;
+    top: 10px;
+    right: 10px;
+    font-size: 18px;
+    font-weight: bolder;
+    color:#fff;
   }
 }
 
 .profile:hover {
-  background-color: #1e6566;
-  color: rgb(245, 239, 239);
+  background-color: #7b113a;
 }

Orhun/src/styles.scss

@@ -4,7 +4,6 @@ body {
   margin:0;
     font-family: "Roboto", Arial, sans-serif;
     font-size: 16px;
-    background-color: rgb(102, 134, 36);
 }
 .center {
   width:100%;