purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-10 12:35:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Small fixes on cards

Browse Source
This commit is contained in:
Sercan Yemen 2017-11-04 12:45:12 +03:00
parent 1bf689f154
commit f73ff363a5
2 changed files with 13 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/app/main/content/components/cards/cards.component.html
View File

@ -635,17 +635,12 @@
<div class="fuse-card"> <div class="fuse-card">
<div class="card-rich-media"> <div class="card-rich-media">
<img src="assets/images/cards/card3.jpg"> <img src="assets/images/cards/card2.jpg">
</div> </div>
<div class="card-primary-title"> <div class="card-primary-title">
<div class="card-title">Top Winter Locations</div> <div class="card-title">Top eastern road trips</div>
<div class="card-subtitle secondary-text">More than 200 locations</div> <div class="card-subtitle secondary-text">2,000 miles of wonder</div>
</div>
<div class="card-supporting-text">
Cards provide context and an entry point to more robust information and views, and
their content and quantity can vary greatly.
</div> </div>
<div class="card-actions"> <div class="card-actions">
@ -653,14 +648,14 @@
<button mat-button color="accent">EXPLORE</button> <button mat-button color="accent">EXPLORE</button>
<div class="card-expander"> <div class="card-expander">
<button mat-icon-button aria-label="expand card" <button mat-icon-button aria-label="expand card"
(click)="card9Expanded = !card9Expanded"> (click)="card10Expanded = !card10Expanded">
<mat-icon *ngIf="card9Expanded">keyboard_arrow_up</mat-icon> <mat-icon *ngIf="card10Expanded">keyboard_arrow_up</mat-icon>
<mat-icon *ngIf="!card9Expanded">keyboard_arrow_down</mat-icon> <mat-icon *ngIf="!card10Expanded">keyboard_arrow_down</mat-icon>
</button> </button>
</div> </div>
</div> </div>
<div class="card-expand-area" *ngIf="card9Expanded" [@expandCollapse]> <div class="card-expand-area" *ngIf="card10Expanded" [@expandCollapse]>
<div class="card-expanded-supporting-text"> <div class="card-expanded-supporting-text">
Card content that exceeds the maximum card height is truncated and does not Card content that exceeds the maximum card height is truncated and does not
scroll, but the card can be expanded. Once expanded, the card may exceed the scroll, but the card can be expanded. Once expanded, the card may exceed the
@ -858,6 +853,7 @@
<div class="fuse-card"> <div class="fuse-card">
<div class="card-rich-media"> <div class="card-rich-media">
<div class="card-title">Winter</div>
<img src="assets/images/cards/card3-square.jpg"> <img src="assets/images/cards/card3-square.jpg">
</div> </div>
@ -925,8 +921,8 @@
<div class="card-media-header"> <div class="card-media-header">
<div class="card-primary-title"> <div class="card-primary-title">
<div class="card-subtitle secondary-text">Travel</div> <div class="card-title">Brooklyn</div>
<div class="card-title">Big City Life</div> <div class="card-subtitle secondary-text">Travel guide</div>
</div> </div>
<div class="card-rich-media"> <div class="card-rich-media">
@ -935,11 +931,6 @@
</div> </div>
<div class="card-supporting-text">
Cards provide context and an entry point to more robust information and views, and
their content and quantity can vary greatly.
</div>
<div class="card-actions"> <div class="card-actions">
<button mat-button color="accent">READ</button> <button mat-button color="accent">READ</button>
<button mat-button color="accent">SHARE</button> <button mat-button color="accent">SHARE</button>

3
src/app/main/content/components/cards/cards.component.ts
View File

@ -9,6 +9,9 @@ import { fuseAnimations } from '../../../../core/animations';
}) })
export class FuseCardsDocsComponent export class FuseCardsDocsComponent
{ {
card9Expanded = false;
card10Expanded = false;
constructor() constructor()
{ {