VRFS-4049 jamclass menu UI cleaned up

web/app/assets/javascripts/jquery.lessonSessionActions.js

@@ -50,24 +50,33 @@
       var html = context._.template($('#template-lesson-session-actions').html(), options, { variable: 'data' })
 
       var extraClasses = ' '
-      if(options.cardNotOk) {
-        extraClasses += 'not-card-ok '
-      }
+      var width = 100;
+      var otherOverlap = 22;
+
       if(options.isRequested) {
         extraClasses += 'is-requested '
+        width = 100;
       }
       else if(options.isScheduled) {
         extraClasses += 'is-scheduled '
+        width = 120;
+      }
+      if(options.cardNotOk) {
+        extraClasses += 'not-card-ok '
+        width = 90;
       }
       if(options.isAdmin) {
         extraClasses += 'is-admin '
+        width = 135;
       }
       context.JK.hoverBubble($parent, html, {
         trigger:'none',
         cssClass: 'lesson-action-popup' + extraClasses,
         spikeGirth:0,
         spikeLength:0,
-        width:250,
+        otherOverlap: ((width - 90) / 2) + 25,
+        overlap: -10,
+        width:width,
         closeWhenOthersOpen: true,
         offsetParent: $parent.closest('.screen'),
         positions:['bottom'],
@@ -81,7 +90,7 @@
             timeout = null;
           }
           waitForBubbleHover($(container))
-          timeout = setTimeout(function() {$parent.btOff()}, 3000)
+          timeout = setTimeout(function() {$parent.btOff()}, 6000)
         }
       });
     });

web/app/assets/javascripts/react-components/LessonBookingDecision.js.jsx.coffee

@@ -155,7 +155,7 @@
     else
       actionBtnText = "ACCEPT & UPDATE LESSON"
 
-    counterClasses={field: true, 'slot-decision-field': true, error: this.props.counterErrors?}
+    counterClasses={field: true, 'slot-decision-field': true, error: this.props.counterErrors?, counterSelected: this.props.slot_decision == 'counter'}
 
 
     if this.props.counterErrors?

web/app/assets/stylesheets/client/lessonSessionActions.css.scss

@@ -4,23 +4,27 @@
 
   &.not-card-ok .bt-content{
     height:20px !important;
+    width:90px !important;
   }
 
   &.is-requested .bt-content{
     height:80px;
+    width:100px;
   }
 
   &.is-scheduled .bt-content{
     height:122px;
+    width:120px;
   }
 
   &.is-admin .bt-content{
-    height:145px;
+    height:152px;
+    width:135px;
   }
 
   .bt-content {
     height:80px;
-    width:250px;
+    width:100px;
     background-color:#333;
     overflow:auto;
     border:1px solid #ED3618;

web/app/assets/stylesheets/client/react-components/LessonBookingScreen.css.scss

@@ -65,14 +65,19 @@
     vertical-align: top;
   }
   .slot-alt-prompt {
+    display:none;
     color: $ColorTextTypical;
-    display: inline-block;
     margin-top: 4px;
     padding-left:22px;
     label {
       margin-bottom:10px;
     }
   }
+  .counterSelected {
+    .slot-alt-prompt {
+      display:inline-block;
+    }
+  }
 
   .slot-detail {
     color: $ColorTextTypical;

web/vendor/assets/javascripts/jquery.bt.js

@@ -99,6 +99,7 @@ jQuery.bt = {version: '0.9.7'};
             opts.spikeLength = numb(opts.spikeLength);
             opts.spikeGirth = numb(opts.spikeGirth);
             opts.overlap = numb(opts.overlap);
+            opts.otherOverlap = numb(opts.otherOverlap);
 
             var ajaxTimeout = false;
 
@@ -507,7 +508,7 @@ jQuery.bt = {version: '0.9.7'};
                     case 'bottom':
                         // spike on top
                         $text.css('margin-top', opts.spikeLength + 'px');
-                        $box.css({top: (top + height) - opts.overlap, left: horiz});
+                        $box.css({top: (top + height) - opts.overlap, left: horiz + opts.otherOverlap});
                         // move text up/down if extends out of window
                         textRightSpace = (winRight - opts.windowMargin) - ($text.offset().left + $text.btOuterWidth(true));
                         var xShift = shadowShiftX;
@@ -1141,6 +1142,7 @@ jQuery.bt = {version: '0.9.7'};
         spikeGirth:       10,                    // width of spike
         spikeLength:      15,                    // length of spike
         overlap:          0,                     // spike overlap (px) onto target (can cause problems with 'hover' trigger)
+        otherOverlap:     0,
         overlay:          false,                 // display overlay on target (use CSS to style) -- BUGGY!
         killTitle:        true,                  // kill title tags to avoid double tooltips