pictures in posts are displayed correctly now

master
Max 5 years ago
parent faca178b85
commit 00c019196f

@ -58,6 +58,7 @@ import { SearchComponent } from './components/search/search.component';
import {DomSanitizer} from '@angular/platform-browser';
import {MatIconRegistry} from '@angular/material/icon';
import {MatDialogModule} from '@angular/material/dialog';
import {MatTooltipModule} from '@angular/material/tooltip';
// import logo from 'src/assets/gv-new-logo.svg';
import logo from '!!raw-loader!./gv-new-logo-white.svg';
@ -134,6 +135,7 @@ const appRoutes: Routes = [
MatBadgeModule,
MatProgressSpinnerModule,
MatDialogModule,
MatTooltipModule
],
entryComponents: [ DialogCreateGroupComponent ],
providers: [],

@ -34,6 +34,7 @@ export class FeedComponent implements OnInit {
ngOnInit() {
this.data.currentUserInfo.subscribe(user => {
console.log('feed got new user');
this.user = user;
this.loggedIn = user.loggedIn;
if (this.loggedIn) {
@ -53,8 +54,7 @@ export class FeedComponent implements OnInit {
this.feedMostLiked = this.feedNew;
console.log(this.feedNew);
});
}
}
});
}

@ -46,12 +46,12 @@
<p [innerHTML]="post.htmlContent"></p>
</mat-card-content>
<mat-card-actions>
<button mat-button (click)="voteUp(post)">
<button mat-button (click)="voteUp(post)" matTooltip="vote up" matTooltipShowDelay="500">
<mat-icon aria-hidden="false" color="primary" *ngIf="post.userVote == 'UPVOTE'">keyboard_arrow_up</mat-icon>
<mat-icon aria-hidden="false" *ngIf="!post.userVote || post.userVote == 'DOWNVOTE'">keyboard_arrow_up</mat-icon>
</button>
{{post.upvotes}}
<button mat-button (click)="voteDown(post)">
<button mat-button (click)="voteDown(post)" matTooltip="vote down" matTooltipShowDelay="500">
<mat-icon aria-hidden="false" color="primary" *ngIf="post.userVote == 'DOWNVOTE'">keyboard_arrow_down</mat-icon>
<mat-icon aria-hidden="false" *ngIf="!post.userVote || post.userVote == 'UPVOTE'">keyboard_arrow_down</mat-icon>
</button>

@ -5,10 +5,10 @@
box-sizing: border-box
width: 100%
margin-top: 0.5em
outline: none
user-select: none
::ng-deep .mat-card-header-text
margin: 0px
.mat-card-header
.mat-card-subtitle
display: contents
a:hover
@ -16,4 +16,9 @@
#button-box
text-align: right
margin-left: auto
::ng-deep img
max-width: 100%
height: auto
border-radius: 4px

@ -38,8 +38,8 @@
fxShow="true" fxHide.gt-sm="true">
<mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
</button>
<mat-icon svgIcon="logo" style="min-width: 35px;"></mat-icon>
<span>Greenvironment</span>
<mat-icon svgIcon="logo" style="min-width: 35px;" routerLink="" class="link"></mat-icon>
<span routerLink="" class="link">Greenvironment</span>
<nav mat-tab-nav-bar backgroundColor="primary" fxShow="true" fxHide.lt-md="true" routerLinkActive #rla="">
<div [hidden]="!loggedIn">
<a mat-tab-link class="link"

@ -4,6 +4,12 @@
.sidenav
width: 200px
.link
user-select: none
cursor: pointer
outline: none
.sidenav .mat-toolbar
//background: inherit

