Merge pull request #101 from man-group/tidy-up-formatting

Widen the results.html display. Fixes #79.
man-group · Jul 18, 2022 · 31213ec · 31213ec
2 parents 322c1c8 + 66ae33a
commit 31213ec
Show file tree

Hide file tree

Showing 5 changed files with 86 additions and 45 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,7 +1,8 @@
-0.4.4 (2022-07-14)
+0.4.4 (2022-07-18)
 ------------------
 
-* Bugfix: The delete button will now work on non-first pages for the scheduler and result listings.
+* Improvement: The results screen has been widened to show as much content as possible (#79).
+* Bugfix: The delete button will now work on non-first pages for the scheduler and result listings (#90).
 * Feature: "View fullscreen" button added to all result pages
 
 0.4.3 (2022-06-24)

diff --git a/notebooker/web/static/notebooker/iframe_loading.js b/notebooker/web/static/notebooker/iframe_loading.js
@@ -1,7 +1,11 @@
 const iframeLoaded = function (iframe) {
-    $('.iframeToLoad').show();
+    let iframeContents = $('#resultsIframe').contents();
+    iframeContents.find('.container').css('width', '97%');
+    iframeContents.find('.code_cell').css('padding', '0px');
     setInterval(() => {
         iframe.style.height = `${iframe.contentWindow.document.body.scrollHeight}px`;
-    }, 1);
+    }, 1000);
+    $('.iframeToLoad').show();
     $('.iframeLoadingDimmer').removeClass('active').addClass('disabled');
+
 };
diff --git a/notebooker/web/static/notebooker/one_click_notebooks.css b/notebooker/web/static/notebooker/one_click_notebooks.css
@@ -69,4 +69,29 @@ td button i {
 #versionTitle {
     width: 3em;
     display: none;
-}
+}
+
+#resultsContainer {
+    width: 100%;
+}
+
+.resultsHomepage {
+    display: flex;
+    width: 100%;
+}
+
+.leftResult {
+    flex: 80;
+}
+
+.rightResult {
+    flex: 20;
+    text-align: right;
+    margin-right: 1em;
+    margin-left: 3px;
+    max-width: 280px;  /* Enough to show full job id */
+}
+
+.resultHeader {
+    margin-left: 1em !important;
+}
diff --git a/notebooker/web/templates/results.html b/notebooker/web/templates/results.html
@@ -5,34 +5,33 @@
 <html>
 <body>
     {{ header.sidebar(all_reports) }}
-    <div class="ui container">
-        <h1>Notebook Results</h1>
-        <h2>{{ result.report_title }}</h2>
-        <div class="ui grid">
-            <div class="thirteen wide column">
-                <div class="ui active inverted dimmer iframeLoadingDimmer">
-                    <div class="ui text loader">Loading</div>
-                </div>
-                <iframe
-                        id="resultsIframe"
-                        src="{{ html_render }}"
-                        style="width:100%; border:none;"
-                        onload="iframeLoaded(this)"
-                        class="iframeToLoad"
-                        scrolling="no">
-                </iframe>
-                <div class="ui modal" style="width: 50%; height: 70%;" id="stdoutModal">
-                  <div class="header">Stdout</div>
-                  <div class="content" style="width: 100%; height: 100%; overflow: scroll">
-                    <code id="stdoutContent"></code>
-                  </div>
-                  <div class="actions">
-                    <div class="ui ok button blue">Copy</div>
-                    <div class="ui cancel button red">Close</div>
-                  </div>
+
+    <!-- Right sidebar  -->
+    <div class="resultsHomepage">
+
+        <div class="ui fluid container leftResult">
+                <h1 class="ui header resultHeader">Results: {{ result.report_title }}</h1>
+                <div class="ui container" id="resultsContainer">
+                    <div class="">
+                        <div class="ui active inverted dimmer iframeLoadingDimmer">
+                            <div class="ui text loader">Loading</div>
+                        </div>
+                        <iframe
+                                id="resultsIframe"
+                                src="{{ html_render }}"
+                                style="width:100%; border:none;"
+                                onload="iframeLoaded(this)"
+                                class="iframeToLoad"
+                                scrolling="no">
+                        </iframe>
+                    </div>
                 </div>
+
+                <br/>
+                <br/>
+                <br/>
             </div>
-            <div class="three wide column">
+            <div class="metadataSidebar rightResult">
                 <button onclick="viewFullscreen('{{ fullscreen_url }}')"
                             type="button" class="ui green button"><i class="expand alternate icon"></i>Fullscreen Results</button>
                 <br/>
@@ -80,9 +79,22 @@ <h4>Parameters:</h4>
                 <br/>
 
             </div>
-        <br/>
-        <br/>
-        <br/>
-    </div>
+
+
+
+
+        <!-- Stdout modal -->
+                <div class="ui modal" style="width: 50%; height: 70%;" id="stdoutModal">
+                  <div class="header">Stdout</div>
+                  <div class="content" style="width: 100%; height: 100%; overflow: scroll">
+                    <code id="stdoutContent"></code>
+                  </div>
+                  <div class="actions">
+                    <div class="ui ok button blue">Copy</div>
+                    <div class="ui cancel button red">Close</div>
+                  </div>
+                </div>
+            </div>
+
 </body>
 </html>
diff --git a/notebooker/web/templates/scheduler.html b/notebooker/web/templates/scheduler.html
@@ -9,18 +9,17 @@
 <body>
 
     {{ header.sidebar(all_reports) }}
-    <div class="ui centered grid" style="display:none" id="schedulerTableContainer">
-        <div class="two wide column">
-            <div class="ui animated blue button" id="showSchedulerButton">
-                <div class="visible content">Add a schedule</div>
-                <div class="hidden content"><i class="plus icon"></i></div>
-            </div>
-        </div>
-        <div class="twelve wide column">
-            <table id="schedulerTable" class="ui sortable selectable padded table">
-            </table>
+    <div class="ui centered grid">
+        <div class="ui animated blue button" id="showSchedulerButton">
+            <div class="visible content">Add a schedule</div>
+            <div class="hidden content"><i class="plus icon"></i></div>
         </div>
     </div>
+    <div class="ui centered grid" style="display:none" id="schedulerTableContainer">
+        <table id="schedulerTable" class="ui sortable selectable padded table">
+        </table>
+    </div>
+    <br/>
     <div class="ui modal" id="schedulerModal">
         <div class="header"><span id="scheduleAction">Add</span> a schedule</div>
         <div class="content">