Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: tomastrajan/angular-ngrx-material-starter
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: v1.2.0
Choose a base ref
...
head repository: tomastrajan/angular-ngrx-material-starter
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: v1.3.0
Choose a head ref
  • 5 commits
  • 14 files changed
  • 1 contributor

Commits on Jul 21, 2017

  1. feat: adjust theme colors

    tomastrajan committed Jul 21, 2017
    Copy the full SHA
    4bc6760 View commit details
  2. Copy the full SHA
    e5168f3 View commit details
  3. Copy the full SHA
    9be673e View commit details
  4. Copy the full SHA
    2e533d5 View commit details
  5. chore(release): 1.3.0

    tomastrajan committed Jul 21, 2017
    Copy the full SHA
    c4fda4b View commit details
16 changes: 16 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -2,6 +2,22 @@

All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.

<a name="1.3.0"></a>
# [1.3.0](https://github.com/tomastrajan/angular-ngrx-material-starter/compare/v1.2.0...v1.3.0) (2017-07-21)


### Bug Fixes

* about screen responsive layout ([9be673e](https://github.com/tomastrajan/angular-ngrx-material-starter/commit/9be673e))


### Features

* add tooltips to todo example ([e5168f3](https://github.com/tomastrajan/angular-ngrx-material-starter/commit/e5168f3))
* adjust theme colors ([4bc6760](https://github.com/tomastrajan/angular-ngrx-material-starter/commit/4bc6760))



<a name="1.2.0"></a>
# [1.2.0](https://github.com/tomastrajan/angular-ngrx-material-starter/compare/v1.1.0...v1.2.0) (2017-07-20)

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "angular-ngrx-material-starter",
"version": "1.2.0",
"version": "1.3.0",
"license": "MIT",
"scripts": {
"ng": "ng",
159 changes: 80 additions & 79 deletions src/app/app.component.html
Original file line number Diff line number Diff line change
@@ -1,92 +1,94 @@
<div [class]="'holder ' + themeClass">

<md-sidenav-container class="sidenav-container">

<md-sidenav #sidenav class="sidenav" mode="push">
<div class="branding"><img [src]="logo" /> <span>Angular Starter</span></div>
<md-nav-list>
<a md-list-item *ngFor="let item of navigation" (click)="sidenav.close()"
[routerLink]="[item.link]" routerLinkActive="active">
{{item.label}}
</a>
</md-nav-list>
</md-sidenav>

<div class="wrapper">

<md-toolbar color="primary" class="toolbar">
<button md-icon-button class="hidden-md-up" (click)="sidenav.open()">
<md-icon>menu</md-icon>
</button>

<span routerLink="" class="branding spacer hidden-md-up text-center"><img [src]="logo" /> Angular Starter</span>
<span routerLink="" class="branding spacer hidden-sm-down"><img [src]="logo" /> Angular ngRx Material Starter</span>

<span class="hidden-sm-down">
<button md-button class="nav-button" *ngFor="let item of navigation" [routerLink]="[item.link]" routerLinkActive="active">
<md-sidenav-container>

<md-sidenav #sidenav mode="push">
<div class="branding"><img [src]="logo"/> <span>Angular Starter</span></div>
<md-nav-list>
<a md-list-item *ngFor="let item of navigation" (click)="sidenav.close()"
[routerLink]="[item.link]" routerLinkActive="active">
{{item.label}}
</a>
</md-nav-list>
</md-sidenav>

<div class="wrapper">

<md-toolbar color="primary">
<button md-icon-button class="hidden-md-up" (click)="sidenav.open()">
<md-icon>menu</md-icon>
</button>

<span routerLink="" class="branding spacer hidden-md-up text-center"><img
[src]="logo"/> Angular Starter</span>
<span routerLink="" class="branding spacer hidden-sm-down"><img
[src]="logo"/> Angular ngRx Material Starter</span>

<span class="hidden-sm-down">
<button md-button class="nav-button" *ngFor="let item of navigation"
[routerLink]="[item.link]" routerLinkActive="active">
{{item.label}}
</button>
</span>

<button md-icon-button [mdMenuTriggerFor]="toolbarMenu">
<md-icon>more_vert</md-icon>
<button md-icon-button [mdMenuTriggerFor]="toolbarMenu">
<md-icon>more_vert</md-icon>
</button>
<md-menu #toolbarMenu="mdMenu">
<button md-menu-item disabled>
<md-icon>person</md-icon>
<span>Manage account</span>
</button>
<md-menu #toolbarMenu="mdMenu">
<button md-menu-item disabled>
<md-icon>person</md-icon>
<span>Manage account</span>
</button>
<button md-menu-item routerLink="settings">
<md-icon>settings</md-icon>
<span>Settings</span>
</button>
<button md-menu-item disabled>
<md-icon>power_settings_new</md-icon>
<span>Logout</span>
</button>
</md-menu>
<button md-menu-item routerLink="settings">
<md-icon>settings</md-icon>
<span>Settings</span>
</button>
<button md-menu-item disabled>
<md-icon>power_settings_new</md-icon>
<span>Logout</span>
</button>
</md-menu>

<a mdTooltip="Project Github Repository"
mdTooltipPosition="before"
md-icon-button class="link" href="https://github.com/tomastrajan/angular-ngrx-material-starter" target="_blank">
<i class="fa fa-github fa-2x"></i>
</a>
<a mdTooltip="Project Github Repository"
mdTooltipPosition="before"
md-icon-button class="link"
href="https://github.com/tomastrajan/angular-ngrx-material-starter"
target="_blank">
<i class="fa fa-github fa-2x"></i>
</a>

</md-toolbar>
</md-toolbar>

<div class="content">
<router-outlet></router-outlet>

<div class="push"></div>

</div>

<div class="footer container-fluid">
<div class="footer">
<div class="row">
<div class="col-sm-12 links">
<a href="https://www.github.com/tomastrajan" target="_blank">
<i class="fa fa-github fa-2x" aria-hidden="true"></i>
<span>Github</span>
</a>
<a href="https://www.medium.com/@tomastrajan" target="_blank">
<i class="fa fa-medium fa-2x" aria-hidden="true"></i>
<span>Medium</span>
</a>
<a href="https://www.twitter.com/tomastrajan" target="_blank">
<i class="fa fa-twitter fa-2x" aria-hidden="true"></i>
<span>Twitter</span>
</a>
<a href="https://www.youtube.com/channel/UC7XgRHIVoqnh3U5Vmly9ofQ" target="_blank">
<i class="fa fa-youtube fa-2x" aria-hidden="true"></i>
<span>Youtube</span>
</a>
<a href="https://www.instagram.com/tomastrajan" target="_blank">
<i class="fa fa-instagram fa-2x" aria-hidden="true"></i>
<span>Instagram</span>
</a>
<a href="https://www.slides.com/tomastrajan" target="_blank">
<i class="fa fa-desktop fa-2x" aria-hidden="true"></i>
<span>Slides</span>
</a>
<a href="https://www.github.com/tomastrajan" target="_blank">
<i class="fa fa-github fa-2x" aria-hidden="true"></i>
<span>Github</span>
</a>
<a href="https://www.medium.com/@tomastrajan" target="_blank">
<i class="fa fa-medium fa-2x" aria-hidden="true"></i>
<span>Medium</span>
</a>
<a href="https://www.twitter.com/tomastrajan" target="_blank">
<i class="fa fa-twitter fa-2x" aria-hidden="true"></i>
<span>Twitter</span>
</a>
<a href="https://www.youtube.com/channel/UC7XgRHIVoqnh3U5Vmly9ofQ"
target="_blank">
<i class="fa fa-youtube fa-2x" aria-hidden="true"></i>
<span>Youtube</span>
</a>
<a href="https://www.instagram.com/tomastrajan" target="_blank">
<i class="fa fa-instagram fa-2x" aria-hidden="true"></i>
<span>Instagram</span>
</a>
<a href="https://www.slides.com/tomastrajan" target="_blank">
<i class="fa fa-desktop fa-2x" aria-hidden="true"></i>
<span>Slides</span>
</a>
</div>
</div>
<div class="row">
@@ -101,7 +103,6 @@
</div>
</div>

</div>

</md-sidenav-container>

</div>
</md-sidenav-container>
139 changes: 67 additions & 72 deletions src/app/app.component.scss
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
@import 'styles-variables';

$footer-height: 140px;

.holder, .sidenav-container {
md-sidenav-container {
height: 100%;
}

.toolbar {
md-toolbar {

.nav-button {
margin: 0 10px 0 0;
@@ -21,95 +19,92 @@ $footer-height: 140px;
}
}

.container {
margin-top: 20px;
md-sidenav {
width: 250px;

.branding {
height: 64px;
padding: 8px 10px;
font-size: 20px;
font-weight: 500;

img {
margin: 0 10px 0 0;
}

span {
position: relative;
top: 3px;
}
}

.mat-nav-list {
padding-top: 0;
}
}

.wrapper {
z-index: -2;
min-height: 100%;
margin-bottom: -$footer-height;
}
.footer,
.push {
height: $footer-height;
}
display: flex;
flex-direction: column;

.footer {
text-align: center;
.content {
flex: 1 0 auto;
}

.row {
padding: 10px 0;
.footer {
padding: 0 15px;
text-align: center;
z-index: 1;

.row {
padding: 10px 0;

.links {
a {
transition: padding 0.5s;
display: inline-block;
padding: 20px 5px;
.links {
a {
transition: padding 0.5s;
display: inline-block;
padding: 20px 5px;

&:hover {
text-decoration: none;
}
&:hover {
text-decoration: none;
}

span {
display: inline-block;
width: 70px;
padding: 0 0 0 5px;
overflow: hidden;
text-align: left;
white-space: nowrap;
transition: width 0.5s;
span {
display: inline-block;
width: 70px;
padding: 0 0 0 5px;
overflow: hidden;
text-align: left;
white-space: nowrap;
transition: width 0.5s;
}
}
}

@media (max-width: map-get($grid-breakpoints, md)) {
a {
padding: 20px;
@media (max-width: map-get($grid-breakpoints, md)) {
a {
padding: 20px;

span {
width: 0;
padding: 0;
span {
width: 0;
padding: 0;
}
}
}
}

@media (max-width: map-get($grid-breakpoints, sm)) {
a {
padding: 20px 5px;
@media (max-width: map-get($grid-breakpoints, sm)) {
a {
padding: 20px 5px;
}
}
}
}

.signature {
a {
float: right;
.signature {
a {
float: right;
}
}
}

}
}

.sidenav {
width: 250px;

.branding {
height: 64px;
padding: 8px 10px;
font-size: 20px;
font-weight: 500;

img {
margin: 0 10px 0 0;
}

span {
position: relative;
top: 3px;
}
}

.mat-nav-list {
padding-top: 0px;
}
}
Loading