diff --git a/src/app/core/scss/partials/_angular-material-fix.scss b/src/app/core/scss/partials/_angular-material-fix.scss index 5358bd1f..3214df95 100644 --- a/src/app/core/scss/partials/_angular-material-fix.scss +++ b/src/app/core/scss/partials/_angular-material-fix.scss @@ -20,8 +20,8 @@ } .mat-pseudo-checkbox-checked:after { - width: 14px; - height: 7px; + width: 14px !important; + height: 7px !important; } // Fix: "Input underlines has wrong color opacity value" diff --git a/src/app/core/scss/partials/_cards.scss b/src/app/core/scss/partials/_cards.scss index 9b38e690..a7be8cc2 100644 --- a/src/app/core/scss/partials/_cards.scss +++ b/src/app/core/scss/partials/_cards.scss @@ -9,145 +9,47 @@ min-width: 0; } - .card-rich-media { - position: relative; + // Buttons + .mat-button { + min-width: 0 !important; + padding: 0 8px !important; + } - .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; + // Button Toggle Group + .mat-button-toggle-group, + .mat-button-toggle-standalone { + box-shadow: none !important; + } + + // Tabs + .mat-tab-labels { + justify-content: center; + } + + .mat-tab-label { + min-width: 0 !important; + } + + // Divider + .card-divider { + border-top: 1px solid rgba(0, 0, 0, 0.12); + margin: 16px; + + &.light { + border-top-color: rgba(255, 255, 255, 0.12); + } + + &.full-width { + margin: 0; } } + // Expand Area .card-expand-area { overflow: hidden; - .card-expanded-supporting-text { + .card-expanded-content { padding: 8px 16px 16px 16px; - font-size: 14px; line-height: 1.75; } } diff --git a/src/app/core/scss/partials/_helpers.scss b/src/app/core/scss/partials/_helpers.scss index 6d261285..d4cea445 100644 --- a/src/app/core/scss/partials/_helpers.scss +++ b/src/app/core/scss/partials/_helpers.scss @@ -1,9 +1,59 @@ +// ###################### +// POSITION HELPERS +// ###################### +@each $breakpoint in map-keys($grid-breakpoints) { + + @include media-breakpoint-up($breakpoint) { + + $infix: breakpoint-infix($breakpoint, $grid-breakpoints); + + .position#{$infix}-relative { + position: relative; + } + + .position#{$infix}-absolute { + position: absolute; + } + + .position#{$infix}-static { + position: static; + } + } +} + +// #################################### +// ABSOLUTE POSITION ALIGNMENT HELPERS +// #################################### +@each $breakpoint in map-keys($grid-breakpoints) { + + @include media-breakpoint-up($breakpoint) { + + $infix: breakpoint-infix($breakpoint, $grid-breakpoints); + + .align#{$infix}-top { + top: 0; + } + + .align#{$infix}-right { + right: 0; + } + + .align#{$infix}-bottom { + bottom: 0; + } + + .align#{$infix}-left { + left: 0; + } + } +} + // ###################### // SIZE HELPERS // ###################### @each $prop, $abbrev in (height: h, width: w) { - @for $index from 0 through 128 { + @for $index from 0 through 180 { $size: $index * 4; $length: #{$size}px; @@ -28,7 +78,6 @@ // ###################### // SPACING HELPERS // ###################### - @each $breakpoint in map-keys($grid-breakpoints) { @include media-breakpoint-up($breakpoint) { @@ -83,47 +132,45 @@ } @if ($abbrev == m) { - @for $index from 0 through 64 { - $size: $index * 4; - $length: #{$size}px; - // Some special margin utils for flex alignments - .m#{$infix}-auto { - margin: auto !important; - } + // Some special margin utils for flex alignments + .m#{$infix}-auto { + margin: auto !important; + } - .mt#{$infix}-auto { - margin-top: auto !important; - } + .mt#{$infix}-auto { + margin-top: auto !important; + } - .mr#{$infix}-auto { - margin-right: auto !important; - } + .mr#{$infix}-auto { + margin-right: auto !important; + } - .mb#{$infix}-auto { - margin-bottom: auto !important; - } + .mb#{$infix}-auto { + margin-bottom: auto !important; + } - .ml#{$infix}-auto { - margin-left: auto !important; - } + .ml#{$infix}-auto { + margin-left: auto !important; + } - .mx#{$infix}-auto { - margin-right: auto !important; - margin-left: auto !important; - } + .mx#{$infix}-auto { + margin-right: auto !important; + margin-left: auto !important; + } - .my#{$infix}-auto { - margin-top: auto !important; - margin-bottom: auto !important; - } + .my#{$infix}-auto { + margin-top: auto !important; + margin-bottom: auto !important; } } } } } -// Border helpers +// ###################### +// BORDER HELPERS +// ###################### $border-style: 1px solid rgba(0, 0, 0, 0.12); .border, @@ -162,3 +209,10 @@ $border-style: 1px solid rgba(0, 0, 0, 0.12); border-top: $border-style; border-bottom: $border-style; } + +// ###################### +// BORDER RADIUS HELPERS +// ###################### +.border-radius-100 { + border-radius: 100%; +} \ No newline at end of file diff --git a/src/app/core/scss/partials/_material.scss b/src/app/core/scss/partials/_material.scss index fb6c488e..75c1b02c 100644 --- a/src/app/core/scss/partials/_material.scss +++ b/src/app/core/scss/partials/_material.scss @@ -411,7 +411,6 @@ table { color: rgba(0, 0, 0, 0.54); border-bottom: 1px solid rgba(0, 0, 0, 0.12); white-space: nowrap; - min-width: 120px; &:first-child { padding-left: 24px; diff --git a/src/app/core/scss/partials/_typography.scss b/src/app/core/scss/partials/_typography.scss index 0d81ce8a..2e779328 100644 --- a/src/app/core/scss/partials/_typography.scss +++ b/src/app/core/scss/partials/_typography.scss @@ -229,6 +229,22 @@ strong { } } +.line-height-1 { + line-height: 1; +} + +.line-height-1\.25 { + line-height: 1.25; +} + +.line-height-1\.50 { + line-height: 1.5; +} + +.line-height-1\.75 { + line-height: 1.75; +} + // Boxed text .text-boxed { border-radius: 2px; diff --git a/src/app/main/content/components/cards/cards.component.html b/src/app/main/content/components/cards/cards.component.html index 08e092c1..0d62a6e0 100644 --- a/src/app/main/content/components/cards/cards.component.html +++ b/src/app/main/content/components/cards/cards.component.html @@ -1,7 +1,8 @@
-
+
+
home @@ -10,33 +11,37 @@
Cards
+ +
+ + View Source + +
+
-
+
-
+
-
+
-
- + + +
+
Kangaroo Valley Safari
+
Free on Thursdays
-
-
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.
@@ -52,18 +57,17 @@ + +
+ + +
+ + + +
+ + +
+ +
+ +
+
San Francisco
+
Mon, 12:30 PM, Mostly Sunny
+
+ +
+
+ 23 + ° + C +
+ +
+ +
+
+ +
23 km/h
+
+ +
+ +
48 %
+
+
+ +
+ +
+
+
Tuesday
+
+ +
24°
+
/
+
12°
+
+
+ +
+
Wednesday
+
+ +
22°
+
/
+
14°
+
+
+ +
+
Thursday
+
+ +
23°
+
/
+
13°
+
+
+ +
+
Friday
+
+ +
25°
+
/
+
15°
+
+
+ +
+
Saturday
+
+ +
24°
+
/
+
15°
+
+
+
+ +
+ +
+ +
+ +
+ + + +
+ + + +
+ + +
+ + + +
+ + +
+ +
+ +
+ +
+
+
Google Inc.
+
NASDAQ: GOOG
+
+ +
+ + + + + + + +
+
+ +
+
540.48
+
+ trending_up +
2.29 (2.05%)
+
+
+ +
+ + + +
+ + +
+ + + +
+ + +
+ + + +
+ + +
+ + + +
+ +
+ + + +
+ + + +
+ + +
+ + + +
+ + +
+ +
+ +
+
Top campaigns
+ +
+ + + + + + + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ClicksConv
Holiday Travel362190
Get Away Deals7037
Airfare5320
Vacation2018
Hotels944
+ +
+ +
+ +
+ +
+ +
+ + + +
+ + + +
+ + +
+ + + +
+ + +
+ +
+ +
+
Schedule
+ + + + Today + Yesterday + + +
+ + + +

