Merge pull request #26577 from code-dot-org/banners-professional-lear…

…ning-2019

Banners: professional learning 2019 for homepage, teacher /home & /courses

apps/i18n/common/en_us.json

@@ -1223,6 +1223,8 @@
   "specialAnnouncementDescriptionHoc2018Mc": "Sign up your class to try one of the over 150 NEW activities for the Hour of Code (Dec 3-9). Be sure to check out our brand new Minecraft activity for 2018, the Voyage Aquatic! Sign up your class today.",
   "specialAnnouncementHeadingPostHoc2018": "Go beyond an Hour of Code",
   "specialAnnouncementDescriptionPostHoc2018": "An hour is just the beginning. We offer comprehensive curriculum for grades K-12, professional learning programs including local workshops, and resources to help you and your school get started.",
+  "specialAnnouncementHeadingJoinProfessionalLearning2019": "Sign up for Professional Learning",
+  "specialAnnouncementDescriptionJoinProfessionalLearning2019": "98% of teachers recommend our engaging programs from elementary school to AP computer science for high school. Join our hands-on workshops with other teachers from your area. Spaces are limited, so let us know if you're interested.",
   "stage": "Stage",
   "stageExtras": "Lesson Extras",
   "stageLocked": "Stage is locked.",

apps/src/templates/studioHomepages/Courses.jsx

@@ -51,7 +51,7 @@ class Courses extends Component {
       {linesCount: this.props.linesCount, studentsCount: this.props.studentsCount}
     );
     const headingDescription = isSignedOut ? i18n.coursesHeadingDescription() : null;
