better mimimap handling when too many machines

Author: Kidel

css/style.css

@@ -212,6 +212,9 @@ textarea {
     color: rgba(0, 0, 0, 0.45);
     margin-bottom: 1px;
     margin-top: 0px;
+
+    transform: scale(1, 1);
+    transition: transform 0.2s ease-in-out;
 }
 .mock-machine-first {
     border-top: 3px solid #337ab7;
@@ -267,6 +270,7 @@ textarea {
 }
 #minimap-body {
     transform-origin: center top;
+    transition: transform 0.2s ease-in-out;
 }
 #minimap {
     position: fixed;

index.html

@@ -305,7 +305,7 @@ <h4>Bash file preview:</h4>
             <span id="mock-main-menu" class="mock mock-main-menu"></span>
             <span class="mock mock-disclaimer" id="mock-disclaimer"></span>
             <div class="btn btn-default mock mock-labinfo" data-ng-click="scrollTo($event, 'labInfo_anchor')"></div>
-            <div data-ng-repeat="x in netkit track by $index" class="btn btn-default mock mock-machine" ng:class="{true:'mock-machine-first', false:''}[$index==0]" data-ng-click="scrollTo($event, x._uid)"><span>{{$index+1}}</span>{{x.name}}</div>
+            <div data-ng-repeat="x in netkit track by $index" class="btn btn-default mock mock-machine" ng:class="{true:'mock-machine-first', false:''}[$index==0]" data-ng-click="scrollTo($event, x._uid)" ng-style="compensationScale[$index]" ng-mouseenter="changeScale($index, true)" ng-mouseleave="changeScale($index, false)"><span>{{$index+1}}</span>{{x.name}}</div>
             <div class="mock mock-preview-text">Bash file preview:</div>
             <span class="mock mock-preview"></span>
         </div>

js/controller.js

@@ -23,6 +23,7 @@ app.controller('nc', function($location, $anchorScroll, $scope) {
     $scope.labInfo.toggle = "enable";
 
     $scope.minimap_transform = 1;
+    $scope.compensationScale = [];
 
     $scope.updateMimimapRatio = function(x) {
         var ratio = window.innerHeight / (x + document.getElementById('minimap-body').offsetHeight);
@@ -32,7 +33,11 @@ app.controller('nc', function($location, $anchorScroll, $scope) {
         else {
             $scope.minimap_transform = 1;
         }
-    }
+    };
+
+    $scope.changeScale = function(index, enter) {
+        $scope.compensationScale[index] = enter? { transform: "scale(1, "+ 1/$scope.minimap_transform +")"}:{ transform: "scale(1, 1)"};
+    };
 
     $scope.addMachine = function() {
         $scope.counter++;