From 65b9d7e537fde214a70f8b9e93423568aa2fd02b Mon Sep 17 00:00:00 2001 From: smartapant Date: Thu, 21 Apr 2016 20:34:07 +0300 Subject: [PATCH] Nested pages/dashboard route. --- src/app/app.component.ts | 65 +-------- src/app/app.scss | 1 + .../pages/dashboard/dashboard.component.ts | 26 +++- src/app/pages/dashboard/dashboard.scss | 23 ++++ src/app/pages/dashboard/index.ts | 4 +- src/app/pages/index.ts | 4 +- src/app/pages/pages.component.ts | 26 ++++ src/app/theme/conf/sass/_colorScheme.scss | 23 ++++ src/app/theme/conf/sass/_mixins.scss | 128 ++++++++++++++++++ src/app/theme/conf/sass/_variables.scss | 59 ++++++++ src/app/theme/conf/sass/conf.scss | 3 + 11 files changed, 296 insertions(+), 66 deletions(-) create mode 100644 src/app/pages/dashboard/dashboard.scss create mode 100644 src/app/theme/conf/sass/_colorScheme.scss create mode 100644 src/app/theme/conf/sass/_mixins.scss create mode 100644 src/app/theme/conf/sass/_variables.scss create mode 100644 src/app/theme/conf/sass/conf.scss diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 086819c1..7f3fb26b 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -5,6 +5,7 @@ import {Component, ViewEncapsulation} from 'angular2/core'; import {RouteConfig, Router} from 'angular2/router'; import {Home} from './home'; +import {Pages} from './pages'; import {AppState} from './app.service'; import {RouterActive} from './router-active'; @@ -21,76 +22,24 @@ import {RouterActive} from './router-active'; styles: [ require('normalize.css'), require('./app.scss') ], template: `
- - {{ name }} - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
- - 
this.appState.state = {{ appState.state | json }}
` }) @RouteConfig([ - { path: '/', name: 'Index', component: Home, useAsDefault: true }, - { path: '/home', name: 'Home', component: Home }, - // Async load a component using Webpack's require with es6-promise-loader and webpack `require` - { path: '/about', name: 'About', loader: () => require('es6-promise!./about')('About') } + { + path: '/pages/...', + name: 'Pages', + component: Pages, + useAsDefault: true + }, ]) export class App { angularclassLogo = 'assets/img/angularclass-avatar.png'; diff --git a/src/app/app.scss b/src/app/app.scss index e69de29b..b472a70c 100644 --- a/src/app/app.scss +++ b/src/app/app.scss @@ -0,0 +1 @@ +@import 'theme/conf/sass/conf'; \ No newline at end of file diff --git a/src/app/pages/dashboard/dashboard.component.ts b/src/app/pages/dashboard/dashboard.component.ts index 12b54c23..4f3e26b0 100644 --- a/src/app/pages/dashboard/dashboard.component.ts +++ b/src/app/pages/dashboard/dashboard.component.ts @@ -1,3 +1,25 @@ -/** - * Created by Andrey_Grabowsky on 20.04.16. +/* + * Angular 2 decorators and services */ +import {Component, ViewEncapsulation} from 'angular2/core'; +/* + * App Component + * Top Level Component + */ +@Component({ + selector: 'dashboard', + pipes: [ ], + providers: [ ], + encapsulation: ViewEncapsulation.None, + styles: [require('./dashboard.scss') ], + template: 'DASHBOARD' +}) +export class Dashboard { + + constructor() {} + + ngOnInit() { + console.log('DASHBOARD'); + } + +} \ No newline at end of file diff --git a/src/app/pages/dashboard/dashboard.scss b/src/app/pages/dashboard/dashboard.scss new file mode 100644 index 00000000..592a94bb --- /dev/null +++ b/src/app/pages/dashboard/dashboard.scss @@ -0,0 +1,23 @@ +@media screen and (min-width: 1620px) { + .row.shift-up { + > div { + margin-top: -573px; + } + } +} + +@media screen and (max-width: 1620px) { + .panel.feed-panel.large-panel { + height: 824px; + } +} + +.user-stats-panel { + .panel-title { + padding: 0 0 15px; + } +} + +.blurCalendar{ + height: 475px; +} \ No newline at end of file diff --git a/src/app/pages/dashboard/index.ts b/src/app/pages/dashboard/index.ts index 12b54c23..28b29961 100644 --- a/src/app/pages/dashboard/index.ts +++ b/src/app/pages/dashboard/index.ts @@ -1,3 +1 @@ -/** - * Created by Andrey_Grabowsky on 20.04.16. - */ +export * from './dashboard.component'; diff --git a/src/app/pages/index.ts b/src/app/pages/index.ts index 12b54c23..46a8c541 100644 --- a/src/app/pages/index.ts +++ b/src/app/pages/index.ts @@ -1,3 +1 @@ -/** - * Created by Andrey_Grabowsky on 20.04.16. - */ +export * from './pages.component'; \ No newline at end of file diff --git a/src/app/pages/pages.component.ts b/src/app/pages/pages.component.ts index e69de29b..aa779746 100644 --- a/src/app/pages/pages.component.ts +++ b/src/app/pages/pages.component.ts @@ -0,0 +1,26 @@ +import {Component, ViewEncapsulation} from 'angular2/core'; +import {RouteConfig, Router} from 'angular2/router'; + +import {Dashboard} from './dashboard'; + +/* + * App Component + * Top Level Component + */ +@Component({ + selector: 'pages', + encapsulation: ViewEncapsulation.None, + styles: [], + template: `` +}) +@RouteConfig([ + { path: '/dashboard', name: 'Dashboard', component: Dashboard, useAsDefault: true }, +]) +export class Pages { + constructor() {} + + ngOnInit() { + console.log('Pages'); + } + +} \ No newline at end of file diff --git a/src/app/theme/conf/sass/_colorScheme.scss b/src/app/theme/conf/sass/_colorScheme.scss new file mode 100644 index 00000000..eb75f8e1 --- /dev/null +++ b/src/app/theme/conf/sass/_colorScheme.scss @@ -0,0 +1,23 @@ +$primary: #209e91 !default; +$info: #2dacd1 !default; +$success: #90b900 !default; +$warning: #dfb81c !default; +$danger: #e85656 !default; + +$primary-light: tint($primary, 30%); +$info-light: tint($info, 30%); +$success-light: tint($success, 30%); +$warning-light: tint($warning, 30%); +$danger-light: tint($danger, 30%); + +$primary-dark: shade($primary, 15%); +$info-dark: shade($info, 15%); +$success-dark: shade($success, 15%); +$warning-dark: shade($warning, 15%); +$danger-dark: shade($danger, 15%); + +$primary-bg: tint($primary, 20%); +$info-bg: tint($info, 20%); +$success-bg: tint($success, 20%); +$warning-bg: tint($warning, 20%); +$danger-bg: tint($danger, 20%); diff --git a/src/app/theme/conf/sass/_mixins.scss b/src/app/theme/conf/sass/_mixins.scss new file mode 100644 index 00000000..bf34aae7 --- /dev/null +++ b/src/app/theme/conf/sass/_mixins.scss @@ -0,0 +1,128 @@ +/// Slightly lighten a color +/// @access public +/// @param {Color} $color - color to tint +/// @param {Number} $percentage - percentage of `$color` in returned color +/// @return {Color} +@function tint($color, $percentage) { + @return mix(white, $color, $percentage); +} + +/// Slightly darken a color +/// @access public +/// @param {Color} $color - color to shade +/// @param {Number} $percentage - percentage of `$color` in returned color +/// @return {Color} +@function shade($color, $percentage) { + @return mix(black, $color, $percentage); +} + +@mixin scrollbars($size, $foreground-color, $background-color: mix($foreground-color, white, 50%)) { + ::-webkit-scrollbar { + width: $size; + height: $size; + } + + ::-webkit-scrollbar-thumb { + background: $foreground-color; + cursor: pointer; + } + + ::-webkit-scrollbar-track { + background: $background-color; + } + + // For Internet Explorer + body { + scrollbar-face-color: $foreground-color; + scrollbar-track-color: $background-color; + } +} + +@mixin bg-nr($relativeUrl) { + background: url($images-root + $relativeUrl) no-repeat 0 0; +} +@mixin bg($relativeUrl) { + background: url($images-root + $relativeUrl); +} + +@mixin bg-image($relativeUrl) { + background-image: url($images-root + $relativeUrl); +} + +@mixin main-background() { + $mainBgUrl: $images-root + 'blur-bg.jpg'; + + &::before { + content: ''; + position: fixed; + width: 100%; + height: 100%; + top: 0; + left: 0; + background: url($mainBgUrl) no-repeat center center; + background-size: cover; + will-change: transform; + z-index: -1; + } +} + +@mixin bg-translucent-dark($opacity) { + background: rgba(0, 0, 0, $opacity); +} + +@mixin placeholderStyle($color, $opacity) { + &::-webkit-input-placeholder { + color: $color; + opacity: $opacity; + } + &:-moz-placeholder { + /* Firefox 18- */ + color: $color; + opacity: $opacity; + } + &::-moz-placeholder { + /* Firefox 19+ */ + color: $color; + opacity: $opacity; + } + &:-ms-input-placeholder { + color: $color; + opacity: $opacity; + } +} + +@mixin overrideColors($color) { + p, + h1,h2,h3,h4,h5,h6, + .pie-chart-item, + .panel-heading>.dropdown .dropdown-toggle, + .panel-title, + ol.blur span, + ul.blur, + .popular-app-cost, + .popular-app-info, + .panel-title>.small, + .panel-title>.small>a, + .panel-title>a, + .panel-title>small, + .panel-title>small>a, + .traffic-text span, + .form-group label, + .help-block{ + color: $color; + } + .feed-message .message-time, .text-muted { + color: darken($color, 20); + } +} + +@mixin overridePanelBg($color, $borderColor, $dropdownColor) { + .panel.panel-blur, .panel.panel-blur:hover { + border-color: $borderColor; + background-color: $color; + } + + .progress { + background: $color; + } +} \ No newline at end of file diff --git a/src/app/theme/conf/sass/_variables.scss b/src/app/theme/conf/sass/_variables.scss new file mode 100644 index 00000000..5806bded --- /dev/null +++ b/src/app/theme/conf/sass/_variables.scss @@ -0,0 +1,59 @@ +$font-family: 'Roboto', sans-serif; + +$view-total :rgba(0,0,0,.4); + +$activelink: $primary; +$hoverlink: $primary-dark; + +$default: #ffffff !default; + +$facebook-color: #3b5998; +$twitter-color: #55acee; +$google-color: #dd4b39; +$linkedin-color: #0177B5; +$github-color: #6b6b6b; +$stackoverflow-color: #2F96E8; +$dribble-color: #F26798; +$behace-color: #0093FA; + +$panel-bg: #f8f8f8; +$panel-bg-hover: #fff; + +$disabled: #bdbdbd; +$disabled-bg: #e6e6e6; + +$default-text: #7b7b7b; +$help-text: #949494; + +$border: #dddddd; +$border-light: #eeeeee; +$input-border: #cccccc; + +$resXXL: 1280px; +$resXL: 1170px; +$resL: 991px; +$resM: 768px; +$resS: 660px; +$resXS: 500px; +$resXXS: 435px; +$resMin: 320px; + +$top-height: 66px; + +$small-panel-height: 114px; +$xsmall-panel-height: 187px; +$medium-panel-height: 400px; +$extra-medium-panel-height: 550px; +$large-panel-height: 974px; + +$default-animation-duration: 0.2s; +$default-animation-style: ease-out; + +$assets-root: '../assets/'; +$images-root: $assets-root + 'img/'; +$fonts-root: $assets-root + 'fonts/'; +$font-thin: 100; +$font-light: 300; +$font-normal: 400; +$font-bold: 700; +$font-ultraBold: 900; \ No newline at end of file diff --git a/src/app/theme/conf/sass/conf.scss b/src/app/theme/conf/sass/conf.scss new file mode 100644 index 00000000..315617f8 --- /dev/null +++ b/src/app/theme/conf/sass/conf.scss @@ -0,0 +1,3 @@ +@import 'mixins'; +@import 'colorScheme'; +@import 'variables'; \ No newline at end of file