sxhundred/ISA-Frontend
1
0
Fork 0
mirror of https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend synced 2025-12-28 22:42:11 +01:00
Code Issues Packages Projects Releases Wiki Activity

Finished design of book-card component in the dashboad feed

Browse Source
This commit is contained in:
Eraldo Hasanaj
2019-01-23 17:06:27 +01:00
parent 277780b6aa
commit f6c8d03da1
4 changed files with 107 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/app/components/book-card/book-card.component.html
View File

@@ -3,6 +3,47 @@
<span>{{card.cardTitle}}</span>
</div>
<div class="card-items">
<div class="item align-left">
<div class="item-logo">
<img class="book-image" src="../../../assets/images/{{card.books.firstBookIcon}}">
</div>
<div class="item-content">
<div class="book-author wrap-text-more">{{card.books.firstBookAuthor}}</div>
<div class="book-title wrap-text-more">{{card.books.firstBookTitle}}</div>
<div class="item-detail">
<div class="book-type">
<div><img class="book-type-icon" src="../../../assets/images/Icon_Book.svg"></div>
<div class="item-detail wrap-text-more">{{card.books.firstBookType}}</div>
<div class="separator">|</div>
</div>
<div class="book-language">
<div class="item-details wrap-text-more">{{card.books.firstBookLanguage}}</div>
<div class="separator">|</div>
</div>
<div class="item-details wrap-text-more">{{card.books.firstBookPrice}}</div>
</div>
</div>
</div>
<div class="item align-left">
<div class="item-logo">
<img class="book-image" src="../../../assets/images/{{card.books.secondBookIcon}}">
</div>
<div class="item-content">
<div class="book-author wrap-text-more">{{card.books.secondBookAuthor}}</div>
<div class="book-title wrap-text-more">{{card.books.secondBookTitle}}</div>
<div class="item-detail">
<div class="book-type">
<div><img class="book-type-icon" src="../../../assets/images/Icon_Book.svg"></div>
<div class="item-detail wrap-text-more">{{card.books.secondBookType}}</div>
<div class="separator">|</div>
</div>
<div class="book-language">
<div class="item-details wrap-text-more">{{card.books.secondBookLanguage}}</div>
<div class="separator">|</div>
</div>
<div class="item-details wrap-text-more">{{card.books.secondBookPrice}}</div>
</div>
</div>
</div>
</div>
</div>

58
src/app/components/book-card/book-card.component.scss
View File

@@ -18,6 +18,64 @@
}
.card-items {
display: grid;
grid-template-columns: 43% 43%;
grid-gap: 10vh;
}
@media screen and (max-width: 563px) {
.card-items {
display: grid;
grid-template-columns: auto;
grid-gap: 1vh;
}
}
.item {
display: grid;
grid-template-columns: min-content auto;
grid-gap: 5vh;
margin-top: 5px;
}
.book-image {
width: 50px;
}
.item-content {
display: grid;
grid-template-columns: auto;
}
.item-detail {
display: grid;
grid-template-columns: auto auto auto;
}
.book-author {
height: 21px;
font-size: 16px;
line-height: 21px;
}
.book-title {
height: 33px;
font-size: 24px;
font-weight: bold;
}
.book-type {
display: grid;
grid-template-columns: auto auto auto;
}
.separator .item-details {
height: 21px;
font-size: 16px;
line-height: 21px;
}
.book-language {
display: grid;
grid-template-columns: auto auto;
}

2
src/app/components/process-header/process-header.component.scss
View File

@@ -23,7 +23,7 @@
.process-grid-container {
overflow: auto;
white-space: nowrap;
height: 40px;
height: 41px;
}
.add-process {

6
src/styles.scss
View File

@@ -63,3 +63,9 @@ body {
.ml-5 {
margin-left: 5px;
}
.wrap-text-more {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}