-    const showSpecialTeacherAnnouncement = false;
+    const showSpecialTeacherAnnouncement = true;
 
     return (
       <div style={styles.content}>

apps/src/templates/studioHomepages/TeacherHomepage.jsx

@@ -128,7 +128,7 @@ export default class TeacherHomepage extends Component {
     const { hocLaunch, courses, topCourse, announcement, joinedSections } = this.props;
     const { ncesSchoolId, censusQuestion, schoolYear } = this.props;
     const { teacherId, teacherName, teacherEmail } = this.props;
-    const { canViewAdvancedTools, queryStringOpen } = this.props;
+    const { canViewAdvancedTools, queryStringOpen, isEnglish } = this.props;
 
     // Show the special announcement for now.
     const showSpecialAnnouncement = true;
@@ -148,7 +148,7 @@ export default class TeacherHomepage extends Component {
         <ProtectedStatefulDiv
           ref="teacherReminders"
         />
-        {showSpecialAnnouncement && (
+        {isEnglish && showSpecialAnnouncement && (
           <SpecialAnnouncementActionBlock
             hocLaunch={hocLaunch}
           />

apps/src/templates/studioHomepages/TwoColumnActionBlock.jsx

@@ -21,14 +21,22 @@ const styles = {
     minHeight: 260,
     boxSizing: 'border-box'
   },
-  subheading: {
+  subHeading: {
     paddingRight: 0,
     paddingBottom: 20,
     fontSize: 27,
     lineHeight: 1.2,
     fontFamily: '"Gotham 7r", sans-serif',
     color: color.white
   },
+  subHeadingSmallFont: {
+    paddingRight: 0,
+    paddingBottom: 20,
+    fontSize: 25,
+    lineHeight: 1.2,
+    fontFamily: '"Gotham 7r", sans-serif',
+    color: color.white
+  },
   image: {
     width: 485,
     minHeight: 260
@@ -57,6 +65,7 @@ export class UnconnectedTwoColumnActionBlock extends Component {
     imageUrl: PropTypes.string.isRequired,
     heading: PropTypes.string,
     subHeading: PropTypes.string,
+    subHeadingSmallFont: PropTypes.bool,
     description: PropTypes.string.isRequired,
     buttons: PropTypes.arrayOf(PropTypes.shape({
       url: PropTypes.string.isRequired,
@@ -67,7 +76,7 @@ export class UnconnectedTwoColumnActionBlock extends Component {
   };
 
   render() {
-    const { isRtl, responsiveSize, imageUrl, heading, subHeading, description, buttons } = this.props;
+    const { isRtl, responsiveSize, imageUrl, heading, subHeading, subHeadingSmallFont, description, buttons } = this.props;
     const float = isRtl ? 'right' : 'left';
     const width = (responsiveSize === 'lg') ? '50%' : '100%';
 
@@ -90,7 +99,7 @@ export class UnconnectedTwoColumnActionBlock extends Component {
           <div style={{float, width}}>
             <div style={styles.textItem}>
               {subHeading && (
-                <div style={styles.subheading}>
+                <div style={subHeadingSmallFont ? styles.subHeadingSmallFont : styles.subHeading}>
                   {subHeading}
                 </div>
               )}
@@ -183,13 +192,14 @@ export class SpecialAnnouncementActionBlock extends Component {
   render() {
     return (
       <TwoColumnActionBlock
-        imageUrl={pegasus('/shared/images/fill-540x289/teacher-announcement/hoc2018-posthoc.jpg')}
-        subHeading={i18n.specialAnnouncementHeadingPostHoc2018()}
-        description={i18n.specialAnnouncementDescriptionPostHoc2018()}
+        imageUrl={pegasus('/shared/images/fill-540x289/teacher-announcement/professional-learning-2019-3.jpg')}
+        subHeading={i18n.specialAnnouncementHeadingJoinProfessionalLearning2019()}
+        subHeadingSmallFont={true}
+        description={i18n.specialAnnouncementDescriptionJoinProfessionalLearning2019()}
         buttons={[
           {
-            url: pegasus('/yourschool'),
-            text: i18n.learnMore()
+            url: pegasus('/educate/professional-learning'),
+            text: i18n.joinUs()
           }
         ]}
       />

pegasus/sites.v3/code.org/public/index.haml

@@ -22,10 +22,11 @@ style_min: true
 
 #homepage.supreme-container
   = view :homepage_hero
-  = view :curriculum_banner
 
   - if request.language == "en"
+    = view :curriculum_banner
     = view :homepage_below_hero_announcement
+    = view :homepage_below_hero_plane_banner
     = view :stats_homepage
   - else
     = view :homepage_below_hero_announcement

pegasus/sites.v3/code.org/views/curriculum_banner.haml

@@ -1,4 +1,4 @@
-- if request.language == "en"
+- if Homepage.show_curriculum_banner(request)
   .curriculum-banner
     Bring computer science to your school or district
        

pegasus/sites.v3/code.org/views/homepage_below_hero_plane_banner.haml

@@ -0,0 +1,25 @@
+- if Homepage.show_professional_learning_banner(request)
+  = inline_css 'homepage_below_hero_plane_banner.css'
+
+  .homepage-professional-learning-banner
+    %a.linktag#pl-2019{href: "/educate/professional-learning"}
+      .nonphone.col-80.tablet-feature
+        .left.col-80.animateSlideInFromLeft
+          .banner
+            %img{src: "/images/homepage/professional-learning-2018-banner.png"}
+            .text
+              Sign up for Professional Learning for
+              %br/
+              Elementary, Middle, or High School
+        .right.col-20
+          %button
+            Join us
+      .phone.phone-feature
+        .text
+          Sign up for Professional Learning for
+          %br/
+          Elementary, Middle, or High School
+        %button
+          Join us
+
+    .clear

pegasus/src/homepage.rb

@@ -408,6 +408,14 @@ def self.get_below_hero_announcement
     }
   end
 
+  def self.show_curriculum_banner(request)
+    false
+  end
+
+  def self.show_professional_learning_banner(request)
+    request.language == "en"
+  end
+
   def self.get_dance_stars
     stars = [
       "Ace of Base", "A-ha", "Ariana Grande", "Avicii and Aloe Blacc", "Bruce Springsteen", "Calvin Harris",

shared/css/homepage_professional_learning_2018.scss → shared/css/homepage_below_hero_plane_banner.scss

@@ -11,7 +11,7 @@
   animation: 5s ease-out 0s 1 slideInFromLeft;
 }
 
-.homepage-professional-learning-2018-banner {
+.homepage-professional-learning-banner {
   background-color: #59b9dc;
   padding-top: 5px;
   padding-bottom: 5px;