commit d9890240fb437a6974359fd7fb22dc45de980043
parent 718689d91e1d6304946184c1e1576986cd7756a8
Author: MTRNord <mtrnord1@gmail.com>
Date: Sun, 25 Mar 2018 11:29:32 +0200
Make use of angular-material for cards
Diffstat:
6 files changed, 49 insertions(+), 8 deletions(-)
diff --git a/package.json b/package.json
@@ -14,13 +14,14 @@
},
"private": true,
"dependencies": {
- "@angular/animations": "^5.2.8",
- "@angular/cdk": "^5.2.0",
+ "@angular/animations": "^5.2.9",
+ "@angular/cdk": "^5.2.4",
"@angular/common": "^5.0.0",
"@angular/compiler": "^5.0.0",
"@angular/core": "^5.0.0",
"@angular/forms": "^5.0.0",
"@angular/http": "^5.0.0",
+ "@angular/material": "^5.2.4",
"@angular/platform-browser": "^5.0.0",
"@angular/platform-browser-dynamic": "^5.0.0",
"@angular/platform-server": "^5.2.4",
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -11,6 +11,8 @@ import { PaperComponent } from './paper/paper.component';
import { PapersComponent } from './papers/papers.component';
import { TweetListComponent } from './tweet-list/tweet-list.component';
import { PapersListComponent } from './papers-list/papers-list.component';
+import { SpinnerComponent } from './spinner/spinner.component';
+import {MatCardModule} from '@angular/material/card';
import { ApiService } from './api.service';
@@ -18,7 +20,6 @@ import * as Raven from 'raven-js';
import {ToastrModule} from 'ngx-toastr';
import { CardComponent } from './card/card.component';
import {NgHttpLoaderModule} from 'ng-http-loader/ng-http-loader.module';
-import { SpinnerComponent } from './spinner/spinner.component';
Raven
.config('https://b760c9f9035c472998ada3a02dcc81d3@sentry.io/294520', {
environment: 'development',
@@ -55,7 +56,8 @@ export class RavenErrorHandler implements ErrorHandler {
AvatarModule,
HttpClientModule,
NgHttpLoaderModule,
- ToastrModule.forRoot(), // ToastrModule added
+ ToastrModule.forRoot(),
+ MatCardModule,
],
providers: [
ApiService,
diff --git a/src/app/papers-list/papers-list.component.html b/src/app/papers-list/papers-list.component.html
@@ -1,4 +1,22 @@
<spinner spinner="spinner"></spinner>
<div class="grid">
- <app-card *ngFor="let item of data" [title]="item.name" [link]="'/paper/'+item.uuid" [image]="item.paper_image" [text]="item.description"></app-card>
+ <mat-card *ngFor="let item of data" onclick="goTo(['paper', item.uuid])">
+ <mat-card-header>
+ <mat-card-title>{{item.name}}</mat-card-title>
+ </mat-card-header>
+ <a (click)="show(lightboxItem)" >
+ <img mat-card-image *ngIf="item.paper_image" [src]="item.paper_image" class="thumbnail">
+ </a>
+
+ <!-- lightbox container hidden with CSS -->
+ <a (click)="hide(lightboxItem)" class="lightbox" #lightboxItem>
+ <div class="img-wrapper">
+ <img *ngIf="item.paper_image" [src]="item.paper_image">
+ </div>
+ </a>
+ <mat-card-content>
+ {{item.description}}
+ </mat-card-content>
+ </mat-card>
+ <!--<app-card [title]="item.name" [link]="'/paper/'+item.uuid" [image]="item.paper_image" [text]="item.description"></app-card>-->
</div>
diff --git a/src/app/papers-list/papers-list.component.ts b/src/app/papers-list/papers-list.component.ts
@@ -10,6 +10,7 @@ import 'rxjs/add/operator/take';
import 'rxjs/add/operator/concat';
import 'rxjs/add/observable/throw';
import {ToastrService} from 'ngx-toastr';
+import {Router} from '@angular/router';
@Component({
selector: 'app-papers-list',
@@ -19,13 +20,25 @@ import {ToastrService} from 'ngx-toastr';
export class PapersListComponent implements OnInit {
data: (Paper)[];
- constructor(private apiService: ApiService, private toastr: ToastrService) {
+ constructor(private apiService: ApiService, private toastr: ToastrService, private router: Router) {
Raven.captureBreadcrumb({
message: 'Listing Papers',
category: 'papers-list'
});
}
+ goTo(route: string[]) {
+ this.router.navigate(route).catch(err => { throw err; });
+ }
+
+ hide(el) {
+ el.style.display = '';
+ }
+
+ show(el): void {
+ el.style.display = 'block';
+ }
+
ngOnInit() {
this.getPapers();
}
diff --git a/src/styles.scss b/src/styles.scss
@@ -1,6 +1,7 @@
/* You can add global styles to this file, and also import other style files */
html { overflow:auto; }
+@import "~@angular/material/prebuilt-themes/indigo-pink.css";
.container {
margin-left: auto;
diff --git a/yarn.lock b/yarn.lock
@@ -36,13 +36,13 @@
"@ngtools/json-schema" "^1.1.0"
rxjs "^5.5.6"
-"@angular/animations@^5.2.8":
+"@angular/animations@^5.2.9":
version "5.2.9"
resolved "https://registry.yarnpkg.com/@angular/animations/-/animations-5.2.9.tgz#220db9fb5a52a193db0023d721b23ddd25a75770"
dependencies:
tslib "^1.7.1"
-"@angular/cdk@^5.2.0":
+"@angular/cdk@^5.2.4":
version "5.2.4"
resolved "https://registry.yarnpkg.com/@angular/cdk/-/cdk-5.2.4.tgz#c0a429a8710d8fedb157f546e21cb49d4335f7f7"
dependencies:
@@ -156,6 +156,12 @@
version "5.2.9"
resolved "https://registry.yarnpkg.com/@angular/language-service/-/language-service-5.2.9.tgz#4838bb6319c99e8f5beb08bdfb392ee9a1173766"
+"@angular/material@^5.2.4":
+ version "5.2.4"
+ resolved "https://registry.yarnpkg.com/@angular/material/-/material-5.2.4.tgz#9e823798324283d23ea839156fac5bcb73443d55"
+ dependencies:
+ tslib "^1.7.1"
+
"@angular/platform-browser-dynamic@^5.0.0":
version "5.2.9"
resolved "https://registry.yarnpkg.com/@angular/platform-browser-dynamic/-/platform-browser-dynamic-5.2.9.tgz#86075b7bb694861f722ceda29aae186b045c6b7d"
