Merge pull request #1228 from MITx/content/rocha/media-kit

Add new tab/window behavior to media kit

lms/static/sass/multicourse/_home.scss

@@ -347,7 +347,7 @@
       .action.action-mediakit {
         float: right;
         position: relative;
-        top: 5px;
+        top: 1px;
         font-family: $sans-serif;
         font-size: 14px;
         text-shadow: 0 1px rgba(255,255,255, 0.6);
@@ -360,6 +360,12 @@
           content: "➤";
           font-size: 11px;
         }
+
+        .org-name {
+          color: $blue;
+          font-family: $sans-serif;
+          text-transform: none;
+        }
       }
     }
 

lms/static/sass/multicourse/_media-kit.scss

@@ -224,7 +224,7 @@ $white: rgb(255,255,255);
           @include box-sizing(border-box);
           @include box-shadow(0 1px 2px 0 rgba(0,0,0, 0.1));
           display: block;
-          min-height: 400px;
+          min-height: 380px;
           border: 2px solid tint($light-gray,75%);
           padding: $baseline;
 

lms/templates/index.html

@@ -121,7 +121,7 @@
     <section class="more-info">
       <header>
         <h2><span class="edx">edX</span> News &amp; Announcements</h2>
-        <a class="action action-mediakit" href="${reverse('media-kit')}"> edX MEDIA KIT</a>
+        <a class="action action-mediakit" href="${reverse('media-kit')}"> <span class="org-name">edX</span> MEDIA KIT</a>
       </header>
       <section class="news">
         <section class="blog-posts">

lms/templates/static_templates/media-kit.html

@@ -23,10 +23,10 @@
       <aside>
         <h3>The <span class="org-name">edX</span> Logo</h3>
         <figure class="logo">
-          <a class="action action-download" href="${static.url('files/edx-identity.zip')}">
+          <a rel="asset" class="action action-download" href="${static.url('files/edx-identity.zip')}">
             <img src="${static.url('images/edx.png')}" />
             <figcaption>.zip file containing Adobe Illustrator and .eps formats of logo alongside visual guidelines for use</figcaption>
-            <span class="note">Download</span>
+            <span class="note">Download (.zip file)</span>
           </a>
         </figure>
       </aside>
@@ -42,83 +42,70 @@
         <ul class="listing listing-media-items">
           <li>
             <figure>
-              <a class="action action-download" href="${static.url('images/press-kit/anant-agarwal_high-res.jpg')}">
+              <a rel="asset" class="action action-download" href="${static.url('images/press-kit/anant-agarwal_high-res.jpg')}">
                 <img src="${static.url('images/press-kit/anant-agarwal_x200.jpg')}"/>
                 <figcaption>Ananat Agarwal, President of edX, in his office in Cambridge, MA. The computer screen behind him shows a portion of a video lecture from 6.002x, Circuits &amp; Electronics, the MITx course taught by Agarwal.</figcaption>
-                <span class="note">High Resolution Photo</span>
+                <span class="note">Download (High Resolution Photo)</span>
               </a>
             </figure>
           </li>
           <li>
             <figure>
-              <a class="action action-download" href="${static.url('images/press-kit/anant-tablet_high-res.jpg')}">
+              <a rel="asset" class="action action-download" href="${static.url('images/press-kit/anant-tablet_high-res.jpg')}">
                 <img src="${static.url('images/press-kit/anant-tablet_x200.jpg')}"/>
                 <figcaption>Anant Agarwal creating a tablet-based lecture for 6.002x, Circuits & Electronics.</figcaption>
-                <span class="note">High Resolution Photo</span>
+                <span class="note">Download (High Resolution Photo)</span>
               </a>
             </figure>
           </li>
           <li>
             <figure>
-              <a class="action action-download" href="${static.url('images/press-kit/piotr-mitros_high-res.jpg')}">
+              <a rel="asset" class="action action-download" href="${static.url('images/press-kit/piotr-mitros_high-res.jpg')}">
                 <img src="${static.url('images/press-kit/piotr-mitros_x200.jpg')}"/>
                 <figcaption>Piotr Mitros, Chief Scientist at edX, uses a Rostrum camera to create an overhead camera-based lecture. During this process, voice and video are recorded for an interactive tutorial.</figcaption>
-                <span class="note">High Resolution Photo</span>
+                <span class="note">Download (High Resolution Photo)</span>
               </a>
             </figure>
           </li>
           <li>
             <figure>
-              <a class="action action-download" href="${static.url('images/press-kit/edx-video-editing_high-res.jpg')}">
+              <a rel="asset" class="action action-download" href="${static.url('images/press-kit/edx-video-editing_high-res.jpg')}">
                 <img src="${static.url('images/press-kit/edx-video-editing_x200.jpg')}"/>
                 <figcaption>One of edX’s video editors edits a lecture in a video suite.</figcaption>
-                <span class="note">High Resolution Photo</span>
+                <span class="note">Download (High Resolution Photo)</span>
               </a>
             </figure>
           </li>
           <li>
             <figure>
-              <a class="action action-download" href="${static.url('images/press-kit/6.002x_high-res.png')}">
+              <a rel="asset" class="action action-download" href="${static.url('images/press-kit/6.002x_high-res.png')}">
                 <img src="${static.url('images/press-kit/6.002x_x200.jpg')}"/>
                 <figcaption>Screenshot of 6.002x Circuits and Elecronics course.</figcaption>
-                <span class="note">High Resolution Photo</span>
+                <span class="note">Download (High Resolution Photo)</span>
               </a>
             </figure>
           </li>
           <li>
             <figure>
-              <a class="action action-download" href="${static.url('images/press-kit/3.091x_high-res.png')}">
+              <a rel="asset" class="action action-download" href="${static.url('images/press-kit/3.091x_high-res.png')}">
                 <img src="${static.url('images/press-kit/3.091x_x200.jpg')}"/>
           <figcaption>Screenshot of 6.00x: Introduction to Computer Science and Programming.</figcaption>
-                <span class="note">High Resolution Photo</span>
+                <span class="note">Download (High Resolution Photo)</span>
               </a>
             </figure>
           </li>
         </ul>
       </article>
     </section>
-
-    <!-- <section class="share">
-      <header>
-        <h2>Share with friends and family:</h2>
-      </header>
-
-      <article>
-        <ul class="listing listing-share">
-          <li class="action action-twitter">
-            <a href="">
-
-            </a>
-          </li>
-          <li class="action action-email">
-            <a href="">
-
-            </a>
-          </li>
-          <li class="action action-facebook">
-          </li>
-        </ul>
-      </article>
-    </section> -->
   </div>
 </section>
+
+<%block name="js_extra">
+   <script type="text/javascript">
+      $('a[rel="external"],a[rel="asset"]').click( function() {
+        window.open( $(this).attr('href') );
+        $(this).attr('title','This link will open a new browser window/tab')
+        return false;
+      });
+   </script>
+</%block>