Skip to content

Commit 872a849

Browse files
IsmaestroIsmael Ramos
Ismaestro
authored and
Ismael Ramos
committed
feat(bem): add bem styles
1 parent ed1f6aa commit 872a849

File tree

11 files changed

+73
-77
lines changed

11 files changed

+73
-77
lines changed

‎README.md‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -58,29 +58,23 @@ npm run docker | Builds the docker image and run the container
5858
## Features
5959

6060
* Responsive layout (flex layout module)
61-
* SASS (most used functions and mixins)
61+
* SASS (most common used functions and mixins) and BEM styles
6262
* Modal and toasts (snakbar)!
63-
6463
* CRUD: create, update and remove heroes
6564
* Search bar, to look for heroes
6665
* Custom loading page
67-
6866
* Angular Pipes
6967
* Interceptors and Events (Progress bar active, if a request is pending)
7068
* Internationalization
7169
* Lazy loading modules
7270
* Service Workers
73-
7471
* Custom [example library](https://github.com/Ismaestro/angular-example-library)
75-
7672
* Modernizr (browser features detection)
7773
* Google Tag Manager
7874
* Github pages deploy ready
79-
8075
* Unit tests with Jasmine and Karma including code coverage
8176
* End-to-end tests with Protractor
8277
* ES6 Promises and Observables
83-
8478
* Following the [best practices](https://angular.io/guide/styleguide)!
8579

8680
## Docker

‎src/app/core/error404/error-404.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
<h1 class="section-title">{{'error404' | translate}}</h1>
1+
<h1 class="header__title">{{'error404' | translate}}</h1>
22
<p class="explanation">{{'mayTheForce' | translate}}</p>
33
<img src="assets/images/404.gif">

‎src/app/core/footer/footer.component.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@
44
<div fxFlex="33">
55
<span>{{ 'angularExampleApp' | translate }} 2018</span>
66
</div>
7-
<div fxFlex="33" class="text-center">
7+
<div fxFlex="33" class="text--center">
88
{{currentDate | date:'fullDate'}}
99
</div>
10-
<div fxFlex class="text-right" class.xs="footer-xs">
10+
<div fxFlex class="text--right" class.xs="footer-xs">
1111
<a href="https://angular.io/" target="_blank"><img src="assets/images/angular.svg"></a>
1212
</div>
1313
</div>

‎src/app/core/nav/nav.component.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<div fxFlex="20" id="today" *ngIf="currentLang">
1010
<sample-component [locale]="currentLang"></sample-component>
1111
</div>
12-
<div fxFlex class="text-right">
12+
<div fxFlex class="text--right">
1313
<app-search-bar></app-search-bar>
1414
<button mat-icon-button [matMenuTriggerFor]="matmenu">
1515
<mat-icon>public</mat-icon>
@@ -40,7 +40,7 @@
4040
</span>
4141
</button>
4242
</mat-menu>
43-
<a class="image-icon" href="{{appConfig.repositoryURL}}" target="_blank">
43+
<a class="icon__image" href="{{appConfig.repositoryURL}}" target="_blank">
4444
<img src="assets/images/github-circle-white-transparent.svg">
4545
</a>
4646
</div>

‎src/app/core/nav/nav.component.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
height: calculateRem(5px);
3232
}
3333

34-
.image-icon {
34+
.icon__image {
3535
width: calculateRem(20px);
3636
height: calculateRem(20px);
3737
}

‎src/app/heroes/hero-detail/hero-detail.component.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
<h1 class="section-title">{{'heroDetail' | translate}}</h1>
1+
<h1 class="header__title">{{'heroDetail' | translate}}</h1>
22
<mat-progress-spinner *ngIf="!hero"
3-
class="progress-spinner"
3+
class="progress__spinner"
44
[color]="'primary'"
55
[mode]="'indeterminate'">
66
</mat-progress-spinner>
77
<div id="heroe-detail" *ngIf="hero">
88
<ng-container>
99
<mat-card class="hero-card">
1010
<mat-card-header>
11-
<div mat-card-avatar class="hero-header-image"
11+
<div mat-card-avatar class="hero-header__image"
1212
[ngStyle]="{'background-image': 'url(https://github.com/assets/images/heroes/'%20+%20hero.id%20+%20'-thumbnail.jpg)'}"></div>
1313
<mat-card-title>{{hero.name}}</mat-card-title>
1414
<mat-card-subtitle>{{hero.alterEgo}}</mat-card-subtitle>
@@ -17,7 +17,7 @@ <h1 class="section-title">{{'heroDetail' | translate}}</h1>
1717
{{hero.likes}}
1818
<mat-icon matTooltip="{{(canVote ? 'canVote' : 'cannotVote') | translate}}"
1919
[matTooltipPosition]="'above'"
20-
class="like-icon" (click)="like(hero)">favorite
20+
class="icon__like--red" (click)="like(hero)">favorite
2121
</mat-icon>
2222
</div>
2323
</mat-card-header>

‎src/app/heroes/hero-list/hero-list.component.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<div id="left">
2-
<h2 class="section-title">{{ 'heroesList' | translate }}</h2>
2+
<h2 class="header__title">{{ 'heroesList' | translate }}</h2>
33
<div>
44
<mat-progress-spinner *ngIf="!heroes"
5-
class="progress-spinner"
5+
class="progress__spinner"
66
[color]="'primary'"
77
[mode]="'indeterminate'">
88
</mat-progress-spinner>
@@ -21,10 +21,10 @@ <h3 mat-line [class.cp]="hero.default" (click)="seeHeroDetails(hero);"> {{hero.n
2121
{{hero.likes | number:'.0'}}
2222
<mat-icon matTooltip="{{(canVote ? 'canVote' : 'cannotVote') | translate}}"
2323
[matTooltipPosition]="'above'"
24-
class="like-icon" (click)="like(hero)">
24+
class="icon__like--red" (click)="like(hero)">
2525
favorite
2626
</mat-icon>
27-
<mat-icon class="remove-icon" *ngIf="!hero.default"
27+
<mat-icon class="icon__remove" *ngIf="!hero.default"
2828
(click)="remove(hero);">
2929
delete
3030
</mat-icon>
@@ -34,7 +34,7 @@ <h3 mat-line [class.cp]="hero.default" (click)="seeHeroDetails(hero);"> {{hero.n
3434
</div>
3535
</div>
3636
<div id="right">
37-
<h2 class="section-title">{{ 'createHero' | translate }}</h2>
37+
<h2 class="header__title">{{ 'createHero' | translate }}</h2>
3838
<div>
3939
<form [formGroup]="newHeroForm" #form="ngForm" (ngSubmit)="createNewHero(newHeroForm.value)">
4040
<mat-input-container class="input-container">
@@ -58,7 +58,7 @@ <h2 class="section-title">{{ 'createHero' | translate }}</h2>
5858
</div>
5959

6060
<div id="heroes-json">
61-
<h2 class="section-title">{{ 'firstTwoHeroesById' | translate }}</h2>
61+
<h2 class="header__title">{{ 'firstTwoHeroesById' | translate }}</h2>
6262
<pre>{{heroes | slice:0:2 | json}}</pre>
6363
</div>
6464
</div>

‎src/app/heroes/hero-list/hero-list.component.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
.hero-actions {
2929
padding-bottom: 0;
3030

31-
.remove-icon {
31+
.icon__remove {
3232
padding-left: 0.5rem;
3333
color: darkslategrey;
3434
cursor: pointer;

‎src/app/heroes/hero-top/hero-top.component.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
<div fxLayout="row">
22
<div fxFlex="10" fxFlex.gt-sm="20"></div>
33
<div fxFlex="90" fxFlex.gt-sm="80">
4-
<h1 class="section-title">{{'topHeroes' | translate}}</h1>
4+
<h1 class="header__title">{{'topHeroes' | translate}}</h1>
55
<mat-progress-spinner *ngIf="!heroes"
6-
class="progress-spinner"
6+
class="progress__spinner"
77
[color]="'primary'"
88
[mode]="'indeterminate'">
99
</mat-progress-spinner>
1010
<div id="heroes-list" *ngIf="heroes">
1111
<ng-container *ngFor="let hero of heroes">
1212
<mat-card class="hero-card">
1313
<mat-card-header>
14-
<div (click)="seeHeroDetails(hero)" mat-card-avatar class="hero-header-image"
14+
<div (click)="seeHeroDetails(hero)" mat-card-avatar class="hero-header__image"
1515
[ngStyle]="{'background-image': 'url(https://github.com/assets/images/heroes/'%20+%20hero.id%20+%20'-thumbnail.jpg)'}"></div>
1616
<mat-card-title (click)="seeHeroDetails(hero)">{{hero.name}}</mat-card-title>
1717
<mat-card-subtitle (click)="seeHeroDetails(hero)">{{hero.alterEgo}}</mat-card-subtitle>
@@ -20,7 +20,7 @@ <h1 class="section-title">{{'topHeroes' | translate}}</h1>
2020
{{hero.likes}}
2121
<mat-icon matTooltip="{{(canVote ? 'canVote' : 'cannotVote') | translate}}"
2222
[matTooltipPosition]="'above'"
23-
class="like-icon" (click)="like(hero)">favorite
23+
class="icon__like--red" (click)="like(hero)">favorite
2424
</mat-icon>
2525
</div>
2626
</mat-card-header>

‎src/app/heroes/hero-top/hero-top.component.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,15 @@
44
margin: 2rem;
55
}
66

7-
.hero-header-image, mat-card-title, mat-card-subtitle, .mat-card-image {
7+
.hero-header__image, mat-card-title, mat-card-subtitle, .mat-card-image {
88
cursor: pointer;
99
}
1010

1111
.hero-card {
1212
@include push--auto(2rem);
1313
}
1414

15-
.progress-spinner {
15+
.progress__spinner {
1616
@include push--auto();
1717
}
1818

0 commit comments

Comments
 (0)