Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Courses: update UI for course catalog & hoc options #16316

Merged
merged 10 commits into from
Jul 13, 2017
Merged

Courses: update UI for course catalog & hoc options #16316

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
3227678
Courses: update UI for course catalog & hoc options
breville Jul 10, 2017
4fbc7dc
Courses: update hoc section for student
breville Jul 10, 2017
99c0e0e
Updated apps strings
breville Jul 10, 2017
dec85c2
Courses: Make sure display logic runs properly
breville Jul 10, 2017
3bbb24d
Revert "Updated apps strings"
breville Jul 10, 2017
4899bf4
Courses: code review feedback
breville Jul 11, 2017
bc03e7d
Courses: remove unnecessary div id
breville Jul 11, 2017
7d323ce
Merge branch 'staging' into update-teacher-courses
breville Jul 12, 2017
0153c2a
Courses: fix path to moved ContentContainer component
breville Jul 12, 2017
810d041
Courses: fix missing import
breville Jul 12, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
6 changes: 4 additions & 2 deletions apps/i18n/common/en_us.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -499,13 +499,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.",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we link Hour of Code?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Bjvanminnen I tried once and failed.. do we have a good way to embed links in apps strings, wrapping the link around some text that's in the string?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't have a good way to do it inside of translated strings. The approach I usually aim for is to have a link following the string.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@tanyaparker Can we rewrite the content to make that work?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe append "Visit HourOfCode.com to learn more." at the end where the whole thing is hyperlinked? Is that what you mean?

"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",
Expand Down
48 changes: 30 additions & 18 deletions apps/src/templates/studioHomepages/Courses.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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();
},

Expand Down Expand Up @@ -106,7 +101,7 @@ const Courses = React.createClass({
/>
)}

{courses && courses.length > 0 && (
{(courses && courses.length > 0) && (
<RecentCourses
courses={courses}
showAllCoursesLink={false}
Expand All @@ -116,7 +111,8 @@ const Courses = React.createClass({
/>
)}

{isEnglish && isTeacher && (
{/* Signed-in teacher in English */}
{(isEnglish && isTeacher) && (
<div>
<UiTips
userId={userId}
Expand Down Expand Up @@ -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
Expand All @@ -189,7 +201,7 @@ const Courses = React.createClass({
</div>
)}

{!isTeacher && !isSignedOut && (
{(!isTeacher && !isSignedOut) && (
<ProtectedStatefulDiv ref="sectionManagement"/>
)}
</div>
Expand Down
21 changes: 17 additions & 4 deletions apps/src/templates/studioHomepages/ResourceCard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
},
Expand Down Expand Up @@ -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'),
Expand All @@ -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}
Expand Down
91 changes: 59 additions & 32 deletions apps/src/templates/studioHomepages/TeacherAssignablesCatalog.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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`}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure I'm reading this right but wanted to confirm teachers go to code.org/hourofcode/overview but students go to code.org/learn?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Signed-in student in English gets /learn.
Signed-in teacher in English gets /hourofcode/overview.

showLink={true}
>
<ProtectedStatefulDiv ref="hocCourses"/>
</ContentContainer>
</div>
);
}
});
Expand Down
4 changes: 2 additions & 2 deletions dashboard/app/views/courses/index.html.haml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
28 changes: 15 additions & 13 deletions dashboard/app/views/home/_all_courses.html.haml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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/