From c094071922e2e0c424efa20952514bcade9097fb Mon Sep 17 00:00:00 2001
From: trivernis <trivernis@gmail.com>
Date: Mon, 20 Jan 2020 16:55:54 +0100
Subject: [PATCH] Improve mobile vote and activity placement

---
 .../components/feed/postlist/postlist.component.html   |  4 ++--
 .../components/feed/postlist/postlist.component.sass   | 10 ++++++++--
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/app/components/feed/postlist/postlist.component.html b/src/app/components/feed/postlist/postlist.component.html
index 1ce2508..96e01cd 100644
--- a/src/app/components/feed/postlist/postlist.component.html
+++ b/src/app/components/feed/postlist/postlist.component.html
@@ -35,12 +35,12 @@
         <mat-icon class="voteButton voted" aria-hidden="false" color="primary" *ngIf="post.userVote == 'UPVOTE'">thumb_up</mat-icon>
         <mat-icon class="voteButton" aria-hidden="false" *ngIf="!post.userVote || post.userVote == 'DOWNVOTE'">thumb_up</mat-icon>
       </button>
-      {{post.upvotes}}
+      <div class="voteCount">{{post.upvotes}}</div>
       <button mat-button (click)="voteDown(post)" matTooltip="vote down" matTooltipShowDelay="500">
         <mat-icon class="voteButton voted" aria-hidden="false" color="primary" *ngIf="post.userVote == 'DOWNVOTE'">thumb_down</mat-icon>
         <mat-icon class="voteButton" aria-hidden="false" *ngIf="!post.userVote || post.userVote == 'UPVOTE'">thumb_down</mat-icon>
       </button>
-      {{post.downvotes}}
+      <div class="voteCount">{{post.downvotes}}</div>
     </div>
     <div *ngIf="post.activity" class="activity-info" fxHide.lt-md="true">
       <span class="span" [matTooltip]="post.activity.description" matTooltipShowDelay="200">
diff --git a/src/app/components/feed/postlist/postlist.component.sass b/src/app/components/feed/postlist/postlist.component.sass
index 40be67b..b6ef195 100644
--- a/src/app/components/feed/postlist/postlist.component.sass
+++ b/src/app/components/feed/postlist/postlist.component.sass
@@ -78,22 +78,28 @@ $mat-card-header-size: 40px !default
     &.voted
      scale: 0.9
 
+  .voteCount
+    display: inline
+
   @media (max-width: 959px)
     .activity-info > .span
       margin-left: 1em
       width: calc(100% - 1em)
       display: block
       text-align: left
-      font-style: italic
     .postVoteButtons
       text-align: end
       margin-right: 0.5em
+      display: flex
+      align-items: center
       .voteButton
         scale: 1
         &.voted
           scale: 1.1
 
     .mat-card-actions
-      text-align: end
+      display: flex
+      justify-content: end
+      align-items: center