Fix progress bar, VLE annotations, additional styles

src/app/classroom-monitor/milestones/milestones.component.html

@@ -4,20 +4,28 @@
       <mat-card
         appearance="outlined"
         *ngFor="let milestone of milestones"
-        class="milestone md-button"
-        md-ink-ripple
+        class="milestone"
+        role="button"
+        tabindex="0"
+        aria-label="Show milestone details"
+        i18-aria-label
         (click)="showMilestoneDetails(milestone, $event)"
+        (keyup.enter)="showMilestoneDetails(milestone, $event)"
       >
         <mat-card-content fxLayout="column" fxLayoutAlign="center center">
           <div class="milestone__title" md-truncate>{{ milestone.name }}</div>
-          <div class="milestone__progress">
+          <div class="milestone__progress mat-app-background">
             <mat-progress-spinner
               diameter="96"
               mode="determinate"
               [value]="milestone.percentageCompleted"
               [ngClass]="{ success: milestone.percentageCompleted === 100 }"
             ></mat-progress-spinner>
-            <div class="milestone__progress__percent" fxLayout="row" fxLayoutAlign="center center">
+            <div
+              class="milestone__progress__percent mat-subtitle-2"
+              fxLayout="row"
+              fxLayoutAlign="center center"
+            >
               <span *ngIf="milestone.percentageCompleted < 100"
                 >{{ milestone.percentageCompleted }}%</span
               >
@@ -26,13 +34,11 @@
               </mat-icon>
             </div>
           </div>
-          <p class="md-body-1 text-secondary">
+          <p class="text-secondary" i18n>
             {{ milestone.numberOfStudentsCompleted }}/{{ milestone.numberOfStudentsInRun }} teams
             completed
           </p>
-          <p *ngIf="milestone.isReportAvailable" class="md-body-2 info" i18n>
-            ~ Report Available ~
-          </p>
+          <p *ngIf="milestone.isReportAvailable" class="info" i18n>~ Report Available ~</p>
         </mat-card-content>
       </mat-card>
     </div>

src/app/classroom-monitor/milestones/milestones.component.scss

@@ -1,3 +1,48 @@
 :host ::ng-deep .success circle {
   stroke: #00C853;
 }
+
+.milestone {
+  min-width: 196px;
+  width: 196px;
+  min-height: 242px;
+  background-color: #ffffff;
+  padding: 0;
+  margin: 4px;
+  cursor: pointer;
+}
+
+.milestone__progress {
+  border-radius: 50%;
+  position: relative;
+  margin-bottom: 12px;
+}
+
+.milestone__progress__percent {
+  position: absolute;
+  top: 8px;
+  bottom: 8px;
+  left: 8px;
+  right: 8px;
+  border-radius: 50%;
+  background-color: #ffffff;
+  font-weight: 500;
+}
+
+.milestone__title {
+  font-weight: 700;
+  margin-bottom: 12px;
+}
+
+.milestone--add {
+  &.md-button {
+    text-transform: uppercase;
+  }
+}
+
+.milestone--add__icon {
+  height: 96px;
+  width: 96px;
+  background-color: color('gray-lighter');
+  border-radius: 50%;
+}

src/app/classroom-monitor/nav-item-progress/nav-item-progress.component.scss

@@ -1,10 +0,0 @@
-
-.progress-wrapper {
-  .mat-mdc-progress-bar, .mdc-linear-progress__bar-inner {
-    height: 14px;
-  }
-
-  .mdc-linear-progress__bar-inner {
-    border-top-width: 14px;
-  }
-}

src/app/student/account/edit/edit.component.html

@@ -10,7 +10,7 @@
 </header>
 
 <section>
-  <mat-tab-group>
+  <mat-tab-group mat-stretch-tabs="false">
     <mat-tab i18n-label label="Account Info">
       <div class="section__tab">
         <student-edit-profile></student-edit-profile>

src/app/teacher/account/edit/edit.component.html

@@ -10,7 +10,7 @@
 </header>
 
 <section>
-  <mat-tab-group>
+  <mat-tab-group mat-stretch-tabs="false">
     <mat-tab i18n-label label="Account Info">
       <div class="section__tab">
         <teacher-edit-profile></teacher-edit-profile>

src/assets/wise5/authoringTool/components/shared/authoring-tool-bar/authoring-tool-bar.component.html

@@ -21,7 +21,7 @@
       [diameter]="24"
     >
     </mat-spinner>
-    <span *ngIf="globalMessage.text" class="component__actions__info md-caption global-message">
+    <span *ngIf="globalMessage.text" class="component__actions__info mat-small global-message">
       {{ globalMessage.text }} {{ globalMessage.time | date: 'medium' }}
     </span>
   </div>

