Merge pull request #16316 from code-dot-org/update-teacher-courses

Courses: update UI for course catalog & hoc options
code-dot-org · Jul 13, 2017 · c00269c · c00269c
2 parents 3051bbd + 810d041
commit c00269c
Show file tree

Hide file tree

Showing 7 changed files with 132 additions and 76 deletions.
diff --git a/apps/i18n/common/en_us.json b/apps/i18n/common/en_us.json
@@ -524,13 +524,15 @@
   "teacherCommunity": "Teacher Community",
   "teacherCommunityDescription": "Ask questions about curriculum, share ideas from your lessons, and get help from other teachers",
   "teacherCourseHoc": "Hour of Code",
-  "teacherCourseHocDescription": "Celebrated in December, but available year-round, the Hour of Code makes computer science fun and accessible to all ages.",
+  "teacherCourseHocDescription": "If you don’t have time for a full length course, try a one-hour tutorial designed for all ages. Join millions of students and teachers in over 180 countries by starting with an Hour of Code.",
+  "teacherCourseHocLinkText": "View more Hour of code tutorials",
   "teacherCourseElementary": "Elementary school",
   "teacherCourseElementaryDescription": "Teachers say our five elementary courses are 'totally awesome sauce' and fun for all students, even pre-readers.",
   "teacherCourseMiddle": "Middle school",
   "teacherCourseMiddleDescription": "Our new middle school course can be offered as a semester or year-long introduction to computer science for all students.",
   "teacherCourseHighOlder": "High school and older",
-  "teacherCoursesHeading": "Full course catalog from Code.org and 3rd party partners",
+  "teacherCoursesHeading": "Full course catalog",
+  "teacherCoursesDescription": "Select your grade below to see all courses and professional learning offered by Code.org and 3rd party partners.",
   "teacherCourseHighDescription": "We offer two year-long courses for high school: an intro course and an AP course. Both are designed to broaden participation in computer science.",
   "teacherHomePage": "Teacher home page",
   "teacherPanel": "Teacher Panel",

diff --git a/apps/src/templates/studioHomepages/Courses.jsx b/apps/src/templates/studioHomepages/Courses.jsx
@@ -4,6 +4,7 @@ import ReactDOM from 'react-dom';
 import HeaderBanner from '../HeaderBanner';
 import TeacherAssignablesCatalog from './TeacherAssignablesCatalog';
 import RecentCourses from './RecentCourses';
+import ContentContainer from '../ContentContainer';
 import UiTips from '@cdo/apps/templates/studioHomepages/UiTips';
 import FindLocalClassBanner from './FindLocalClassBanner';
 import color from "../../util/color";
