style: redesign style fixes

doubtfire-lms · Sep 27, 2023 · 2e93914 · 2e93914
1 parent 332fa9a
commit 2e93914
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 15 deletions.
diff --git a/src/app/common/footer/footer.component.html b/src/app/common/footer/footer.component.html
@@ -145,7 +145,7 @@
         [matTooltipDisabled]="selectedTask === undefined"
         [progress]="selectedTask?.project.taskStats"
       ></f-project-progress-bar>
-      <mat-chip-listbox aria-label="Target Grade Symbol">
+      <mat-chip-listbox aria-label="Target Grade Symbol" class="pointer-events-none">
         <mat-chip-option style="min-width: 33px">{{ selectedTask?.project.targetGradeAcronym }}</mat-chip-option>
       </mat-chip-listbox>
     </div>

diff --git a/src/app/units/states/tasks/inbox/directives/staff-task-list/staff-task-list.component.html b/src/app/units/states/tasks/inbox/directives/staff-task-list/staff-task-list.component.html
@@ -1,6 +1,6 @@
 <!-- The search bar template -->
-<ng-template #OmnisearchTemplate let-collapsable="collapsable">
-  <div class="omnisearch" [ngClass]="{ expanded: showSearchOptions }">
+<ng-template #OmnisearchTemplate let-collapsable="collapsable" let-mobile="mobile">
+  <div class="omnisearch rounded-t-2xl md:rounded-2xl" [ngClass]="{ expanded: showSearchOptions, mobile: mobile }">
     <div class="flex items-center">
       <button mat-icon-button aria-label="Search Icon" disabled class="flex-none flex items-center">
         <mat-icon class="flex items-center" disabled>search</mat-icon>
@@ -137,7 +137,7 @@
 
 <!-- Narrow width search dialog template-->
 <ng-template #searchDialog>
-  <ng-container *ngTemplateOutlet="OmnisearchTemplate; context: { collapsable: false }"></ng-container>
+  <ng-container *ngTemplateOutlet="OmnisearchTemplate; context: { collapsable: false, mobile: true }"></ng-container>
   <div mat-dialog-actions align="end">
     <button mat-button [mat-dialog-close]>OK</button>
   </div>
@@ -151,8 +151,8 @@
     </button>
   </div>
 
-  <div [hidden]="isNarrow">
-    <ng-container *ngTemplateOutlet="OmnisearchTemplate; context: { collapsable: true }"></ng-container>
+  <div *ngIf="!isNarrow">
+    <ng-container *ngTemplateOutlet="OmnisearchTemplate; context: { collapsable: true, mobile: false }"></ng-container>
   </div>
 
   <div class="center-task-list" [hidden]="!loading || isNarrow">
@@ -182,9 +182,7 @@
         >
           <div
             (click)="setSelectedTask(task)"
-            class="inbox-entry"
-            fxLayout="row"
-            fxLayoutAlign="start center"
+            class="inbox-entry flex items-center"
             [ngClass]="{ hover: task.hover }"
             (mouseover)="task.hover = allowHover"
             (mouseout)="task.hover = task.optionsOpened"
@@ -222,6 +220,7 @@ <h4 class="student-name">{{ task.project.student.name }}</h4>
               [matBadgeHidden]="!task.hasQualityPoints() || !task.qualityPts"
               matBadgePosition="before"
               [status]="task.status"
+              class="ml-3"
             ></status-icon>
             <div class="overflow" [hidden]="isNarrow" *ngIf="!isTaskDefMode">
               <button [hidden]="task.hover" mat-icon-button aria-label="task-overflow">
@@ -245,9 +244,9 @@ <h4 class="student-name">{{ task.project.student.name }}</h4>
                 <mat-icon>more_horiz</mat-icon>
               </button>
               <mat-menu #overflowMenu="matMenu" yPosition="below">
-                <button [disabled] mat-menu-item (click)="togglePin(task)">
-                  <mat-icon> {{ task.pinned ? 'remove_circle' : 'add_alert' }} </mat-icon>
-                  <span>{{ task.pinned ? 'Unpin from inbox' : 'Pin to inbox' }} </span>
+                <button mat-menu-item (click)="togglePin(task)" class="flex items-center">
+                  <mat-icon class="mr-0"> {{ task.pinned ? 'remove_circle' : 'add_alert' }} </mat-icon>
+                  <span class="ml-5">{{ task.pinned ? 'Unpin from inbox' : 'Pin to inbox' }} </span>
                 </button>
               </mat-menu>
             </div>

diff --git a/src/app/units/states/tasks/inbox/directives/staff-task-list/staff-task-list.component.scss b/src/app/units/states/tasks/inbox/directives/staff-task-list/staff-task-list.component.scss
@@ -73,7 +73,6 @@ $warn-color: #f44336;
 }
 
 .omnisearch {
-  border-radius: 1em;
   background-color: var(--background-gray);
   font-size: 15px;
   padding-right: 10px;
@@ -83,6 +82,9 @@ $warn-color: #f44336;
     height: 100%;
   }
 
+  &.mobile {
+  }
+
   .search {
     background-color: transparent;
     border: hidden;
@@ -157,6 +159,7 @@ user-icon {
   min-width: 40px;
   width: 40px;
   margin-right: -10px;
+  margin-left: -10px;
 }
 
 .mat-mdc-list-item {

diff --git a/src/app/units/states/tasks/inbox/inbox.component.html b/src/app/units/states/tasks/inbox/inbox.component.html
@@ -56,11 +56,11 @@
     ></df-staff-task-list>
   </div>
   <div [hidden]="!taskSelected" fxLayout="column" fxFill fxLayoutAlign="space-between stretch">
-    <div fxLayout="row" style="margin-bottom: 5px">
+    <div class="flex items-center">
       <button mat-icon-button aria-label="Back to inbox" matTooltip="Back to inbox" (click)="taskSelected = false">
         <mat-icon>arrow_back_ios_new</mat-icon>
       </button>
-      <h3 style="margin-top: 16px; margin-bottom: 0">{{ taskData?.selectedTask?.project.student.nickname }}</h3>
+      <h3 class="mb-0">{{ taskData?.selectedTask?.project.student.nickname }}</h3>
       <div fxFlex></div>
       <button
         [disabled]="!this.taskData?.selectedTask?.hasPdf"