Improve mobile vote and activity placement

master
trivernis 5 years ago
parent ecb3d924ed
commit c094071922

@ -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 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> <mat-icon class="voteButton" aria-hidden="false" *ngIf="!post.userVote || post.userVote == 'DOWNVOTE'">thumb_up</mat-icon>
</button> </button>
{{post.upvotes}} <div class="voteCount">{{post.upvotes}}</div>
<button mat-button (click)="voteDown(post)" matTooltip="vote down" matTooltipShowDelay="500"> <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 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> <mat-icon class="voteButton" aria-hidden="false" *ngIf="!post.userVote || post.userVote == 'UPVOTE'">thumb_down</mat-icon>
</button> </button>
{{post.downvotes}} <div class="voteCount">{{post.downvotes}}</div>
</div> </div>
<div *ngIf="post.activity" class="activity-info" fxHide.lt-md="true"> <div *ngIf="post.activity" class="activity-info" fxHide.lt-md="true">
<span class="span" [matTooltip]="post.activity.description" matTooltipShowDelay="200"> <span class="span" [matTooltip]="post.activity.description" matTooltipShowDelay="200">

@ -78,22 +78,28 @@ $mat-card-header-size: 40px !default
&.voted &.voted
scale: 0.9 scale: 0.9
.voteCount
display: inline
@media (max-width: 959px) @media (max-width: 959px)
.activity-info > .span .activity-info > .span
margin-left: 1em margin-left: 1em
width: calc(100% - 1em) width: calc(100% - 1em)
display: block display: block
text-align: left text-align: left
font-style: italic
.postVoteButtons .postVoteButtons
text-align: end text-align: end
margin-right: 0.5em margin-right: 0.5em
display: flex
align-items: center
.voteButton .voteButton
scale: 1 scale: 1
&.voted &.voted
scale: 1.1 scale: 1.1
.mat-card-actions .mat-card-actions
text-align: end display: flex
justify-content: end
align-items: center

Loading…
Cancel
Save