pictures in posts are displayed correctly now

src/app/app.module.ts

@@ -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: [],

src/app/components/feed/feed.component.ts

@@ -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);
         });
-    }
+      }
-
     });
 
   }

src/app/components/feed/postlist/postlist.component.html

@@ -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>

src/app/components/feed/postlist/postlist.component.sass

@@ -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
+
  

src/app/components/main-navigation/main-navigation.component.html

@@ -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>
+      <mat-icon svgIcon="logo" style="min-width: 35px;" routerLink="" class="link"></mat-icon>
-      <span>Greenvironment</span>
+      <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"

src/app/components/main-navigation/main-navigation.component.sass

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

src/app/components/main-navigation/main-navigation.component.ts

@@ -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();

src/app/components/profile/profile.component.html

@@ -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.

src/app/components/profile/profile.component.sass

@@ -19,9 +19,20 @@
   .icon-box
     text-align: right
     width: 100%
-    .request-button
+.request-button
-      margin-top: 0.5em
+  margin-top: 0.5em
-      margin-bottom: 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

src/app/components/profile/profile.component.ts

@@ -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);

src/app/components/search/search.component.sass

@@ -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

src/app/components/social/groups/groups.component.html

@@ -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>
 

src/app/components/social/groups/groups.component.ts

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

src/app/models/user.ts

@@ -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

src/styles/greenvironment-material-theme.scss

@@ -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/