From bc5749a3086f26ca3574f32a1c6afef32e35f106 Mon Sep 17 00:00:00 2001
From: Ross <xkjq@ymail.com>
Date: Mon, 11 Aug 2025 10:55:32 +0100
Subject: [PATCH] Refactor collection detail and viva templates to improve link
 handling and enhance user instructions with modal display

---
 atlas/templates/atlas/collection_detail.html | 27 ++++----
 atlas/templates/atlas/collection_viva.html   |  8 ++-
 atlas/templates/atlas/viewer_local.html      | 70 ++++++++++++++++----
 3 files changed, 79 insertions(+), 26 deletions(-)

diff --git a/atlas/templates/atlas/collection_detail.html b/atlas/templates/atlas/collection_detail.html
index 71a075f4..ab8f479e 100644
--- a/atlas/templates/atlas/collection_detail.html
+++ b/atlas/templates/atlas/collection_detail.html
@@ -15,6 +15,21 @@
         Self review: {{collection.self_review}}<br />
         Open access: {{collection.open_access}}<br />
     </div>
+
+
+    {% if collection.collection_type == "VIV" %}
+        <p><a href='{% url "atlas:collection_viva" collection.pk %}'><button class="btn btn-primary">Start Viva</button></a>
+    {% else %}
+        <p>This collection will be available to view/take <a href='{{collection.get_take_url}}' id="take-url">here</a>{% if not collection.active %} (when active){% endif %} <button 
+            _="on click
+  writeText(#take-url's href) on navigator.clipboard
+  put 'copied url!' into me
+  wait 1s
+  put 'copy url' into me"
+            class="btn btn-sm">copy link</button>
+            <p>Review collection <a href='{% url "atlas:collection_viva" collection.pk %}'>here</a>
+    {% endif %}
+
     <h3>Cases</h3>
     <ol id="full-question-list" class="sortable">
         {% for casedetail in casesdetails %}
@@ -50,18 +65,6 @@
 
 
 
-    {% if collection.collection_type == "VIV" %}
-        <p>View as a viva collection <a href='{% url "atlas:collection_viva" collection.pk %}'>here</a>
-    {% else %}
-        <p>This collection will be available to view/take <a href='{{collection.get_take_url}}' id="take-url">here</a>{% if not collection.active %} (when active){% endif %} <button 
-            _="on click
-  writeText(#take-url's href) on navigator.clipboard
-  put 'copied url!' into me
-  wait 1s
-  put 'copy url' into me"
-            class="btn btn-sm">copy link</button>
-            <p>Review collection <a href='{% url "atlas:collection_viva" collection.pk %}'>here</a>
-    {% endif %}
 
     {% 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>
diff --git a/atlas/templates/atlas/collection_viva.html b/atlas/templates/atlas/collection_viva.html
index 1f14a80e..a8d7c0c6 100644
--- a/atlas/templates/atlas/collection_viva.html
+++ b/atlas/templates/atlas/collection_viva.html
@@ -2,7 +2,7 @@
 
 {% block content %}
     <details class="help-text">
-        <summary title="Click to view instructions">Instructions</summary>
+        <summary><i class="bi bi-info-circle"></i> Help</summary>
         <p>This set up is designed to allow you to project/share cases in a seperate window whilst controlling/tracking their display from this page.</p>
         <p>First you will need to open the linked viewer window by clicking the 'Open Viewer' button. This will open a new window/tab with the viewer in it. You will probably need to detach this from your current window.</p>
         <p>If you are sharing the window you can maximise the screen area by hiding the tab/bookmark bar and the address bar. In Microsoft Edge this can be done by installing as an app, in Chrome you can use an extension such as <a href='https://chromewebstore.google.com/detail/ncppfjladdkdaemaghochfikpmghbcpc'>Open-as-Popup</a>.</p>
@@ -294,7 +294,11 @@
         });
         function openSecondaryWindow(url) {
    //return win2 = window.open(url,'secondary','width=300,height=100');
-            return win2 = window.open(url,'secondary');
+            return win2 = window.open(
+                url,
+                'secondary',
+                'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=1200,height=800'
+            );
         }
 
     </script>
diff --git a/atlas/templates/atlas/viewer_local.html b/atlas/templates/atlas/viewer_local.html
index 866c794d..fe0d72aa 100644
--- a/atlas/templates/atlas/viewer_local.html
+++ b/atlas/templates/atlas/viewer_local.html
@@ -1,27 +1,72 @@
-
 {% load static %}
 <!DOCTYPE html>
 <html>
     <head>
         <title>Viewer</title>
         <style type="text/css">
-            body, html
-            {
+            body, html {
                 margin: 0; padding: 0; height: 100%; overflow: hidden;
             }
-
-            #viewer
-            {
+            #viewer {
                 position:absolute; left: 0; right: 0; bottom: 0; top: 0px;
             }
+            /* Modal styles */
+            .center-modal {
+                position: fixed;
+                top: 0; left: 0; right: 0; bottom: 0;
+                width: 100vw; height: 100vh;
+                background: rgba(20,20,30,0.96);
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                z-index: 1000;
+            }
+            .center-modal-content {
+                background: #23232b;
+                color: #eee;
+                padding: 2em 2.5em;
+                border-radius: 12px;
+                box-shadow: 0 4px 32px rgba(0,0,0,0.4);
+                max-width: 90vw;
+                max-height: 80vh;
+                text-align: center;
+                font-size: 1.2em;
+            }
+            .highlight-action {
+                display: inline-block;
+                background: #0d6efd;
+                color: #fff;
+                font-weight: bold;
+                padding: 0.4em 1em;
+                border-radius: 6px;
+                margin: 0.7em 0 1.2em 0;
+                font-size: 1.3em;
+                box-shadow: 0 2px 8px rgba(13,110,253,0.15);
+                letter-spacing: 0.03em;
+            }
+            .center-modal-content ul {
+                color: #bdbdbd;
+            }
+            .center-modal-content h2 {
+                color: #fff;
+            }
         </style>
-        <script src="{% static 'dv3d/index.js' %}" type="module" defer="defer" type="module"></script>
+        <script src="{% static 'dv3d/index.js' %}" type="module" defer="defer"></script>
     </head>
 
     <body>
-        <div id="awating-load">
-            <p>Awating load request</p>
-            This page will display series when loaded from other pages.
+        <!-- Centered modal for instructions -->
+        <div id="awaiting-modal" class="center-modal">
+            <div class="center-modal-content">
+                <span class="highlight-action">Share this screen</span>
+                <h2>Awaiting Load Request</h2>
+                <p>This page will display a DICOM series when loaded from another page.</p>
+                <ul style="text-align:left; margin: 1em auto; max-width: 30em;">
+                    <li>Return to the previous page and select a series to view.</li>
+                    <li>This viewer will update automatically when a series is loaded.</li>
+                    <li>Keep this tab open to receive data.</li>
+                </ul>
+            </div>
         </div>
         <div id="root" class="dicom-viewer-root"
              style="box-sizing: border-box; background: #222; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh;"
@@ -39,7 +84,8 @@
                     console.log("message received");
                     console.log(event);
                     if (event.data.type == "open") {
-                        document.getElementById("awating-load").style.display = "none";
+                        // Hide modal when data is loaded
+                        document.getElementById("awaiting-modal").style.display = "none";
                         document.getElementById("root").dataset.images = event.data.images;
 
                         if (
@@ -68,4 +114,4 @@
         </script>
 
     </body>
-</html>
+</html>
\ No newline at end of file