tidy up collection viva

atlas/templates/atlas/collection_detail.html

@@ -19,6 +19,7 @@
     </ol>
 
     <p>This collection will be available to view/take <a href='{{collection.get_take_url}}'>here</a>
+    <p>View as a viva collection <a href='{% url "atlas:collection_viva" collection.pk %}'>here</a>
 
     {% if can_edit %}
         <p><button id='button-edit-order' title='click and drag questions to change order' data-posturl="{% url 'atlas:exam_json_edit' pk=collection.pk %}">Edit case order / Delete cases</button></p>

atlas/templates/atlas/collection_viva.html

@@ -6,12 +6,14 @@
         {% for case in cases %}
             <li data-question_pk={{case.pk}}>Case {{forloop.counter}}: {{case.title}} &nbsp;
 
-                 <button class="case-link" data-target="https://viewer.penracourses.org.uk/viewer/dicomjson?url=https://www.penracourses.org.uk{% url 'atlas:case_dicom_json' case.pk %}">Open</button>
+                 <button class="show-case no-padding" data-title="{{case.title}}" data-target="https://viewer.penracourses.org.uk/viewer/dicomjson?url=https://www.penracourses.org.uk{% url 'atlas:case_dicom_json' case.pk %}">Show</button>
+                 <button class="open-case no-padding" data-title="{{case.title}}" data-target="https://viewer.penracourses.org.uk/viewer/dicomjson?url=https://www.penracourses.org.uk{% url 'atlas:case_dicom_json' case.pk %}">Open</button>
             </li>
 
         {% endfor %}
     </ol>
 
+    <h2 id="case-title"></h2>
     <iframe id="viewer" style="width: 100%; height: 500px; border: none"/>
 
 {% endblock %}
@@ -23,9 +25,10 @@ var win2 = false;
 
     $(document).ready(function() {
         console.log('ready')
-        $('.case-link').click(function() {
+        $('.show-case').click(function() {
             var url = $(this).data('target');
             console.log('clicked', url)
+            $('#case-title').text($(this).data('title'));
             $('#viewer').attr('src', url)
             //if (win2 == false || win2.closed) {
             //    win2 = openSecondaryWindow(url);
@@ -33,10 +36,15 @@ var win2 = false;
             //} else {
             //    win2.location.href = url
             //}
+        });
+        $('.open-case').click(function() {
+            var url = $(this).data('target');
+            win2 = openSecondaryWindow(url);
         })
     });
 function openSecondaryWindow(url) {
-   return win2 = window.open(url,'secondary','width=300,height=100');
+   //return win2 = window.open(url,'secondary','width=300,height=100');
+   return win2 = window.open(url,'secondary');
 }
 
 </script>

rad/static/css/anatomy.css

@@ -919,7 +919,7 @@ summary h5 {
   opacity: 80%;
 }
 
-.small-url-button {
+.small-url-button, .no-padding {
   padding: 0px;
 }