fixed profile page width fixed #126 #129

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

@@ -21,12 +21,16 @@ export class PostlistComponent implements OnInit {
 
   voteUp(pPost: Post) {
     this.feedService.upvote(pPost.id).subscribe(response => {
-        this.voteEvent.emit(true); });
+      // this.voteEvent.emit(true);
+      pPost.userVote = response.json().data.vote;
+    });
   }
 
   voteDown(pPost: Post) {
     this.feedService.downvote(pPost.id).subscribe(response => {
-        this.voteEvent.emit(true); });
+      // this.voteEvent.emit(true);
+      pPost.userVote = response.json().data.vote;
+    });
   }
 
   deletePost(pPost: Post) {

src/app/components/group/group.component.html

@@ -1,6 +1,30 @@
 <div id="profile-page">
     <div id="profilecontainer" *ngIf="!groupNotFound && !loading">
-        <mat-toolbar color="primary" id="toolbar">
+        <!--on small screen-->
+        <mat-toolbar color="primary" id="toolbar" fxShow="true" fxHide.gt-sm="true">
+            <mat-toolbar-row>
+                <div class="profile-picture"></div>
+                <span id="username">{{groupProfile.name}}</span>
+                <button mat-icon-button 
+                    class="request-button" 
+                    (click)="joinGroup(groupProfile)" 
+                    [disabled]="!groupProfile.allowedToJoinGroup">
+                    <mat-icon>group_add</mat-icon>
+                </button>
+            </mat-toolbar-row>
+            <mat-toolbar-row>
+                <div class="info-box">
+                    <span id="handle">created by {{groupProfile.creator.username}} @{{groupProfile.creator.handle}}</span>
+                </div>
+            </mat-toolbar-row>
+            <mat-toolbar-row>
+                <div class="info-box">
+                    <span class="info">{{groupProfile.members.length}} member(s)</span>
+                </div>
+            </mat-toolbar-row>
+        </mat-toolbar>
+        <!--on big screen-->
+        <mat-toolbar color="primary" id="toolbar" fxShow="true" fxHide.lt-md="true">
             <mat-toolbar-row>
                 <div class="profile-picture"></div>
                 <span id="username">{{groupProfile.name}}</span>
@@ -13,7 +37,7 @@
                 </button>
             </mat-toolbar-row>
             <mat-toolbar-row>
-                <div id="info-box">
+                <div class="info-box">
                     <span class="info">{{groupProfile.members.length}} member(s)</span>
                 </div>
             </mat-toolbar-row>

src/app/components/group/group.component.sass

@@ -6,6 +6,7 @@
   width: 100%
   height: calc(100% - 56px)
   overflow: scroll
+  overflow-x: hidden
 
 #profile 
   padding: 2em
@@ -27,7 +28,7 @@
   margin-top: 32px
   .mat-toolbar-row
     max-height: 40px
-  #info-box
+  .info-box
     font-size: 14px
     margin-left: calc(100px + 0.5em)
     .info

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

@@ -1,6 +1,41 @@
 <div id="profile-page">
     <div id="profilecontainer" *ngIf="!profileNotFound && !loading">
-        <mat-toolbar color="primary" id="toolbar">
+        <!--on small screen-->
+        <mat-toolbar color="primary" id="toolbar" fxShow="true" fxHide.gt-sm="true">
+            <mat-toolbar-row>
+                <div class="profile-picture"></div>
+                <span id="username">{{userProfile.username}}</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> 
+                <div class="info-box"> 
+                    <span id="handle">@{{userProfile.handle}}</span>
+                </div>  
+            </mat-toolbar-row>
+            <mat-toolbar-row>
+                <div>
+                    <span class="info">{{rankname}} ({{userProfile.points}} points)</span>
+                </div>
+            </mat-toolbar-row>
+            <mat-toolbar-row>
+                <div>
+                    <span class="info">{{userProfile.friendCount}} friends</span>
+                    <span class="info">{{userProfile.groupCount}} groups</span>
+                </div>
+            </mat-toolbar-row>
+            <mat-toolbar-row>
+                <div>
+                    <span class="info">joined on {{userProfile.joinedAt}}</span>
+                </div>
+            </mat-toolbar-row>
+        </mat-toolbar>
+        <!--on big screen-->
+        <mat-toolbar color="primary" id="toolbar" fxShow="true" fxHide.lt-md="true">
             <mat-toolbar-row>
                 <div class="profile-picture"></div>
                 <span id="username">{{userProfile.username}}</span>
@@ -13,7 +48,7 @@
                 </button>
             </mat-toolbar-row>
             <mat-toolbar-row>
-                <div id="info-box">
+                <div class="info-box">
                     <span class="info">{{rankname}} ({{userProfile.points}} points)</span>
                     <span class="info">{{userProfile.friendCount}} friends</span>
                     <span class="info">{{userProfile.groupCount}} groups</span>

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

@@ -6,6 +6,7 @@
   width: 100%
   height: calc(100% - 56px)
   overflow: scroll
+  overflow-x: hidden
 
 #profile 
   padding: 2em
@@ -27,11 +28,12 @@
   margin-top: 32px
   .mat-toolbar-row
     max-height: 40px
-  #info-box
+  .info-box
     font-size: 14px
     margin-left: calc(100px + 0.5em)
-    .info
-      margin-right: 3em 
+  .info
+    margin-right: 1em 
+    font-size: 14px
   #username
     margin: 0 0.5em
   #handle