Fix and improve feed

- Fix duplicated posts getting displayed in top sort due to pagination
- Move the vote buttons to the right on the mobile layout
- Change the activity text to italic on the mobile layout
- Scale the buttons in the mobile layout larger
master
trivernis 5 years ago
parent 2c7e6b495e
commit ecb3d924ed

@ -21,11 +21,4 @@ describe('AppComponent', () => {
const app = fixture.debugElement.componentInstance; const app = fixture.debugElement.componentInstance;
expect(app.title).toEqual('greenvironment'); expect(app.title).toEqual('greenvironment');
}); });
it('should render title in a h1 tag', () => {
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
const compiled = fixture.debugElement.nativeElement;
expect(compiled.querySelector('h1').textContent).toContain('Welcome to greenvironment!');
});
}); });

@ -1,6 +1,6 @@
<mat-card class="post" *ngFor="let post of childPostList" [class.selected]="post === selectedPost" tabindex="0"> <mat-card class="post" *ngFor="let post of childPostList" [class.selected]="post === selectedPost" tabindex="0">
<mat-card-header> <mat-card-header>
<div mat-card-avatar> <div mat-card-avatar (click)="showUserProfile(this.post)">
<img class="profile-picture" [src]="post.author.profilePicture"/> <img class="profile-picture" [src]="post.author.profilePicture"/>
</div> </div>
<div id="button-box"> <div id="button-box">
@ -14,7 +14,7 @@
</mat-menu> </mat-menu>
</div> </div>
<mat-card-title> <mat-card-title>
{{post.author.name}} <span class="postlistUsername" (click)="showUserProfile(this.post)">{{post.author.name}}</span>
<a class="mat-card-subtitle" (click)="showUserProfile(this.post)">@{{post.author.handle}}</a> <a class="mat-card-subtitle" (click)="showUserProfile(this.post)">@{{post.author.handle}}</a>
<p class="mat-card-subtitle">&nbsp; {{post.date}}</p> <p class="mat-card-subtitle">&nbsp; {{post.date}}</p>
</mat-card-title> </mat-card-title>
@ -25,17 +25,24 @@
<p [innerHTML]="post.htmlContent"></p> <p [innerHTML]="post.htmlContent"></p>
</mat-card-content> </mat-card-content>
<mat-card-actions> <mat-card-actions>
<button mat-button (click)="voteUp(post)" matTooltip="vote up" matTooltipShowDelay="500"> <div *ngIf="post.activity" class="activity-info" fxHide.gt-sm="true">
<mat-icon class="voteButton voted" aria-hidden="false" color="primary" *ngIf="post.userVote == 'UPVOTE'">thumb_up</mat-icon> <span class="span" [matTooltip]="post.activity.description" matTooltipShowDelay="200">
<mat-icon class="voteButton" aria-hidden="false" *ngIf="!post.userVote || post.userVote == 'DOWNVOTE'">thumb_up</mat-icon> {{post.activity.points}} points earned through <b>{{post.activity.name}}</b>
</button> </span>
{{post.upvotes}} </div>
<button mat-button (click)="voteDown(post)" matTooltip="vote down" matTooltipShowDelay="500"> <div class="postVoteButtons">
<mat-icon class="voteButton voted" aria-hidden="false" color="primary" *ngIf="post.userVote == 'DOWNVOTE'">thumb_down</mat-icon> <button mat-button (click)="voteUp(post)" matTooltip="vote up" matTooltipShowDelay="500">
<mat-icon class="voteButton" aria-hidden="false" *ngIf="!post.userVote || post.userVote == 'UPVOTE'">thumb_down</mat-icon> <mat-icon class="voteButton voted" aria-hidden="false" color="primary" *ngIf="post.userVote == 'UPVOTE'">thumb_up</mat-icon>
</button> <mat-icon class="voteButton" aria-hidden="false" *ngIf="!post.userVote || post.userVote == 'DOWNVOTE'">thumb_up</mat-icon>
{{post.downvotes}} </button>
<div *ngIf="post.activity" class="activity-info"> {{post.upvotes}}
<button mat-button (click)="voteDown(post)" matTooltip="vote down" matTooltipShowDelay="500">
<mat-icon class="voteButton voted" aria-hidden="false" color="primary" *ngIf="post.userVote == 'DOWNVOTE'">thumb_down</mat-icon>
<mat-icon class="voteButton" aria-hidden="false" *ngIf="!post.userVote || post.userVote == 'UPVOTE'">thumb_down</mat-icon>
</button>
{{post.downvotes}}
</div>
<div *ngIf="post.activity" class="activity-info" fxHide.lt-md="true">
<span class="span" [matTooltip]="post.activity.description" matTooltipShowDelay="200"> <span class="span" [matTooltip]="post.activity.description" matTooltipShowDelay="200">
{{post.activity.points}} points earned through <b>{{post.activity.name}}</b> {{post.activity.points}} points earned through <b>{{post.activity.name}}</b>
</span> </span>