Group Meeting

+

+ In 32 minutes - + Room 1B +

+ + + +

Coffee Break

+

+ 10:30AM +

+ + + +

Public Beta Release

+

+ 11:00AM +

+ + + +

Lunch

+

+ 12:10PM +

+ + + +

Dinner with David

+

+ 17:30PM +

+ + + +
+ +
+ +
+ +
+ + + +
+ + + +
+ + +
+ + + +
+ + +
+ +
+ +
+
+
Sales Reports
+
+ +
+ + + + + + +
+
+ + + +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante + augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam + cursus. In sodales pretium ultrices. +

+

+ Maecenas lectus est, sollicitudin consectetur felis nec, feugiat ultricies mi. + Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor, orci enim + rutrum enim, vel tempor sapien arcu a tellus. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante + augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam + cursus. In sodales pretium ultrices. +

+
+ + + +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante + augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam + cursus. In sodales pretium ultrices. +

+

+ Maecenas lectus est, sollicitudin consectetur felis nec, feugiat ultricies mi. + Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor, orci enim + rutrum enim, vel tempor sapien arcu a tellus. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante + augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam + cursus. In sodales pretium ultrices. +

+
+ + + +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante + augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam + cursus. In sodales pretium ultrices. +

+

+ Maecenas lectus est, sollicitudin consectetur felis nec, feugiat ultricies mi. + Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor, orci enim + rutrum enim, vel tempor sapien arcu a tellus. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante + augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam + cursus. In sodales pretium ultrices. +

