TasksPage: rearrange components. Also, update CSS styles

zooniverse · Jan 10, 2025 · d1de3f7 · d1de3f7
1 parent 1b22a67
commit d1de3f7
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 48 deletions.
diff --git a/app/pages/lab-pages-editor/components/TasksPage/TasksPage.jsx b/app/pages/lab-pages-editor/components/TasksPage/TasksPage.jsx
@@ -275,41 +275,43 @@ export default function TasksPage() {
 
   return (
     <div className="tasks-page">
-      <div className="workflow-title flex-row">
-        <h2 className="flex-item">{workflow.display_name}</h2>
+      <div className="tasks-page-overview">
+        <select
+          aria-label="Choose starting Page"
+          className="workflow-start-selector"
+          onChange={handleChangeStartingPage}
+          style={(workflow?.steps?.length < 1) ? { visibility: 'hidden' } : undefined}
+          value={firstStepKey}
+        >
+          <option value="">Choose starting page</option>
+          {workflow.steps?.map(([stepKey, stepBody]) => (
+            <option
+              key={`choose-starting-page-${stepKey}`}
+              value={stepKey}
+            >
+              {firstStepKey === stepKey && 'Starting page: '}
+              {stepBody?.taskKeys?.join(', ') || `(${stepKey})` /* Note: if you see the stepKey instead of the taskKeys, something's wrong. */}
+            </option>
+          ))}
+        </select>
+        <span className="spacer" />
         {(isActive) ? <span className="status-active">Active</span> : <span className="status-inactive">Inactive</span>}
+        <WorkflowVersion />
       </div>
       <section aria-labelledby="workflow-tasks-heading">
-        <div className="flex-row">
-          <h3 id="workflow-tasks-heading" className="flex-item">Tasks</h3>
-          <WorkflowVersion />
-        </div>
-        <div className="flex-row">
+        <div
+          className="flex-row"
+          style={{ opacity: '0.25' }}
+        >
           <button
             className="flex-item big primary decoration-plus"
             onClick={handleClickAddTaskButton}
             type="button"
           >
             Add a new Task
           </button>
-          <select
-            aria-label="Choose starting Page"
-            className="flex-item workflow-starting-page"
-            onChange={handleChangeStartingPage}
-            style={(workflow?.steps?.length < 1) ? { visibility: 'hidden' } : undefined}
-            value={firstStepKey}
-          >
-            <option value="">Choose starting page</option>
-            {workflow.steps?.map(([stepKey, stepBody]) => (
-              <option
-                key={`choose-starting-page-${stepKey}`}
-                value={stepKey}
-              >
-                {firstStepKey === stepKey && 'Starting page: '}
-                {stepBody?.taskKeys?.join(', ') || `(${stepKey})` /* Note: if you see the stepKey instead of the taskKeys, something's wrong. */}
-              </option>
-            ))}
-          </select>
+          <span className="spacer" />
+          <span className="flex-item">// Temporary for PR 7245</span>
         </div>
         {!(workflow.steps?.length > 0) && (
           <div className="no-tasks-notice">

diff --git a/app/pages/lab-pages-editor/components/WorkflowHeaderTitle.jsx b/app/pages/lab-pages-editor/components/WorkflowHeaderTitle.jsx
@@ -16,7 +16,7 @@ export default function WorkflowHeaderTitle() {
       <h2>{workflowTitle}</h2>
       <span className="spacer" />
       <a
-        className="button-link"
+        className="preview-link"
         href={previewUrl}
         rel="noopener noreferrer"
         target='_blank'

diff --git a/css/lab-pages-editor.styl b/css/lab-pages-editor.styl
@@ -185,7 +185,7 @@ $fontWeightBoldPlus = 700
     margin-bottom: $sizeM
 
   .workflow-version
-    color: $teal
+    color: $orange
 
   // Component: Workflow "Header" components
   // ---------------------------------------------------------------------------
@@ -194,8 +194,9 @@ $fontWeightBoldPlus = 700
     flex-row()
     background: $teal
     color: $white
-    margin-bottom: $sizeM
-    padding: $sizeS
+    margin-bottom: 30px
+    min-height: 60px
+    padding: $sizeS $sizeM
 
     a
       display: inline-block
@@ -213,6 +214,16 @@ $fontWeightBoldPlus = 700
   .workflow-header-title
     main-content()
     flex-row()
+    margin-bottom: 30px
+
+    h2
+      font-size: 24px
+      font-weight: 700
+
+    .preview-link
+      font-size: 12px
+      line-height: 16px
+      color: $grey3
 
   .workflow-header-tabs
     main-content()
@@ -323,29 +334,24 @@ $fontWeightBoldPlus = 700
   .tasks-page
     main-content()
 
-    .workflow-title
-      border-bottom: 1.5px solid $grey1
-      margin-bottom: $sizeS
-      margin-top: $sizeM
+    .tasks-page-overview
+      flex-row()
+      font-size: 12px
+      margin: 10px 0
 
-      h2
-        color: $grey3
-        font-size: $fontSizeXL
-        font-weight: $fontWeightBoldPlus
-        text-transform: uppercase
-
-      .status-active, .status-inactive
-        font-size: $fontSizeS
-        margin-left: $sizeS
-        text-transform: uppercase
+    .status-active, .status-inactive
+      margin-left: $sizeS
+      padding-right: $sizeS
+      text-transform: uppercase
+      border-right: 1px solid $grey1
 
-      .status-active
-        color: $greenBright
+    .status-active
+      color: $greenBright
 
-      .status-inactive
-        color: $redBright
+    .status-inactive
+      color: $redBright
 
-    .workflow-starting-page
+    .workflow-start-selector
       border: 1.5px solid $grey1
       border-radius: $sizeXS
       color: $grey2