@ -17,7 +17,7 @@ $mat-card-header-size: 40px !default
.mat-card-content .mat-card-content
overflow: auto overflow: auto
margin: 0 1em margin: 0.5em 1em 0
::ng-deep a ::ng-deep a
color: $primary-color color: $primary-color
.mat-card-actions .mat-card-actions
@ -26,8 +26,14 @@ $mat-card-header-size: 40px !default
::ng-deep p ::ng-deep p
margin: 0 margin: 0
a:hover .postlistUsername, a
cursor: pointer cursor: pointer
margin-right: 0.4em
&:hover
text-decoration: underline
.postVoteButtons
display: inline-block
#button-box #button-box
text-align: right text-align: right
@ -58,6 +64,7 @@ $mat-card-header-size: 40px !default
border-radius: 50% border-radius: 50%
width: $mat-card-header-size width: $mat-card-header-size
height: $mat-card-header-size height: $mat-card-header-size
cursor: pointer
.activity-info .activity-info
display: contents display: contents
@ -71,4 +78,22 @@ $mat-card-header-size: 40px !default
&.voted &.voted
scale: 0.9 scale: 0.9
@media (max-width: 959px)
.activity-info > .span
margin-left: 1em
width: calc(100% - 1em)
display: block
text-align: left
font-style: italic
.postVoteButtons
text-align: end
margin-right: 0.5em
.voteButton
scale: 1
&.voted
scale: 1.1
.mat-card-actions
text-align: end

@ -7,6 +7,7 @@ import {Activity} from 'src/app/models/activity';
import {BehaviorSubject} from 'rxjs'; import {BehaviorSubject} from 'rxjs';
import {tap} from 'rxjs/operators'; import {tap} from 'rxjs/operators';
import {BaseService} from '../base.service'; import {BaseService} from '../base.service';
import {formatDate} from '@angular/common';
const createPostGqlQuery = `mutation($content: String!) { const createPostGqlQuery = `mutation($content: String!) {
createPost(content: $content) { createPost(content: $content) {
@ -125,6 +126,15 @@ export class FeedService extends BaseService {
}; };
} }
/**
* Returns if the input date is today
* @param date
*/
private static dateIsToday(date: Date) {
date = new Date(date);
return new Date().setHours(0, 0, 0, 0) === date.setHours(0, 0, 0, 0);
}
/** /**
* Creates a new post * Creates a new post
* @param pContent * @param pContent
@ -240,8 +250,13 @@ export class FeedService extends BaseService {
.pipe(this.retryRated()) .pipe(this.retryRated())
.subscribe(response => { .subscribe(response => {
const posts = this.constructAllPosts(response); const posts = this.constructAllPosts(response);
const updatedPostList = this.posts.getValue().concat(posts); const previousPosts = this.posts.getValue();
this.posts.next(updatedPostList); for (const post of previousPosts.reverse()) {
if (!posts.find(p => p.id === post.id)) {
posts.unshift(post);
}
}
this.posts.next(posts);
if (posts.length < this.offsetStep) { if (posts.length < this.offsetStep) {
this.postsAvailable.next(false); this.postsAvailable.next(false);
} }
@ -257,8 +272,13 @@ export class FeedService extends BaseService {
profilePicture = 'assets/images/default-profilepic.svg'; profilePicture = 'assets/images/default-profilepic.svg';
} }
const author = new Author(post.author.id, post.author.name, post.author.handle, profilePicture); const author = new Author(post.author.id, post.author.name, post.author.handle, profilePicture);
const temp = new Date(Number(post.createdAt)); const postDate = new Date(Number(post.createdAt));
const date = temp.toLocaleString('en-GB'); let date: string;
if (FeedService.dateIsToday(postDate)) {
date = formatDate(postDate, 'HH:mm', 'en-GB');
} else {
date = formatDate(postDate, 'dd.MM.yy HH:mm', 'en-GB');
}
let activity: Activity; let activity: Activity;
if (post.activity) { if (post.activity) {
activity = new Activity( activity = new Activity(
@ -293,8 +313,13 @@ export class FeedService extends BaseService {
profilePicture = 'assets/images/default-profilepic.svg'; profilePicture = 'assets/images/default-profilepic.svg';
} }
const author = new Author(post.author.id, post.author.name, post.author.handle, profilePicture); const author = new Author(post.author.id, post.author.name, post.author.handle, profilePicture);
const temp = new Date(Number(post.createdAt)); const postDate = new Date(Number(post.createdAt));
const date = temp.toLocaleString('en-GB'); let date: string;
if (FeedService.dateIsToday(postDate)) {
date = formatDate(postDate, 'HH:mm', 'en-GB');
} else {
date = formatDate(postDate, 'dd.MM.yy HH:mm', 'en-GB');
}
let activity: Activity; let activity: Activity;
if (post.activity) { if (post.activity) {
activity = new Activity( activity = new Activity(

Loading…
Cancel
Save