ECOM-5109

Adding clipboard.js and some cleanup

bower.json

@@ -13,6 +13,7 @@
     "edx-pattern-library": "0.16.3",
     "underscore": "~1.8.3",
     "moment": "~2.10.3",
-    "pikaday": "https://github.com/owenmead/Pikaday.git#1.4.0"
+    "pikaday": "https://github.com/owenmead/Pikaday.git#1.4.0",
+    "clipboard": "1.5.12"
   }
 }

course_discovery/static/js/publisher/publisher.js

-$(".container button").click(function(event) {
+$(".container > button").click(function(event) {
     $(this).addClass("selected");
     $(this).siblings().removeClass("selected");
     var tab = $(this).data("tab");

course_discovery/static/sass/publisher/course_detail.scss

@@ -4,6 +4,12 @@
 // ------------------------------
 // #RESET
 // ------------------------------
+//
+//
+//// ------------------------------
+// Fontawesome icons
+// ------------------------------
+
 * {
   margin: 0;
   padding: 0;
@@ -58,7 +64,7 @@ nav {
       display: block;
       padding: 10px;
       color: #0ea6ec;
-      @include float(left)
+      @include float(left);
       margin: 0 5px;
       border: none;
       background-color: transparent;
@@ -89,6 +95,12 @@ nav {
     .heading {
       font-weight: bold;
       font-size: 16px;
+
+      .btn-copy {
+        text-decoration: none;
+        @include margin-left(10px);
+        color: #999;
+      }
     }
   }
 }

course_discovery/templates/publisher/course_run_detail.html

@@ -5,15 +5,13 @@
 {% block title %}
 {% trans "Course Run Detail" %}
 {% endblock title %}
-
 {% block content %}
-
 <nav class="administration-navbar">
     <div class="container">
         <button class="selected" data-tab="#tab-1">{% trans "All" %}</button>
         <button data-tab="#tab-2">{% trans "STUDIO" %}</button>
         <button data-tab="#tab-3">{% trans "CAT" %}</button>
-        <button data-tab="#tab-4">{% trans "DRUPAL" %}</a>
+        <button data-tab="#tab-4">{% trans "DRUPAL" %}</button>
     </div>
 </nav>
 
@@ -46,5 +44,13 @@
 {% endblock %}
 
 {% block extra_js %}
+    <script src="{% static 'bower_components/clipboard/dist/clipboard.min.js' %}"></script>
     <script src="{% static 'js/publisher/publisher.js' %}"></script>
+    <script>
+        new Clipboard(".btn-copy", {
+            text: function(trigger) {
+                return $(trigger).parent().next('.copy').text().trim();
+            }
+        });
+    </script>
 {% endblock %}

course_discovery/templates/publisher/course_run_detail/_cat.html

-{% extends 'base.html' %}
 {% load i18n %}
-{% block title %}
-    {% trans "Course Run Detail" %}
-{% endblock title %}
-
 {% block content %}
 
    <div class="course-information">
         <div class="info-item">
-            <div class="heading">{% trans "Course ID" %}</div>
-            <div>{{ object.lms_course_id }}</div>
+            <div class="heading">
+                {% trans "Course ID" %}
+                {% include "publisher/course_run_detail/clipboard.html" %}
+            </div>
+            <div class="copy">{{ object.lms_course_id }}</div>
         </div>
         <div class="info-item">
-            <div class="heading">{% trans "Course Type" %}</div>
-            <div>{{ object.course_type|capfirst }}</div>
+            <div class="heading">
+                {% trans "Course Type" %}
+                {% include "publisher/course_run_detail/clipboard.html" %}
+            </div>
+            <div class="copy">{{ object.course_type|capfirst }}</div>
         </div>
     </div>
 

course_discovery/templates/publisher/course_run_detail/_drupal.html

-{% extends 'base.html' %}
 {% load i18n %}
-{% block title %}
-    {% trans "Course Form" %}
-{% endblock title %}
-
 {% block content %}
-
 <div class="course-information">
     <div class="info-item">
-        <div class="heading">{% trans "Title" %}</div>
-        <div>{{ object.title }}</div>
+        <div class="heading">
+            {% trans "Title" %}
+            {% include "publisher/course_run_detail/clipboard.html" %}
+        </div>
+        <div class="copy">{{ object.title }}</div>
     </div>
     <div class="info-item">
-        <div class="heading">{% trans "Number" %}</div>
-        <div>{{ object.number }}</div>
+        <div class="heading">
+            {% trans "Number" %}
+            {% include "publisher/course_run_detail/clipboard.html" %}
+        </div>
+        <div class="copy">{{ object.number }}</div>
     </div>
     <div class="info-item">
-        <div class="heading">{% trans "Course ID" %}</div>
-        <div>{{ object.lms_course_id }}</div>
+        <div class="heading">
+            {% trans "Course ID" %}
+            {% include "publisher/course_run_detail/clipboard.html" %}
+        </div>
+        <div class="copy">{{ object.lms_course_id }}</div>
     </div>
     <div class="info-item">
-        <div class="heading">{% trans "Sub Title" %}</div>
-        <div>{{ object.short_description }}</div>
+        <div class="heading">
+            {% trans "Sub Title" %}
+            {% include "publisher/course_run_detail/clipboard.html" %}
+        </div>
+        <div class="copy">{{ object.short_description }}</div>
     </div>
     <div class="info-item">
-        <div class="heading">{% trans "School" %}</div>
-        <div>{{ object.organization_key }}</div>
+        <div class="heading">
+            {% trans "School" %}
+            {% include "publisher/course_run_detail/clipboard.html" %}
+        </div>
+        <div class="copy">{{ object.organization_key }}</div>
     </div>
     <div class="info-item">
-        <div class="heading">{% trans "Subject" %}</div>
-        <div>{% for subject in object.subjects %}{{ subject.name }}{% endfor %}</div>
+        <div class="heading">
+            {% trans "Subject" %}
+            {% include "publisher/course_run_detail/clipboard.html" %}
+        </div>
+        <div class="copy">{% for subject in object.subjects %}{{ subject.name }}{% endfor %}</div>
     </div>
 
     <div class="info-item">
-        <div class="heading">{% trans "XSeries" %}</div>
-        <div>{% if object.is_xseries  %}{{ object.xseries_name }}{% endif %}</div>
+        <div class="heading">
+            {% trans "XSeries" %}
+           {% include "publisher/course_run_detail/clipboard.html" %}
+        </div>
+        <div class="copy">{% if object.is_xseries  %}{{ object.xseries_name }}{% endif %}</div>
     </div>
 
     <div class="info-item">
-        <div class="heading">{% trans "Start Date" %}</div>
-        <div>{{ object.start|date:"Y-m-d" }}</div>
+        <div class="heading">
+            {% trans "Start Date" %}
+           {% include "publisher/course_run_detail/clipboard.html" %}
+        </div>
+        <div class="copy">{{ object.start|date:"Y-m-d" }}</div>
     </div>
     <div class="info-item">
-        <div class="heading">{% trans "End Date" %}</div>
-        <div>{{ object.end|date:"Y-m-d" }}</div>
+        <div class="heading">{% trans "End Date" %}
+            {% include "publisher/course_run_detail/clipboard.html" %}
+        </div>
+        <div class="copy">{{ object.end|date:"Y-m-d" }}</div>
     </div>
     <div class="info-item">
-        <div class="heading">{% trans "Self Paced" %}</div>
-        <div>{{ object.pacing_type }}</div>
+        <div class="heading">
+            {% trans "Self Paced" %}
+            {% include "publisher/course_run_detail/clipboard.html" %}
+        </div>
+        <div class="copy">{{ object.pacing_type }}</div>
     </div>
     <div class="info-item">
-        <div class="heading">{% trans "Staff" %}</div>
+        <div class="heading">
+            {% trans "Staff" %}
+            {% include "publisher/course_run_detail/clipboard.html" %}
+        </div>
         <div>{{ object.persons }}</div>
     </div>
     <div class="info-item">
-        <div class="heading">{% trans "Estimated Effort" %}</div>
-        <div>
+        <div class="heading">
+            {% trans "Estimated Effort" %}
+            {% include "publisher/course_run_detail/clipboard.html" %}
+        </div>
+        <div class="copy">
             {% if object.min_effort and object.max_effort %}
                 {{ object.min_effort }} {% trans "to" %} {{ object.max_effort }} {% trans "hours per week" %}
             {% endif %}
         </div>
     </div>
     <div class="info-item">
-        <div class="heading">{% trans "Languages" %}</div>
-        <div>{{ object.language.name }}</div>
+        <div class="heading">
+            {% trans "Languages" %}
+            {% include "publisher/course_run_detail/clipboard.html" %}
+        </div>
+        <div class="copy">{{ object.language.name }}</div>
     </div>
     <div class="info-item">
-        <div class="heading">{% trans "Video Translations" %}</div>
-        <div>{{ object.video_languages }}</div>
+        <div class="heading">
+            {% trans "Video Translations" %}
+            {% include "publisher/course_run_detail/clipboard.html" %}
+        </div>
+        <div class="copy">{{ object.video_languages }}</div>
     </div>
     <div class="info-item">
-        <div class="heading">{% trans "Level" %}</div>
-        <div>{{ object.level_type }}</div>
+        <div class="heading">
+            {% trans "Level" %}
+            {% include "publisher/course_run_detail/clipboard.html" %}
+        </div>
+        <div class="copy">{{ object.level_type }}</div>
     </div>
     <div class="info-item">
-        <div class="heading">{% trans "About this Course" %}</div>
-        <div>{{ object.full_description }}</div>
+        <div class="heading">
+            {% trans "About this Course" %}
+            {% include "publisher/course_run_detail/clipboard.html" %}
+        </div>
+        <div class="copy">{{ object.full_description }}</div>
     </div>
     <div class="info-item">
-        <div class="heading">{% trans "What you'll learn" %}</div>
-        <div>{{ object.expected_learnings }}</div>
+        <div class="heading">
+            {% trans "What you'll learn" %}
+            {% include "publisher/course_run_detail/clipboard.html" %}
+        </div>
+        <div class="copy">{{ object.expected_learnings }}</div>
     </div>
     <div class="info-item">
-        <div class="heading">{% trans "Prerequisite" %}</div>
-        <div>{{ object.prerequisites }}</div>
+        <div class="heading">
+            {% trans "Prerequisite" %}
+            {% include "publisher/course_run_detail/clipboard.html" %}
+        </div>
+        <div class="copy">{{ object.prerequisites }}</div>
     </div>
     <div class="info-item">
-        <div class="heading">{% trans "Keywords" %}</div>
-        <div>{{ object.wrapped_obj.keywords }}</div>
+        <div class="heading">
+            {% trans "Keywords" %}
+            {% include "publisher/course_run_detail/clipboard.html" %}
+        </div>
+        <div class="copy">{{ object.wrapped_obj.keywords }}</div>
     </div>
     <div class="info-item">
-        <div class="heading">{% trans "Sponsors" %}</div>
-        <div>
+        <div class="heading">
+            {% trans "Sponsors" %}
+            {% include "publisher/course_run_detail/clipboard.html" %}
+        </div>
+        <div class="copy">
             {% for sponsor in object.wrapped_obj.sponsor.all %}
                 {{ sponsor.name }}<br>
             {% endfor %}
         </div>
     </div>
      <div class="info-item">
-        <div class="heading">{% trans "Price" %}</div>
-        <div>{{ object.verified_seat_price }}</div>
+        <div class="heading">
+            {% trans "Price" %}
+            {% include "publisher/course_run_detail/clipboard.html" %}
+        </div>
+        <div class="copy">{{ object.verified_seat_price }}</div>
     </div>
 
     <h3 class="hd-3 de-emphasized">{% trans "Enrollments" %}</h3>
     <div class="info-item">
-        <div class="heading">{% trans "Seats" %}</div>
-        {% for seat in object.wrapped_obj.seats.all %}
-            {{ seat.type }} <br>
-        {% endfor %}
+        <div class="heading">
+            {% trans "Seats" %}
+            {% include "publisher/course_run_detail/clipboard.html" %}
+        </div>
+        <div class="copy">
+            {% for seat in object.wrapped_obj.seats.all %}
+                <span>{{ seat.type }}</span>
+            {% endfor %}
+        </div>
     </div>
 </div>
 {% endblock %}

course_discovery/templates/publisher/course_run_detail/_studio.html

-{% extends 'base.html' %}
 {% load i18n %}
-{% load tz %}
-{% block title %}
-    {% trans "Course Run Detail" %}
-{% endblock title %}
-
 {% block content %}
+
     <div class="course-information">
         <div class="info-item">
-            <div class="heading">{% trans "Course Name" %}</div>
-            <div>{{ object.title }}</div>
+            <div class="heading">
+                {% trans "Course Name" %}
+                {% include "publisher/course_run_detail/clipboard.html" %}
+            </div>
+            <div class="copy">{{ object.title }} </div>
         </div>
         <div class="info-item">
-            <div class="heading">{% trans "Organization" %}</div>
-            <div>{{ object.organization_name }}</div>
+            <div class="heading">
+                {% trans "Organization" %}
+                {% include "publisher/course_run_detail/clipboard.html" %}
+            </div>
+            <div class="copy">{{ object.organization_name }}</div>
         </div>
         <div class="info-item">
-            <div class="heading">{% trans "Number" %}</div>
-            <div>{{  object.number }}</div>
+            <div class="heading">
+                {% trans "Number" %}
+                {% include "publisher/course_run_detail/clipboard.html" %}
+            </div>
+            <div class="copy">{{  object.number }}</div>
         </div>
 
         <div class="info-item">
-            <div class="heading">{% trans "Start Date" %}</div>
-            <div>{{ object.start|date:"M d, Y, H:i:s A" }}</div>
+            <div class="heading">
+                {% trans "Start Date" %}
+                {% include "publisher/course_run_detail/clipboard.html" %}
+            </div>
+            <div class="copy">{{ object.start|date:"M d, Y, H:i:s A" }}</div>
         </div>
         <div class="info-item">
-            <div class="heading">{% trans "End Date" %}</div>
-            <div>{{ object.end|date:"M d, Y, H:i:s A" }}</div>
+            <div class="heading">
+                {% trans "End Date" %}
+                {% include "publisher/course_run_detail/clipboard.html" %}
+            </div>
+            <div class="copy">{{ object.end|date:"M d, Y, H:i:s A" }}</div>
         </div>
         <div class="info-item">
-            <div class="heading">{% trans "Enrollment Start Date" %}</div>
-            <div>{{ object.enrollment_start|date:"M d, Y, H:i:s A" }}</div>
+            <div class="heading">
+                {% trans "Enrollment Start Date" %}
+                {% include "publisher/course_run_detail/clipboard.html" %}
+            </div>
+            <div class="copy">{{ object.enrollment_start|date:"M d, Y, H:i:s A" }}</div>
         </div>
         <div class="info-item">
-            <div class="heading">{% trans "Enrollment End Date" %}</div>
-            <div>{{ object.enrollment_end|date:"M d, Y, H:i:s A" }}</div>
+            <div class="heading">
+                {% trans "Enrollment End Date" %}
+                {% include "publisher/course_run_detail/clipboard.html" %}
+            </div>
+            <div class="copy">{{ object.enrollment_end|date:"M d, Y, H:i:s A" }}</div>
         </div>
         <div class="info-item">
-            <div class="heading">{% trans "Pacing Type" %}</div>
-            <div>{{ object.pacing_type }}</div>
+            <div class="heading">
+                {% trans "Pacing Type" %}
+                {% include "publisher/course_run_detail/clipboard.html" %}
+            </div>
+            <div class="copy">{{ object.pacing_type }}</div>
         </div>
     </div>
 {% endblock %}

course_discovery/templates/publisher/course_run_detail/clipboard.html

+<button class="btn-copy" title="copy to clipboard">+</button>