UI Tweaks

app/js/directives/directive-component-select.js

@@ -8,7 +8,7 @@ angular.module('app').directive('componentSelect', function() {
       var o = opts[i];
       var id = o.id || (o.class + o.rating);  // Common components' ID is their class and rating
 
-      if (i > 0 && opts.length > 3 && o.class != prevClass && (!o.grp || o.rating != prevRating || o.mode)) {
+      if (i > 0 && opts.length > 4 && o.class != prevClass && (o.rating != prevRating || o.mode)) {
         list.push('<br/>');
       }
 
@@ -24,7 +24,7 @@ angular.module('app').directive('componentSelect', function() {
         list.push('<svg cpid="', id, '" class="icon lg"><use cpid="', id, '" xlink:href="#mount-', o.mode, '"></use></svg> ');
       }
 
-      list.push('<span>', o.class, o.rating);
+      list.push('<span cpid="', id, '">', o.class, o.rating);
 
       if (o.missile) {
         list.push('/' + o.missile);

app/less/select.less

@@ -73,7 +73,7 @@ select {
     cursor: pointer;
     line-height:@optionSpacing;
     color: @primary-disabled;
-    stroke-width: 5px;
+    stroke-width: 0.5em;
     stroke: @primary-disabled;
 
     &:hover {

app/less/slot.less

@@ -24,6 +24,13 @@
     text-transform: none;
   }
 
+  .name {
+    overflow: hidden;
+    white-space: nowrap;
+    max-width: 80%;
+    text-overflow: ellipsis;
+  }
+
   .cb {
     overflow: hidden;
   }

app/views/_slot-internal.html

@@ -1,7 +1,7 @@
 <div class="sz" ng-bind="c.maxClass"></div>
 <div class="empty" ng-if="!c.c">EMPTY</div>
 <div ng-if="c.c">
-  {{c.c.class}}{{c.c.rating}} {{c.c.name || lbl}}
+  <div class="l name">{{c.c.class}}{{c.c.rating}} {{c.c.name || lbl}}</div>
   <div class="r">{{c.c.mass || c.c.capacity || '0'}} <u>T</u></div>
   <div class="cb"></div>
   <div class="l" ng-if="c.c.optmass">Optimal Mass: {{c.c.optmass}} <u>T</u></div>