Skip to content

Commit a7569db

Browse files
author
Nathan Mc Grath
committed
styling and theming
1 parent 18c7663 commit a7569db

15 files changed

+80
-47
lines changed

‎src/assets/img/coder-dojo-logo.jpg

7.33 KB
Loading

‎src/assets/img/logo.png ‎src/assets/img/coolest-projects-logo.png

File renamed without changes.

‎src/modules/app/app-config.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -21,13 +21,13 @@ export default function AppConfig(
2121
$httpProvider: IHttpProvider
2222
): void {
2323
$stateProvider.state(appState);
24-
$mdThemingProvider.definePalette('Big-Bin-Tipp-Palette', {
24+
$mdThemingProvider.definePalette('Coolest-Projects-Palette', {
2525
'50': '#d0ebff',
2626
'100': '#84cbff',
2727
'200': '#4cb3ff',
2828
'300': '#0495ff',
2929
'400': '#0084e5',
30-
'500': '#0072c6',
30+
'500': '#000000',
3131
'600': '#0060a7',
3232
'700': '#004f89',
3333
'800': '#003d6a',
@@ -39,7 +39,7 @@ export default function AppConfig(
3939
'contrastDefaultColor': 'light',
4040
'contrastDarkColors': '50 100 200 A100 A200'
4141
});
42-
$mdThemingProvider.theme('default').primaryPalette('Big-Bin-Tipp-Palette');
42+
$mdThemingProvider.theme('default').primaryPalette('Coolest-Projects-Palette');
4343
$mdDateLocaleProvider.formatDate = function(date: Date): string {
4444
return moment(date).format('L');
4545
};

‎src/modules/app/app-template.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<div id="app">
22
<div ui-view="sidenav"></div>
33
<div ui-view="toolbar"></div>
4-
<md-content layout="column" layout-padding>
4+
<md-content layout="column" layout-margin>
55
<div ui-view="content"></div>
66
</md-content>
77
</div>

‎src/modules/nav/sidenav/sidenav-template.html

+36-27
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,38 @@
1-
<md-sidenav md-component-id="sidenav" class="md-sidenav-left">
2-
<md-list>
3-
4-
<!-- Home -->
5-
<md-list-item md-ink-ripple ng-click="sidenavCtrl.goToHomeState()">
6-
<div class="md-list-item-text" flex><h4>Home</h4></div>
7-
<md-icon md-font-icon="material-icons">home</md-icon>
8-
<md-divider></md-divider>
9-
</md-list-item>
10-
<!-- /Home -->
11-
12-
<!-- Speakers -->
13-
<md-list-item md-ink-ripple ng-click="sidenavCtrl.goToSpeakersState()">
14-
<div class="md-list-item-text" flex><h4>Speakers</h4></div>
15-
<md-icon md-font-icon="material-icons">people</md-icon>
16-
<md-divider></md-divider>
17-
</md-list-item>
18-
<!-- /Speakers -->
19-
20-
<!-- Projects -->
21-
<md-list-item md-ink-ripple ng-click="sidenavCtrl.goToProjectsState()">
22-
<div class="md-list-item-text" flex><h4>Projects</h4></div>
23-
<md-icon md-font-icon="material-icons">videogame_asset</md-icon>
24-
<md-divider></md-divider>
25-
</md-list-item>
26-
<!-- /Projects -->
1+
<md-sidenav
2+
class="md-sidenav-left coolest-projects-sidenav background-black text-white"
3+
layout="column"
4+
md-component-id="sidenav"
5+
md-disable-backdrop="true"
6+
md-whiteframe="10">
7+
8+
<md-list>
9+
<!-- Home -->
10+
<md-list-item md-ink-ripple ng-click="sidenavCtrl.goToHomeState()">
11+
<div class="md-list-item-text" flex><h4>Home</h4></div>
12+
<md-icon md-font-icon="material-icons" class="text-white">home</md-icon>
13+
<md-divider class="background-white"></md-divider>
14+
</md-list-item>
15+
<!-- /Home -->
16+
17+
<!-- Speakers -->
18+
<md-list-item md-ink-ripple ng-click="sidenavCtrl.goToSpeakersState()">
19+
<div class="md-list-item-text" flex><h4>Speakers</h4></div>
20+
<md-icon md-font-icon="material-icons" class="text-white">people</md-icon>
21+
<md-divider class="background-white"></md-divider>
22+
</md-list-item>
23+
<!-- /Speakers -->
24+
25+
<!-- Projects -->
26+
<md-list-item md-ink-ripple ng-click="sidenavCtrl.goToProjectsState()">
27+
<div class="md-list-item-text" flex><h4>Projects</h4></div>
28+
<md-icon md-font-icon="material-icons" class="text-white">videogame_asset</md-icon>
29+
<md-divider class="background-white"></md-divider>
30+
</md-list-item>
31+
<!-- /Projects -->
32+
</md-list>
33+
34+
<span flex layout-align="start end" layout-margin layout="row">
35+
<img class="img-responsive" src="../../../assets/img/coder-dojo-logo.jpg" alt="">
36+
</span>
2737

28-
</md-list>
2938
</md-sidenav>

‎src/modules/nav/toolbar/toolbar-template.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
</span>
1212

1313
<span flex layout-align="center center" layout="row">
14-
<img src="../../../assets/img/logo.png" alt="">
14+
<img src="../../../assets/img/coolest-projects-logo.png" alt="">
1515
</span>
1616

1717
<span flex="15"></span>

‎src/modules/projects/projects-controller.ts

-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ export default class ProjectsController {
1818
this.projectsService.getAll()
1919
.then((res: IHttpPromiseCallbackArg<IProject[]>) => {
2020
this.projects = res.data;
21-
console.log('Projects', this.projects);
2221
});
2322
}
2423

‎src/modules/projects/projects-template.html

+2-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22

33
<span ng-repeat="project in projectsCtrl.projects"
44
layout="row" layout-align="center" flex >
5-
<md-card flex flex-gt-xs="75" flex-gt-sm="50" flex-gt-md="33" class="project-card">
5+
<md-card md-whiteframe="7"
6+
flex flex-gt-xs="75" flex-gt-sm="50" flex-gt-md="33" class="project-card">
67

78
<md-card-title>
89
<md-card-title-text layout="row" layout-align="center">

‎src/modules/speakers/speakers-controller.ts

-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ export default class SpeakersController {
1818
this.speakersService.getAll()
1919
.then((res: IHttpPromiseCallbackArg<ISpeaker[]>) => {
2020
this.speakers = res.data;
21-
console.log('Speakers', this.speakers);
2221
});
2322
}
2423

‎src/modules/speakers/speakers-template.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
<div layout="column" flex-xs flex-gt-xs="75" flex-gt-sm="50" flex-gt-md="33">
44

5-
<md-card ng-repeat="speaker in speakersCtrl.speakers">
5+
<md-card md-whiteframe="7" ng-repeat="speaker in speakersCtrl.speakers">
66

77
<span hide show-xs>
88
<img ng-src="{{speaker.photoUrl}}" class="md-card-image">

‎src/styles/_color-utilities.scss

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
.text-grey {
2+
color: grey;
3+
}
4+
5+
.text-white {
6+
color: white;
7+
}
8+
9+
.text-yellow {
10+
color: $coolestProjectsYellow;
11+
}
12+
13+
.background-black {
14+
background-color: black;
15+
}
16+
17+
.background-white {
18+
background-color: white;
19+
}
20+
21+
.coolest-projects-sidenav {
22+
md-list-item {
23+
&:hover {
24+
@extend .text-yellow;
25+
md-icon {
26+
@extend .text-yellow;
27+
}
28+
}
29+
}
30+
}

‎src/styles/_colors.scss

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
2+
$coolestProjectsYellow: #F9E920;

‎src/styles/_index.scss

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11

22
@import 'angular';
33
@import 'angular-material';
4-
@import 'responsive-utilities';
4+
@import 'colors';
55
@import 'typography';
6+
@import 'color-utilities';
7+
@import 'responsive-utilities';

‎src/styles/_typography.scss

-9
Original file line numberDiff line numberDiff line change
@@ -29,15 +29,6 @@ html {
2929
text-align: left;
3030
}
3131

32-
33-
/**
34-
* Color
35-
*/
36-
37-
.text-grey {
38-
color: grey;
39-
}
40-
4132
/**
4233
* Weight
4334
*/

‎webpack.config.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ module.exports = {
3030
{ test: /\.ts$/, loader: 'babel?presets[]=es2015!ts!tslint' },
3131
{ test: /\.css$/, loader: 'style!css!postcss' },
3232
{ test: /\.scss$/, loader: 'style!css!postcss!sass' },
33-
{ test: /\.(gpg|jpeg|png|gif|svg)$/i, loader:'file' },
33+
{ test: /\.(jpg|jpeg|png|gif|svg)$/i, loader:'file' },
3434
{ test : /\.(otf|eot|svg|ttf|woff|woff2)/i, loader : 'file' }
3535
],
3636
postcss: [

0 commit comments

Comments
 (0)