@ -65,7 +65,7 @@ export class MainNavigationComponent implements OnInit {
if (this.user.darkmode === true && this.lighttheme) {
this.toggleTheme();
this.darkModeButtonChecked = true;
} else if (!this.user.darkmode && !this.lighttheme) {
} else if (this.user.loggedIn && !this.user.darkmode && !this.lighttheme) { // IF user activated darkmode and logged in after that
this.settingsService.setDarkModeActive(true);
}
this.updateLinks();

@ -1,21 +1,30 @@
<div id="profile-page">
<mat-toolbar color="primary">Profile</mat-toolbar>
<mat-toolbar color="primary" id="toolbar">
<mat-toolbar-row>
<div class="profile-picture"></div>
<span id="username">{{userProfile.username}}</span>
<span id="handle">@{{userProfile.handle}}</span>
<button mat-icon-button
class="request-button"
(click)="sendFriendRequest(userProfile)"
[disabled]="!userProfile.allowedToSendRequest">
<mat-icon>person_add</mat-icon>
</button>
</mat-toolbar-row>
<mat-toolbar-row>
<span id="info">{{rankname}} ({{userProfile.points}} points)</span>
</mat-toolbar-row>
</mat-toolbar>
<feed-postlist [childPostList]="this.userProfile.posts"></feed-postlist>
<div id="profile">
<div id="profilecontainer" [hidden]="profileNotFound">
<div id="profile-card-container">
<!--<div id="profile-card-container">
<mat-card class="mat-elevation-z8">
<mat-card-header>
<div mat-card-avatar class="profile-picture"></div>
<mat-card-title>{{userProfile.username}}</mat-card-title>
<mat-card-subtitle>{{userProfile.handle}}</mat-card-subtitle>
<div class="icon-box">
<button mat-icon-button
class="request-button"
(click)="sendFriendRequest(userProfile)"
[disabled]="!userProfile.allowedToSendRequest">
<mat-icon>person_add</mat-icon>
</button>
</div>
</mat-card-header>
<mat-card-content>
<table id="profile-table">
@ -51,7 +60,7 @@
</table>
</mat-card-content>
</mat-card>
</div>
</div>-->
<br>
<h1>What does the level mean?</h1>
<p>There are different levels you can reach through green behaviour.

@ -19,9 +19,20 @@
.icon-box
text-align: right
width: 100%
.request-button
margin-top: 0.5em
margin-bottom: 0.5em
.request-button
margin-top: 0.5em
margin-bottom: 0.5em
margin-left: auto
#toolbar
margin-top: 25px
#username
margin: 0.5em
#handle
font-size: 14px
#info
font-size: 14px
margin-left: calc(100px + 0.5em)
.mat-table
width: 100%
@ -30,9 +41,18 @@
.mat-header-cell
padding-right: 0.5em
$mat-card-header-size: 100px !default
.profile-picture
background-image: url(https://material.angular.io/assets/img/examples/shiba1.jpg)
height: $mat-card-header-size
width: $mat-card-header-size
border-radius: 50%
flex-shrink: 0
background-size: cover
// Makes `<img>` tags behave like `background-size: cover`. Not supported
// in IE, but we're using it as a progressive enhancement.
object-fit: cover
#profile-table

@ -9,6 +9,7 @@ import {MatSort} from '@angular/material/sort';
import {MatTableDataSource} from '@angular/material/table';
import { RequestService } from 'src/app/services/request/request.service';
import { DatasharingService } from '../../services/datasharing.service';
import { FeedService } from 'src/app/services/feed/feed.service';
@Component({
selector: 'app-profile',
@ -74,6 +75,7 @@ export class ProfileComponent implements OnInit {
this.userProfile.handle = response.data.getUser.handle;
this.userProfile.points = response.data.getUser.points;
this.userProfile.level = response.data.getUser.level;
this.userProfile.posts = response.data.getUser.posts;
this.rankname = this.levellist.getLevelName(this.userProfile.level);
// tslint:disable-next-line:max-line-length
this.userProfile.allowedToSendRequest = this.requestService.isAllowedToSendRequest(response.data.getUser.id, this.self);

@ -20,6 +20,8 @@
box-sizing: border-box
width: 100%
margin-top: 0.5em
outline: none
user-select: none
/deep/ .mat-card-header-text
width: 1000%
margin: 0

@ -1,7 +1,7 @@
<mat-toolbar>
<span>Groups</span>
<div id="button-box">
<button mat-icon-button (click)="openDialog()"><mat-icon>group_add</mat-icon></button>
<button mat-icon-button (click)="openDialog()" matTooltip="create group" matTooltipPosition="left" matTooltipShowDelay="500"><mat-icon>group_add</mat-icon></button>
</div>
</mat-toolbar>

@ -25,7 +25,7 @@ export class DialogCreateGroupComponent {
if (name) {
this.social.createGroup(name);
this.dialogRef.close();
}
}
}
}

@ -1,6 +1,7 @@
import { FriendRequest } from 'src/app/models/friendRequest';
import { FriendInfo } from 'src/app/models/friendinfo';
import { GroupInfo } from 'src/app/models/groupinfo';
import { Post } from 'src/app/models/post';
export class User {
loggedIn = false;
@ -16,6 +17,7 @@ export class User {
friends: FriendInfo[] = new Array();
groups: GroupInfo[] = new Array();
posts: Post[] = new Array();
chatIDs: number[];
receivedRequests: FriendRequest[] = new Array();
sentRequestUserIDs: number[] = new Array(); // IDs of users that already received requests of the logged in user

@ -6,6 +6,39 @@
// Be sure that you only ever include this mixin once!
@include mat-core();
$md-gvgreen: (
50 : #e0f7e7,
100 : #b3ebc3,
200 : #80de9c,
300 : #4dd174,
400 : #26c756,
500 : #00bd38,
600 : #00b732,
700 : #00ae2b,
800 : #00a624,
900 : #009817,
A100 : #c3ffc9,
A200 : #90ff9a,
A400 : #5dff6b,
A700 : #44ff54,
contrast: (
50 : #000000,
100 : #000000,
200 : #000000,
300 : #000000,
400 : #000000,
500 : #ffffff,
600 : #ffffff,
700 : #ffffff,
800 : #ffffff,
900 : #ffffff,
A100 : #000000,
A200 : #000000,
A400 : #000000,
A700 : #000000,
)
);
// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/

Loading…
Cancel
Save