style(questions): summary icons in mobile mode

uatisdeproblem · Mar 28, 2023 · 6071f8b · 6071f8b
1 parent efa3d8d
commit 6071f8b
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git a/front-end/src/app/tabs/topics/questions/questionSummary.component.html b/front-end/src/app/tabs/topics/questions/questionSummary.component.html
@@ -16,11 +16,11 @@
       {{ question.updatedAt ?? question.createdAt | dateLocale : 'mediumDate' }}
     </p>
   </ion-label>
-  <ion-chip color="medium" class="ion-hide-sm-down" disabled>
+  <ion-chip color="medium" [class.small]="app.isInMobileMode()" disabled>
     <ion-icon name="chatbubbles"></ion-icon>
     <ion-label>{{ question.numOfAnswers }}</ion-label>
   </ion-chip>
-  <ion-chip color="success" class="ion-hide-sm-down" disabled>
+  <ion-chip color="success" [class.small]="app.isInMobileMode()" disabled>
     <ion-icon name="thumbs-up"></ion-icon>
     <ion-label>{{ question.numOfUpvotes }}</ion-label>
   </ion-chip>

diff --git a/front-end/src/app/tabs/topics/questions/questionSummary.component.scss b/front-end/src/app/tabs/topics/questions/questionSummary.component.scss
@@ -8,6 +8,9 @@ ion-item {
   ion-chip[disabled] {
     opacity: 1 !important;
   }
+  ion-chip.small ion-icon {
+    font-size: 1em;
+  }
 }
 ion-item.current {
   border-left: 8px solid var(--ion-color-primary);