[Frontend] Timeline Gantt bar mods to allow small min-width

open #965
- CSS adjusted to handle min-width of 2px and better
approach to ellipsizing text;
- Angular ng-class added to hide icon and title if
width less than a value;
- Rounded corners on bars removed;

platform/features/timeline/res/sass/_activities.scss

@@ -1,16 +1,22 @@
 .l-timeline-gantt {
+    min-width: 2px;
+    overflow: hidden;
 	position: absolute;
 	top: $timelineSwimlaneGanttVM; bottom: $timelineSwimlaneGanttVM;
 
 	.bar {
 		@include ellipsize();
 		height: $activityBarH;
-		line-height: $activityBarH + 2;
+		line-height: $activityBarH;
 		padding: 0 $interiorMargin;
 
 		span {
-			display: inline;
+            $iconW: 20px;
+            @include absPosDefault();
+            display: block;
 			&.s-activity-type {
+                right: auto; width: $iconW;
+                text-align: center;
 				&.timeline {
 					&:before {
 						content:"S";
@@ -23,7 +29,9 @@
 				}
 			}
 			&.s-title {
-				text-shadow: rgba(black, 0.1) 0 1px 2px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                left: $iconW;
 			}
 			&.duration {
 				left: auto;
@@ -52,6 +60,10 @@
 			}
 		}
 	}
+    &.sm .bar span {
+        // Hide icon and label if width is too small
+        display: none;
+    }
 }
 
 .edit-mode .s-timeline-gantt,

platform/features/timeline/res/sass/_timeline-thematic.scss

@@ -32,20 +32,10 @@
 }
 
 .s-timeline-gantt {
-    $br: $controlCr;
     .bar {
         color: $colorGanttBarFg;
         @include activityBg($colorGanttBarBg);
-        border-radius: $br;
         box-shadow: $shdwGanttBar;
-        &.expanded {
-            @include border-top-radius($br);
-            @include border-bottom-radius(0);
-        }
-        &.leaf {
-            @include border-top-radius(0);
-            @include border-bottom-radius($br);
-        }
         .s-toggle {
             color: $colorGanttToggle;
         }

platform/features/timeline/res/templates/activity-gantt.html

@@ -20,6 +20,7 @@
  at runtime from the About dialog for additional information.
 -->
 <div class="t-timeline-gantt l-timeline-gantt s-timeline-gantt"
+     ng-class="{ sm: gantt.width(timespan, parameters.scroll, parameters.toPixels) < 25 }"
      title="{{model.name}}"
      ng-controller="TimelineGanttController as gantt"
      ng-style="timespan ? {