Misc ui fixes

web/src/app/listing/component.html

@@ -1,7 +1,7 @@
-<div class = "course" (mouseenter)="hovered=true" (mouseleave) = "hovered=false">
+<div class="course">
 	<div class="row flex-nowrap h-100 min-height">
 	  <div class="indicator-container" (click)="clickCourse()">
-	  	<div class="indicator h-100" [class.indicator-selected]="isCourseSelected()" [class.indicator-unselected]="!isCourseSelected()" [class.indicator-hover]="hovered && !isCourseSelected()" [class.indicator-selected-hover]="hovered && isCourseSelected()"></div>
+	  	<div class="indicator h-100" [class.indicator-selected]="isCourseSelected()" [class.indicator-unselected]="!isCourseSelected()"></div>
 	  </div>
 	  <div class="w-100 h-100 course-content position-relative min-height">
 		  <table (click)="clickCourse()" class="w-100 table-margin">
@@ -14,9 +14,16 @@
 					  <div class= "course-details">{{listing.course.subject.shortname}}   {{listing.course.shortname}}</div>
 				  </td>
 				  <td [rowSpan]="showingDescription ? 3 : 2">
-					  <div *ngIf="showDescription" [class.overflow-hide]="!showingDescription" (mousemove)="mouseMoveFunc()" (mouseup)="descriptionClick($event)" (mousedown)="mouseDownFunc()"  (mousemove)="mouseMoveFunc()"
-						   [class.showDescription]="showingDescription" [class.hideDescription]="!showingDescription"
-						   [class.selectedDescription]="isCourseSelected()">{{listing.description}}</div>
+						<div
+							*ngIf="showDescription && listing.description"
+							[class.overflow-hide]="!showingDescription"
+							(click)="descriptionClick($event)"
+							[class.showDescription]="showingDescription"
+							[class.hideDescription]="!showingDescription"
+							[class.selectedDescription]="isCourseSelected()"
+						>
+							{{listing.description}}
+						</div>
 				  </td>
 			  </tr>
 			  <tr class="align">
@@ -28,10 +35,10 @@
 				  <td [colSpan]="showingDescription ? 1 : 2">
 					  <div *ngIf="getSectionConflictCount() === 0 && getSectionClosedCount() === 0; else elseContent" class="closed-conflict null">&nbsp;</div>
 					  <ng-template #elseContent>
-						  <div *ngIf="getSectionConflictCount() < listing.sections.length && getSectionConflictCount() != 0" class="closed-conflict some" placement="top" ngbPopover="Some sections are conflicting" container="body" triggers="mouseenter:mouseleave">Conflicting Sections</div>
-						  <div *ngIf="getSectionConflictCount() === listing.sections.length" class="closed-conflict all" placement="top" ngbPopover="All sections are conflicting" container="body" triggers="mouseenter:mouseleave">Conflicting Sections</div>
-						  <div *ngIf="getSectionClosedCount() < listing.sections.length && getSectionClosedCount() != 0" class="closed-conflict some" placement="top" ngbPopover="Some sections are closed" container="body" triggers="mouseenter:mouseleave">Full Sections</div>
-						  <div *ngIf="getSectionClosedCount() === listing.sections.length" class="closed-conflict all" placement="top" ngbPopover="All sections are closed" container="body" triggers="mouseenter:mouseleave">Full Sections</div>
+						  <div *ngIf="getSectionConflictCount() < listing.sections.length && getSectionConflictCount() != 0" class="closed-conflict some" placement="top" ngbPopover="Some sections are conflicting" container="body">Conflicting Sections</div>
+						  <div *ngIf="getSectionConflictCount() === listing.sections.length" class="closed-conflict all" placement="top" ngbPopover="All sections are conflicting" container="body">Conflicting Sections</div>
+						  <div *ngIf="getSectionClosedCount() < listing.sections.length && getSectionClosedCount() != 0" class="closed-conflict some" placement="top" ngbPopover="Some sections are closed" container="body">Full Sections</div>
+						  <div *ngIf="getSectionClosedCount() === listing.sections.length" class="closed-conflict all" placement="top" ngbPopover="All sections are closed" container="body">Full Sections</div>
 					  </ng-template>
 				  </td>
 			  </tr>

web/src/app/listing/component.scss

@@ -232,7 +232,7 @@ section.closed, section.closed:hover {
   background: $yacs_bgs;
 }
 
-.indicator-selected-hover {
+.indicator-selected:hover {
   background: $yacs_acc;
 }
 
@@ -245,7 +245,7 @@ section.closed, section.closed:hover {
   padding-right: 15px;
 }
 
-.indicator-hover {
+.indicator:hover {
   background: #969696;
 }
 

web/src/app/listing/component.ts

@@ -26,10 +26,6 @@ export class ListingComponent implements OnInit{
 
   public showingMenu;
   public showingDescription;
-  public hovered;
-
-  public mouseMove: boolean = false;
-  public mouseDown: boolean = false; 
 
   ngOnInit () {
     this.showingMenu = false;
@@ -55,6 +51,24 @@ export class ListingComponent implements OnInit{
     this.selectionService.toggleCourse(this.listing);
   }
 
+  public descriptionClick (event) {
+    // Relevant: https://stackoverflow.com/questions/10390010/jquery-click-is-triggering-when-selecting-highlighting-text
+    event.stopPropagation();
+    if (window.getSelection) {
+      // This operation checks "globally" to see if there are any highlights anywhere.
+      // If there are, course clicks are disabled.
+      // But remember that when the user makes a "true" click all other highlights are unmarked.
+      // So it isn't possible for a highlight in one part of the app to break the rest.
+      const selection = window.getSelection();
+      if (!selection.toString()) {
+        this.clickCourse();
+      }
+    } else {
+      // selection API not supported -- oh well
+      this.clickCourse();
+    }
+  }
+
   public isCourseSelected () {
     return this.selectionService.hasSelectedSection(this.listing);
   }
@@ -64,6 +78,9 @@ export class ListingComponent implements OnInit{
   }
 
   public clickSection (section: Section): void {
+    if (window.getSelection().toString()) {
+
+    }
     this.selectionService.toggleSection(section);
   }
 
@@ -72,26 +89,6 @@ export class ListingComponent implements OnInit{
     return this.conflictsService.doesConflict(section);
   }
 
-  public mouseDownFunc (): void { 
-    this.mouseDown = true;
-  }
-
-  public mouseMoveFunc (): void { 
-    if (this.mouseDown) {
-      this.mouseMove = true;
-    }
-  }
-
-  public descriptionClick (event): void { 
-    event.stopPropagation();
-    if (this.mouseMove) {
-      this.selectionService.toggleCourse(this.listing);
-    } 
-
-    this.mouseMove = false;
-    this.mouseDown = false;
-  }
-
   public get tooltipDescription (): string {
     return this.listing.description || 'No description available :(';
   }