Update nifti_viewer.html

CohanR · Dec 6, 2024 · 8a24178 · 8a24178
1 parent 398a327
commit 8a24178
Showing 1 changed file with 43 additions and 22 deletions.
diff --git a/nifti_viewer.html b/nifti_viewer.html
@@ -12,41 +12,39 @@
             margin: 0;
             padding: 0;
             background-color: #f4f4f4;
-            height: 100%;
-            overflow: hidden; /* Disable scrollbars */
+            height: 100vh;
             display: flex;
-            flex-direction: column;
+            flex-direction: row;
+            overflow: hidden;
         }
-
         .sidebar {
-            width: 100%;
+            width: 20%;
             padding: 2vh;
             background: #ffffff;
             box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+            margin: 1vh;
+            margin-top: 3.5vh;
             overflow-y: auto;
         }
-
         .content {
-            flex: 1; /* Fill remaining height */
+            width: 75%;
             display: flex;
             flex-direction: column;
             align-items: center;
         }
-
         #papayaContainer {
             width: 100%;
-            flex: 1; /* Let container take up remaining space */
+            height: 60vh;
             box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+            margin: 1vh 0;
         }
-
         .info {
             width: 100%;
             text-align: center;
             background: #ffffff;
             box-shadow: 0 4px 8px rgba(0,0,0,0.1);
             padding: 1vh;
         }
-
         .home-button {
             position: absolute;
             top: 10px;
@@ -58,24 +56,40 @@
             text-decoration: none;
             z-index: 10;
         }
-
         @media (max-width: 768px) {
+            body, html {
+                flex-direction: column;
+                overflow: hidden;
+                height: 100vh;
+            }
             .sidebar {
                 display: none;
             }
-
             .content {
                 width: 100%;
+                height: 100vh;
+                padding: 0;
             }
-
             #papayaContainer {
                 width: 100vw;
+                height: 100vh;
+                margin: 0;
+                box-shadow: none;
             }
-
             .info {
                 display: none;
             }
         }
+        @media (max-width: 480px) {
+            body, html {
+                height: 100vh;
+            }
+            #papayaContainer {
+                width: 100vw;
+                height: calc(100vh - constant(safe-area-inset-bottom)); /* Legacy safe-area handling */
+                height: calc(100vh - env(safe-area-inset-bottom)); /* Modern browsers */
+            }
+        }
     </style>
 </head>
 <body>
@@ -90,6 +104,7 @@ <h3>Instructions</h3>
         </ol>
         <p>You should see a black screen. You can now drag and drop the MRI file that ends with <code>.nii.gz (or DICOM files/folder)</code> onto the black window, or you can click on <strong>File</strong> and then <strong>Add Image</strong>.</p>
         <p>Make sure to use <strong>Close ALL</strong> if you wish to see a different image. Otherwise, the previous image remains there and the new image you add overlays on top. Please note that your images/data will never be saved on this website.</p>
+        <p>If your images are normalised to MNI space, the MNI template overlay will automatically add region labels to your image. If you have fMRI correlation maps, t-maps, DTI images you can also add the anatomical image first and add the second image as an overlay to visualise the results. </p>
     </div>
     <div class="content">
         <div id="papayaContainer" data-params="params"></div>
@@ -103,17 +118,23 @@ <h3>Instructions</h3>
             "showControls": true
         };
 
-        function adjustHeight() {
-            const container = document.getElementById('papayaContainer');
-            container.style.height = `${window.innerHeight}px`; // Use viewport height
-        }
-
         window.onload = function() {
             papaya.Container.resetViewer(0, params);
-            adjustHeight(); // Adjust on load
+            document.getElementById('papayaContainer').addEventListener('mouseenter', function() {
+                document.body.style.overflow = 'hidden';
+            });
+            document.getElementById('papayaContainer').addEventListener('mouseleave', function() {
+                document.body.style.overflow = 'hidden';
+            });
         };
 
-        window.addEventListener('resize', adjustHeight); // Adjust on resize
+        function adjustPapayaHeight() {
+            const container = document.getElementById('papayaContainer');
+            container.style.height = `${window.innerHeight}px`;
+        }
+
+        window.addEventListener('load', adjustPapayaHeight);
+        window.addEventListener('resize', adjustPapayaHeight);
     </script>
 </body>
 </html>