style(subjects): better avatars sizing

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

Hide file tree

Showing 3 changed files with 13 additions and 1 deletion.
diff --git a/front-end/src/app/common/subject.component.scss b/front-end/src/app/common/subject.component.scss
@@ -1,3 +1,7 @@
 ion-item {
   --border-radius: 4px;
+  ion-avatar {
+    width: var(--app-subject-avatar-size, 50px);
+    height: var(--app-subject-avatar-size, 50px);
+  }
 }
diff --git a/front-end/src/app/tabs/topics/topic.page.html b/front-end/src/app/tabs/topics/topic.page.html
@@ -35,7 +35,12 @@
           </ion-card-header>
           <ion-card-content>
             <ion-list class="aList" lines="none">
-              <app-subject color="white" *ngFor="let subject of topic.subjects" [subject]="subject"></app-subject>
+              <app-subject
+                color="white"
+                *ngFor="let subject of topic.subjects"
+                [subject]="subject"
+                [class.single]="topic.subjects?.length === 1"
+              ></app-subject>
               <ion-row class="ion-margin-top" *ngIf="!topic.isArchived()">
                 <ion-col *ngIf="topic.willCloseAt">
                   <ion-item class="ion-text-right deadline">

diff --git a/front-end/src/app/tabs/topics/topic.page.scss b/front-end/src/app/tabs/topics/topic.page.scss
@@ -16,6 +16,9 @@ ion-list.aList {
   ion-list-header ion-label h2 {
     margin-bottom: 0;
   }
+  app-subject.single {
+    --app-subject-avatar-size: 100px;
+  }
   ion-item.deadline {
     ion-label {
       font-size: 0.9em;