Merge pull request #228 from fractal-analytics-platform/improve-display-of-workflowtask-page

Improve layout of workflow task panel

Author: rkpasia

src/lib/components/workflow/ArgumentsSchema.svelte

@@ -82,6 +82,11 @@
 
 <div id='workflow-arguments-schema-panel'>
   <div id='json-schema-validation-errors'></div>
+  <div class='args-list'>
+    <JSchema bind:unsavedChanges={unsavedChanges} bind:discardChanges={resetChanges} bind:saveChanges={saveChanges}
+             schema={argumentsSchema} schemaData={args} {handleSaveChanges} {handleValidationErrors}
+             bind:this={schemaComponent} />
+  </div>
   <div class='d-flex justify-content-end jschema-controls-bar p-3'>
     <div>
       <button class='btn btn-success {unsavedChanges ? "" : "disabled"}' on:click={saveChanges}>
@@ -94,9 +99,4 @@
       </button>
     </div>
   </div>
-  <div class='args-list'>
-    <JSchema bind:unsavedChanges={unsavedChanges} bind:discardChanges={resetChanges} bind:saveChanges={saveChanges}
-             schema={argumentsSchema} schemaData={args} {handleSaveChanges} {handleValidationErrors}
-             bind:this={schemaComponent} />
-  </div>
 </div>

src/routes/projects/[projectId]/workflows/[workflowId]/+page.svelte

@@ -310,7 +310,7 @@
 </div>
 
 {#if workflow}
-	<div class='container py-4'>
+	<div class='container py-4 px-0'>
 		<div class='row'>
 			<div class='col-4'>
 				<div class='card'>
@@ -360,46 +360,44 @@
 			</div>
 			<div class="col-8">
 				<div class="card">
-					<div class="card-header">
+					<div class='card-header py-1'>
 						{#if selectedWorkflowTask}
-							<div class="d-flex mb-3 justify-content-between align-items-center">
-								<div>
-									Workflow task {selectedWorkflowTask.task.name}
-								</div>
+							<div class='d-flex justify-content-between'>
+								<ul class='nav nav-tabs card-header-tabs'>
+									<li class='nav-item'>
+										<button
+											data-bs-toggle='tab'
+											data-bs-target='#args-tab'
+											class="nav-link {workflowTabContextId === 0 ? 'active' : ''}"
+											aria-current='true'
+										>Arguments
+										</button>
+									</li>
+									<li class='nav-item'>
+										<button
+											data-bs-toggle='tab'
+											data-bs-target='#meta-tab'
+											class="nav-link {workflowTabContextId === 1 ? 'active' : ''}"
+										>Meta
+										</button>
+									</li>
+									<li class='nav-item'>
+										<span class='nav-link disabled'>Info</span>
+									</li>
+								</ul>
 								<ConfirmActionButton
-									modalId="confirmDeleteWorkflowTask"
-									btnStyle="danger"
-									buttonIcon="trash"
-									message="Delete a workflow task {selectedWorkflowTask.task.name}"
+									modalId='confirmDeleteWorkflowTask'
+									btnStyle='danger'
+									buttonIcon='trash'
+									message='Delete a workflow task {selectedWorkflowTask.task.name}'
 									callbackAction={handleDeleteWorkflowTask.bind(
 										this,
 										workflow.id,
 										selectedWorkflowTask.id
 									)}
 								/>
 							</div>
-							<ul class='nav nav-tabs card-header-tabs'>
-								<li class='nav-item'>
-									<button
-										data-bs-toggle='tab'
-										data-bs-target='#args-tab'
-										class="nav-link {workflowTabContextId === 0 ? 'active' : ''}"
-										aria-current='true'
-									>Arguments
-									</button>
-								</li>
-								<li class='nav-item'>
-									<button
-										data-bs-toggle='tab'
-										data-bs-target='#meta-tab'
-										class="nav-link {workflowTabContextId === 1 ? 'active' : ''}"
-									>Meta
-									</button>
-								</li>
-								<li class='nav-item'>
-									<span class='nav-link disabled'>Info</span>
-								</li>
-							</ul>
+
 						{:else}
 							Select a workflow task from the list
 						{/if}

static/global.css

@@ -1,5 +1,9 @@
 #json-schema > .properties-block > .property-block {
-    border-top: 1px solid #dee2e6;
+    border-bottom: 1px solid #dee2e6;
+}
+
+#json-schema > .properties-block > .property-block:last-child {
+    border-bottom: none;
 }
 
 .popover {