Skip to content

Commit c951694

Browse files
author
NisanurBulut
committed
redefined css for book items
1 parent 70f0b69 commit c951694

File tree

10 files changed

+121
-104
lines changed

10 files changed

+121
-104
lines changed

‎Orhun/src/app/app.component.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<header>
1+
<!-- <header class="center">
22
<h3>Orhun</h3>
3-
</header>
4-
<book-list></book-list>
3+
</header> -->
4+
<book-list class="center"></book-list>

‎Orhun/src/app/app.component.scss‎

Lines changed: 0 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
header {
22
width: 40%;
3-
margin-left: 30%;
43
color: #fff;
54
text-align: center;
65
font-size: 24px;
@@ -13,23 +12,3 @@ header {
1312
padding-top: 15px;
1413
}
1514
}
16-
.book-list {
17-
margin: 20px auto;
18-
width: 40%;
19-
}
20-
21-
22-
23-
.tooltip {
24-
position: absolute;
25-
padding: 3px;
26-
font-size: 12px;
27-
background-color: #eee;
28-
border-radius: 3px;
29-
border: 1px solid #ccc;
30-
text-align: left;
31-
}
32-
33-
.author {
34-
cursor: default;
35-
}

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
<article class="book-element" (click)="addToProfile(bookItem)">
22
<div class="col-1">
33
<h3>{{bookItem.title}}</h3>
4-
<p
5-
class="info">{{bookItem.description | slice: 0:150}}</p>
4+
<p class="info">{{bookItem.description | slice: 0:150}}</p>
65
</div>
76
<div class="col-2">
87
<div class="author">{{bookItem.authors}}</div>

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

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,22 @@
11
.col-1 {
2-
display: inline;
32
width: 60%;
3+
margin: 10px 10px 10px 10px;
44
}
55

6+
.col-2 {
7+
width: 40%;
8+
margin: 10px 10 10px 10px;
9+
}
610
.col-1 h3 {
7-
margin: 0 0 10px 0;
8-
padding: 0;
911
font-size: 22px;
1012
font-style: italic;
1113
}
1214

