commit 6344d8a26d6a1547ab90a09b69776c7c2af5fd8a
parent cd6bb20de2b36fd59bb7c0c856c4c725d15ba076
Author: MTRNord <mtrnord1@gmail.com>
Date: Mon, 12 Feb 2018 22:19:04 +0100
Fix Papers, add "creator card" add Topic navbar for papers
Diffstat:
8 files changed, 142 insertions(+), 38 deletions(-)
diff --git a/package.json b/package.json
@@ -36,6 +36,7 @@
"font-awesome": "^4.7.0",
"hammerjs": "^2.0.8",
"ng-gallery": "^1.0.1",
+ "ngx-avatar": "^2.9.0",
"rxjs": "^5.5.2",
"ts-loader": "^3.5.0",
"web-animations-js": "^2.3.1",
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -1,9 +1,11 @@
import { BrowserModule } from '@angular/platform-browser';
-import {NgModule, NO_ERRORS_SCHEMA} from '@angular/core';
+import {NgModule} from '@angular/core';
import { MDBBootstrapModule } from 'angular-bootstrap-md';
import { ScrollbarModule } from './utils/scrollbar';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {GalleryConfig, GalleryModule} from 'ng-gallery';
+import { AvatarModule } from 'ngx-avatar';
+
import { AppComponent } from './app.component';
@@ -43,10 +45,10 @@ export const config: GalleryConfig = {
ScrollbarModule,
BrowserAnimationsModule,
GalleryModule.forRoot(config),
+ AvatarModule,
],
providers: [
],
- bootstrap: [AppComponent],
- // schemas: [ NO_ERRORS_SCHEMA ]
+ bootstrap: [AppComponent]
})
export class AppModule { }
diff --git a/src/app/paper/paper.component.html b/src/app/paper/paper.component.html
@@ -34,8 +34,55 @@
<!--Main Layout-->
<main class="text-center py-5">
- <div class="container" *ngIf="isBrowser" gallerize>
- <app-tweet-list [data]="chunkedData"></app-tweet-list>
+ <section class="mb-5 mr-5 ml-5">
+ <mdb-navbar *ngIf="isBrowser" SideClass="navbar navbar-expand-lg navbar-light blue-grey lighten-5" [containerInside]="false">
+ <links class="middle">
+ <!-- TODO use *ngFor -->
+ <ul class="navbar-nav mr-auto">
+ <li class="nav-item active waves-light" mdbRippleRadius>
+ <a class="nav-link" routerLinkActive="active">Titelthemen <span class="sr-only">(current)</span></a>
+ </li>
+ <li class="nav-item waves-light" mdbRippleRadius>
+ <a class="nav-link">Fotos</a>
+ </li>
+ <li class="nav-item waves-light" mdbRippleRadius>
+ <a class="nav-link">Videos</a>
+ </li>
+ </ul>
+ </links>
+ </mdb-navbar>
+ </section>
+
+ <div class="container-fluid" *ngIf="isBrowser" gallerize>
+ <div class="row">
+ <div class="col-xl-9">
+ <app-tweet-list [data]="chunkedData"></app-tweet-list>
+ </div>
+ <!--Card-->
+ <div class="col-xl-3">
+ <div class="card testimonial-card" style="max-width: 22rem">
+
+ <!--Background color-->
+ <div class="card-up tblue">
+ </div>
+
+ <!--Avatar-->
+ <div class="avatar">
+ <ngx-avatar twitterId="mtrnord" [round]="true" size="120"></ngx-avatar>
+ </div>
+
+ <div class="card-body">
+ <!--Name-->
+ <h4 class="card-title">MTRNord</h4>
+ <hr>
+ <!--Quotation-->
+ <p><i class="fa fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, adipisci</p>
+ </div>
+
+ </div>
+ <!--/.Card-->
+ </div>
+ </div>
</div>
</main>
diff --git a/src/app/paper/paper.component.ts b/src/app/paper/paper.component.ts
@@ -11,7 +11,7 @@ import {TweetListComponent} from '../tweet-list/tweet-list.component';
export class PaperComponent {
paperTitle = 'Test Paper';
paperSubtitle = 'Something to test';
- testData: Array<object> = [{title: 'Simon Wüllhorst', 'userLink': 'https://twitter.com/des_cilla', text: 'Yaay, neue LTE-Antennen sind da. Es gibt bald endlich wieder schnelles Internet auf dem Dorf. :) #Freifunk', imageURL: 'https://pbs.twimg.com/media/DVmb2UCWsAA8oTD.jpg', createdAt: '09.02.2018', replies: 0, favs: 2, retweets: 1}, {title: 'Jason Scott', retweet: true, 'userLink': 'https://twitter.com/textfiles', imageURL: 'https://pbs.twimg.com/media/DVZ5gw0U0AA_mOu.jpg', createdAt: '07.02.2018', replies: 75, favs: 8003, retweets: 2813}, {title: 'Christian Dresel', 'userLink': 'https://twitter.com/DreselChristian', text: 'Soviel Richtfunk (blaue Linien)... soooo geiiiilllll :) @freifunk @FreifunkFranken #freifunk', imageURL: 'https://pbs.twimg.com/media/DViJcIRX0AAk1TT.jpg:large', createdAt: '08.02.2018', replies: 1, favs: 3, retweets: 0}];
+ private testData: Array<object> = [{title: 'Simon Wüllhorst', 'userLink': 'https://twitter.com/des_cilla', text: 'Yaay, neue LTE-Antennen sind da. Es gibt bald endlich wieder schnelles Internet auf dem Dorf. :) #Freifunk', imageURL: 'https://pbs.twimg.com/media/DVmb2UCWsAA8oTD.jpg', createdAt: '09.02.2018', replies: 0, favs: 2, retweets: 1}, {title: 'Jason Scott', retweet: true, 'userLink': 'https://twitter.com/textfiles', imageURL: 'https://pbs.twimg.com/media/DVZ5gw0U0AA_mOu.jpg', createdAt: '07.02.2018', replies: 75, favs: 8003, retweets: 2813}, {title: 'Christian Dresel', 'userLink': 'https://twitter.com/DreselChristian', text: 'Soviel Richtfunk (blaue Linien)... soooo geiiiilllll :) @freifunk @FreifunkFranken #freifunk', imageURL: 'https://pbs.twimg.com/media/DViJcIRX0AAk1TT.jpg:large', createdAt: '08.02.2018', replies: 1, favs: 3, retweets: 0}];
public chunkedData = this.chunk(this.testData, 3);
isBrowser: boolean;
@@ -19,7 +19,7 @@ export class PaperComponent {
this.isBrowser = isPlatformBrowser(platformId);
}
- chunk(arr, size) {
+ private chunk(arr, size) {
const newArr = [];
for (let i = 0; i < arr.length; i += size) {
newArr.push(arr.slice(i, i + size));
diff --git a/src/app/papers-list/papers-list.component.html b/src/app/papers-list/papers-list.component.html
@@ -1,5 +1,5 @@
<div class="card-deck row" *ngFor="let rows of data">
- <div class="card mx-auto" *ngFor="let item of rows" style="max-width: 33.33%">
+ <div class="card mx-auto" *ngFor="let item of rows" style="max-width: 22rem">
<!--Card image-->
<div class="overlay hm-white-slight waves-light card-img-top" *ngIf="item.logoURL">
<img [src]="item.logoURL" class="img-fluid" style="z-index: 0">
diff --git a/src/app/tweet-list/tweet-list.component.html b/src/app/tweet-list/tweet-list.component.html
@@ -1,33 +1,35 @@
-<div class="card-deck row" *ngFor="let rows of data">
- <div class="card card-cascade" *ngFor="let item of rows">
- <!--Retweet Badge-->
- <div class="card-ribbon card-ribbon-top card-ribbon-left tblue" *ngIf="item.retweet == true">
- <i class="fa fa-retweet"></i>
- </div>
- <!--Card image-->
- <div class="overlay hm-white-slight waves-light card-img-top" *ngIf="item.imageURL">
- <img [src]="item.imageURL" class="img-fluid" style="z-index: 0">
- <a>
- <div class="mask"></div>
- </a>
- </div>
- <!--Card content-->
- <div class="card-body">
- <!--Title when Text exists-->
- <h4 class="card-title text-left" *ngIf="(item.text && item.imageURL) || (item.text && !item.imageURL)"><a href="{{item.userLink}}">{{item.title}}</a></h4>
- <!--Title when no Text exists-->
- <h4 class="card-title align-middle" *ngIf="!item.text || !item.imageURL"><a href="{{item.userLink}}">{{item.title}}</a></h4>
- <!--Text-->
- <p class="card-text text-justify" *ngIf="item.text">{{item.text}}</p>
- </div>
- <!-- Card footer -->
- <div class="card-data">
- <ul>
- <li><i class="fa fa-clock-o"> </i>{{item.createdAt.toLocaleString()}}</li>
- <li><i class="fa fa-comments-o"> </i>{{item.replies.toLocaleString()}}</li>
- <li><i class="fa fa-heart"> </i>{{item.favs.toLocaleString()}}</li>
- <li><i class="fa fa-retweet"> </i>{{item.retweets.toLocaleString()}}</li>
- </ul>
+<div class="row" *ngFor="let rows of data">
+ <div class="card-deck col-md-4" *ngFor="let item of rows">
+ <div class="card card-cascade">
+ <!--Retweet Badge-->
+ <div class="card-ribbon card-ribbon-top card-ribbon-left tblue" *ngIf="item.retweet == true" style="max-width: 22rem">
+ <i class="fa fa-retweet"></i>
+ </div>
+ <!--Card image-->
+ <div class="overlay hm-white-slight waves-light card-img-top" *ngIf="item.imageURL">
+ <img [src]="item.imageURL" class="img-fluid" style="z-index: 0">
+ <a>
+ <div class="mask"></div>
+ </a>
+ </div>
+ <!--Card content-->
+ <div class="card-body">
+ <!--Title when Text exists-->
+ <h4 class="card-title text-left" *ngIf="(item.text && item.imageURL) || (item.text && !item.imageURL)"><a href="{{item.userLink}}">{{item.title}}</a></h4>
+ <!--Title when no Text exists-->
+ <h4 class="card-title align-middle" *ngIf="!item.text || !item.imageURL"><a href="{{item.userLink}}">{{item.title}}</a></h4>
+ <!--Text-->
+ <p class="card-text text-justify" *ngIf="item.text">{{item.text}}</p>
+ </div>
+ <!-- Card footer -->
+ <div class="card-data">
+ <ul>
+ <li><i class="fa fa-clock-o"> </i>{{item.createdAt.toLocaleString()}}</li>
+ <li><i class="fa fa-comments-o"> </i>{{item.replies.toLocaleString()}}</li>
+ <li><i class="fa fa-heart"> </i>{{item.favs.toLocaleString()}}</li>
+ <li><i class="fa fa-retweet"> </i>{{item.retweets.toLocaleString()}}</li>
+ </ul>
+ </div>
</div>
</div>
</div>
diff --git a/src/styles.scss b/src/styles.scss
@@ -133,3 +133,40 @@ html { overflow:auto; }
.card-ribbon.tblue {
background-color: #1da1f2;
}
+
+.indigo.lighten-1 {
+ background-color: #5c6bc0 !important;
+}
+
+.indigo {
+ background-color: #3f51b5 !important;
+}
+
+.testimonial-card .card-up {
+ overflow: hidden;
+ height: 120px;
+ border-radius: .3rem .3rem 0 0;
+}
+
+.testimonial-card .avatar {
+ border-radius: 50%;
+ height: 120px;
+ width: 120px;
+ margin: -65px auto 0;
+ overflow: hidden;
+ border: 5px solid #fff;
+}
+
+.testimonial-card .avatar img {
+ width: 100%;
+}
+
+.testimonial-card .card-body {
+ text-align: center;
+}
+
+.middle {
+ display: inline-block;
+ margin-left: 50%;
+ transform: translateX(-50%);
+}
diff --git a/yarn.lock b/yarn.lock
@@ -3224,6 +3224,10 @@ is-regex@^1.0.4:
dependencies:
has "^1.0.1"
+is-retina@^1.0.3:
+ version "1.0.3"
+ resolved "https://registry.yarnpkg.com/is-retina/-/is-retina-1.0.3.tgz#d7401b286bea2ae37f62477588de504d0b8647e3"
+
is-stream@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
@@ -4023,6 +4027,13 @@ ng-gallery@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/ng-gallery/-/ng-gallery-1.0.1.tgz#a3a90a91bb33b2d0f624d7e1ff12f2425a57b3ce"
+ngx-avatar@^2.9.0:
+ version "2.9.0"
+ resolved "https://registry.yarnpkg.com/ngx-avatar/-/ngx-avatar-2.9.0.tgz#7dbeea19c0ea1657040f52afefb1dfa3c661ff46"
+ dependencies:
+ is-retina "^1.0.3"
+ ts-md5 "^1.2.0"
+
no-case@^2.2.0:
version "2.3.2"
resolved "https://registry.yarnpkg.com/no-case/-/no-case-2.3.2.tgz#60b813396be39b3f1288a4c1ed5d1e7d28b464ac"
@@ -6129,6 +6140,10 @@ ts-loader@^3.5.0:
micromatch "^3.1.4"
semver "^5.0.1"
+ts-md5@^1.2.0:
+ version "1.2.4"
+ resolved "https://registry.yarnpkg.com/ts-md5/-/ts-md5-1.2.4.tgz#7030d7ba9134449deedf6f609d4b4509b94a5712"
+
ts-node@~3.2.0:
version "3.2.2"
resolved "https://registry.yarnpkg.com/ts-node/-/ts-node-3.2.2.tgz#bbd28e38af4aaa3e96076c466e1b220197c1a3ce"
