Skip to content
This repository was archived by the owner on Sep 21, 2018. It is now read-only.

Commit 33b090d

Browse files
krjordankrjordan
committed
refactor(styles): refactor and polish styling
1 parent c266c60 commit 33b090d

File tree

6 files changed

+42
-17
lines changed

6 files changed

+42
-17
lines changed

‎src/app/components/book-detail.ts‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import { Book } from '../models/book';
1717
<md-card-footer class="footer">
1818
<bc-book-authors [book]="book"></bc-book-authors>
1919
</md-card-footer>
20-
<md-card-actions align="end">
20+
<md-card-actions align="start">
2121
<button md-raised-button color="warn" *ngIf="inCollection" (click)="remove.emit(book)">
2222
Remove Book from Collection
2323
</button>
@@ -38,24 +38,23 @@ import { Book } from '../models/book';
3838
md-card {
3939
max-width: 600px;
4040
}
41-
md-card-title {
42-
margin-left: 10px;
41+
md-card-title-group {
42+
margin-left: 0;
4343
}
4444
img {
4545
width: 60px;
4646
min-width: 60px;
4747
margin-left: 5px;
4848
}
4949
md-card-content {
50-
margin-top: 15px;
51-
margin-bottom: 125px;
50+
margin: 15px 0 50px;
5251
}
5352
md-card-actions {
54-
margin-bottom: 0 !important;
55-
margin-right: 0;
53+
margin: 25px 0 0 !important;
5654
}
5755
md-card-footer {
5856
padding: 0 25px 25px;
57+
position: relative;
5958
}
6059
`]
6160
})

‎src/app/components/book-preview.ts‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ import { Book } from '../models/book';
99
<md-card>
1010
<md-card-title-group>
1111
<img md-card-sm-image *ngIf="thumbnail" [src]="thumbnail"/>
12-
<md-card-title>{{ title }}</md-card-title>
13-
<md-card-subtitle *ngIf="subtitle">{{ subtitle }}</md-card-subtitle>
12+
<md-card-title>{{ title | bcEllipsis:35 }}</md-card-title>
13+
<md-card-subtitle *ngIf="subtitle">{{ subtitle | bcEllipsis:40 }}</md-card-subtitle>
1414
</md-card-title-group>
1515
<md-card-content>
1616
<p *ngIf="description">{{ description | bcEllipsis }}</p>
@@ -27,9 +27,20 @@ import { Book } from '../models/book';
2727
height: 300px;
2828
margin: 15px;
2929
}
30+
@media only screen and (max-width: 768px) {
31+
md-card {
32+
margin: 15px 0 !important;
33+
}
34+
}
35+
md-card:hover {
36+
box-shadow: 3px 3px 16px -2px rgba(0, 0, 0, .5);
37+
}
3038
md-card-title {
3139
margin-right: 10px;
3240
}
41+
md-card-title-group {
42+
margin: 0;
43+
}
3344
a {
3445
color: inherit;
3546
text-decoration: none;
@@ -41,6 +52,7 @@ import { Book } from '../models/book';
4152
}
4253
md-card-content {
4354
margin-top: 15px;
55+
margin: 15px 0 0;
4456
}
4557
span {
4658
display: inline-block;

‎src/app/pipes/ellipsis.spec.ts‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ import { EllipsisPipe } from './ellipsis';
22

33
describe('Pipe: Ellipsis', () => {
44
let pipe: EllipsisPipe;
5-
let longStr: string = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam ab similique, odio sit harum laborum rem, nesciunt atque iure a pariatur nam nihil dolore necessitatibus quos ea autem accusantium dolor voluptates voluptatibus. Doloribus libero, facilis ea nam quibusdam aut labore itaque aliquid, optio. Rerum, dolorum! Error ratione tempore nesciunt magnam reprehenderit earum tempora aliquam laborum consectetur repellendus, nam hic maiores, qui corrupti saepe possimus, velit impedit eveniet totam. Aliquid qui corrupti facere. Alias itaque pariatur aliquam, nemo praesentium. Iure delectus, nemo natus! Libero ducimus aspernatur laborum voluptatibus officiis eaque enim minus accusamus, harum facilis sed eum! Sit vero vitae voluptatibus deleniti, corporis deserunt? Optio reprehenderit quae nesciunt minus at, sint fuga impedit, laborum praesentium illo nisi natus quia illum obcaecati id error suscipit eaque! Sed quam, ab dolorum qui sit dolorem fuga laudantium est, voluptas sequi consequuntur dolores animi veritatis doloremque at placeat maxime suscipit provident? Mollitia deserunt repudiandae illo. Similique voluptatem repudiandae possimus veritatis amet incidunt alias, debitis eveniet voluptate magnam consequatur eum molestiae provident est dicta. A autem praesentium voluptas, quis itaque doloremque quidem debitis? Ex qui, corporis voluptatibus assumenda necessitatibus accusamus earum rem cum quidem quasi! Porro assumenda, modi. Voluptatibus enim dignissimos fugit voluptas hic ducimus ullam, minus. Soluta architecto ratione, accusamus vitae eligendi explicabo beatae reprehenderit. Officiis voluptatibus dignissimos cum magni! Deleniti fuga reiciendis, ab dicta quasi impedit voluptatibus earum ratione inventore cum voluptas eligendi vel ut tenetur numquam, alias praesentium iusto asperiores, ipsa. Odit a ea, quaerat culpa dolore veritatis mollitia veniam quidem, velit, natus sint at.';
6-
let shortStr: string = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam ab similique, odio sit harum laborum rem, nesciunt atque iure a pariatur nam nihil dolore necessitatibus quos ea autem accusantium dolor voluptates voluptatibus. Doloribus libero, fa';
5+
const longStr: string = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam ab similique, odio sit harum laborum rem, nesciunt atque iure a pariatur nam nihil dolore necessitatibus quos ea autem accusantium dolor voluptates voluptatibus. Doloribus libero, facilis ea nam quibusdam aut labore itaque aliquid, optio. Rerum, dolorum! Error ratione tempore nesciunt magnam reprehenderit earum tempora aliquam laborum consectetur repellendus, nam hic maiores, qui corrupti saepe possimus, velit impedit eveniet totam. Aliquid qui corrupti facere. Alias itaque pariatur aliquam, nemo praesentium. Iure delectus, nemo natus! Libero ducimus aspernatur laborum voluptatibus officiis eaque enim minus accusamus, harum facilis sed eum! Sit vero vitae voluptatibus deleniti, corporis deserunt? Optio reprehenderit quae nesciunt minus at, sint fuga impedit, laborum praesentium illo nisi natus quia illum obcaecati id error suscipit eaque! Sed quam, ab dolorum qui sit dolorem fuga laudantium est, voluptas sequi consequuntur dolores animi veritatis doloremque at placeat maxime suscipit provident? Mollitia deserunt repudiandae illo. Similique voluptatem repudiandae possimus veritatis amet incidunt alias, debitis eveniet voluptate magnam consequatur eum molestiae provident est dicta. A autem praesentium voluptas, quis itaque doloremque quidem debitis? Ex qui, corporis voluptatibus assumenda necessitatibus accusamus earum rem cum quidem quasi! Porro assumenda, modi. Voluptatibus enim dignissimos fugit voluptas hic ducimus ullam, minus. Soluta architecto ratione, accusamus vitae eligendi explicabo beatae reprehenderit. Officiis voluptatibus dignissimos cum magni! Deleniti fuga reiciendis, ab dicta quasi impedit voluptatibus earum ratione inventore cum voluptas eligendi vel ut tenetur numquam, alias praesentium iusto asperiores, ipsa. Odit a ea, quaerat culpa dolore veritatis mollitia veniam quidem, velit, natus sint at.';
6+
77
beforeEach(() => {
88
pipe = new EllipsisPipe();
99
});
@@ -12,7 +12,11 @@ describe('Pipe: Ellipsis', () => {
1212
expect(pipe.transform('string')).toEqual('string');
1313
});
1414

15-
it('should return the up to 250 characters followed by an ellipsis', () => {
16-
expect(pipe.transform(longStr)).toEqual(`${shortStr}...`);
15+
it('should return up to 250 characters followed by an ellipsis', () => {
16+
expect(pipe.transform(longStr)).toEqual(`${longStr.substr(0, 250)}...`);
17+
});
18+
19+
it('should return only 20 characters followed by an ellipsis', () => {
20+
expect(pipe.transform(longStr, 20)).toEqual(`${longStr.substr(0, 20)}...`);
1721
});
1822
});

‎src/app/pipes/ellipsis.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@ import { Pipe } from '@angular/core';
33

44
@Pipe({ name: 'bcEllipsis' })
55
export class EllipsisPipe {
6-
transform(str: string) {
6+
transform(str: string, strLength: number = 250) {
77
const withoutHtml = str.replace(/(<([^>]+)>)/ig, '');
88

9-
if (str.length >= 250) {
10-
return withoutHtml.slice(0, 250) + '...';
9+
if (str.length >= strLength) {
10+
return `${withoutHtml.slice(0, strLength)}...`;
1111
}
1212

1313
return withoutHtml;

‎src/styles.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,12 @@
11
/* You can add global styles to this file, and also import other style files */
22
@import "~@angular/material/core/theming/prebuilt/deeppurple-amber.css";
3+
4+
* {
5+
box-sizing: border-box;
6+
}
7+
8+
html {
9+
-webkit-font-smoothing: antialiased;
10+
-ms-overflow-style: none;
11+
overflow: auto;
12+
}

‎yarn.lock‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@
9494
version "2.4.7"
9595
resolved "https://registry.npmjs.org/@angular/http/-/http-2.4.7.tgz#b024b2b49ae0234258d42309e46f65862a42070d"
9696

97-
"@angular/material@^2.0.0-beta.2":
97+
"@angular/material@2.0.0-beta.2":
9898
version "2.0.0-beta.2"
9999
resolved "https://registry.npmjs.org/@angular/material/-/material-2.0.0-beta.2.tgz#65ee8733990347b7518b7f42113e02e069dc109b"
100100

0 commit comments

Comments
 (0)