added material design and rank names to social container

src/app/components/chatlist/chatlist.component.html

@@ -1,8 +1,9 @@
 <div id='chatlist'>
-  <div id="header">
+  <!--<div id="header">
     <span class="title">Chats</span>
     <button id="newchat" (click)="newChat()"><span><i class="fa fa-plus fa-3x" aria-hidden="true"></i></span></button>
-  </div>
+  </div>-->
+  <mat-toolbar><span>Chat</span></mat-toolbar>
   <div id="chats">
     <div class="chatitem" *ngFor="let chat of childChats" 
     [class.selected]="chat === selectedChat" (click)="showChat(chat)">

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

@@ -6,8 +6,7 @@
     width: 100%
     margin-top: 0.5em
     
-
-::ng-deep .mat-card-header-text
-    margin: 0px
+    ::ng-deep .mat-card-header-text
+        margin: 0px
 
  

src/app/components/home/home.component.html

@@ -1,7 +1,7 @@
 <div id="content" fxShow="true" fxHide.lt-md="true">
-    <home-chatmanager id="chatcontainer" *ngIf="loggedIn"></home-chatmanager>
-    <home-feed id="feedcontainer"></home-feed>
-    <home-social id="socialcontainer" *ngIf="loggedIn"></home-social>
+    <div id="chat"><home-chatmanager id="chatcontainer" *ngIf="!loggedIn"></home-chatmanager></div>
+    <div id="feed"><home-feed id="feedcontainer"></home-feed></div>
+    <div id="social"><home-social id="socialcontainer" *ngIf="!loggedIn"></home-social></div>
 </div>
 <!--
 <mat-tab-group headerPosition="below" position="0" id="bottom-menu" fxShow="true" fxHide.gt-sm="true">

src/app/components/home/home.component.sass

@@ -2,28 +2,30 @@
 @import '../../../styles/vars.sass'
 
 #content
-  grid-template: 100%/ 25% 50% 25%
-  display: grid
-  min-height: 90vh
-  max-height: 90vh
-
-#chatcontainer
-  @include gridPosition(1, 3, 1, 2)
-  background-color: $cBoxBodyBackground
-  overflow: auto
-
-#feedcontainer
-  @include gridPosition(1, 3, 2, 3)
-  display: grid
-  grid-template: 10% 90% /100%
-  overflow: auto
-
-#socialcontainer
-  @include gridPosition(1, 3, 3, 4)
-  display: grid
-  grid-template: 50% 50% /100%
-  background-color: $cBoxBodyBackground
-  overflow: auto
+  position: fixed
+  width: 100%
+  height: calc(100% - 56px)
+
+#chat
+  box-sizing: content-box
+  height: 100%
+  width: 25%
+  float: left
+  overflow-y: auto
+  
+#feed
+  box-sizing: content-box
+  height: 100%
+  width: 50%
+  float: left
+  overflow-y: auto
+
+#social
+  box-sizing: content-box
+  height: 100%
+  width: 25%
+  float: left
+  overflow-y: auto
 
 .mat-toolbar.mat-primary 
   width: 100%
@@ -36,7 +38,6 @@
 
 .bottom-menu
   position: fixed
-  
   width: 100%
   height: calc(100% - 56px)
 

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

@@ -1,12 +1,22 @@
-<div id="header">
+<!--<div id="header">
   <span class="title">Friends</span>
   <button id="new" type="submit"><span><i class="fa fa-plus fa-3x" aria-hidden="true"></i></span></button>
   <button id="invitations" type="submit"><span><i class="fa fa-envelope-o fa-3x" aria-hidden="true"></i></span></button>
-</div>
-<div id="friendslist">
-    <div class="frienditem" *ngFor="let friend of friends"
+</div>-->
+<mat-toolbar><span>Friends</span></mat-toolbar>
+<div id="friendlist">
+    <!--<div class="frienditem" *ngFor="let friend of friends"
     [class.selected]="friend === selectedFriend" (click)="showFriendProfile(friend)"> 
       <div class="picture">Pic</div>
       <div class="name"><span>{{friend.name}}</span></div>
