view_image looks good. view_exposure needs num detector dependent width

bhilbert4 · May 30, 2024 · 81571d5 · 81571d5
1 parent 33d84c2
commit 81571d5
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 7 deletions.
diff --git a/jwql/website/apps/jwql/static/css/jwql.css b/jwql/website/apps/jwql/static/css/jwql.css
@@ -365,6 +365,11 @@
       display: inline-block;
   }
 
+  .image_views {
+      margin-left: 2%;
+      margin-right: 2%;
+  }
+
   #loading {
     text-align:center;
     margin: 0 auto;

diff --git a/jwql/website/apps/jwql/templates/view_exposure.html b/jwql/website/apps/jwql/templates/view_exposure.html
@@ -8,7 +8,7 @@
 
 {% block content %}
 
-    <main role="main" class="container">
+    <main role="main" class="image_views">
     	<!-- Show exposure group name -->
     	<h3>Exposure {{ group_root }}</h3>
 
@@ -119,7 +119,7 @@ <h3>Exposure {{ group_root }}</h3>
                             <a href="{{ base_url }}/{{ inst }}/{{ group_root }}_{{ detector1 }}/">
                                 <img class="image_preview_viewer" id="image_viewer_{{ detector1 }}"
                                      title="Preview image for {{ group_root }}, detector {{ detector1 }}"
-                                     data-detector="{{ detector1 }}" style="width:100%">
+                                     data-detector="{{ detector1 }}" style="width:125%">
                             </a>
                         </span>
                     </div>
@@ -145,7 +145,7 @@ <h3>Exposure {{ group_root }}</h3>
                             <a href="{{ base_url }}/{{ inst }}/{{ group_root }}_{{ detector2 }}/">
                                 <img class="image_preview_viewer" id="image_viewer_{{ detector2 }}"
                                      title="Preview image for {{ group_root }}, detector {{ detector2 }}"
-                                     data-detector="{{ detector2 }}" style="width:100%">
+                                     data-detector="{{ detector2 }}" style="width:125%">
                             </a>
                         </span>
                     </div>
@@ -171,7 +171,7 @@ <h3>Exposure {{ group_root }}</h3>
                             <a href="{{ base_url }}/{{ inst }}/{{ group_root }}_{{ detector3 }}/">
                                 <img class="image_preview_viewer" id="image_viewer_{{ detector3 }}"
                                      title="Preview image for {{ group_root }}, detector {{ detector3 }}"
-                                     data-detector="{{ detector3 }}" style="width:100%">
+                                     data-detector="{{ detector3 }}" style="width:125%">
                             </a>
                         </span>
                     </div>
@@ -197,7 +197,7 @@ <h3>Exposure {{ group_root }}</h3>
                             <a href="{{ base_url }}/{{ inst }}/{{ group_root }}_{{ detector }}/">
                                 <img class="image_preview_viewer" id="image_viewer_{{ detector }}"
                                      title="Preview image for {{ group_root }}, detector {{ detector }}"
-                                     data-detector="{{ detector }}" style="width:100%">
+                                     data-detector="{{ detector }}" style="width:125%">
                             </a>
                         </span>
                     </div>

diff --git a/jwql/website/apps/jwql/templates/view_image.html b/jwql/website/apps/jwql/templates/view_image.html
@@ -8,7 +8,7 @@
 
 {% block content %}
 
-    <main role="main" class="container">
+    <main role="main" class="image_views">
     	<!-- Show image group name -->
     	<h3>{{ file_root }}</h3>
 
@@ -85,7 +85,7 @@ <h3>{{ file_root }}</h3>
     		    <span class="image_preview">
     		    	<img class="image_preview_viewer" id="image_viewer"
                          onerror="image_error(this, true);"
-                         title="Preview image for {{ file_root }}">
+                         title="Preview image for {{ file_root }}" width=1000rem height=auto>
     		    </span>
 
                 <div class="int_changer">