13-
.col-2 {
14-
width: 40%;
15-
vertical-align: top;
16-
text-align: right;
17-
}
1815
.book-element {
19-
width: 50%;
20-
margin-left: 5%;
2116
display: flex;
22-
justify-content: center;
17+
width: 100%;
18+
margin: 10px 10px 10px 10px;
2319
box-shadow: 3px 3px 10px #fff;
24-
padding-left: 100px;
2520
border-radius: 5px;
2621
background-color: #61729c;
2722
color: white;
@@ -34,5 +29,6 @@
3429
.author {
3530
font-style: italic;
3631
font-size: 22px;
32+
margin-top: 5px;
3733
margin-bottom: 5px;
3834
}

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

Lines changed: 33 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,33 @@
1-
<div class="profile-section">
2-
<app-profile [profileNewItem]="NewBookItem"></app-profile>
3-
</div>
4-
<div class="book-section">
5-
<book-search
6-
(searchResultBookItems)="refreshBookItemResults($event)"
7-
></book-search>
8-
<section class="book-list">
9-
<book-item
10-
*ngFor="let bookItem of BookItems"
11-
[item]="bookItem"
12-
(setProfileBookItems)="setBookProfileItem($event)"
13-
></book-item>
14-
</section>
15-
16-
</div>
1+
<div class='some-page-wrapper'>
2+
<div class='row'>
3+
<div class='column'>
4+
<div class='profile-column'>
5+
</div>
6+
</div>
7+
<div class='column'>
8+
<div class='book-column'>
9+
<book-search
10+
(searchResultBookItems)="refreshBookItemResults($event)"
11+
></book-search>
12+
</div>
13+
</div>
14+
</div>
15+
<div class='row'>
16+
<div class='column'>
17+
<div class='profile-column'>
18+
<app-profile [profileNewItem]="NewBookItem"></app-profile>
19+
</div>
20+
</div>
21+
<div class='column'>
22+
<div class='book-column'>
23+
<section class="book-list">
24+
<book-item
25+
*ngFor="let bookItem of BookItems"
26+
[item]="bookItem"
27+
(setProfileBookItems)="setBookProfileItem($event)"
28+
></book-item>
29+
</section>
30+
</div>
31+
</div>
32+
</div>
33+
</div>

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

Lines changed: 33 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,35 @@
1+
.some-page-wrapper {
2+
margin: 15px;
3+
width: 60%;
4+
}
5+
6+
.row {
7+
display: flex;
8+
flex-direction: row;
9+
flex-wrap: wrap;
10+
width: 100%;
11+
}
12+
13+
.column {
14+
display: flex;
15+
flex-direction: column;
16+
flex-basis: 0%;
17+
flex: 1;
18+
}
19+
20+
.profile-column {
21+
position: relative;
22+
height: 100%;
23+
width: 100%;
24+
25+
display: flex;
26+
justify-content: center;
27+
}
28+
29+
.book-column {
130

2-
.profile-section {
3-
width: 20%;
4-
float: left;
5-
padding-left: 5%;
31+
height: 100%;
32+
width: 100%;
33+
display: flex;
34+
justify-content: center;
635
}
7-
.book-section {
8-
width: 60%;
9-
float: left;
10-
}

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

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,9 @@
11

22
.book-search {
33
margin: 20px auto;
4-
width: 50%;
4+
width: 100%;
55
text-align: center;
66

7-
label {
8-
font-weight: bold;
9-
margin-right: 20px;
10-
}
11-
127
button, input {
138
border-radius: 5px;
149
font-size: inherit;
@@ -18,8 +13,7 @@
1813
input {
1914
padding: 3px 5px;
2015
outline: none;
21-
width: 50%;
22-
margin-right: 20px;
16+
width: 100%;
2317
}
2418

2519
button {

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

Lines changed: 29 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,48 @@
11
{
22
"profiles": [
33
{
4-
"profileName": "KeteAQAAQBAJ Profile",
4+
"profileName": "g_NtPgAACAAJ Profile",
55
"bookItem": {
6-
"id": "KeteAQAAQBAJ",
7-
"title": "The Politics of Harry Potter",
8-
"description": "This political analysis of Harry Potter uses the beloved wizarding world to introduce readers to the equally murky and intimidating world of politics. Rowling's work provides us with entries into all of the most important political questions in history, from terrorism and human rights to the classic foundations of political thought.",
9-
"imageLink": "http://books.google.com/books/content?id=KeteAQAAQBAJ&printsec=frontcover&img=1&zoom=5&edge=curl&source=gbs_api",
10-
"authors": "B. Barratt"
6+
"id": "g_NtPgAACAAJ",
7+
"title": "Harry Potter and the Prisoner of Azkaban",
8+
"description": "The third book in the Harry Potter series, this brilliant new story once again features young readers' favourite wizard and his his best friends, Ron and Hermione. Danger is afoot at Hogwarts, no one is quite who they seem, secrets and rumours abound. Along with fantastic new creatures and in the company of his loyal friends, Harry makes startling discoveries about his own mysterious past.",
9+
"imageLink": "http://books.google.com/books/content?id=g_NtPgAACAAJ&printsec=frontcover&img=1&zoom=5&source=gbs_api",
10+
"authors": "J. K. Rowling"
1111
},
1212
"id": 1
1313
},
1414
{
15-
"profileName": "8P8nDwAAQBAJ Profile",
15+
"profileName": "iO5pApw2JycC Profile",
1616
"bookItem": {
17-
"id": "8P8nDwAAQBAJ",
18-
"title": "Literary Allusion in Harry Potter",
19-
"description": "Literary Allusion in Harry Potter builds on the world-wide enthusiasm for J. K. Rowling’s series in order to introduce its readers to some of the great works of literature on which Rowling draws. Harry Potter’s narrative techniques are rooted in the western literary tradition and its allusiveness provides insight into Rowling’s fictional world. Each chapter of Literary Allusion in Harry Potter consists of an in-depth discussion of the intersection between Harry Potter and a canonical literary work, such as the plays of Shakespeare, the poetry of Homer, Ovid, the Gawain-poet, Chaucer, Milton and Tennyson, and the novels of Austen, Hardy and Dickens. This approach aims to transform the reader’s understanding of Rowling’s literary achievement as well as to encourage the discovery of works with which they may be less familiar. The aim of this book is to delight Potter fans with a new perspective on their favourite books while harnessing that enthusiasm to increase their wider appreciation of literature.",
20-
"imageLink": "http://books.google.com/books/content?id=8P8nDwAAQBAJ&printsec=frontcover&img=1&zoom=5&edge=curl&source=gbs_api",
21-
"authors": "Beatrice Groves"
17+
"id": "iO5pApw2JycC",
18+
"title": "The Ivory Tower and Harry Potter",
19+
"description": "Now available in paper, The Ivory Tower and Harry Potter is the first book-length analysis of J. K. Rowling's work from a broad range of perspectives within literature, folklore, psychology, sociology, and popular culture. A significant portion of the book explores the Harry Potter series' literary ancestors, including magic and fantasy works by Ursula K. LeGuin, Monica Furlong, Jill Murphy, and others, as well as previous works about the British boarding school experience. Other chapters explore the moral and ethical dimensions of Harry's world, including objections to the series raised within some religious circles. In her new epilogue, Lana A. Whited brings this volume up to date by covering Rowling's latest book, Harry Potter and the Order of the Phoenix.",
20+
"imageLink": "http://books.google.com/books/content?id=iO5pApw2JycC&printsec=frontcover&img=1&zoom=5&edge=curl&source=gbs_api",
21+
"authors": "Lana A. Whited"
2222
},
2323
"id": 2
2424
},
2525
{
26-
"profileName": "z-y3GAAACAAJ Profile",
26+
"profileName": "iO5pApw2JycC Profile",
2727
"bookItem": {
28-
"id": "z-y3GAAACAAJ",
29-
"title": "Harry Potter",
30-
"description": "Harry Potter letter writing kit containing envelopes, letter sheets, postcards and stamps.",
31-
"imageLink": "http://books.google.com/books/content?id=z-y3GAAACAAJ&printsec=frontcover&img=1&zoom=5&source=gbs_api",
32-
"authors": "British Broadcasting Corporation Staff"
28+
"id": "iO5pApw2JycC",
29+
"title": "The Ivory Tower and Harry Potter",
30+
"description": "Now available in paper, The Ivory Tower and Harry Potter is the first book-length analysis of J. K. Rowling's work from a broad range of perspectives within literature, folklore, psychology, sociology, and popular culture. A significant portion of the book explores the Harry Potter series' literary ancestors, including magic and fantasy works by Ursula K. LeGuin, Monica Furlong, Jill Murphy, and others, as well as previous works about the British boarding school experience. Other chapters explore the moral and ethical dimensions of Harry's world, including objections to the series raised within some religious circles. In her new epilogue, Lana A. Whited brings this volume up to date by covering Rowling's latest book, Harry Potter and the Order of the Phoenix.",
31+
"imageLink": "http://books.google.com/books/content?id=iO5pApw2JycC&printsec=frontcover&img=1&zoom=5&edge=curl&source=gbs_api",
32+
"authors": "Lana A. Whited"
3333
},
3434
"id": 3
35+
},
36+
{
37+
"profileName": "-__ICQemqaEC Profile",
38+
"bookItem": {
39+
"id": "-__ICQemqaEC",
40+
"title": "Reading Harry Potter",
41+
"description": "The tropes and themes of J. K. Rowling's massively popular series are interpreted within the context of its audience.",
42+
"imageLink": "http://books.google.com/books/content?id=-__ICQemqaEC&printsec=frontcover&img=1&zoom=5&edge=curl&source=gbs_api",
43+
"authors": "David G. Epstein"
44+
},
45+
"id": 4
3546
}
3647
]
3748
}

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

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,3 @@
1-
// :host {
2-
// float: left;
3-
// // margin-top: 10px;
4-
// // width: 25%;
5-
// // padding-left: 25px;
6-
// }
71

82
h3 {
93
margin: 0 0 10px 0;
@@ -29,9 +23,9 @@
2923
}
3024
.profile {
3125
position: relative;
26+
width: 100%;
3227
background-color: #8cb4ce;
33-
padding: 5px;
34-
margin-top: 8px;
28+
margin:0 0 10px 0;
3529
cursor: pointer;
3630
border-radius: 5px;
3731

‎Orhun/src/styles.scss‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
11
body {
2-
padding: 0;
3-
margin: 0;
2+
height:100%;
3+
padding:0;
4+
margin:0;
45
font-family: "Roboto", Arial, sans-serif;
56
font-size: 16px;
67
background-color: #CDD6E8;
8+
}
9+
.center {
10+
width:100%;
11+
height:100%;
12+
display:flex;
13+
justify-content:center;
14+
align-items:center;
715
}
816
.info {
917
color: rgba(95, 95, 95, 0.51);
1018
font-weight: bold;
1119
}
12-
13-
@media screen and (max-width: 768px) {
14-
.book-list {
15-
width: 100%;
16-
}
17-
}

0 commit comments

Comments
 (0)