-    </div>
+    </div>-->
+    <mat-card class="friend-card" *ngFor="let friend of friends" 
+    [class.selected]="friend === selectedFriend" (click)="showFriendProfile(friend)"
+    tabindex="0">
+      <mat-card-header>
+        <div mat-card-avatar class="profile-picture"></div>
+        <mat-card-title>{{friend.name}}</mat-card-title>
+        <mat-card-subtitle>{{friend.rankname}}</mat-card-subtitle>
+      </mat-card-header>
+    </mat-card>
 </div>

src/app/components/social/friends/friends.component.sass

@@ -2,31 +2,18 @@
 @import '../../../../styles/vars.sass'
 @import '../social.component.sass'
 
-#friendslist
-  overflow: auto
-  @include gridPosition(2, 3, 1, 2)
-  div:hover
-    background-color: darken($cPrimaryBackground, 10%)
-    cursor: pointer
-  .frienditem
-    background-color: $cPrimaryBackground
-    height: 3em
-    margin: 0.2em
-    padding: 0.25em
-    border-radius: 0.25em
-    //border: solid
-    display: grid
-    grid-template: 100% / 20% 60% 20%
-    .picture
-      @include gridPosition(1, 2, 1, 2)
-      border: solid
-    .name, .date
-      margin-top: auto
-      margin-bottom: auto
-    .name
-      @include gridPosition(1, 2, 2, 3)
-      font-weight: bold
-      text-align: left
-      padding-left: 0.5em
-      span
-        font-size: 125%
+#friendlist
+  padding: 0.5em
+
+.friend-card
+  box-sizing: border-box
+  width: 100%
+  margin-top: 0.5em
+  cursor: pointer
+
+  .mat-card-subtitle
+    margin: 0
+
+.profile-picture
+  background-image: url(https://material.angular.io/assets/img/examples/shiba1.jpg)
+  background-size: cover

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

@@ -35,13 +35,14 @@ export class FriendsComponent implements OnInit {
   }
 
   readOutFriendsNames(pId: number, pResponse : any) {
-    this.friends.push(new FriendInfo(pId, pResponse.data.getUser.name))
+    this.friends.push(new FriendInfo(pId, pResponse.data.getUser.name,pResponse.data.getUser.level ))
   }
 
   buildJson(pId: number): any {
     const body =  {query: `query($userId: ID) {
       getUser(userId:$userId) {
         name
+        level
       }
     }`, variables: {
         userId: pId 

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

@@ -1,12 +1,20 @@
-<div id="header">
+<!--<div id="header">
     <span class="title">Groups</span>
     <button id="new" type="submit"><span><i class="fa fa-plus fa-3x" aria-hidden="true"></i></span></button>
     <button id="invitations" type="submit"><span><i class="fa fa-envelope-o fa-3x" aria-hidden="true"></i></span></button>
-</div>
-<div id="groupslist">
-    <div class="groupitem" *ngFor="let group of groups"
+</div>-->
+<mat-toolbar><span>Groups</span></mat-toolbar>
+<div id="grouplist">
+    <!--<div class="groupitem" *ngFor="let group of groups"
     [class.selected]="group === selectedGroup" (click)="showGroup(group)"> 
       <div class="picture">Pic</div>
       <div class="name"><span>{{group.name}}</span></div>
-    </div>
+    </div>-->
+    <mat-card class="group-card" *ngFor="let group of groups" 
+    [class.selected]="group === selectedGroup" (click)="showGroup(group)">
+      <mat-card-header>
+        <div mat-card-avatar class="group-picture"></div>
+        <mat-card-title>{{group.name}}</mat-card-title>
+      </mat-card-header>
+    </mat-card>
 </div>

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

@@ -2,31 +2,16 @@
 @import '../../../../styles/vars.sass'
 @import '../social.component.sass'
 
-#groupslist
-  overflow: auto
-  @include gridPosition(2, 3, 1, 2)
-  div:hover
-    background-color: darken($cPrimaryBackground, 10%)
-    cursor: pointer
-  .groupitem
-    background-color: $cPrimaryBackground
-    height: 3em
-    margin: 0.2em
-    padding: 0.25em
-    border-radius: 0.25em
-    //border: solid
-    display: grid
-    grid-template: 100% / 20% 60% 20%
-    .picture
-      @include gridPosition(1, 2, 1, 2)
-      border: solid
-    .name, .date
-      margin-top: auto
-      margin-bottom: auto
-    .name
-      @include gridPosition(1, 2, 2, 3)
-      font-weight: bold
-      text-align: left
-      padding-left: 0.5em
-      span
-        font-size: 125%
+#grouplist
+  padding: 0.5em
+
+.group-card
+  box-sizing: border-box
+  width: 100%
+  margin-top: 0.5em
+  .mat-card-subtitle
+    margin: 0
+
+.group-picture
+  background-image: url(https://material.angular.io/assets/img/examples/shiba1.jpg)
+  background-size: cover

src/app/components/social/social.component.sass

@@ -2,43 +2,13 @@
 @import '../../../styles/vars.sass'
 
 #friendscontainer
-    @include gridPosition(1, 2, 1, 2)
-    display: grid
-    grid-template: 15% 85% /100%
+  box-sizing: content-box
+  height: 50%
+  width: 100%
+  overflow: auto
     
 #groupscontainer
-    @include gridPosition(2, 3, 1, 2)
-    display: grid
-    grid-template: 15% 85% /100%
-
-#header
-  @include gridPosition(1, 2, 1, 2)
-  background-color: $cBoxHeaderBackground
-  display: grid
-  grid-template: 100% /60% 20% 20%
-
-  span
-    color: $cFontWhite
-  span.title
-      @include gridPosition(1, 2, 1, 2)
-      margin-top: 0.25em
-      margin-left: 0.25em
-      line-height: 100%
-      font-size: 2em
-    
-  button
-    background-color: $cBoxHeaderBackground
-    border: none
-  
-  button:hover
-    background-color: lighten($cBoxHeaderBackground, 10%)
-    cursor: pointer
-
-  button:active
-    background-color: darken($cBoxHeaderBackground, 5%)
-  
-    #new
-      @include gridPosition(1, 2, 2, 3)
-
-    #invitations
-      @include gridPosition(1, 2, 3, 4)
+  box-sizing: content-box
+  height: 50%
+  width: 100%
+  overflow: auto

src/app/models/friendinfo.ts

@@ -1,9 +1,14 @@
+import { Levellist } from 'src/app/models/levellist';
+
 export class FriendInfo {
+    levellist: Levellist = new Levellist();
     id: number
     name: string
+    rankname: string
 
-    constructor(pId: number, pName: string) {
+    constructor(pId: number, pName: string, pLevel: number) {
         this.id = pId
         this.name = pName
+        this.rankname = this.levellist.getLevelName(pLevel);
     }
 }

src/app/models/levellist.ts

@@ -11,11 +11,8 @@ export class Levellist{
 
   getLevelName(lev:number): any{
     var name: string = 'not defined';
-    console.log(lev);
     this.levels.forEach(rank => {
-      console.log(rank.level);
       if(lev == rank.level){
-        console.log('found matching level');
         name = rank.name;
       } 
     });

src/app/services/chat/chat.service.ts

@@ -105,13 +105,15 @@ export class ChatService {
     for(let chat of temp.data.getSelf.chats) {
       let memberID: number
       let memberName: string
+      let memberLevel: number
       for(let member of chat.members) {
         if(member.id != this.ownID) {
           memberID = member.id
           memberName = member.name
+          memberLevel = member.level
         }
       }
-      chatPartners.push(new FriendInfo(memberID, memberName))
+      chatPartners.push(new FriendInfo(memberID, memberName, memberLevel))
     }
 
     return chatPartners
@@ -221,7 +223,7 @@ export class ChatService {
   getBodyForRequestOfAllChatPartners() {
     const body =  {query: `query {
         getSelf {
-          chats(first: 1000, offset: 0) {members{name, id}}
+          chats(first: 1000, offset: 0) {members{name, id, level}}
         }}`
       }
 
@@ -243,7 +245,7 @@ export class ChatService {
     const body =  {query: `query {
         getSelf {
           chats(first: 1000, offset: 0) {
-            id, members{name, id}, 
+            id, members{name, id, level}, 
             messages(first: 1000, offset: 0) {
               author {id}, createdAt, content
             }
@@ -256,7 +258,7 @@ export class ChatService {
 
   getBodyForGetChatsByID(pChatID: number) {
     const body =  {query: `query($chatID: ID!) {
-        getChat(chatId: $chatID) {id, members{name, id}, 
+        getChat(chatId: $chatID) {id, members{name, id, level}, 
           messages(first: 1000, offset: 0) {author {id}, createdAt, content}}
         }
       }`, variables: {