course_about.html 7 KB
Newer Older
1 2
<%! 
  from django.core.urlresolvers import reverse 
3
  from courseware.courses import course_image_url, get_course_about_section
4
%>
5
<%namespace name='static' file='../static_content.html'/>
6 7 8

<%inherit file="../main.html" />

Matthew Mongeau committed
9
<%block name="js_extra">
10 11 12 13 14 15 16 17 18 19 20 21
  % if not registered:
    %if user.is_authenticated():
      ## If the user is authenticated, clicking the enroll button just submits a form
      <script type="text/javascript">
      (function() {
        $(".register").click(function() {
          $("#class_enroll_form").submit();
        });
    
        $(document).delegate('#class_enroll_form', 'ajax:success', function(data, json, xhr) {
          if(json.success) {
            location.href="${reverse('dashboard')}";
22
          }else{
23
	    $('#register_message).html("<p><font color='red'>" + json.error + "</font></p>")
24 25 26 27 28 29 30 31 32 33 34
          }
        });
      })(this)
      </script>
    %else:
      ## If the user is not authenticated, clicking the enroll button pops up the register
      ## field. We also slip in the registration fields into the login/register fields so
      ## the user is automatically registered after logging in / registering
      <script type="text/javascript">
      (function() {
        $(".register").click(function() {
35 36
          if ($(".login_form .enroll_fieldset").length === 0) {
            $(".login_form").append( $(".enroll_fieldset").first().clone() );
37
          }
38 39
          if ($(".register_form .enroll_fieldset").length === 0) {
            $(".register_form").append( $(".enroll_fieldset").first().clone() );
40 41 42 43 44 45 46
          }
        });
      })(this)
      </script>
    %endif
  %endif

Matthew Mongeau committed
47 48 49
  <script src="${static.url('js/course_info.js')}"></script>
</%block>

50 51 52

<%block name="title"><title>About ${course.number}</title></%block>

53 54 55
<section class="course-info">
  <header class="course-profile">
    <div class="intro-inner-wrapper">
56
      <div class="table">
57 58
      <section class="intro">
        <hgroup>
59
          <h1>${course.number}: ${get_course_about_section(course, "title")}<a href="${reverse('university_profile', args=[course.org])}">${get_course_about_section(course, "university")}</a></h1>
60
        </hgroup>
61 62

        <div class="main-cta">
63
          %if user.is_authenticated():
64
            %if registered:
65
   	        <%
66
		  ## TODO: move this logic into a view
67 68 69 70 71 72 73 74 75
                  if course.has_started() or settings.MITX_FEATURES['DISABLE_START_DATES']:
                      course_target = reverse('info', args=[course.id])
                  else:
                      course_target = reverse('about_course', args=[course.id])
                  show_link = settings.MITX_FEATURES.get('ENABLE_LMS_MIGRATION')
                %>
	        %if show_link:
                <a href="${course_target}">
                %endif
76
                <span class="register disabled">You are registered for this course (${course.number}).</span>
77 78 79
	        %if show_link:
                </a>
                %endif
80
            %else:
81
                <a href="#" class="register">Register for ${course.number}</a>
82
	        <div id="register_message"></div>
83
            %endif
84
          %else:
85
            <a href="#signup-modal" class="register" rel="leanModal" data-notice='You must Sign Up or <a href="#login-modal" rel="leanModal">Log In</a> to enroll.'>Register for ${course.number}</a>
86
          %endif
87
        </div>
88

Matthew Mongeau committed
89
      </section>
90
      % if get_course_about_section(course, "video"):
91
      <a href="#video-modal" class="media" rel="leanModal">
92
        <div class="hero">
93
          <img src="${course_image_url(course)}" />
94 95
          <div class="play-intro"></div>
        </div>
96
      </a>
97 98 99 100 101
      %else:
      <div class="media">
        <div class="hero">
          <img src="${course_image_url(course)}" />
        </div>
102
      </div>
103
      % endif
104
    </div>
105
      </div>
106
  </header>
Matthew Mongeau committed
107

108 109 110 111
  <section class="container">
    <section class="details">
      <nav>
        <a href="#" class="active">Overview</a>
112 113 114 115 116
      ##  <a href="#">FAQ</a>
      ##  <a href="#">Requirements</a>
      ##  <a href="#">Text-book</a>
      ##  <a href="#">Syllabus</a>
      ##  <a href="#">Reviews</a>
117
      </nav>
Matthew Mongeau committed
118

119
      <div class="inner-wrapper">
120
        ${get_course_about_section(course, "overview")}
121 122
      </div>
    </section>
123 124 125 126

    <section class="course-sidebar">
      <section class="course-summary">
        <header>
127 128
          <div class="social-sharing">
            <div class="sharing-message">Share with friends and family!</div>
129
            <a href="http://twitter.com/intent/tweet?text=I+just+registered+for+${course.number}+${get_course_about_section(course, 'title')}+through+@edxonline:+http://www.edx.org${reverse('about_course', args=[course.id])}" class="share">
130
              <img src="${static.url('images/social/twitter-sharing.png')}">
131
            </a>
132
            <a href="http://www.facebook.com/EdxOnline" class="share"> <img src="${static.url('images/social/facebook-sharing.png')}">
133
            </a>
134
            <a href="mailto:?subject=Take%20a%20course%20with%20edX%20online&body=I%20just%20registered%20for%20${course.number}%20${get_course_about_section(course, 'title')}%20through%20edX:+http://edx.org/${reverse('about_course', args=[course.id])}" class="share">
135
              <img src="${static.url('images/social/email-sharing.png')}">
136 137
            </a>
          </div>
138
        </header>
139

140
        <ol class="important-dates">
141 142
          <li><div class="icon course-number"></div><p>Course Number</p><span class="course-number">${course.number}</span></li>
          <li><div class="icon start"></div><p>Classes Start</p><span class="start-date">${course.start_date_text}</span></li>
143 144

          ## End date should come from course.xml, but this is a quick hack
145
          % if get_course_about_section(course, "end_date"):
146
            <li><div class="icon end"></div><p>Classes End</p><span class="final-date">${get_course_about_section(course, "end_date")}</span></li>
147 148
          % endif

149
          % if get_course_about_section(course, "effort"):
150
            <li><div class="icon effort"></div><p>Estimated Effort</p><span class="start-date">${get_course_about_section(course, "effort")}</span></li>
151 152
          % endif

153 154
          ##<li><div class="icon length"></div><p>Course Length</p><span class="course-length">15 weeks</span></li>

155
          % if get_course_about_section(course, "prerequisites"):
156
            <li class="prerequisites"><div class="icon prereq"></div><p>Prerequisites</p><span class="start-date">${get_course_about_section(course, "prerequisites")}</span></li>
157
          % endif
158
        </ol>
159 160
      </section>
    </section>
161

162 163
  </section>
</section>
164

165
%if not registered:
166 167 168 169 170 171
  <div style="display: none;">
    <form id="class_enroll_form" method="post" data-remote="true" action="${reverse('change_enrollment')}">
      <fieldset class="enroll_fieldset">
        <input name="course_id" type="hidden" value="${course.id}">
        <input name="enrollment_action" type="hidden" value="enroll">
      </fieldset>
172 173 174 175 176 177 178 179
      <div class="submit">
        <input name="submit" type="submit" value="enroll">
      </div>
    </form>
  </div>
%endif


180
<%include file="../video_modal.html" />