File
Implements
Metadata
| selector |
book-search-view |
| styleUrls |
./book-search-view.component.scss |
| templateUrl |
./book-search-view.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Constructor
constructor(modalController: ModalController, bookService: BookService)
|
|
|
Parameters :
| Name |
Type |
Optional |
| modalController |
ModalController
|
No
|
| bookService |
BookService
|
No
|
|
|
bookPreview
|
Default value : () => {...}
|
|
|
|
getImage
|
Default value : () => {...}
|
|
|
|
reserveBook
|
Default value : () => {...}
|
|
|
|
saveBook
|
Default value : () => {...}
|
|
|
import { BookService } from './../../services/book/book.service';
import { BookViewComponent } from '../book-view/book-view.component';
import { ModalController } from '@ionic/angular';
import { Component, OnInit, Input } from '@angular/core';
import { Book } from 'src/app/models/Book';
@Component({
selector: 'book-search-view',
templateUrl: './book-search-view.component.html',
styleUrls: ['./book-search-view.component.scss']
})
export class BookSearchView implements OnInit {
@Input() book: Book;
constructor(private modalController: ModalController, private bookService: BookService) {}
ngOnInit() {}
bookPreview = async () => {
console.log('clicked');
const modal = await this.modalController.create({
component: BookViewComponent,
componentProps: {
book: this.book
},
cssClass: 'book-view-modal'
});
modal.present();
};
getImage = (url: string) => {
return url.includes('jpg') || url.includes('png') || url.includes('jpeg');
};
saveBook = () => {
this.bookService.addBookToShelf(this.book);
};
reserveBook = () => {
this.bookService.reserveBook(this.book);
};
}
<ion-card class="book-card" style="background-color: teal;display: flex;">
<div class="button-panel">
<ion-button fill="clear" (click)="bookPreview()" class="icon-button" size="small">
<ion-icon slot="icon-only" name="eye" class="icon"></ion-icon>
</ion-button>
<ion-button fill="clear" class="icon-button" size="small" (click)="saveBook()">
<ion-icon slot="icon-only" name="save" class="icon"></ion-icon>
</ion-button>
<ion-button fill="clear" class="icon-button" size="small" (click)="reserveBook()">
<ion-icon slot="icon-only" name="briefcase" class="icon"></ion-icon>
</ion-button>
</div>
<ion-grid style="background-color: white;display:flex">
<ion-row justify-content-center align-items-center>
<ion-col
[hidden]="!getImage(book.url)"
sizeXl="1"
sizeLg="1"
sizeMd="2"
sizeSm="2"
sizeXs="3"
style="padding: 0;background-color: #056571;"
>
<img [src]="book.url" alt="libri" class="book-image" />
</ion-col>
<ion-col sizeXl="11" sizeLg="11" sizeMd="10" sizeXs="9" style="height: 100%;">
<div class="book-title">{{ book.title }}</div>
<div class="book-author">{{ book.author }}</div>
<div barClass="scrollbar" thumbClass="scrollbar-thumbs" class="book-description">
{{ book.abstract }}
</div>
</ion-col>
</ion-row>
</ion-grid>
</ion-card>
.book-title {
font-size: 0.8rem;
font-weight: bold;
text-transform: uppercase;
color: '#263238';
}
.book-author {
font-size: 0.8rem;
font-style: italic;
color: '#607D8B';
}
.button-panel {
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
.icon-button {
display: block;
}
.icon {
color: white;
font-size: 1rem;
}
ion-grid {
--ion-grid-padding: 0px;
}
.book-description {
height: 10vh;
overflow: hidden;
font-size: 0.5rem;
}
@media only screen and (max-width: 1800px) {
.book-description {
max-height: 10vh;
overflow: hidden;
font-size: 1rem;
}
}
@media only screen and (max-width: 1200px) {
}
@media only screen and (max-width: 800px) {
.button-panel {
padding: 0px;
width: 5vw;
}
}
@media only screen and (max-width: 400px) {
.book-description {
max-height: 10vh;
overflow: hidden;
font-size: 0.5rem;
font-weight: lighter;
}
}
ion-button {
--padding-start: 0;
--padding-end: 0;
}
ion-card {
margin: 10px;
max-height: 20vh;
}
Legend
Html element with directive