styling and minimap

Author: NeejaYanglea

css/style.css

@@ -1,11 +1,15 @@
 body {
     padding: 50px 0 0 0;
 }
+.bodypadded {
+    padding: 50px 120px 0 0;
+}
 .ng-hide {
     display: none;
     visibility: hidden;
     opacity: 0;
 }
+
 .form-control {
     border-radius: 0;
     padding: 2px 6px;
@@ -162,8 +166,94 @@ textarea {
     position: fixed;
 }
 .right-margin {
-    right: 24px;
+    right: 140px;
+}
+.mock {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-align: left;
+    color: rgba(0, 0, 0, 0.65);
+    margin: 3px;
+    font-size: 80%;
+}
+.mock-machine {
+    width: 100px;
+    height: 30px;
+    background-color: rgba(0, 0, 0, 0.01);
+    color: rgba(0, 0, 0, 0.45);
+    margin-bottom: 1px;
+    margin-top: 0px;
+}
+.mock-machine-first {
+    border-top: 3px solid #337ab7;
+    margin-top: 3px;
+}
+.mock-main-menu {
+    display: block;
+    position: absolute;
+    top: 0;
+    z-index: 9999;
+    width: 100%;
+    height: 5px;
+    background-color: #337ab7;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.01);
+    margin: 0;
+}
+.mock-submenu {
+    -webkit-box-shadow: 0 5px 0px 0px #5b8fbd;
+    -moz-box-shadow: 0 5px 0px 0px #5b8fbd;
+    -ms-box-shadow: 0 5px 0px 0px #5b8fbd;
+    box-shadow: 0 5px 0px 0px #5b8fbd;
+}
+.mock-disclaimer {
+    display: block;
+    width: 100%;
+    height: 25px;
+    background-color: #000;
+    margin: 0;
+    margin-bottom: -5px;
 }
+.mock-labinfo {
+    width: 20px;
+    height: 30px;
+    margin-top: 10px;
+    background-color: rgba(0, 0, 0, 0.01);
+    border-top: 3px solid #337ab7;
+}
+.mock-preview-text {
+    font-size: 40%;
+}
+.mock-preview {
+    display: block;
+    width: 108px;
+    height: 40px;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+}
+#minimap-body {
+    transform-origin: center top;
+}
+#minimap {
+    position: fixed;
+    z-index: 9998;
+    text-align: left;
+    background-color: rgba(255, 255, 255, 1);
+    right: 0;
+    top: 0;
+    width: 120px;
+    height: 100%;
+    padding: 0;
+    border-left: 2px solid rgba(0, 0, 0, 0.2);
+    border-right: 2px solid rgba(0, 0, 0, 0.2);
+    font-size: 80%;
+}
+#minimap *::selection {
+    background: rgba(0, 0, 0, 0) !important;
+}
+#minimap *::-moz-selection {
+    background: rgba(0, 0, 0, 0) !important;
+}
+
 /*Modal*/
 .modal-kathara {
     display: inherit!important;
@@ -181,7 +271,7 @@ textarea {
 /*Navbar*/
 .navbar-kathara {
     position: fixed;
-    z-index: 9999;
+    z-index: 9997;
     background-color: #337ab7;
     color: #fff; 
     width: 100%;
@@ -191,7 +281,7 @@ textarea {
     box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.35);
 }
 .navbar-kathara-primary {
-    z-index: 9998;
+    z-index: 9996;
     top: 0;
 }
 .navbar-kathara li a, .navbar-kathara li a:visited, .navbar-kathara li a:focus {
@@ -202,7 +292,7 @@ textarea {
     background-color: #5b8fbd;
 }
 .navbar-kathara-secondary {
-    z-index: 9999;
+    z-index: 9995;
     top: 51px;
     background-color: #5b8fbd;
 }
@@ -266,4 +356,30 @@ input[type=file] {
 #labInfo {
     /*float:left;*/
     width: 206px;
-}
+}
+
+/* scrollbar */
+::-webkit-scrollbar {
+    width: 12px;
+}
+ 
+/* Track */
+::-webkit-scrollbar-track {
+    background: rgb(102, 102, 102);
+    border-radius: 0;
+    border: 2px solid rgba(0, 0, 0, 0.15);
+}
+/* Handle */
+::-webkit-scrollbar-thumb {
+    -webkit-border-radius: 0;
+    border-radius: 0;
+    background: #337ab7;
+    border-radius: 0;
+    border: 2px solid #2e6da4;
+    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 1);
+}
+::-webkit-scrollbar-thumb:window-inactive {
+    background: #5b8fbd;
+    border-color: #337ab7;
+}
+/* end scrollbar*/

electronClient.js

@@ -19,7 +19,7 @@ var tmp_folder = app.getPath('userData');
 // Listen for app to be ready
 app.on('ready', function(){
   // Create new window
-  mainWindow = new BrowserWindow({width: 1366, height: 768});
+  mainWindow = new BrowserWindow({width: 1366, height: 768, minWidth: 800, minHeight: 580});
   // Load html in window
   mainWindow.loadURL(url.format({
     pathname: path.join(__dirname, 'index.html'),

index.html

@@ -14,7 +14,8 @@
     <link rel="shortcut icon" type="image/png" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABjUlEQVQ4ja2RsW7aQByHP87ns2Mj180YlQeIOrBU4nmKisQ7IPECDCwMTHkIxIY6MdKFocrGGzTCjm2dzz6lA9gNahQpaX/TXyd99/3vd/CP6ex2u6/H4/HuHayN4/hbZ7PZ6H6/71VV9SbadV32+/2TNMZ4VVUxHo//XG3tX0Ce59T1EwDX1x9YLpcYYzoSoCxLAKbTKdvtlsPh0IJJklAUBdY6APi+z+Nj2jKiGQDm8zmDwYCbm08kSUKSJKSpJssMAN1uhFJXuK6iEQuAuq6x1jIajVitVtzf/2Q4HHJ7+xmtNb7v0+1GCOGgVIDv+9R1DYB8/t7FYkEQBFhrmc1mWOtcgEI4CCGQUrVdSQCtNXmeE8cxRVGcWw4JwyuUCk4m6QLgeQFZ9oDW+nRelmVbSFmWGGPOZX28sHpe0G4qhEPDyedfZYzBWovrhigVIKV7Ab4U2awShiFpmp7tDvALKRVZ9tBam3jeadZaIxtoMpm8anopaZoioyj6sV6vv7yZBnq93vf3cP83vwGLvrOpZ8u5AwAAAABJRU5ErkJggg==" />
     <script src="js/page.js"></script>
 </head>
-<body id="logos" class="bg-logos">
+<body id="logos" class="bg-logos bodypadded">
+
 <script>
     var isIE = navigator.userAgent.indexOf('MSIE')!==-1 || navigator.appVersion.indexOf('Trident/') > 0;
     if (isIE)
@@ -40,7 +41,7 @@ <h4><a href="https://github.com/Kidel/Netkit-Lab-Generator" target="_blank">http
         <br />
         <br />
         The <a href="https://github.com/Kidel/Netkit-Lab-Generator/graphs/contributors" target="_blank">authors</a>
-        of this application do not take any responsibility for any malfunction. Remember to check the final configuration for exams and production.
+        of this application do not take any responsibility for any malfunction. Remember to manually check the final configuration for exams and production.
     </div>
 </div>
 
@@ -106,7 +107,7 @@ <h4><a href="https://github.com/Kidel/Netkit-Lab-Generator" target="_blank">http
                         <th colspan="4">Additional functions</th>
                     </tr>
 
-                    <tr data-ng-repeat="x in netkit track by $index">
+                    <tr data-ng-repeat="x in netkit track by $index" id="{{x._uid}}">
                         <td>
                             <div><label>Machine {{x.row}}:</label>
                                 <input type="text" data-ng-model="x.name" class="form-control" placeholder="pc" required /></div>
@@ -286,7 +287,7 @@ <h4>Bash file preview:</h4>
     </div>
 
     <!-- Side-menu -->
-    <div id="col1" class="col-xs-2" align="right">
+    <div id="col1" class="col-xs-1" align="right">
         <div class="fixed right-margin side-menu">
             <div align="right">
                 <div class="btn btn-success" data-ng-click="addMachine()"><i class="fa fa-plus" aria-hidden="true"></i><strong>Add machine</strong></div>
@@ -297,6 +298,17 @@ <h4>Bash file preview:</h4>
         </div>
     </div>
 
+    <div id="minimap" class="col-xs-1">
+        <div id="minimap-body" ng-style="{ 'transform': 'scale(1, ' + minimap_transform + ')' }">
+            <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')"></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)">{{x.name}}</div>
+            <div class="mock mock-preview-text">Bash file preview:</div>
+            <span class="mock mock-preview"></span>
+        </div>
+    </div>
+
     <!-- Sub-menu Run on Host -->
     <nav id="submenu-0" class="navbar navbar-primary navbar-kathara navbar-kathara-secondary ng-hide">
         <div class="container-fluid">
@@ -390,8 +402,6 @@ <h4 class="modal-title">Running Commands</h4>
 <script src="js/model.js"></script>
 <script src="js/controller.js"></script>
 
-
-
 <script>
     window.onload= function() {
         console.log("  _______          __   __   .__  __    \n  \\      \\   _____/  |_|  | _|__|/  |_  \n  /   |   \\_/ __ \\   __\\  |/ /  \\   __\\ \n /    |    \\  ___/|  | |    <|  ||  |   \n \\____|__  /\\___  >__| |__|_ \\__||__|   \n         \\/     \\/          \\/         ");
@@ -442,6 +452,7 @@ <h4 class="modal-title">Running Commands</h4>
             titleLink.classList.remove("ng-hide");
         }
     }
+
 </script>
 
 </body>

js/controller.js

@@ -7,30 +7,53 @@ app.config(['$compileProvider',
     }
 ]);
 
-app.controller('nc', function($scope) {
+app.controller('nc', function($location, $anchorScroll, $scope) {
 
     $scope.app = "include/app.html";
 
+    $scope.scrollTo = function(e, hash) {
+        e.preventDefault();
+        $location.hash(hash);
+        $anchorScroll();
+    };
+
     $scope.labInfo = JSON.clone(labInfo);
-    $scope.netkit = [JSON.clone(backbone)];
-    $scope.counter = 1;
+    $scope.netkit = [];
+    $scope.counter = 0;
     $scope.labInfo.toggle = "enable";
 
+    $scope.minimap_transform = 1;
+
+    $scope.updateMimimapRatio = function(x) {
+        var ratio = window.innerHeight / (x + document.getElementById('minimap-body').offsetHeight);
+        if(ratio < 1) {
+            $scope.minimap_transform = ratio;
+        }
+        else {
+            $scope.minimap_transform = 1;
+        }
+    }
+
     $scope.addMachine = function() {
         $scope.counter++;
         var p = JSON.clone(backbone);
         p.row=$scope.counter;
+        p._uid=Math.floor((Math.random() * 1000000000000000) + 1);
         $scope.netkit.push(p);
 
         changed = true;
+        $scope.updateMimimapRatio(31);
     };
 
+    $scope.addMachine();
+
     $scope.removeMachine = function() {
         if($scope.netkit.length>1 && confirm("Are you sure you want to remove the machine?")) {
             $scope.netkit.pop();
             $scope.counter--;
 
             changed = true;
+            $scope.updateMimimapRatio(-31);
         }
     };
 

js/page.js

@@ -19,30 +19,47 @@ function toggle_tab(event, elem) {
     var tab = document.getElementById(href);
     tab.className += " active";
     var col1 = document.getElementById("col1");
+    var minimap = document.getElementById("minimap");
+    var body = document.getElementById("logos");
     if(href == "home") {
         col1.classList.remove("ng-hide");
+        minimap.classList.remove("ng-hide");
+        body.classList.add("bodypadded");
     }
     else {
         col1.classList.add("ng-hide");
+        minimap.classList.add("ng-hide");
+        body.classList.remove("bodypadded");
     }
 }
 
 function collapseDisclaimer(e) {
     e.preventDefault();
     var disclaimer = document.getElementById("disclaimer");
     disclaimer.classList.add("ng-hide");
+    var mock_disclaimer = document.getElementById("mock-disclaimer");
+    mock_disclaimer.classList.add("ng-hide");
 }
 
 function toggle_submenu(e, number, total) {
+    var toggled = false;
+    var mock_main_menu = document.getElementById("mock-main-menu");
     for(var i=0; i<total; i++) {
         var current_submenu = document.getElementById("submenu-"+i);
         if(i==number) {
+            toggled = true;
             current_submenu.classList.remove("ng-hide");
         }
         else {
             current_submenu.classList.add("ng-hide");
         }
     }
+    if(toggled) {
+        mock_main_menu.classList.add("mock-submenu");
+    }
+    else {
+        mock_main_menu.classList.remove("mock-submenu");
+    }
 }
 
 function toggle_tab_and_submenu(event, elem, total_submenus) {
@@ -59,4 +76,4 @@ function close_modal(e){
 function show_modal(){
     var modal = document.getElementById("command-modal");
     modal.classList.remove("ng-hide");
-}
+}

package.json

@@ -11,7 +11,9 @@
   },
   "author": "Gaetano Bonofiglio",
   "license": "GPL-3.0",
-  "dependencies": {},
+  "dependencies": {
+    "dom-minimap": "^1.7.2"
+  },
   "devDependencies": {
     "electron": "^1.7.10"
   }