diff --git a/src/app/core/animations.ts b/src/app/core/animations.ts index b5ff37d2..4adc0bff 100644 --- a/src/app/core/animations.ts +++ b/src/app/core/animations.ts @@ -129,6 +129,17 @@ export const fuseAnimations = [ transition('* => void', animate('300ms')) ]), + trigger('expandCollapse', [ + state('void', style({ + height: '0px' + })), + state('*', style({ + height: '*' + })), + transition('void => *', animate('300ms ease-out')), + transition('* => void', animate('300ms ease-in')) + ]), + trigger('routerTransitionLeft', [ transition('* => *', [ diff --git a/src/app/core/scss/core.scss b/src/app/core/scss/core.scss index c960cbda..65a50aa0 100644 --- a/src/app/core/scss/core.scss +++ b/src/app/core/scss/core.scss @@ -25,6 +25,7 @@ @import "partials/angular-material-fix"; @import "partials/typography"; @import "partials/page-layouts"; +@import "partials/cards"; @import "partials/navigation"; @import "partials/forms"; @import "partials/toolbar"; diff --git a/src/app/core/scss/partials/_cards.scss b/src/app/core/scss/partials/_cards.scss new file mode 100644 index 00000000..9b38e690 --- /dev/null +++ b/src/app/core/scss/partials/_cards.scss @@ -0,0 +1,154 @@ +.fuse-card { + max-width: 320px; + min-width: 320px; + background: white; + border-radius: 2px; + @include mat-elevation(2); + + &.variable-width { + min-width: 0; + } + + .card-rich-media { + position: relative; + + .card-title { + position: absolute; + right: 16px; + bottom: 16px; + left: 16px; + font-size: 20px; + color: white; + } + } + + .card-media-header { + display: flex; + padding: 16px; + align-items: center; + + &.medium { + align-items: flex-start; + + .card-rich-media { + width: 120px; + height: 120px; + } + } + + &.large { + align-items: flex-start; + + .card-rich-media { + width: 160px; + height: 160px; + } + } + + .card-primary-title { + padding: 0 16px 0 0; + flex: 1; + } + + .card-rich-media { + width: 80px; + height: 80px; + } + + + div { + padding-top: 0; + } + } + + .card-avatar-header { + display: flex; + padding: 16px; + align-items: center; + + .card-avatar { + width: 40px; + height: 40px; + border-radius: 100%; + margin-right: 16px; + } + + .card-avatar-title { + + .card-title { + font-size: 14px; + font-weight: bold; + } + + .card-subtitle { + font-size: 13px; + font-weight: bold; + } + } + } + + .card-primary-title { + padding: 16px; + + .card-title { + font-size: 24px; + } + + .card-subtitle { + font-size: 14px; + } + + + div { + padding-top: 0; + } + } + + .card-supporting-text { + padding: 16px; + font-size: 14px; + line-height: 1.75; + + + div { + padding-top: 0; + } + } + + .card-actions { + display: flex; + padding: 8px; + + &.icon-buttons { + padding: 0 8px; + } + + &.align-center { + justify-content: center; + } + + &.align-right { + justify-content: flex-end; + } + + .mat-button { + min-width: 0 !important; + padding: 0 8px !important; + } + + .card-expander { + margin-left: auto; + } + + + div { + padding-top: 0; + } + } + + .card-expand-area { + overflow: hidden; + + .card-expanded-supporting-text { + padding: 8px 16px 16px 16px; + font-size: 14px; + line-height: 1.75; + } + } +} \ No newline at end of file diff --git a/src/app/main/content/components/cards/cards.component.html b/src/app/main/content/components/cards/cards.component.html new file mode 100644 index 00000000..4c8cf2ae --- /dev/null +++ b/src/app/main/content/components/cards/cards.component.html @@ -0,0 +1,1092 @@ +
+ + +
+
+
+ home + chevron_right + Components +
+
Cards
+
+
+ + + +
+ +
+ + +
+ + +
+ +
+ +
+ +
+ +
+
Kangaroo Valley Safari
+
Free on Thursdays
+
+ +
+ Cards provide context and an entry point to more robust information and views, and their + content and quantity can vary greatly. +
+ +
+ +
+ + + +
+ + + +
+ + +
+ + + +
+ + +
+ +
+ +
+ +
+ +
+
Kangaroo Valley Safari
+
Free on Thursdays
+
+ +
+ Cards provide context and an entry point to more robust information and views, and their + content and quantity can vary greatly. +
+ +
+ + +
+ +
+ +
+ + + +
+ + + +
+ + +
+ + + +
+ + +
+ +
+ +
+
Kangaroo Valley Safari
+
Free on Thursdays
+
+ +
+ Cards provide context and an entry point to more robust information and views, and their + content and quantity can vary greatly. +
+ +
+ +
+ + + +
+ + + +
+ + +
+ + + +
+ + +
+ +
+ +
+
Kangaroo Valley Safari
+
Free on Thursdays
+
+ +
+ All cards can be mixed with Fuse Color Classes to have different colors. This greatly + increases the unique variations of all cards. Cards provide context and an entry point to + more robust information and views, and their content and quantity can vary greatly. +
+ +
+ + +
+ +
+ +
+ + + +
+ + + +
+ + +
+ + + +
+ + +
+ +
+ +
+ +
+ +
+
Kangaroo Valley Safari
+
Free on Thursdays
+
+ +
+ +
+ + + +
+ + + +
+ + +
+ + + +
+ + +
+ +
+ +
+ +
+ +
+ Cards provide context and an entry point to more robust information and views, and their + content and quantity can vary greatly. +
+ +
+ +
+ + + +
+ + + +
+ + +
+ + + +
+ + +
+ +
+ +
+
Top 10 Holiday Locations
+ +
+ +
+
Number 10
+
+ +
+ Cards are a convenient means of displaying content composed of different elements. +
+ +
+ + +
+ +
+ +
+ + + +
+ + + +
+ + +
+ + + +
+ + +
+ +
+ +
+ +
+
Travel
+
Big City Life
+
+ +
+ +
+ +
+ +
+ Cards provide context and an entry point to more robust information and views, and their + content and quantity can vary greatly. +
+ +
+ + +
+ +
+ +
+ + + +
+ + + +
+ + +
+ + + +
+ + +
+ +
+ +
+ +
+ +
+
Top Winter Locations
+
More than 200 locations
+
+ +
+ Cards provide context and an entry point to more robust information and views, and their + content and quantity can vary greatly. +
+ +
+ + +
+ +
+
+ +
+
+ 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 maximum height of the + view. In this case, the card will scroll with the card collection. +
+
+ +
+ +
+ + + +
+ + + +
+ + +
+ + + +
+ + +
+ +
+ +
+ +
+ +
+
Top eastern road trips
+
2,000 miles of wonder
+
+ +
+ + +
+ +
+
+ +
+
+ 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 maximum height of the + view. In this case, the card will scroll with the card collection. +
+
+ +
+ +
+ + + +
+ + + +
+ + +
+ + + +
+ + +
+ +
+ +
+ + +
+
Christy
+
20 mins. ago
+
+
+ +
+ +
+ +
+
Kangaroo Valley Safari
+
Free on Thursdays
+
+ +
+ Cards provide context and an entry point to more robust information and views, and their + content and quantity can vary greatly. +
+ +
+ +
+ + + +
+ + + +
+ + +
+ + + +
+ + +
+ +
+ +
+ +
+ +
+ + + + + +
+ +
+ +
+ + + +
+ + + +
+ + +
+ + + +
+ + +
+ +
+ +
+
Winter
+ +
+ +
+ + + + + +
+ +
+ +
+ + + +
+ + + +
+ + +
+ + + +
+ + +
+ +
+ +
+ +
+
Brooklyn
+
Travel guide
+
+ +
+ +
+ +
+ +
+ + +
+ +
+ +
+ + + +
+ + + +
+ + +
+ + + +
+ + +
+ +
+ +
+ +
+
Brooklyn
+
Travel guide
+
+ +
+ +
+ +
+ +
+ + +
+ +
+ +
+ + + +
+ + + +
+ + +
+ + + +
+ + +
+ +
+ +
+ +
+
Brooklyn
+
Travel guide
+
+ +
+ +
+ +
+ +
+ + +
+ +
+ +
+ + + +
+ + + +
+ + +
+ + +
+ +
+ + +
\ No newline at end of file diff --git a/src/app/main/content/components/cards/cards.component.scss b/src/app/main/content/components/cards/cards.component.scss new file mode 100644 index 00000000..f97843c6 --- /dev/null +++ b/src/app/main/content/components/cards/cards.component.scss @@ -0,0 +1,29 @@ +@import "src/app/core/scss/fuse"; + +:host { + + .content { + + .card-row { + display: flex; + width: 100%; + padding: 24px 24px 48px 24px; + margin-bottom: 24px; + border-bottom: 1px solid rgba(0, 0, 0, 0.12); + + .card-preview { + display: flex; + min-width: 320px; + } + + .card-source { + display: flex; + flex: 1; + max-height: 400px; + overflow: auto; + min-width: 400px; + margin-left: 24px; + } + } + } +} diff --git a/src/app/main/content/components/cards/cards.component.ts b/src/app/main/content/components/cards/cards.component.ts new file mode 100644 index 00000000..a88b284b --- /dev/null +++ b/src/app/main/content/components/cards/cards.component.ts @@ -0,0 +1,16 @@ +import { Component } from '@angular/core'; +import { fuseAnimations } from '../../../../core/animations'; + +@Component({ + selector : 'fuse-cards-docs', + templateUrl: './cards.component.html', + styleUrls : ['./cards.component.scss'], + animations : fuseAnimations +}) +export class FuseCardsDocsComponent +{ + constructor() + { + + } +} diff --git a/src/app/main/content/components/components.module.ts b/src/app/main/content/components/components.module.ts index c9ff020b..cd467f0b 100644 --- a/src/app/main/content/components/components.module.ts +++ b/src/app/main/content/components/components.module.ts @@ -1,6 +1,7 @@ import { NgModule } from '@angular/core'; import { SharedModule } from '../../../core/modules/shared.module'; import { RouterModule } from '@angular/router'; +import { FuseCardsDocsComponent } from './cards/cards.component'; import { FuseCountdownDocsComponent } from './countdown/countdown.component'; import { FuseHljsDocsComponent } from './hljs/hljs.component'; import { FuseMaterialColorPickerDocsComponent } from './material-color-picker/material-color-picker.component'; @@ -12,6 +13,10 @@ import { FuseWidgetDocsComponent } from './widget/widget.component'; import { FuseWidgetModule } from '../../../core/components/widget/widget.module'; const routes = [ + { + path : 'components/cards', + component: FuseCardsDocsComponent + }, { path : 'components/countdown', component: FuseCountdownDocsComponent @@ -53,6 +58,7 @@ const routes = [ FuseWidgetModule ], declarations: [ + FuseCardsDocsComponent, FuseCountdownDocsComponent, FuseHljsDocsComponent, FuseMaterialColorPickerDocsComponent, diff --git a/src/app/navigation.model.ts b/src/app/navigation.model.ts index ca4fca3c..f411fe90 100644 --- a/src/app/navigation.model.ts +++ b/src/app/navigation.model.ts @@ -710,6 +710,13 @@ export class NavigationModel } ] }, + { + 'id' : 'cards', + 'title': 'Cards', + 'type' : 'item', + 'icon' : 'settings_input_component', + 'url' : '/components/cards' + }, { 'id' : 'countdown', 'title': 'Countdown', diff --git a/src/assets/images/cards/card1.jpg b/src/assets/images/cards/card1.jpg new file mode 100644 index 00000000..0e3d7877 Binary files /dev/null and b/src/assets/images/cards/card1.jpg differ diff --git a/src/assets/images/cards/card2-large.jpg b/src/assets/images/cards/card2-large.jpg new file mode 100644 index 00000000..5de61b3b Binary files /dev/null and b/src/assets/images/cards/card2-large.jpg differ diff --git a/src/assets/images/cards/card2-medium.jpg b/src/assets/images/cards/card2-medium.jpg new file mode 100644 index 00000000..27fc800f Binary files /dev/null and b/src/assets/images/cards/card2-medium.jpg differ diff --git a/src/assets/images/cards/card2-small.jpg b/src/assets/images/cards/card2-small.jpg new file mode 100644 index 00000000..8900f48a Binary files /dev/null and b/src/assets/images/cards/card2-small.jpg differ diff --git a/src/assets/images/cards/card2.jpg b/src/assets/images/cards/card2.jpg new file mode 100644 index 00000000..ac67f024 Binary files /dev/null and b/src/assets/images/cards/card2.jpg differ diff --git a/src/assets/images/cards/card3-square.jpg b/src/assets/images/cards/card3-square.jpg new file mode 100644 index 00000000..57c5d94f Binary files /dev/null and b/src/assets/images/cards/card3-square.jpg differ diff --git a/src/assets/images/cards/card3.jpg b/src/assets/images/cards/card3.jpg new file mode 100644 index 00000000..b49d4801 Binary files /dev/null and b/src/assets/images/cards/card3.jpg differ