src/assets/wise5/classroomMonitor/classroomMonitorComponents/edit-component-comment/edit-component-comment.component.scss

@@ -0,0 +1,3 @@
+mat-form-field {
+  width: 100%;
+}

src/assets/wise5/classroomMonitor/classroomMonitorComponents/edit-component-score/edit-component-score.component.scss

@@ -0,0 +1,7 @@
+mat-form-field {
+  width: 64px;
+}
+
+input {
+  text-align: center;
+}

src/assets/wise5/classroomMonitor/classroomMonitorComponents/milestones/milestone-details/milestone-details.component.html

@@ -6,7 +6,8 @@
       <div fxLayout="row" fxLayoutAlign="start center">
         <nav-item-progress
           [period]="currentPeriod"
-          [nodeCompletion]="milestone.percentageCompleted"></nav-item-progress>
+          [nodeCompletion]="milestone.percentageCompleted"
+        ></nav-item-progress>
       </div>
     </div>
     <p *ngIf="milestone.description">
@@ -49,7 +50,11 @@
   </section>
   <section class="mat-elevation-z1 app-bg-bg">
     <div *ngIf="milestone.generatedRecommendations && milestone.isReportAvailable">
-      <mat-tab-group (selectedTabChange)="saveTabSelectedEvent($event)" class="notice-bg-bg">
+      <mat-tab-group
+        (selectedTabChange)="saveTabSelectedEvent($event)"
+        mat-stretch-tabs="false"
+        class="notice-bg-bg"
+      >
         <mat-tab label="Recommendation" i18n-label>
           <div class="milestone-details__section" [innerHTML]="recommendations"></div>
         </mat-tab>
@@ -92,7 +97,9 @@
               account_circle
             </mat-icon>
           </span>
-          <span class="mat-subtitle-2">{{ getDisplayNamesByWorkgroupId(workgroup.workgroupId) }}</span>
+          <span class="mat-subtitle-2">{{
+            getDisplayNamesByWorkgroupId(workgroup.workgroupId)
+          }}</span>
         </span>
         <span fxFlex></span>
         <span class="mat-subtitle-2">

src/assets/wise5/classroomMonitor/classroomMonitorComponents/milestones/milestone-workgroup-item/milestone-workgroup-item.component.html

@@ -53,7 +53,7 @@
         fxLayoutAlign="center center"
       >
         <span
-          class="md-display-1"
+          class="mat-headline-5"
           [ngClass]="{ success: changeInScore > 0, warn: changeInScore < 0 }"
         >
           <span *ngIf="changeInScore > 0">+</span>{{ changeInScore }}

src/assets/wise5/classroomMonitor/classroomMonitorComponents/milestones/milestone-workgroup-item/milestone-workgroup-item.component.scss

@@ -12,4 +12,8 @@
   .mdc-list-item.mdc-list-item--with-one-line {
     height: auto;
   }
+
+  .mat-headline-5 {
+    margin: 0;
+  }
 }

src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeProgress/nav-item/nav-item.component.scss

@@ -27,7 +27,7 @@
 }
 
 .mat-mdc-card-actions {
-  padding: 8px 16px;
+  padding: 0 16px;
   border-top: 1px solid #dddddd;
 }
 

src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/tool-bar/tool-bar.component.html

@@ -1,5 +1,5 @@
 <mat-toolbar class="mat-elevation-z1 toolbar">
-  <div class="md-toolbar-tools toolbar__tools">
+  <div class="toolbar__tools" fxLayout="row" fxLayoutAlign="start center">
     <button
       mat-icon-button
       aria-label="Main Menu"

src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/tool-bar/tool-bar.component.scss

@@ -7,4 +7,5 @@
 
 .toolbar__tools {
   padding: 0 4px;
+  width: 100%;
 }

src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/workgroupNodeScore/workgroup-node-score.component.html

@@ -1,4 +1,4 @@
-<div layout="row" layout-align="center center" class="layout-align-center-center layout-row">
-  <span class="md-display-1">{{ score }}</span
-  >&nbsp;<span class="md-title text-secondary normal">/{{ maxScore }}</span>
+<div fxLayout="row" fxLayoutAlign="center center">
+  <span class="mat-headline-5">{{ score }}</span
+  >&nbsp;<span class="text-secondary mat-body-2">/{{ maxScore }}</span>
 </div>

src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/workgroupNodeScore/workgroup-node-score.component.scss

@@ -0,0 +1,3 @@
+.mat-headline-5 {
+  margin: 0;
+}

