Improve Checkin Badges To Display Answer Text

[Dale Zak]

Expected Behaviour

The checkin badge should indicate what each answer was including number of responses and answer text.

Actual Behaviour

Currently the checkin badge only indicates the color and number of replies, but not what the answer was.

Current Design

Suggested Design

[Dale Zak]

@caharding @justinscherer what do you think of the proposed design?

[Dale Zak]

Here's the snippet for the changes:

<div class="badges" *ngIf="checkin">
  <div class="badge" [style.width]="badge.width" *ngFor="let badge of getBadges()">
    <ion-badge [style.background]="badge.color" [style.color]="white" [title]="badge.text">
      <strong>{{badge.number}}</strong>
      <div class="truncate">
        <small ion-text color="white">{{badge.text}}</small>
      </div>
    </ion-badge>
  </div>
</div>