HARMONY-1492: Progress on sticky headers

nasa · Jun 30, 2023 · efdcee2 · efdcee2
1 parent 38d3014
commit efdcee2
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 13 deletions.
diff --git a/app/views/workflow-ui/job/index.mustache.html b/app/views/workflow-ui/job/index.mustache.html
@@ -24,7 +24,7 @@
     <title>Harmony</title>
 </head>
 
-<body class="d-flex flex-column h-100">
+<body class="d-flex flex-column" style="height: fit-content;">
     {{> workflow-ui/toasts}}
     <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
         <div class="container-lg">
@@ -35,8 +35,8 @@
             </button>
         </div>
     </nav>
-    <nav class="ml-0 pl-0"
-        style="--bs-breadcrumb-divider: url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E&#34;);"
+    <nav class="ml-0 pl-0 sticky-top"
+        style="top: 0; --bs-breadcrumb-divider: url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E&#34;);"
         aria-label="breadcrumb">
         <div class="breadcrumb  d-flex flex-row justify-content-between">
             <ol class="breadcrumb p-0 m-0">
@@ -54,10 +54,10 @@
             </div>
         </div>
     </nav>
-    <div class="container-fluid">
+    <div class="container-fluid" style="min-height: calc(100vh - 194px);">
         <div class="row pb-4">
             <div class="col-2">
-                <form id="work-items-query-form" action="./{{job.jobID}}" method="get" class="sticky-top pt-2">
+                <form id="work-items-query-form" action="./{{job.jobID}}" method="get" class="sticky-top pt-2"  style="top: 40px;">
                     <input type="hidden" name="jobID" value="{{job.jobID}}" />
                     <input type="hidden" name="page" value="{{page}}" />
                     <input type="hidden" name="limit" value="{{limit}}" />

diff --git a/app/views/workflow-ui/job/work-items-table.mustache.html b/app/views/workflow-ui/job/work-items-table.mustache.html
@@ -3,7 +3,7 @@
 </div>
 
 <table class="table table-sm">
-    <thead>
+    <thead class="sticky-top bg-white" style="top: 40px;">
         <tr>
             <th scope="col">stepIndex</th>
             <th scope="col">stepName</th>

diff --git a/app/views/workflow-ui/jobs/index.mustache.html b/app/views/workflow-ui/jobs/index.mustache.html
@@ -24,7 +24,7 @@
     <title>Harmony</title>
 </head>
 
-<body class="d-flex flex-column h-100">
+<body class="d-flex flex-column" style="height: fit-content;">
     <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
         <div class="container-lg">
             <a class="navbar-brand nasa" href="/">Earthdata Harmony</a>
@@ -34,17 +34,17 @@
             </button>
         </div>
     </nav>
-    <nav class="ml-0 pl-0"
-        style="--bs-breadcrumb-divider: url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E&#34;);"
+    <nav class="ml-0 pl-0 sticky-top"
+        style="top: 0; --bs-breadcrumb-divider: url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E&#34;);"
         aria-label="breadcrumb">
         <ol class="breadcrumb">
             <li class="breadcrumb-item active" aria-current="page">Jobs</li>
         </ol>
     </nav>
-    <div class="container-fluid">
+    <div class="container-fluid" style="min-height: calc(100vh - 194px);">
         <div class="row pb-4">
             <div class="col-2">
-                <form id="jobs-query-form" action="./workflow-ui" method="get" class="sticky-top pt-2">
+                <form id="jobs-query-form" action="./workflow-ui" method="get" class="sticky-top pt-2" style="top: 40px;">
                     <input type="hidden" name="page" value="{{page}}" />
                     <input type="hidden" name="limit" value="{{limit}}" />
                     {{> workflow-ui/date-time-picker}}

diff --git a/app/views/workflow-ui/jobs/jobs-table.mustache.html b/app/views/workflow-ui/jobs/jobs-table.mustache.html
@@ -1,5 +1,5 @@
 <table class="table table-sm">
-    <thead>
+    <thead class="sticky-top bg-white" style="top: 40px;">
         <tr class="align-middle">
             <th scope="col">jobID</th>
             <th scope="col">service</th>

diff --git a/app/views/workflow-ui/toasts.mustache.html b/app/views/workflow-ui/toasts.mustache.html
@@ -1,4 +1,4 @@
-<div aria-live="polite" aria-atomic="true" class="position-relative">
+<div aria-live="polite" aria-atomic="true" class="position-relative" style="z-index: 1050;">
     <div class="toast-container px-2 py-2">
       <div id="upper-toast" class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
         <div class="d-flex">