src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/workgroupNodeScore/workgroup-node-score.component.ts

@@ -4,7 +4,8 @@ import { Input, Component } from '@angular/core';
 
 @Component({
   selector: 'workgroup-node-score',
-  templateUrl: 'workgroup-node-score.component.html'
+  templateUrl: 'workgroup-node-score.component.html',
+  styleUrls: ['workgroup-node-score.component.scss']
 })
 export class WorkgroupNodeScoreComponent {
   @Input()

src/assets/wise5/classroomMonitor/classroomMonitorComponents/studentProgress/project-progress/project-progress.component.scss

@@ -1,9 +0,0 @@
-.project-progress {
-  .nav-item__progress {
-    height: 14px;
-
-    .mdc-linear-progress__bar-inner {
-      border-top-width: 14px;
-    }
-  }
-}

src/assets/wise5/classroomMonitor/student-progress/student-progress.component.html

@@ -153,9 +153,9 @@
                   fxLayoutAlign="center center"
                   class="layout-align-center-center layout-row"
                 >
-                  <span class="md-display-1">{{ team.score }}</span
+                  <span class="mat-headline-5">{{ team.score }}</span
                   >&nbsp;
-                  <span class="md-title text-secondary normal">/{{ team.maxScore }}</span>
+                  <span class="text-secondary mat-body-2">/{{ team.maxScore }}</span>
                 </div>
               </td>
             </tr>

src/assets/wise5/classroomMonitor/student-progress/student-progress.component.scss

@@ -22,4 +22,8 @@
       background-color: #f5f5f5;
     }
   }
+
+  .mat-headline-5 {
+    margin: 0;
+  }
 }

src/assets/wise5/components/draw/drawing-tool.scss

@@ -59,6 +59,7 @@ sans-serif;
 .dt-container {
   white-space: nowrap;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  overflow: auto;
 
   .dt-canvas-container {
     vertical-align: top; // not needed but why not

src/assets/wise5/themes/default/style/modules/_component.scss

@@ -59,8 +59,8 @@ h3.component__header {
 .component__actions__info {
     font-style: italic;
     margin-left: 8px;
-    //color: color('accent-1');
     color: color('text-secondary');
+    font-weight: 400;
 }
 
 .component__actions__more {

src/assets/wise5/themes/default/style/modules/_milestones.scss

@@ -1,50 +1,50 @@
-.milestone {
-  min-width: 196px;
-  width: 196px;
-  height: 242px;
-  background-color: #ffffff;
-  padding: 0;
+// .milestone {
+//   min-width: 196px;
+//   width: 196px;
+//   height: 242px;
+//   background-color: #ffffff;
+//   padding: 0;
 
-  &.md-button {
-    text-transform: none;
-  }
-}
+//   &.md-button {
+//     text-transform: none;
+//   }
+// }
 
-.milestone__progress {
-  background-color: color('gray-lighter');
-  border-radius: 50%;
-  position: relative;
-  margin-bottom: 12px;
-}
+// .milestone__progress {
+//   background-color: color('gray-lighter');
+//   border-radius: 50%;
+//   position: relative;
+//   margin-bottom: 12px;
+// }
 
-.milestone__progress__percent {
-  position: absolute;
-  top: 8px;
-  bottom: 8px;
-  left: 8px;
-  right: 8px;
-  border-radius: 50%;
-  background-color: #ffffff;
-  color: color('primary');
-  font-size: rem(2.8);
-  font-weight: 500;
-}
+// .milestone__progress__percent {
+//   position: absolute;
+//   top: 8px;
+//   bottom: 8px;
+//   left: 8px;
+//   right: 8px;
+//   border-radius: 50%;
+//   background-color: #ffffff;
+//   color: color('primary');
+//   font-size: rem(2.8);
+//   font-weight: 500;
+// }
 
-.milestone__title {
-  font-weight: 700;
-  font-size: $body-font-size-base;
-  margin-bottom: 12px;
-}
+// .milestone__title {
+//   font-weight: 700;
+//   font-size: $body-font-size-base;
+//   margin-bottom: 12px;
+// }
 
-.milestone--add {
-  &.md-button {
-    text-transform: uppercase;
-  }
-}
+// .milestone--add {
+//   &.md-button {
+//     text-transform: uppercase;
+//   }
+// }
 
-.milestone--add__icon {
-  height: 96px;
-  width: 96px;
-  background-color: color('gray-lighter');
-  border-radius: 50%;
-}
+// .milestone--add__icon {
+//   height: 96px;
+//   width: 96px;
+//   background-color: color('gray-lighter');
+//   border-radius: 50%;
+// }