Merge pull request #2838 from WISE-Community/issue-2836-vle-unit-plan-ui-bugs

Fixed some VLE Unit Plan UI bugs

Author: hirokiterashima

src/main/webapp/wise5/themes/default/vle.html

@@ -3,23 +3,30 @@
 <link rel="stylesheet" href="/wise5/themes/default/style/vle.css" />
 <style ng-bind-html="::vleController.projectStyle"></style>
 <disable-delete-keypress>
-    <listen-for-delete-keypress>
-        <div class="app-styles" role="main" layout="column" layout-fill
-             ng-controller="ThemeController as themeCtrl" ng-mousemove="themeCtrl.mouseMoved()"
-             ng-class="::{'notebook-enabled': vleController.notebookEnabled}">
-            <ng-include src="::vleController.themePath + '/templates/topbar.html'"></ng-include>
-            <step-tools show-position="themeCtrl.numberProject"
-                        ng-if="themeCtrl.layoutState === 'node'"></step-tools>
-            <md-content id="content" flex role="main" ui-scrollpoint-target
-                        ng-class="{'l-nav': themeCtrl.layoutState === 'nav', 'l-node': themeCtrl.layoutState === 'node'}" layout="column">
-                <div id="nav" ng-include="::vleController.themePath + '/navigation/navigation.html'" ng-show="themeCtrl.layoutState === 'nav'"></div>
-                <div ng-if="themeCtrl.isEndedAndLocked" style="color: red; display: flex; justify-content: center; align-items: center; height: 30px;">
-                  <span style="border: 1px solid black; border-radius: 3px; padding-left: 8px; padding-right: 8px; background-color: white;">{{ themeCtrl.endedAndLockedMessage }}</span>
-                </div>
-                <div id="node" ng-cloak ui-view="nodeView" ng-if="themeCtrl.layoutState === 'node'"></div>
-            </md-content>
-            <global-annotations></global-annotations>
-            <notebook workgroup-id="::vleController.workgroupId"></notebook>
+  <listen-for-delete-keypress>
+    <div class="app-styles" role="main" layout="column" layout-fill
+         ng-controller="ThemeController as themeCtrl" ng-mousemove="themeCtrl.mouseMoved()"
+         ng-class="::{'notebook-enabled': vleController.notebookEnabled}"
+         style="position: absolute;">
+      <ng-include src="::vleController.themePath + '/templates/topbar.html'"></ng-include>
+      <step-tools show-position="themeCtrl.numberProject" ng-if="themeCtrl.layoutState === 'node'">
+      </step-tools>
+      <md-content id="content" flex role="main" ui-scrollpoint-target
+                  ng-class="{'l-nav': themeCtrl.layoutState === 'nav', 'l-node': themeCtrl.layoutState === 'node'}"
+                  layout="column">
+        <div id="nav" ng-include="::vleController.themePath + '/navigation/navigation.html'"
+             ng-show="themeCtrl.layoutState === 'nav'"></div>
+        <div ng-if="themeCtrl.isEndedAndLocked"
+             style="color: red; display: flex; justify-content: center; align-items: center; height: 30px;">
+          <span
+                style="border: 1px solid black; border-radius: 3px; padding-left: 8px; padding-right: 8px; background-color: white;">{{
+            themeCtrl.endedAndLockedMessage }}</span>
         </div>
-    </listen-for-delete-keypress>
+        <div id="node" ng-cloak ui-view="nodeView" ng-if="themeCtrl.layoutState === 'node'">
+        </div>
+      </md-content>
+      <global-annotations></global-annotations>
+      <notebook workgroup-id="::vleController.workgroupId"></notebook>
+    </div>
+  </listen-for-delete-keypress>
 </disable-delete-keypress>

src/main/webapp/wise5/vle/nav-item/nav-item.component.html

@@ -1,7 +1,8 @@
 <ng-container *ngIf="nodeStatus.isVisible" [ngSwitch]="type">
   <mat-card *ngSwitchCase="'card'" [ngClass]="{'expanded mat-elevation-z6': expanded}">
-    <mat-card-header (click)="itemClicked($event)" role="button" matRipple fxLayout="row"
-                     tabindex="0" i18n-aria-label aria-label="Expand or collapse lesson content">
+    <mat-card-header (click)="itemClicked($event)" (keyup.enter)="itemClicked($event)" role="button"
+                     matRipple fxLayout="row" tabindex="0" i18n-aria-label
+                     aria-label="Expand or collapse lesson content">
       <node-icon mat-card-avatar class="group-icon" [nodeId]="nodeId" size="36"
                  [icon]="nodeStatus.icon"></node-icon>
       <mat-card-title class="title" style="color: {{nodeStatus.icon.color}};">
@@ -36,8 +37,7 @@
     </mat-card-actions>
   </mat-card>
   <button mat-list-item class="list-item" *ngSwitchCase="'list'" (click)="itemClicked($event)"
-          tabindex="0" i18n-title title="Go to {{nodeTitle}}"
-          [ngClass]="{'group':isGroup}">
+          tabindex="0" i18n-title title="Go to {{nodeTitle}}" [ngClass]="{'group':isGroup}">
     <node-icon matListAvatar [nodeId]="nodeId" [icon]="nodeStatus.icon"></node-icon>
     <p matLine>{{ nodeTitle }}</p>
     <div fxLayoutAlign="center center" fxLayoutGap="8px">

src/main/webapp/wise5/vle/nav-item/nav-item.component.scss

@@ -15,11 +15,16 @@
 }
 
 .mat-card-header {
+  cursor: pointer;
+
   &:focus, &:hover {
     outline: none;
 
     .title {
-      border-bottom: 1px dashed #aaaaaa;
+      text-decoration-line: underline;
+      text-decoration-style: dashed;
+      text-decoration-color: inherit;
+      text-decoration-thickness: from-font;
     }
   }
 }