Moved 'What does the level mean?' to the about page

src/app/components/about/about.component.html

@@ -1,5 +1,6 @@
 <div id="about">
 <div id="text0" style="text-align: center;">
+  
   <h1>Greenvironment</h1>
   <br> <br> <br> <br> <br>
   <h1 class="mat-display-3">Keep it clean and green!</h1>
@@ -9,7 +10,51 @@
 </div>
 <div id="text1" style="text-align: center;">
   <h1>What's Greenvironment?</h1>
-  <p class="mat-display-1">We, the greenviroment team want to create a network for environmentalists who care for our nature and our planet as much as we do.</p>
+  <p>We, the greenviroment team want to create a network for environmentalists who care for our nature and our planet as much as we do.</p>
+  <br>
+  <h1>What does the level mean?</h1>
+      <p>There are different levels you can reach through green behaviour.
+          Collect 100 points to level up! The levels are called: 
+      </p>
+      <table mat-table [dataSource]="levelSource" class="mat-elevation-z8">
+          <ng-container matColumnDef="level">
+              <th mat-header-cell *matHeaderCellDef> level </th>
+              <td mat-cell *matCellDef="let level"> {{level.level}} </td>
+          </ng-container>
+          <ng-container matColumnDef="name">
+              <th mat-header-cell *matHeaderCellDef> level name </th>
+              <td mat-cell *matCellDef="let level"> {{level.name}} </td>
+          </ng-container>
+          <tr mat-header-row *matHeaderRowDef="displayedLevelColumns"></tr>
+          <tr mat-row *matRowDef="let row; columns: displayedLevelColumns;"></tr>
+      </table>
+      <br>
+  <h1>How to level up?</h1>
+      <p>There is an always growing list of things you can do,
+          to support your environment
+          and earn points to level up at the same time.
+          You can get a different amount of points
+          for differnet actions you can see in the list below:
+      </p>
+      <table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
+          <!--- Note that these columns can be defined in any order.
+                  The actual rendered columns are set as a property on the row definition" -->
+          
+          <!-- Position Column -->
+          <ng-container matColumnDef="points">
+              <th mat-header-cell *matHeaderCellDef mat-sort-header> points </th>
+              <td mat-cell *matCellDef="let action"> {{action.points}} </td>
+          </ng-container>
+
+          <!-- Name Column -->
+          <ng-container matColumnDef="name">
+              <th mat-header-cell *matHeaderCellDef mat-sort-header> action </th>
+              <td mat-cell *matCellDef="let action"> {{action.name}} </td>
+          </ng-container>
+
+          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+      </table>
 </div>
 <div id="text2" style="text-align: center;">
   <p class="mat-display-1">We believe, that together we can do amazing things to protect our environment and keep it clean and green.</p>

src/app/components/about/about.component.sass

@@ -1,7 +1,5 @@
 @import '../../../styles/mixins.sass'
 @import '../../../styles/vars.sass'
-@import '~@angular/material/theming'
-@import '../../../styles/greenvironment-material-theme.scss'
 
 #about
   position: fixed
@@ -28,3 +26,11 @@
   width: 100%
   max-width: 30em
   margin-bottom: 1em
+
+.mat-table
+  width: 100%
+  max-width: 690px
+  margin: 0 auto
+  text-align: left
+.mat-header-cell
+  padding-right: 0.5em

src/app/components/about/about.component.ts

@@ -1,4 +1,8 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { Actionlist } from 'src/app/models/actionlist';
+import { Levellist } from 'src/app/models/levellist';
+import {MatSort} from '@angular/material/sort';
+import {MatTableDataSource} from '@angular/material/table';
 
 @Component({
   selector: 'app-about',
@@ -6,10 +10,19 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./about.component.sass']
 })
 export class AboutComponent implements OnInit {
+  actionlist: Actionlist = new Actionlist();
+  levellist: Levellist = new Levellist();
+
+  displayedColumns = ['points', 'name'];
+  dataSource = new MatTableDataSource(this.actionlist.Actions);
+  displayedLevelColumns = ['level', 'name'];
+  levelSource = this.levellist.levels;
 
   constructor() { }
 
+  @ViewChild(MatSort, {static: true}) sort: MatSort;
   ngOnInit() {
+    this.dataSource.sort = this.sort;
   }
 
 }

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