+
+ + + +
+ +
+ + + +
+ + + +
+ + +
+ + + +
+ + +
+ +
+ +
+
Shopping List
+
+ +
+ + + Milk + Tomatoes + Green Apples + Chocolate Bar + Break + Eggs + Lettuce + Pickles + + +
+ +
+ + + +
+ + + +
+ + +
+ + + +
+ + +
+ +
+ +
+
Sessions by device
+
+ +
+ + +
+ +
+
+
Desktop
+
92.8%
+
+ + arrow_downward + + +
+ -0.6% +
+
+
+ +
+
Mobile
+
6.1%
+
+ + arrow_upward + + +
+ +0.7% +
+
+
+ +
+
Tablet
+
1.1%
+
+ + arrow_upward + + +
+ +0.1% +
+
+
+
+ +
+ +
+ + + Today + Yesterday + Last 7 days + Last 28 days + Last 90 days + + + + +
+ +
+ +
+ + + +
+ + + +
+ + +
+ + + +
+ + +
+ +
+ +
+
Conversion
+
492
+
+ +
+ +22% + of target +
+ +
+ + +
+ +
+ +
+ + + +
+ + + +
+ + +
+ + + +
+ + +
+ +
+ +
+
Impressions
+
87.4M
+
+ +
+ +12.3% + of target +
+ +
+ + +
+ +
+ +
+ + + +
+ + + +
+ + +
+ +
diff --git a/src/app/main/content/components/cards/cards.component.scss b/src/app/main/content/components/cards/cards.component.scss index f97843c6..36075af0 100644 --- a/src/app/main/content/components/cards/cards.component.scss +++ b/src/app/main/content/components/cards/cards.component.scss @@ -4,25 +4,48 @@ .content { - .card-row { + .cards { display: flex; - width: 100%; - padding: 24px 24px 48px 24px; - margin-bottom: 24px; - border-bottom: 1px solid rgba(0, 0, 0, 0.12); + flex-direction: row; + flex-wrap: wrap; + justify-content: flex-start; + align-items: flex-start; - .card-preview { + .card { display: flex; - min-width: 320px; + padding: 24px 24px 48px 24px; + margin-bottom: 96px; + + .card-preview { + display: flex; + min-width: 320px; + } + + .card-source { + display: none; + } } + } - .card-source { - display: flex; - flex: 1; - max-height: 400px; - overflow: auto; - min-width: 400px; - margin-left: 24px; + &.source { + + .cards { + flex-direction: column; + + .card { + width: 100%; + margin-bottom: 24px; + border-bottom: 1px solid rgba(0, 0, 0, 0.12); + + .card-source { + display: flex !important; + 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 index d43b7aa3..924998bf 100644 --- a/src/app/main/content/components/cards/cards.component.ts +++ b/src/app/main/content/components/cards/cards.component.ts @@ -1,4 +1,5 @@ import { Component } from '@angular/core'; +import * as shape from 'd3-shape'; import { fuseAnimations } from '../../../../core/animations'; @Component({ @@ -9,11 +10,207 @@ import { fuseAnimations } from '../../../../core/animations'; }) export class FuseCardsDocsComponent { + view = 'preview'; + + // Card 9 card9Expanded = false; + + // Card 10 card10Expanded = false; + // Card 19 + card19 = { + scheme: { + domain: ['#5c84f1'] + }, + data : [ + { + 'name' : 'GOOG', + 'series': [ + { + 'name' : 'Jan 1', + 'value': 540.2 + }, + { + 'name' : 'Jan 2', + 'value': 539.4 + }, + { + 'name' : 'Jan 3', + 'value': 538.9 + }, + { + 'name' : 'Jan 4', + 'value': 539.6 + }, + { + 'name' : 'Jan 5', + 'value': 540 + }, + { + 'name' : 'Jan 6', + 'value': 540.2 + }, + { + 'name' : 'Jan 7', + 'value': 540.48 + } + ] + } + ], + curve : shape.curveBasis + }; + + // Card 24 + card24 = { + scheme : { + domain: ['#4867d2', '#5c84f1', '#89a9f4'] + }, + devices: [ + { + 'name' : 'Desktop', + 'value' : 92.8, + 'change': -0.6 + }, + { + 'name' : 'Mobile', + 'value' : 6.1, + 'change': 0.7 + }, + { + 'name' : 'Tablet', + 'value' : 1.1, + 'change': 0.1 + } + ] + }; + + // Card 25 + card25 = { + scheme: { + domain: ['#5c84f1'] + }, + data : [ + { + 'name' : 'Monday', + 'value': 221 + }, + { + 'name' : 'Tuesday', + 'value': 428 + }, + { + 'name' : 'Wednesday', + 'value': 492 + }, + { + 'name' : 'Thursday', + 'value': 471 + }, + { + 'name' : 'Friday', + 'value': 413 + }, + { + 'name' : 'Saturday', + 'value': 344 + }, + { + 'name' : 'Sunday', + 'value': 294 + } + ] + }; + + // Card 26 + card26 = { + scheme: { + domain: ['#5c84f1'] + }, + data : [ + { + 'name' : 'Impressions', + 'series': [ + { + 'name' : 'Jan 1', + 'value': 670000 + }, + { + 'name' : 'Jan 2', + 'value': 540000 + }, + { + 'name' : 'Jan 3', + 'value': 820000 + }, + { + 'name' : 'Jan 4', + 'value': 570000 + }, + { + 'name' : 'Jan 5', + 'value': 720000 + }, + { + 'name' : 'Jan 6', + 'value': 570000 + }, + { + 'name' : 'Jan 7', + 'value': 870000 + }, + { + 'name' : 'Jan 8', + 'value': 720000 + }, + { + 'name' : 'Jan 9', + 'value': 890000 + }, + { + 'name' : 'Jan 10', + 'value': 987000 + }, + { + 'name' : 'Jan 11', + 'value': 1120000 + }, + { + 'name' : 'Jan 12', + 'value': 1360000 + }, + { + 'name' : 'Jan 13', + 'value': 1100000 + }, + { + 'name' : 'Jan 14', + 'value': 1490000 + }, + { + 'name' : 'Jan 15', + 'value': 980000 + } + ] + } + ], + curve : shape.curveBasis + }; + constructor() { } + + toggleView() + { + if ( this.view === 'preview' ) + { + this.view = 'source'; + } + else + { + this.view = 'preview'; + } + } } diff --git a/src/app/main/content/components/components.module.ts b/src/app/main/content/components/components.module.ts index cd467f0b..d53da9e0 100644 --- a/src/app/main/content/components/components.module.ts +++ b/src/app/main/content/components/components.module.ts @@ -7,10 +7,11 @@ import { FuseHljsDocsComponent } from './hljs/hljs.component'; import { FuseMaterialColorPickerDocsComponent } from './material-color-picker/material-color-picker.component'; import { FuseMultiLanguageDocsComponent } from './multi-language/multi-language.component'; import { FuseNavigationDocsComponent } from './navigation/navigation.component'; +import { FuseSearchBarDocsComponent } from './search-bar/search-bar.component'; import { FuseShortcutsDocsComponent } from './shortcuts/shortcuts.component'; -import { FuseSearchBarDocsComponent } from 'app/main/content/components/search-bar/search-bar.component'; import { FuseWidgetDocsComponent } from './widget/widget.component'; import { FuseWidgetModule } from '../../../core/components/widget/widget.module'; +import { NgxChartsModule } from '@swimlane/ngx-charts'; const routes = [ { @@ -55,7 +56,8 @@ const routes = [ imports : [ SharedModule, RouterModule.forChild(routes), - FuseWidgetModule + FuseWidgetModule, + NgxChartsModule ], declarations: [ FuseCardsDocsComponent,