From a7a02363e1fc1be8700e5b320b01ce342fbce9d6 Mon Sep 17 00:00:00 2001
From: Bjarke Madsen <bjarke@nordu.net>
Date: Mon, 31 Jul 2023 16:44:32 +0200
Subject: [PATCH] Put navigation above and below survey/survey navigation
---
.../src/SurveyNavigationComponent.tsx | 30 ++++++++++++-------
1 file changed, 19 insertions(+), 11 deletions(-)
diff --git a/survey-frontend/src/SurveyNavigationComponent.tsx b/survey-frontend/src/SurveyNavigationComponent.tsx
index 13da45cf..1bb5ec82 100644
--- a/survey-frontend/src/SurveyNavigationComponent.tsx
+++ b/survey-frontend/src/SurveyNavigationComponent.tsx
@@ -1,5 +1,6 @@
import React, { useEffect, useState } from "react";
import ProgressBar from './ProgressBar';
+import { Container, Row } from "react-bootstrap";
function SurveyNavigationComponent({ surveyModel, endSurvey, saveSurvey, validatePage, children }) {
@@ -30,11 +31,11 @@ function SurveyNavigationComponent({ surveyModel, endSurvey, saveSurvey, validat
<div className="navigation-block">
<div className="navigation-progress-container">
<div className="navigation-buttons-container">
- {(pageNo === surveyModel.visiblePages.length - 1) && renderButton('Complete', endSurvey)}
- {renderButton('Save', saveSurvey)}
- {(pageNo !== surveyModel.visiblePages.length - 1) && renderButton('Next Page', incrementPageNo)}
- {renderButton('Validate Page', validatePage)}
- {pageNo !== 0 && renderButton('Previous Page', decrementPageNo)}
+ {(pageNo === surveyModel.visiblePages.length - 1) && renderButton('Complete Survey', endSurvey)}
+ {renderButton('Save progress', saveSurvey)}
+ {/* {(pageNo !== surveyModel.visiblePages.length - 1) && renderButton('Next Page', incrementPageNo)} */}
+ {/* {renderButton('Validate Page', validatePage)} */}
+ {/* {pageNo !== 0 && renderButton('Previous Page', decrementPageNo)} */}
</div>
</div>
</div>
@@ -42,12 +43,19 @@ function SurveyNavigationComponent({ surveyModel, endSurvey, saveSurvey, validat
};
return (
- <div>
- <ProgressBar surveyModel={surveyModel} pageNoSetter={pageNoSetter} />
- {renderExternalNavigation()}
- {children}
- {renderExternalNavigation()}
- </div>
+ <Container>
+ <Row>
+ {renderExternalNavigation()}
+ </Row>
+ <Row>
+ <ProgressBar surveyModel={surveyModel} pageNoSetter={pageNoSetter} />
+ {children}
+ </Row>
+ <Row>
+ {renderExternalNavigation()}
+ </Row>
+
+ </Container>
);
}
--
GitLab