Fixed Issue #452 and #421

web/src/app/listing/component.html

@@ -14,7 +14,7 @@
 					  <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" (click)="descriptionClick($event)"
+					  <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>
 				  </td>
@@ -42,7 +42,7 @@
 			<span *ngIf="showRemoveButton" (click)="removeButtonClick()" class="remove-button position-absolute"  [placement]="['right','bottom','left','top','auto']" ngbPopover="Click on this button to remove class from sidebar" container="body" triggers="mouseenter:mouseleave">
 				<img src="assets/images/remove.svg" />
 			</span>
-			<div class="menu position-absolute" (click)="showingMenu=!showingMenu">
+			<div class="menu position-absolute" (click)="expandDescripAndListings()">
 				<div class = "arrow-container down-arrow" *ngIf="!showingMenu">
 					<i class="arrow down"></i>
 				</div>

web/src/app/listing/component.ts

@@ -28,6 +28,9 @@ export class ListingComponent implements OnInit{
   public showingDescription;
   public hovered;
 
+  public mouseMove: boolean = false;
+  public mouseDown: boolean = false; 
+
   ngOnInit () {
     this.showingMenu = false;
     this.showingDescription = false;
@@ -69,10 +72,24 @@ export class ListingComponent implements OnInit{
     return this.conflictsService.doesConflict(section);
   }
 
-  public descriptionClick (event): void {
+  public mouseDownFunc (): void { 
+    this.mouseDown = true;
+  }
+
+  public mouseMoveFunc (): void { 
+    if (this.mouseDown) {
+      this.mouseMove = true;
+    }
+  }
+
+  public descriptionClick (event): void { 
     event.stopPropagation();
-    // this.selectionService.toggleCourse(this.listing);
-    this.showingDescription= !(this.showingDescription);
+    if (this.mouseMove) {
+      this.selectionService.toggleCourse(this.listing);
+    } 
+
+    this.mouseMove = false;
+    this.mouseDown = false;
   }
 
   public get tooltipDescription (): string {
@@ -105,4 +122,10 @@ export class ListingComponent implements OnInit{
     this.sidebarService.removeListing(this.listing);
     this.selectionService.removeListing(this.listing);
   }
+
+  public expandDescripAndListings (): void {
+    this.showingDescription = !this.showingDescription;
+    this.showingMenu = !this.showingMenu;
+  }
+
 }

web/src/app/listing/section/component.html

@@ -4,8 +4,8 @@
     <div class="col-2 align-center section-details">
       <div>
         <span *ngIf="doesConflict()" placement="top" triggers="mouseenter:mouseleave" title="Section Conflicts"><img class="conflict-img" src="assets/images/red_exclamation.svg" /></span>
-        <span class="section-crn">{{section.crn}}</span>
-        <span class="section-instructors">{{ section.instructors.join(', ') }}</span>
+        <span class="section-crn"> {{section.crn}}</span>
+        <span class="section-instructors"> {{ section.instructors.join(', ') }}</span>
         <div class="section-seats">
           {{ section.seats - section.seatsTaken }}
           <span>/{{ section.seats }} seats</span>
@@ -16,7 +16,7 @@
       <table class = "section-periods">
         <tr *ngFor="let week of periods">
           <span *ngFor="let period of week; let i = index">
-            <td class = "period-time">
+            <td [ngClass]="{'period-time-conflict':doesConflict()===true, 'period-time-no-conflict':doesConflict()===false}">
               <div class = "col-12">
                 <div class="row">
                   <span *ngIf="period">{{ getHours(period) }}</span>

web/src/app/listing/section/component.scss

@@ -36,14 +36,25 @@
     white-space: nowrap;
 }
 
-.period-time {
+.period-time-conflict {
     font-size: 90%;
     width: 6em;
+    color: rgb(112, 105, 105);
+    font-weight: 100;
 }
-.period-day {
+
+.period-time-no-conflict {
+    font-size: 90%;
+    width: 6em;
+    color: #000;
     font-weight: 400;
 }
 
+.period-day {
+    font-weight: 100;
+}
+
+
 div.conflict-note {
     margin-left:0.4em;
     display:inline;