@@ -36,12 +36,12 @@ export class FeedComponent implements OnInit {
     this.data.currentUserInfo.subscribe(user => {
       this.user = user;
       this.loggedIn = user.loggedIn;
-        this.feedService.getAllPostsRaw().subscribe(response => {
+    });
-          this.loading = false;
+    this.feedService.getAllPostsRaw().subscribe(response => {
-          this.feedNew = this.feedService.renderAllPosts(response.json());
+      this.loading = false;
-          this.parentSelectedPostList = this.feedNew;
+      this.feedNew = this.feedService.renderAllPosts(response.json());
-          this.feedMostLiked = this.feedNew;
+      this.parentSelectedPostList = this.feedNew;
-        });
+      this.feedMostLiked = this.feedNew;
     });
 
   }

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

@@ -60,50 +60,7 @@
             <feed-postlist [childPostList]="this.userProfile.posts"></feed-postlist>  
         </div>
         <div id="profile">
-                <br>
+                
-                <h1>What does the level mean?</h1>
-                    <p>There are different levels you can reach through green behaviour.
-                        Collect 100 points to level up! The levels are called: 
-                    </p>
-                    <table mat-table [dataSource]="levelSource" class="mat-elevation-z8">
-                        <ng-container matColumnDef="level">
-                            <th mat-header-cell *matHeaderCellDef> level </th>
-                            <td mat-cell *matCellDef="let level"> {{level.level}} </td>
-                        </ng-container>
-                        <ng-container matColumnDef="name">
-                            <th mat-header-cell *matHeaderCellDef> level name </th>
-                            <td mat-cell *matCellDef="let level"> {{level.name}} </td>
-                        </ng-container>
-                        <tr mat-header-row *matHeaderRowDef="displayedLevelColumns"></tr>
-                        <tr mat-row *matRowDef="let row; columns: displayedLevelColumns;"></tr>
-                    </table>
-                    <br>
-                <h1>How to level up?</h1>
-                    <p>There is an always growing list of things you can do,
-                        to support your environment
-                        and earn points to level up at the same time.
-                        You can get a different amount of points
-                        for differnet actions you can see in the list below:
-                    </p>
-                    <table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
-                        <!--- Note that these columns can be defined in any order.
-                                The actual rendered columns are set as a property on the row definition" -->
-                        
-                        <!-- Position Column -->
-                        <ng-container matColumnDef="points">
-                            <th mat-header-cell *matHeaderCellDef mat-sort-header> points </th>
-                            <td mat-cell *matCellDef="let action"> {{action.points}} </td>
-                        </ng-container>
-
-                        <!-- Name Column -->
-                        <ng-container matColumnDef="name">
-                            <th mat-header-cell *matHeaderCellDef mat-sort-header> action </th>
-                            <td mat-cell *matCellDef="let action"> {{action.name}} </td>
-                        </ng-container>
-
-                        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-                        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-                    </table>
                     <!--<table style="width:100%">
                         <tr>
                             <th>points </th>

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

@@ -39,14 +39,6 @@
   #handle
     font-size: 14px
 
-
-.mat-table
-  width: 100%
-  max-width: 690px
-  margin: 0 auto
-.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)

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

@@ -1,10 +1,7 @@
-import { Component, OnInit, ViewChild} from '@angular/core';
+import { Component, OnInit} from '@angular/core';
 import {Router, NavigationEnd} from '@angular/router';
 import { User } from 'src/app/models/user';
-import { Actionlist } from 'src/app/models/actionlist';
 import { Levellist } from 'src/app/models/levellist';
-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 { ProfileService } from 'src/app/services/profile/profile.service';
@@ -16,18 +13,12 @@ import { ProfileService } from 'src/app/services/profile/profile.service';
 })
 
 export class ProfileComponent implements OnInit {
-  actionlist: Actionlist = new Actionlist();
-
   levellist: Levellist = new Levellist();
   userProfile: User = new User();
   self: User;
   id: string;
   rankname: string;
   profileNotFound = false;
-  displayedColumns = ['points', 'name'];
-  dataSource = new MatTableDataSource(this.actionlist.Actions);
-  displayedLevelColumns = ['level', 'name'];
-  levelSource = this.levellist.levels;
 
   loading = false;
 
@@ -48,10 +39,8 @@ export class ProfileComponent implements OnInit {
       });
   }
 
-  @ViewChild(MatSort, {static: true}) sort: MatSort;
   ngOnInit() {
     this.loading = true;
-    this.dataSource.sort = this.sort;
     this.id = this.router.url.substr(this.router.url.lastIndexOf('/') + 1);
     this.data.currentUserInfo.subscribe(user => {
       this.self = user;