From 4001b2fdf5068389845a34c0152147804a68aa59 Mon Sep 17 00:00:00 2001 From: smartapant Date: Mon, 2 May 2016 15:32:16 +0300 Subject: [PATCH 1/4] Dashboard: Popular app widget begin --- src/app/pages/dashboard/dashboard.html | 2 +- src/app/pages/dashboard/dashboard.scss | 6 +- .../dashboard/popularApp/popularApp.scss | 55 ++++++++++++++++++- src/app/theme/sass/_layout.scss | 4 ++ 4 files changed, 62 insertions(+), 5 deletions(-) diff --git a/src/app/pages/dashboard/dashboard.html b/src/app/pages/dashboard/dashboard.html index a6c7ad35..214b36db 100644 --- a/src/app/pages/dashboard/dashboard.html +++ b/src/app/pages/dashboard/dashboard.html @@ -2,7 +2,7 @@
+ baPanelClass="popular-app medium-panel">
diff --git a/src/app/pages/dashboard/dashboard.scss b/src/app/pages/dashboard/dashboard.scss index 30ac5a83..2bce8531 100644 --- a/src/app/pages/dashboard/dashboard.scss +++ b/src/app/pages/dashboard/dashboard.scss @@ -7,13 +7,13 @@ } @media screen and (max-width: 1620px) { - .panel.feed-panel.large-panel { + .card.feed-card.large-card { height: 824px; } } -.user-stats-panel { - .panel-title { +.user-stats-card { + .card-title { padding: 0 0 15px; } } diff --git a/src/app/pages/dashboard/popularApp/popularApp.scss b/src/app/pages/dashboard/popularApp/popularApp.scss index 61ad7ca3..9c5e2c2e 100644 --- a/src/app/pages/dashboard/popularApp/popularApp.scss +++ b/src/app/pages/dashboard/popularApp/popularApp.scss @@ -1 +1,54 @@ -@import '../dashboard'; \ No newline at end of file +@import "../../../theme/sass/conf/conf"; + +.card.popular-app { + &>.card-body { + padding: 0; + } + + .popular-app-img { + position: relative; + background: rgba(0, 0, 0, 0.5); + padding: 30px 0; + height: 260px; + border-top-right-radius: 5px; + border-top-left-radius: 5px; + img { + max-width: 60%; + max-height: 70%; + position: absolute; + transform: translateY(-50%) translate(-50%); + top: 50%; + left: 50%; + } + } + .popular-app-cost { + font-size: 20px; + padding: 20px 22px; + border-bottom: 1px solid $border; + } + .popular-app-info { + padding: 20px 22px; + font-size: 20px; + text-align: center; + .info-label { + font-size: 12px; + } + } + .row { + margin: 0; + > div { + padding: 0; + } + } +} + +body.badmin-transparent { + .popular-app-img { + border-top-right-radius: 5px; + border-top-left-radius: 5px; + } + .popular-app-cost { + border-bottom: 1px solid rgba(0, 0, 0, 0.12); + box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.12); + } +} \ No newline at end of file diff --git a/src/app/theme/sass/_layout.scss b/src/app/theme/sass/_layout.scss index da7258e0..79bbdbea 100644 --- a/src/app/theme/sass/_layout.scss +++ b/src/app/theme/sass/_layout.scss @@ -198,3 +198,7 @@ a { visibility: hidden !important; } } + +.text-right { + text-align: right; +} \ No newline at end of file From d7b7f14eea011329046d369864661b1cb7107e80 Mon Sep 17 00:00:00 2001 From: smartapant Date: Mon, 2 May 2016 15:46:27 +0300 Subject: [PATCH 2/4] BaPanel to BaCard rename. --- src/app/pages/dashboard/dashboard.component.ts | 4 ++-- src/app/pages/dashboard/dashboard.html | 6 +++--- src/app/theme/baCard/baCard.component.ts | 12 ++++++++++++ .../{baPanel/baPanel.html => baCard/baCard.html} | 2 +- .../{baPanel/baPanel.scss => baCard/baCard.scss} | 0 src/app/theme/baCard/index.ts | 1 + src/app/theme/baPanel/baPanel.component.ts | 12 ------------ src/app/theme/baPanel/index.ts | 1 - src/app/theme/index.ts | 2 +- 9 files changed, 20 insertions(+), 20 deletions(-) create mode 100644 src/app/theme/baCard/baCard.component.ts rename src/app/theme/{baPanel/baPanel.html => baCard/baCard.html} (70%) rename src/app/theme/{baPanel/baPanel.scss => baCard/baCard.scss} (100%) create mode 100644 src/app/theme/baCard/index.ts delete mode 100644 src/app/theme/baPanel/baPanel.component.ts delete mode 100644 src/app/theme/baPanel/index.ts diff --git a/src/app/pages/dashboard/dashboard.component.ts b/src/app/pages/dashboard/dashboard.component.ts index 22f07516..56e7515d 100644 --- a/src/app/pages/dashboard/dashboard.component.ts +++ b/src/app/pages/dashboard/dashboard.component.ts @@ -1,13 +1,13 @@ import {Component, ViewEncapsulation} from 'angular2/core'; import {PopularApp} from './popularApp'; -import {BaPanel} from '../../theme'; +import {BaCard} from '../../theme'; @Component({ selector: 'dashboard', pipes: [], - directives: [PopularApp, BaPanel], + directives: [PopularApp, BaCard], encapsulation: ViewEncapsulation.None, styles: [require('./dashboard.scss')], template: require('./dashboard.html') diff --git a/src/app/pages/dashboard/dashboard.html b/src/app/pages/dashboard/dashboard.html index 214b36db..51e0dc7f 100644 --- a/src/app/pages/dashboard/dashboard.html +++ b/src/app/pages/dashboard/dashboard.html @@ -1,10 +1,10 @@
- + - +
diff --git a/src/app/theme/baCard/baCard.component.ts b/src/app/theme/baCard/baCard.component.ts new file mode 100644 index 00000000..f96c438c --- /dev/null +++ b/src/app/theme/baCard/baCard.component.ts @@ -0,0 +1,12 @@ +import {Component, ViewEncapsulation, Input} from 'angular2/core'; + +@Component({ + selector: 'ba-card', + styles: [require('./baCard.scss')], + template: require('./baCard.html'), + encapsulation: ViewEncapsulation.None +}) +export class BaCard { + @Input() title:String; + @Input() baCardClass:String; +} diff --git a/src/app/theme/baPanel/baPanel.html b/src/app/theme/baCard/baCard.html similarity index 70% rename from src/app/theme/baPanel/baPanel.html rename to src/app/theme/baCard/baCard.html index 5933cb95..a597ca69 100644 --- a/src/app/theme/baPanel/baPanel.html +++ b/src/app/theme/baCard/baCard.html @@ -1,4 +1,4 @@ -
+

{{title}}

diff --git a/src/app/theme/baPanel/baPanel.scss b/src/app/theme/baCard/baCard.scss similarity index 100% rename from src/app/theme/baPanel/baPanel.scss rename to src/app/theme/baCard/baCard.scss diff --git a/src/app/theme/baCard/index.ts b/src/app/theme/baCard/index.ts new file mode 100644 index 00000000..4890b0a2 --- /dev/null +++ b/src/app/theme/baCard/index.ts @@ -0,0 +1 @@ +export * from './baCard.component'; \ No newline at end of file diff --git a/src/app/theme/baPanel/baPanel.component.ts b/src/app/theme/baPanel/baPanel.component.ts deleted file mode 100644 index d0fdb825..00000000 --- a/src/app/theme/baPanel/baPanel.component.ts +++ /dev/null @@ -1,12 +0,0 @@ -import {Component, ViewEncapsulation, Input} from 'angular2/core'; - -@Component({ - selector: 'ba-panel', - styles: [require('./baPanel.scss')], - template: require('./baPanel.html'), - encapsulation: ViewEncapsulation.None -}) -export class BaPanel { - @Input() title:String; - @Input() baPanelClass:String; -} diff --git a/src/app/theme/baPanel/index.ts b/src/app/theme/baPanel/index.ts deleted file mode 100644 index 8727b9ee..00000000 --- a/src/app/theme/baPanel/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './baPanel.component'; \ No newline at end of file diff --git a/src/app/theme/index.ts b/src/app/theme/index.ts index c0877bf9..4d95e4c9 100644 --- a/src/app/theme/index.ts +++ b/src/app/theme/index.ts @@ -1,4 +1,4 @@ export * from './pageTop'; export * from './msgCenter'; export * from './sidebar'; -export * from './baPanel'; +export * from './baCard'; From 4356658f0562e8100b570fbac09a16d1e4716821 Mon Sep 17 00:00:00 2001 From: smartapant Date: Mon, 2 May 2016 16:32:45 +0300 Subject: [PATCH 3/4] Sass: panels to cards --- src/app/theme/sass/_typography.scss | 12 ++++---- .../{_panel.scss => _card.scss} | 30 +++++++++---------- .../theme/sass/bootstrap-overrides/_tabs.scss | 12 ++++---- .../sass/bootstrap-overrides/overrides.scss | 2 +- src/app/theme/sass/conf/_mixins.scss | 2 +- 5 files changed, 29 insertions(+), 29 deletions(-) rename src/app/theme/sass/bootstrap-overrides/{_panel.scss => _card.scss} (86%) diff --git a/src/app/theme/sass/_typography.scss b/src/app/theme/sass/_typography.scss index 2548984c..fcd96ee4 100644 --- a/src/app/theme/sass/_typography.scss +++ b/src/app/theme/sass/_typography.scss @@ -47,20 +47,20 @@ h5 { .typography-widget { height: 100%; - .panel { + .card { height: 620px; } - .panel-title{ + .card-title{ text-align: center; width: 100%; } - .panel.with-scroll .panel-body{ + .card.with-scroll .card-body{ height: calc(100% - 45px); } - .panel-content{ + .card-content{ padding: 15px 22px 5px 22px; } @@ -421,11 +421,11 @@ a.learn-more { padding: 0 20px 50px 20px; } -.panel.banner-column-panel { +.card.banner-column-card { padding: 0; margin-bottom: 90px; - .panel-body{ + .card-body{ padding: 0; } } diff --git a/src/app/theme/sass/bootstrap-overrides/_panel.scss b/src/app/theme/sass/bootstrap-overrides/_card.scss similarity index 86% rename from src/app/theme/sass/bootstrap-overrides/_panel.scss rename to src/app/theme/sass/bootstrap-overrides/_card.scss index 433db35d..6eb554ba 100644 --- a/src/app/theme/sass/bootstrap-overrides/_panel.scss +++ b/src/app/theme/sass/bootstrap-overrides/_card.scss @@ -1,5 +1,5 @@ $card-title-height: 44px; -$card-heading-font-size: 16px; +$card-header-font-size: 16px; .card { border: none; @@ -47,11 +47,11 @@ $card-heading-font-size: 16px; height: 100%; } -.card-heading, .card-footer { +.card-header, .card-footer { height: $card-title-height; - font-size: $card-heading-font-size; + font-size: $card-header-font-size; - $vertical-padding: ($card-title-height - $card-heading-font-size) / 2; + $vertical-padding: ($card-title-height - $card-header-font-size) / 2; padding: $vertical-padding 22px; } @@ -65,7 +65,7 @@ $card-heading-font-size: 16px; .card-white, .card-blur { background-size: cover; - > .card-heading { + > .card-header { background-color: transparent; border: none; color: $default-text; @@ -83,7 +83,7 @@ $card-heading-font-size: 16px; } .card-primary { - > .card-heading { + > .card-header { color: $primary; background-color: $primary-bg; border-color: $primary-bg; @@ -91,7 +91,7 @@ $card-heading-font-size: 16px; } .card-success { - > .card-heading { + > .card-header { color: $success; background-color: $success-bg; border-color: $success-bg; @@ -99,7 +99,7 @@ $card-heading-font-size: 16px; } .card-info { - > .card-heading { + > .card-header { color: $info; background-color: $info-bg; border-color: $info-bg; @@ -107,7 +107,7 @@ $card-heading-font-size: 16px; } .card-warning { - > .card-heading { + > .card-header { color: $warning; background-color: $warning-bg; border-color: $warning-bg; @@ -115,7 +115,7 @@ $card-heading-font-size: 16px; } .card-danger { - > .card-heading { + > .card-header { color: $danger; background-color: $danger-bg; border-color: $danger-bg; @@ -123,13 +123,13 @@ $card-heading-font-size: 16px; } .card-primary, .card-success, .card-info, .card-warning, .card-danger { - .card-heading { + .card-header { color: rgba(255, 255, 255, 0.8); } } .card.bootstrap-card { - .card-body, .card-heading { + .card-body, .card-header { p, div, span { color: $default-text; } @@ -142,7 +142,7 @@ $card-heading-font-size: 16px; &.card-info, &.card-warning, &.card-danger { - .card-heading { + .card-header { p, div, span { color: rgba(255, 255, 255, 0.8); } @@ -151,13 +151,13 @@ $card-heading-font-size: 16px; } .card-group .card.accordion-card { - .card-heading { + .card-header { border-bottom: 0; } } .card-group .card { - .card-heading { + .card-header { border-bottom: 1px solid #ddd; } } diff --git a/src/app/theme/sass/bootstrap-overrides/_tabs.scss b/src/app/theme/sass/bootstrap-overrides/_tabs.scss index 7494d940..ee742cc2 100644 --- a/src/app/theme/sass/bootstrap-overrides/_tabs.scss +++ b/src/app/theme/sass/bootstrap-overrides/_tabs.scss @@ -168,26 +168,26 @@ border: none; } -.panel-primary, .panel-info, .panel-success, .panel-warning, .panel-danger, { - .panel-heading { +.card-primary, .card-info, .card-success, .card-warning, .card-danger, { + .card-header { border-radius: 4px; } - &.panel-open .panel-heading { + &.card-open .card-header { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } - &:not(.panel-open) .panel-heading { + &:not(.card-open) .card-header { transition-delay: .3s; } - > .panel-heading + .panel-collapse > .panel-body { + > .card-header + .card-collapse > .card-body { border-top: none; } } -.accordion-panel .panel-heading { +.accordion-card .card-header { padding: 0; .accordion-toggle { display: inline-block; diff --git a/src/app/theme/sass/bootstrap-overrides/overrides.scss b/src/app/theme/sass/bootstrap-overrides/overrides.scss index d1039fba..5fa66994 100644 --- a/src/app/theme/sass/bootstrap-overrides/overrides.scss +++ b/src/app/theme/sass/bootstrap-overrides/overrides.scss @@ -1,3 +1,3 @@ -@import "panel"; +@import "card"; @import "dropdown"; @import "tabs"; \ No newline at end of file diff --git a/src/app/theme/sass/conf/_mixins.scss b/src/app/theme/sass/conf/_mixins.scss index 643ee919..902579c3 100644 --- a/src/app/theme/sass/conf/_mixins.scss +++ b/src/app/theme/sass/conf/_mixins.scss @@ -96,7 +96,7 @@ p, h1, h2, h3, h4, h5, h6, .pie-chart-item, - .card-heading > .dropdown .dropdown-toggle, + .card-header > .dropdown .dropdown-toggle, .card-title, ol.blur span, ul.blur, From 483852c4068242bf335d565cb0a3ae6930596dc0 Mon Sep 17 00:00:00 2001 From: smartapant Date: Mon, 2 May 2016 16:34:55 +0300 Subject: [PATCH 4/4] Text align css classes. --- src/app/theme/sass/_layout.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/app/theme/sass/_layout.scss b/src/app/theme/sass/_layout.scss index 79bbdbea..7c6beec5 100644 --- a/src/app/theme/sass/_layout.scss +++ b/src/app/theme/sass/_layout.scss @@ -201,4 +201,12 @@ a { .text-right { text-align: right; +} + +.text-left { + text-align: left; +} + +.text-center { + text-align: center; } \ No newline at end of file