Merge pull request #563 from edx/asheehan-edx/ENT-4548-sticky-stepper…

…-footer feat: making bulk enrollment stepper footer sticky
openedx · Jun 1, 2021 · 2137cd3 · 2137cd3
2 parents e3deeae + ce79985
commit 2137cd3
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 7 deletions.
diff --git a/src/components/BulkEnrollmentPage/BulkEnrollment.scss b/src/components/BulkEnrollmentPage/BulkEnrollment.scss
@@ -1,4 +1,8 @@
 .bulk-enrollment {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
   .alert {
     margin-top: 2rem;
   }
@@ -38,8 +42,13 @@
   }
 }
 
-.sticky-stepper-footer {
+.sticky-footer-wrapper {
+  height: 70vh;
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
+
+  .stepper-step {
+    flex-grow: 1;
+    overflow: scroll;
+  }
 }
diff --git a/src/components/BulkEnrollmentPage/CourseSearchResults.test.jsx b/src/components/BulkEnrollmentPage/CourseSearchResults.test.jsx
@@ -23,7 +23,7 @@ const mockStore = configureMockStore([thunk]);
 
 const testCourseName = 'TestCourseName';
 const testCourseRunKey = 'TestCourseRun';
-const testStartDate = '2020-09-10T04:00:00Z';
+const testStartDate = '2020-09-10T10:00:00Z';
 
 const searchResults = {
   nbHits: 1,

diff --git a/src/components/BulkEnrollmentPage/stepper/BulkEnrollmentStepper.jsx b/src/components/BulkEnrollmentPage/stepper/BulkEnrollmentStepper.jsx
@@ -29,8 +29,8 @@ const BulkEnrollmentStepper = ({ subscription, enterpriseSlug, enterpriseId }) =
   return (
     <Stepper activeKey={currentStep}>
       <Stepper.Header className="my-3" />
-      <div className="sticky-stepper-footer">
-        <Container size="xl">
+      <div className="sticky-footer-wrapper">
+        <Container size="xl" className="stepper-step">
           <Stepper.Step eventKey={ADD_COURSES_STEP} title={ADD_COURSES_TITLE}>
             <AddCoursesStep
               enterpriseId={enterpriseId}

diff --git a/src/components/BulkEnrollmentPage/table/CourseSearchResultsCells.test.jsx b/src/components/BulkEnrollmentPage/table/CourseSearchResultsCells.test.jsx
@@ -5,7 +5,7 @@ import { configuration } from '../../../config';
 
 const testCourseName = 'TestCourseName';
 const testCourseRunKey = 'TestCourseRun';
-const testStartDate = '2020-09-10T04:00:00Z';
+const testStartDate = '2020-09-10T10:00:00Z';
 
 describe('CourseNameCell', () => {
   const row = {

diff --git a/src/components/EnterpriseApp/_EnterpriseApp.scss b/src/components/EnterpriseApp/_EnterpriseApp.scss
@@ -1,5 +1,6 @@
 .enterprise-app {
   position: relative;
+  display: flex;
 
   .content-wrapper {
     padding: 10px;
@@ -12,4 +13,7 @@
       }
     }
   }
+  .full-page {
+    flex: 1;
+  }
 }
diff --git a/src/components/EnterpriseApp/index.jsx b/src/components/EnterpriseApp/index.jsx
@@ -137,7 +137,7 @@ class EnterpriseApp extends React.Component {
                 isMobile={!matchesMediaQ}
               />
               <div
-                className="content-wrapper"
+                className="content-wrapper full-page"
                 tabIndex="-1"
                 ref={this.contentWrapperRef}
                 style={{

diff --git a/src/components/subscriptions/styles/_SubscriptionManagementPage.scss b/src/components/subscriptions/styles/_SubscriptionManagementPage.scss
@@ -1,4 +1,8 @@
 .manage-subscription {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+
   .add-users-dropdown {
     .dropdown-menu {
       z-index: $zindex-fixed;