Change layout for workflow instance properties and graph, and fix Gru…

…nt warnings
NitorCreations · Feb 5, 2021 · 39e5615 · 39e5615
1 parent c6a713b
commit 39e5615
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 29 deletions.
diff --git a/nflow-explorer/src/app/app.js b/nflow-explorer/src/app/app.js
@@ -28,8 +28,8 @@
 
   m.run(function (EndpointService, ExecutorService, $window, config) {
     if (config.htmlTitle) {
-      $window.document.title = config.htmlTitle
-    };
+      $window.document.title = config.htmlTitle;
+    }
     EndpointService.init();
     ExecutorService.start();
   });

diff --git a/nflow-explorer/src/app/workflow/workflow.html b/nflow-explorer/src/app/workflow/workflow.html
@@ -8,11 +8,24 @@ <h2>
         ({{ctrl.workflow.id}})
       </h2>
       <blockquote ng-show="ctrl.definition.description">{{ctrl.definition.description}}</blockquote>
-      <workflow-info workflow="ctrl.workflow"
-                     parent-workflow="ctrl.parentWorkflow"
-                     child-workflows="ctrl.childWorkflows"
-                     definition="ctrl.definition"></workflow-info>
-      <workflow-graph definition="ctrl.definition" workflow="ctrl.workflow"></workflow-graph>
+      <div ng-if="ctrl.definition.states.length > 15">
+        <workflow-info workflow="ctrl.workflow"
+            parent-workflow="ctrl.parentWorkflow"
+            child-workflows="ctrl.childWorkflows"
+            definition="ctrl.definition"></workflow-info>
+          <workflow-graph definition="ctrl.definition" workflow="ctrl.workflow"></workflow-graph>
+      </div>
+      <div class="row" ng-if="ctrl.definition.states.length <= 15">
+        <div class="col-lg-6">
+          <workflow-info workflow="ctrl.workflow"
+                        parent-workflow="ctrl.parentWorkflow"
+                        child-workflows="ctrl.childWorkflows"
+                        definition="ctrl.definition"></workflow-info>
+        </div>
+        <div class="col-lg-6">
+          <workflow-graph definition="ctrl.definition" workflow="ctrl.workflow"></workflow-graph>
+        </div>
+      </div>
     </div>
     <div class="col-md-6">
       <workflow-tabs definition="ctrl.definition" workflow="ctrl.workflow"

diff --git a/nflow-explorer/src/app/workflow/workflowInfo.js b/nflow-explorer/src/app/workflow/workflowInfo.js
@@ -6,7 +6,7 @@
     'nflowExplorer.workflow.graph',
   ]);
 
-  m.directive('workflowInfo', function(config) {
+  m.directive('workflowInfo', function() {
     return {
       restrict: 'E',
       replace: true,

diff --git a/nflow-explorer/src/styles/main.scss b/nflow-explorer/src/styles/main.scss
@@ -111,22 +111,15 @@ a {
 
 /* for making svg images responsive */
 .svg-container {
-  display: inline-block;
-  position: relative;
-  width: 100%;
-  vertical-align: middle;
-  overflow: hidden;
+  margin: 10px;
 }
 
-.svg-content {
-  display: inline-block;
-  position: absolute;
-  top: 0;
-  left: 0;
+.svg-content-responsive {
+  width: 100%;
 }
 
 .highlight {
-   font-weight: bold;
+  font-weight: bold;
 }
 
 .vertical-align {
@@ -266,16 +259,6 @@ ul.listing {
   cursor: pointer;
 }
 
-.svg-container {
-  width: 100%;
-  padding-top: 10px;
-  padding-bottom: 10px;
-}
-
-.svg-content-responsive {
-  width: 100%;
-}
-
 #workflow-properties tr:nth-child(even) {
   background-color: #f2f2f2;
 }