Merge pull request #1103 from akvo/feature/make-form-header-sticky

Feature/1093-make form header sticky
akvo · Jan 31, 2024 · f2c7749 · f2c7749
2 parents 2809351 + 20e28f5
commit f2c7749
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 24 deletions.
diff --git a/frontend/src/App.scss b/frontend/src/App.scss
@@ -120,7 +120,7 @@
             th {
               padding: 12px 18px;
               border-bottom: solid #dededf 1px;
-              width: 50%;
+              //width: 50%;
             }
 
             th {

diff --git a/frontend/src/pages/approvals/ApprovalDetail.jsx b/frontend/src/pages/approvals/ApprovalDetail.jsx
@@ -398,9 +398,11 @@ const ApprovalDetail = ({
         loading={loading}
         dataSource={selectedTab === "raw-data" ? rawValues : values}
         columns={columns}
-        scroll={{ y: 500 }}
+        // scroll={{ y: 500 }}
         pagination={false}
-        rowClassName={(record) => (record.edited ? "row-edited" : "row-normal")}
+        rowClassName={(record) =>
+          record.edited ? "row-edited" : "row-normal sticky"
+        }
         style={{ borderBottom: "solid 1px #ddd" }}
         rowKey="id"
         expandable={
@@ -426,7 +428,7 @@ const ApprovalDetail = ({
                           <span>Loading..</span>
                         </Space>
                       ) : (
-                        <>
+                        <div className={`pending-data-outer`}>
                           {record.data?.map((r, rI) => (
                             <div className="pending-data-wrapper" key={rI}>
                               <h3>{r.name}</h3>
@@ -437,7 +439,7 @@ const ApprovalDetail = ({
                                   (record.newValue || record.newValue === 0) &&
                                   !isEqual(record.newValue, record.value)
                                     ? "row-edited"
-                                    : "row-normal"
+                                    : "row-normal sticky"
                                 }
                                 rowKey="id"
                                 columns={[
@@ -494,7 +496,7 @@ const ApprovalDetail = ({
                           >
                             Save Edits
                           </Button>
-                        </>
+                        </div>
                       )}
                     </div>
                   );

diff --git a/frontend/src/pages/approvals/style.scss b/frontend/src/pages/approvals/style.scss
@@ -21,7 +21,12 @@
             color: $color-default;
             vertical-align: top;
           }
-
+          .sticky {
+            position: sticky;
+            top: 0;
+            left: 0;
+            z-index: 1;
+          }
           .ant-table-cell:nth-child(2) {
             .ant-row {
               justify-content: flex-start;
@@ -174,23 +179,30 @@
         background: #fefebe;
       }
     }
-    .pending-data-wrapper {
-      border: solid #e9e9e9 1px;
-      margin-bottom: 20px;
-      padding: 1rem;
-      .ant-table {
-        thead {
-          tr {
-            th {
-              background-color: #f2f2f3;
-              font-weight: 500;
+
+    .pending-data-outer {
+      height: 500px;
+      overflow-y: scroll;
+
+      .pending-data-wrapper {
+        border: solid #e9e9e9 1px;
+        margin-bottom: 20px;
+        padding: 1rem;
+        .ant-table {
+          thead {
+            tr {
+              th {
+                background-color: #f2f2f3;
+                font-weight: 500;
+              }
             }
           }
         }
       }
-    }
-    .pending-data-wrapper:last-child {
-      margin-bottom: 0;
+
+      .pending-data-wrapper:last-child {
+        margin-bottom: 0;
+      }
     }
   }
 }
diff --git a/frontend/src/pages/submissions/UploadDetail.jsx b/frontend/src/pages/submissions/UploadDetail.jsx
@@ -19,7 +19,6 @@ const columnsRawData = [
     title: "",
     dataIndex: "key",
     key: "key",
-    width: 40,
     render: (_, __, a) => {
       return a + 1;
     },
@@ -44,7 +43,6 @@ const columnsRawData = [
     title: "Upload By",
     dataIndex: "created_by",
     key: "created_by",
-    width: 200,
   },
   Table.EXPAND_COLUMN,
 ];
@@ -361,7 +359,7 @@ const UploadDetail = ({ record, setReload }) => {
           (record.newValue || record.newValue === 0) &&
           !isEqual(record.value, record.newValue)
             ? "row-edited"
-            : "row-normal"
+            : "row-normal sticky"
         }
         style={{ borderBottom: "solid 1px #ddd" }}
         rowKey="id"

diff --git a/frontend/src/pages/submissions/style.scss b/frontend/src/pages/submissions/style.scss
@@ -33,7 +33,12 @@
             color: $color-default;
             vertical-align: top;
           }
-
+          .sticky {
+            position: sticky;
+            top: 0;
+            left: 0;
+            z-index: 1;
+          }
           .ant-table-cell:nth-child(2) {
             .ant-row {
               justify-content: flex-start;