update shadows & crud dialog

This commit is contained in:
Çetin 2021-12-15 13:53:50 +03:00
parent 516159783d
commit f140ba157b
5 changed files with 10 additions and 5 deletions

View File

@ -76,7 +76,7 @@
<ng-template pTemplate="body" let-product> <ng-template pTemplate="body" let-product>
<tr> <tr>
<td> <td>
<img src="../../../assets/demo/images/product/{{product.image}}" alt="{{product.name}}" width="100"> <img src="../../../assets/demo/images/product/{{product.image}}" class="shadow-4" alt="{{product.name}}" width="100">
</td> </td>
<td>{{product.name}}</td> <td>{{product.name}}</td>
<td>{{product.price | currency:'USD'}}</td> <td>{{product.price | currency:'USD'}}</td>

View File

@ -257,7 +257,7 @@
<button type="button" pButton pRipple [pRowToggler]="product" class="p-button-text p-button-rounded p-button-plain" [icon]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></button> <button type="button" pButton pRipple [pRowToggler]="product" class="p-button-text p-button-rounded p-button-plain" [icon]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></button>
</td> </td>
<td><span class="p-column-title">Name</span>{{product.name}}</td> <td><span class="p-column-title">Name</span>{{product.name}}</td>
<td><span class="p-column-title">Image</span><img [src]="'assets/demo/images/product/' + product.image" [alt]="product.name" width="100" class="p-shadow-4" /></td> <td><span class="p-column-title">Image</span><img [src]="'assets/demo/images/product/' + product.image" [alt]="product.name" width="100" class="shadow-4" /></td>
<td><span class="p-column-title">Price</span>{{product.price | currency:'USD'}}</td> <td><span class="p-column-title">Price</span>{{product.price | currency:'USD'}}</td>
<td><span class="p-column-title">Category</span>{{product.category}}</td> <td><span class="p-column-title">Category</span>{{product.category}}</td>
<td><span class="p-column-title">Reviews</span><p-rating [ngModel]="product.rating" [readonly]="true" [cancel]="false"></p-rating></td> <td><span class="p-column-title">Reviews</span><p-rating [ngModel]="product.rating" [readonly]="true" [cancel]="false"></p-rating></td>

View File

@ -51,7 +51,7 @@
{{product.name}} {{product.name}}
</td> </td>
<td><span class="p-column-title">Image</span> <td><span class="p-column-title">Image</span>
<img [src]="'assets/demo/images/product/' + product.image" [alt]="product.name" width="100" class="p-shadow-4" /> <img [src]="'assets/demo/images/product/' + product.image" [alt]="product.name" width="100" class="shadow-4" />
</td> </td>
<td><span class="p-column-title">Price</span> <td><span class="p-column-title">Price</span>
{{product.price | currency:'USD'}} {{product.price | currency:'USD'}}

View File

@ -22,6 +22,11 @@ import {ConfirmationService, MessageService} from 'primeng/api';
display: flex; display: flex;
} }
} }
@media (max-width: 1024px){
:host ::ng-deep .p-dialog{
margin: 0 20px;
}
}
`], `],
providers: [MessageService, ConfirmationService] providers: [MessageService, ConfirmationService]

View File

@ -6,13 +6,13 @@
<h5>Custom Timeline</h5> <h5>Custom Timeline</h5>
<p-timeline [value]="customEvents" align="alternate" styleClass="customized-timeline"> <p-timeline [value]="customEvents" align="alternate" styleClass="customized-timeline">
<ng-template pTemplate="marker" let-event> <ng-template pTemplate="marker" let-event>
<span class="custom-marker p-shadow-2" [style.backgroundColor]="event.color"> <span class="custom-marker shadow-2" [style.backgroundColor]="event.color">
<i [ngClass]="event.icon"></i> <i [ngClass]="event.icon"></i>
</span> </span>
</ng-template> </ng-template>
<ng-template pTemplate="content" let-event> <ng-template pTemplate="content" let-event>
<p-card [header]="event.status" [subheader]="event.date"> <p-card [header]="event.status" [subheader]="event.date">
<img *ngIf="event.image" [src]="'assets/demo/images/product/' + event.image" [alt]="event.name" width="200" class="p-shadow-2" /> <img *ngIf="event.image" [src]="'assets/demo/images/product/' + event.image" [alt]="event.name" width="200" class="shadow-2" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!</p> quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!</p>
<button pButton label="Read more" class="p-button-text"></button> <button pButton label="Read more" class="p-button-text"></button>