@@ -54,18 +55,12 @@ const Courses = React.createClass({
 
   componentDidMount() {
     // The components used here are implemented in legacy HAML/CSS rather than React.
-    if (this.props.isEnglish && this.props.isTeacher) {
-      $('.courseexplorer').appendTo(ReactDOM.findDOMNode(this.refs.courseExplorer)).show();
-      $('.standalone-tools').appendTo(ReactDOM.findDOMNode(this.refs.standaloneTools)).show();
-    } else {
-      $('#user_hero').appendTo(ReactDOM.findDOMNode(this.refs.userHero)).show();
-      $('.all-courses').appendTo(ReactDOM.findDOMNode(this.refs.allCourses)).show();
-    }
-
-    if (!this.props.isTeacher) {
-      $('#section-management').appendTo(ReactDOM.findDOMNode(this.refs.sectionManagement)).show();
-    }
-
+    $('.courseexplorer').appendTo(ReactDOM.findDOMNode(this.refs.courseExplorer)).show();
+    $('.standalone-tools').appendTo(ReactDOM.findDOMNode(this.refs.standaloneTools)).show();
+    $('#user_hero').appendTo(ReactDOM.findDOMNode(this.refs.userHero)).show();
+    $('.all-courses').appendTo(ReactDOM.findDOMNode(this.refs.allCourses)).show();
+    $('.hour-of-code-courses-first-row').appendTo(ReactDOM.findDOMNode(this.refs.hocCoursesFirstRow)).show();
+    $('#section-management').appendTo(ReactDOM.findDOMNode(this.refs.sectionManagement)).show();
     $('#flashes').appendTo(ReactDOM.findDOMNode(this.refs.flashes)).show();
   },
 
@@ -106,7 +101,7 @@ const Courses = React.createClass({
           />
         )}
 
-        {courses && courses.length > 0 && (
+        {(courses && courses.length > 0) && (
           <RecentCourses
             courses={courses}
             showAllCoursesLink={false}
@@ -116,7 +111,8 @@ const Courses = React.createClass({
           />
         )}
 
-        {isEnglish && isTeacher && (
+        {/* Signed-in teacher in English */}
+        {(isEnglish && isTeacher) && (
           <div>
             <UiTips
               userId={userId}
@@ -165,20 +161,36 @@ const Courses = React.createClass({
           </div>
         )}
 
-        {!(isEnglish && isTeacher) && (
+        {/* Signed-in student in English */}
+        {(!isSignedOut && !isTeacher && isEnglish) && (
+          <ContentContainer
+            heading={i18n.teacherCourseHoc()}
+            description={i18n.teacherCourseHocDescription()}
+            isRtl={isRtl}
+            linkText={i18n.teacherCourseHocLinkText()}
+            link={`${codeOrgUrlPrefix}/learn`}
+            showLink={true}
+          >
+            <ProtectedStatefulDiv ref="hocCoursesFirstRow"/>
+          </ContentContainer>
+        )}
+
+        {/* Anything but a teacher or student in English.
+            That is: signed-out, or a student or teacher in non-English. */}
+        {(isSignedOut || !isEnglish) && (
           <div>
             <ProtectedStatefulDiv ref="allCourses"/>
           </div>
         )}
 
-        {!isTeacher && (
+        {(!isTeacher && isEnglish) && (
           <FindLocalClassBanner
             codeOrgUrlPrefix={codeOrgUrlPrefix}
             isRtl={isRtl}
           />
         )}
 
-        {!isTeacher && !isSignedOut && (
+        {(!isTeacher && !isSignedOut) && (
           <div>
             <div style={styles.spacer}>.</div>
             <ProgressButton
@@ -189,7 +201,7 @@ const Courses = React.createClass({
           </div>
         )}
 
-        {!isTeacher && !isSignedOut && (
+        {(!isTeacher && !isSignedOut) && (
           <ProtectedStatefulDiv ref="sectionManagement"/>
         )}
       </div>

diff --git a/apps/src/templates/studioHomepages/ResourceCard.jsx b/apps/src/templates/studioHomepages/ResourceCard.jsx
@@ -15,6 +15,15 @@ const styles = {
     borderColor: color.border_gray,
     background: color.teal
   },
+  cardJumbo: {
+    overflow: 'hidden',
+    position: 'relative',
+    height: 250,
+    width: 310,
+    float: 'left',
+    marginBottom: 20,
+    background: color.teal
+  },
   image: {
     position: 'absolute',
   },
@@ -86,17 +95,18 @@ const styles = {
 
 const ResourceCard = React.createClass({
   propTypes: {
+    isJumbo: React.PropTypes.bool,
     title: React.PropTypes.string.isRequired,
     description: React.PropTypes.string.isRequired,
     buttonText: React.PropTypes.string.isRequired,
     link: React.PropTypes.string.isRequired,
-    image: React.PropTypes.string.isRequired,
+    image: React.PropTypes.string,
     isRtl: React.PropTypes.bool.isRequired
   },
 
   render() {
 
-    const { title, description, buttonText, link, image, isRtl } = this.props;
+    const { isJumbo, title, description, buttonText, link, image, isRtl } = this.props;
     const filenameToImgUrl = {
       "teacher-community": require('@cdo/static/resource_cards/teachercommunity.png'),
       "guest-speaker": require('@cdo/static/resource_cards/findguestspeaker.png'),
@@ -111,14 +121,17 @@ const ResourceCard = React.createClass({
     const imgSrc = filenameToImgUrl[image];
 
     return (
-      <div style={styles.card}>
-        <img src={imgSrc} style={styles.image}/>
+      <div style={isJumbo ? styles.cardJumbo : styles.card}>
+        {image && (
+          <img src={imgSrc} style={styles.image}/>
+        )}
         <div style={isRtl ? styles.rtlTitle : styles.title}>
           {title}
         </div>
         <div style={isRtl ? styles.rtlDescription : styles.description}>
           {description}
         </div>
+        <br/>
         <ProgressButton
           href={link}
           color={ProgressButton.ButtonColor.gray}

diff --git a/apps/src/templates/studioHomepages/TeacherAssignablesCatalog.jsx b/apps/src/templates/studioHomepages/TeacherAssignablesCatalog.jsx
@@ -1,52 +1,79 @@
+import $ from 'jquery';
 import React from 'react';
+import ReactDOM from 'react-dom';
 import ResourceCard from './ResourceCard';
 import ContentContainer from '../ContentContainer';
 import i18n from "@cdo/locale";
+import ProtectedStatefulDiv from '../ProtectedStatefulDiv';
+
+const styles = {
+  horizontalSpacer: {
+    width: 20,
+    height: 1,
+    float: 'left'
+  }
+};
 
 const TeacherAssignablesCatalog = React.createClass({
   propTypes: {
     codeOrgUrlPrefix: React.PropTypes.string.isRequired,
     isRtl: React.PropTypes.bool.isRequired
   },
 
+  componentDidMount() {
+    // The components used here are implemented in legacy HAML/CSS rather than React.
+    $('.hour-of-code-courses').appendTo(ReactDOM.findDOMNode(this.refs.hocCourses)).show();
+  },
+
   render() {
     const { codeOrgUrlPrefix, isRtl } = this.props;
 
     return (
-      <ContentContainer heading={i18n.teacherCoursesHeading()} isRtl={false}>
-        <ResourceCard
-          title={i18n.teacherCourseHoc()}
-          description={i18n.teacherCourseHocDescription()}
-          image="hourofcode"
-          buttonText={i18n.learnMore()}
-          link={`${codeOrgUrlPrefix}/hourofcode/overview`}
+      <div>
+        <ContentContainer
+          heading={i18n.teacherCoursesHeading()}
+          description={i18n.teacherCoursesDescription()}
           isRtl={isRtl}
-        />
-        <ResourceCard
-          title={i18n.teacherCourseElementary()}
-          description={i18n.teacherCourseElementaryDescription()}
-          image="elementary"
-          buttonText={i18n.learnMore()}
-          link={`${codeOrgUrlPrefix}/educate/curriculum/elementary-school`}
-          isRtl={isRtl}
-        />
-        <ResourceCard
-          title={i18n.teacherCourseMiddle()}
-          description={i18n.teacherCourseMiddleDescription()}
-          image="middleschool"
-          buttonText={i18n.learnMore()}
-          link={`${codeOrgUrlPrefix}/educate/curriculum/middle-school`}
-          isRtl={isRtl}
-        />
-        <ResourceCard
-          title={i18n.teacherCourseHighOlder()}
-          description={i18n.teacherCourseHighDescription()}
-          image="highschool"
-          buttonText={i18n.learnMore()}
-          link={`${codeOrgUrlPrefix}/educate/curriculum/high-school`}
+        >
+          <ResourceCard
+            isJumbo={true}
+            title={i18n.teacherCourseElementary()}
+            description={i18n.teacherCourseElementaryDescription()}
+            buttonText={i18n.learnMore()}
+            link={`${codeOrgUrlPrefix}/educate/curriculum/elementary-school`}
+            isRtl={isRtl}
+          />
+          <div style={styles.horizontalSpacer}/>
+          <ResourceCard
+            isJumbo={true}
+            title={i18n.teacherCourseMiddle()}
+            description={i18n.teacherCourseMiddleDescription()}
+            buttonText={i18n.learnMore()}
+            link={`${codeOrgUrlPrefix}/educate/curriculum/middle-school`}
+            isRtl={isRtl}
+          />
+          <div style={styles.horizontalSpacer}/>
+          <ResourceCard
+            isJumbo={true}
+            title={i18n.teacherCourseHighOlder()}
+            description={i18n.teacherCourseHighDescription()}
+            buttonText={i18n.learnMore()}
+            link={`${codeOrgUrlPrefix}/educate/curriculum/high-school`}
+            isRtl={isRtl}
+          />
+        </ContentContainer>
+
+        <ContentContainer
+          heading={i18n.teacherCourseHoc()}
+          description={i18n.teacherCourseHocDescription()}
           isRtl={isRtl}
-        />
-      </ContentContainer>
+          linkText={i18n.teacherCourseHocLinkText()}
+          link={`${codeOrgUrlPrefix}/hourofcode/overview`}
+          showLink={true}
+        >
+          <ProtectedStatefulDiv ref="hocCourses"/>
+        </ContentContainer>
+      </div>
     );
   }
 });

diff --git a/dashboard/app/views/courses/index.html.haml b/dashboard/app/views/courses/index.html.haml
@@ -28,8 +28,8 @@
   = render file: Rails.root.join('..', 'shared', 'haml', 'course_explorer_table.haml')
   = render file: Rails.root.join('..', 'shared', 'haml', 'tool_explorer_table.haml')
   = render partial: 'home/all_courses'
-  -if current_user && !current_user.teacher?
-    #user_hero
+  #user_hero
+    -if current_user && !current_user.teacher?
       = render template: 'api/user_hero'
   #flashes
     = show_flashes.html_safe

diff --git a/dashboard/app/views/home/_all_courses.html.haml b/dashboard/app/views/home/_all_courses.html.haml
@@ -27,16 +27,18 @@
   %br/
   .row
     .span12.twolineheader!= t('home.heading_hoc2014')
-  .row
-    = render partial: 'shared/course_tall_block', locals: { id: Script::MINECRAFT_DESIGNER_NAME, showState: show_state }
-    = render partial: 'shared/course_tall_block', locals: { id: Script::STARWARS_NAME, showState: show_state }
-    = render partial: 'shared/course_tall_block', locals: { id: Script::FROZEN_NAME, showState: show_state }
-    = render partial: 'shared/course_tall_block', locals: { id: Script::HOC_NAME, showState: show_state }
-  %br/
-  %br/
-  .row
-    = render partial: 'shared/course_tall_block', locals: { id: Script::FLAPPY_NAME, showState: show_state }
-    = render partial: 'shared/course_tall_block', locals: { id: Script::INFINITY_NAME, showState: show_state }
-    = render partial: 'shared/course_tall_block', locals: { id: Script::PLAYLAB_NAME, showState: show_state }
-    = render partial: 'shared/course_tall_block', locals: { id: Script::ARTIST_NAME, showState: show_state }
-  %br/
+  .hour-of-code-courses
+    .hour-of-code-courses-first-row
+      .row
+        = render partial: 'shared/course_tall_block', locals: { id: Script::MINECRAFT_DESIGNER_NAME, showState: show_state }
+        = render partial: 'shared/course_tall_block', locals: { id: Script::STARWARS_NAME, showState: show_state }
+        = render partial: 'shared/course_tall_block', locals: { id: Script::FROZEN_NAME, showState: show_state }
+        = render partial: 'shared/course_tall_block', locals: { id: Script::HOC_NAME, showState: show_state }
+    %br/
+    %br/
+    .row
+      = render partial: 'shared/course_tall_block', locals: { id: Script::FLAPPY_NAME, showState: show_state }
+      = render partial: 'shared/course_tall_block', locals: { id: Script::INFINITY_NAME, showState: show_state }
+      = render partial: 'shared/course_tall_block', locals: { id: Script::PLAYLAB_NAME, showState: show_state }
+      = render partial: 'shared/course_tall_block', locals: { id: Script::ARTIST_NAME, showState: show_state }
+    %br/