Merge pull request code-dot-org#26940 from code-dot-org/styling-fixes

New teacher dashboard styling fixes

Author: Madelyn Kasula

apps/src/sites/studio/pages/teacher_dashboard/show.js

@@ -73,7 +73,14 @@ $(document).ready(function () {
         <Router basename={baseUrl}>
           <Route
             path="/"
-            component={props => <TeacherDashboard {...props} studioUrlPrefix={scriptData.studioUrlPrefix} pegasusUrlPrefix={scriptData.pegasusUrlPrefix}/>}
+            component={props =>
+              <TeacherDashboard
+                {...props}
+                studioUrlPrefix={scriptData.studioUrlPrefix}
+                pegasusUrlPrefix={scriptData.pegasusUrlPrefix}
+                sectionName={section.name}
+              />
+            }
           />
         </Router>
       </Provider>,

apps/src/templates/NavigationBarLink.jsx

@@ -31,7 +31,7 @@ export default class NavigationBarLink extends React.Component {
 
     return (
       <NavLink
-        to={`/${url}`}
+        to={url}
         style={styles.link}
         activeStyle={styles.activeLink}
       >

apps/src/templates/SmallChevronLink.jsx

@@ -1,7 +1,8 @@
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import React, {Component} from 'react';
 import FontAwesome from './FontAwesome';
 import color from "../util/color";
+import {makeEnum} from '@cdo/apps/utils';
 
 const styles = {
   link: {
@@ -32,28 +33,43 @@ const styles = {
   },
 };
 
+const ChevronSide = makeEnum('left', 'right');
+
 export default class SmallChevronLink extends Component {
   static propTypes = {
     linkText: PropTypes.string.isRequired,
     link: PropTypes.string.isRequired,
     isRtl: PropTypes.bool.isRequired,
+    chevronSide: PropTypes.oneOf(Object.values(ChevronSide)),
   };
 
-  render() {
-    const { link, linkText, isRtl }= this.props;
-
+  renderChevron = () => {
+    const {isRtl} = this.props;
     const icon = isRtl ? "chevron-left" : "chevron-right";
 
+    return (
+      <FontAwesome
+        icon={icon}
+        style={isRtl ? styles.chevronRtl : styles.chevron}
+      />
+    );
+  };
+
+  render() {
+    const {link, linkText, chevronSide} = this.props;
+
     return (
       <div style={styles.linkBox}>
         <a href={link} style={styles.link}>
+          {chevronSide === ChevronSide.left &&
+            this.renderChevron()
+          }
           <h3 style={styles.link}>
             {linkText}
           </h3>
-          <FontAwesome
-            icon={icon}
-            style={isRtl? styles.chevronRtl : styles.chevron}
-          />
+          {(!chevronSide || chevronSide === ChevronSide.right) &&
+            this.renderChevron()
+          }
         </a>
       </div>
     );

apps/src/templates/manageStudents/ManageStudentsAgeCell.jsx

@@ -35,6 +35,7 @@ class ManageStudentAgeCell extends Component {
         }
         {this.props.isEditing &&
           <select
+            style={{width: 50}}
             name="age"
             value={editedValue}
             onChange={this.onChangeAge}

apps/src/templates/manageStudents/ManageStudentsTable.jsx

@@ -49,6 +49,10 @@ const styles = {
   buttonWithMargin: {
     marginRight: 5
   },
+  verticalAlign: {
+    display: 'flex',
+    alignItems: 'center',
+  },
 };
 
 const LOGIN_TYPES_WITH_PASSWORD_COLUMN = [
@@ -276,7 +280,7 @@ class ManageStudentsTable extends Component {
           />
         }
         {numberOfEditingRows <= 1 &&
-          <span>
+          <span style={styles.verticalAlign}>
             <div style={styles.headerName}>
               {i18n.actions()}
             </div>
@@ -294,7 +298,7 @@ class ManageStudentsTable extends Component {
 
   projectSharingHeaderFormatter = () => {
     return (
-      <span>
+      <span style={styles.verticalAlign}>
         <div
           style={styles.headerName}
           data-for="explain-sharing"

apps/src/templates/projects/SectionProjectsList.jsx

@@ -9,8 +9,7 @@ const styles = {
     float: 'right',
   },
   filterRow: {
-    backgroundColor: 'transparent',
-    padding: 10,
+    paddingBottom: 10,
   },
   clearDiv: {
     clear: 'both'

apps/src/templates/sectionAssessments/SectionAssessments.jsx

@@ -188,7 +188,7 @@ class SectionAssessments extends Component {
                   </div>
                 }
                 {totalStudentSubmissions <= 0 &&
-                  <h3>{i18n.emptyAssessmentSubmissions()}</h3>
+                  <div>{i18n.emptyAssessmentSubmissions()}</div>
                 }
                 <SubmissionStatusAssessmentsContainer />
                 {totalStudentSubmissions > 0 &&
@@ -224,8 +224,8 @@ class SectionAssessments extends Component {
                     />
                   </div>
                 }
-                {totalStudentSubmissions <=0 &&
-                  <h3>{i18n.emptySurveyOverviewTable()}</h3>
+                {totalStudentSubmissions <= 0 &&
+                  <div>{i18n.emptySurveyOverviewTable()}</div>
                 }
               </div>
             }
@@ -245,11 +245,7 @@ class SectionAssessments extends Component {
           </div>
         }
         {(!isLoading && assessmentList.length === 0) &&
-          <div style={styles.empty}>
-            <h3>
-              {i18n.noAssessments()}
-            </h3>
-          </div>
+          <div style={styles.empty}>{i18n.noAssessments()}</div>
         }
       </div>
     );

apps/src/templates/teacherDashboard/SelectSectionDropdown.jsx

@@ -8,8 +8,6 @@ const styles = {
   container: {
     display: 'flex',
     alignItems: 'center',
-    justifyContent: 'flex-end',
-    marginBottom: 10,
   },
   dropdown: {
     marginLeft: 10,

apps/src/templates/teacherDashboard/TeacherDashboard.jsx

@@ -1,8 +1,7 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import {Route, Switch} from 'react-router-dom';
-import SelectSectionDropdown from './SelectSectionDropdown';
-import TeacherDashboardNavigation from './TeacherDashboardNavigation';
+import TeacherDashboardHeader from './TeacherDashboardHeader';
 import StatsTableWithData from './StatsTableWithData';
 import SectionProgress from '@cdo/apps/templates/sectionProgress/SectionProgress';
 import ManageStudents from '@cdo/apps/templates/manageStudents/ManageStudents';
@@ -15,23 +14,22 @@ export default class TeacherDashboard extends Component {
   static propTypes = {
     studioUrlPrefix: PropTypes.string.isRequired,
     pegasusUrlPrefix: PropTypes.string.isRequired,
+    sectionName: PropTypes.string.isRequired,
 
     // Provided by React router in parent.
     location: PropTypes.object.isRequired,
   };
 
   render() {
-    const {location, studioUrlPrefix, pegasusUrlPrefix} = this.props;
+    const {location, studioUrlPrefix, pegasusUrlPrefix, sectionName} = this.props;
+
     // Include header components unless we are on the /print_login_cards page.
     const includeHeader = location.pathname !== "/print_login_cards";
 
     return (
       <div>
         {includeHeader &&
-          <div>
-            <SelectSectionDropdown/>
-            <TeacherDashboardNavigation/>
-          </div>
+          <TeacherDashboardHeader sectionName={sectionName}/>
         }
         <Switch>
           <Route
@@ -62,8 +60,8 @@ export default class TeacherDashboard extends Component {
             path="/print_login_cards"
             component={props => <PrintLoginCards studioUrlPrefix={studioUrlPrefix} pegasusUrlPrefix={pegasusUrlPrefix}/>}
           />
-          {/* Render <SectionProgress/> by default */}
-          <Route component={props => <SectionProgress/>} />
+          {/* Render <ManageStudents/> by default */}
+          <Route component={props => <ManageStudents studioUrlPrefix={studioUrlPrefix}/>} />
         </Switch>
       </div>
     );

apps/src/templates/teacherDashboard/TeacherDashboardHeader.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import i18n from '@cdo/locale';
+import SmallChevronLink from '../SmallChevronLink';
+import SelectSectionDropdown from './SelectSectionDropdown';
+import TeacherDashboardNavigation from './TeacherDashboardNavigation';
+
+const styles = {
+  headerContainer: {
+    display: 'flex',
+    justifyContent: 'space-between',
+  },
+};
+
+export default class TeacherDashboardHeader extends React.Component {
+  static propTypes = {
+    sectionName: PropTypes.string.isRequired,
+  };
+
+  render() {
+    return (
+      <div>
+        <SmallChevronLink
+          link="/home#classroom-sections"
+          linkText={i18n.viewAllSections()}
+          isRtl={true}
+          chevronSide="left"
+        />
+        <div style={styles.headerContainer}>
+          <h1>{this.props.sectionName}</h1>
+          <SelectSectionDropdown/>
+        </div>
+        <TeacherDashboardNavigation/>
+      </div>
+    );
+  }
+}

apps/src/templates/teacherDashboard/TeacherDashboardNavigation.jsx

@@ -5,27 +5,27 @@ import i18n from "@cdo/locale";
 const teacherDashboardLinks = [
   {
     label: i18n.teacherTabManageStudents(),
-    url: "manage_students"
+    url: "/manage_students"
   },
   {
     label: i18n.teacherTabProjects(),
-    url: "projects"
+    url: "/projects"
   },
   {
     label: i18n.teacherTabStats(),
-    url: "stats"
+    url: "/stats"
   },
   {
     label: i18n.teacherTabStatsTextResponses(),
-    url: "text_responses"
+    url: "/text_responses"
   },
   {
     label: i18n.teacherTabProgress(),
-    url: "progress"
+    url: "/progress"
   },
   {
     label: i18n.teacherTabAssessments(),
-    url: "assessments"
+    url: "/assessments"
   },
 ];
 

dashboard/test/ui/features/teacher_dashboard.feature

@@ -35,11 +35,11 @@ Feature: Using the teacher dashboard
     # Assessments and surveys tab
     When I click selector "#learn-tabs a:contains('Assessments/Surveys')" once I see it
     And I wait until element "#uitest-course-dropdown" is visible
-    And I wait until element "h3:contains(no submissions for this assessment)" is visible
-    And I wait until element "h3:contains(this survey is anonymous)" is not visible
+    And I wait until element "div:contains(no submissions for this assessment)" is visible
+    And I wait until element "div:contains(this survey is anonymous)" is not visible
     And I select the "Lesson 30: Anonymous student survey" option in dropdown "assessment-selector"
-    And I wait until element "h3:contains(this survey is anonymous)" is visible
-    And I wait until element "h3:contains(no submissions for this assessment)" is not visible
+    And I wait until element "div:contains(this survey is anonymous)" is visible
+    And I wait until element "div:contains(no submissions for this assessment)" is not visible
 
   Scenario: Loading section projects
     Given I create a teacher-associated student named "Sally"

dashboard/test/ui/features/teacher_dashboard_assessments1.feature

@@ -29,4 +29,4 @@ Feature: Using the assessments tab in the teacher dashboard
     # Assessments tab
     When I click selector "#learn-tabs a:contains('Assessments/Surveys')" once I see it
     And I wait until element "#uitest-course-dropdown" is visible
-    Then I wait until element "h3:contains(this survey is anonymous)" is visible
+    Then I wait until element "div:contains(this survey is anonymous)" is visible