Adjustable width between source and record panes.

FamilySearch · Jul 18, 2024 · b99b67b · b99b67b
1 parent 44c440c
commit b99b67b
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 6 deletions.
diff --git a/gx-view.css b/gx-view.css
@@ -91,4 +91,24 @@ pre {
     font-size: 20px;
     font-weight: normal;
     text-decoration: none;
-}
+}
+
+#source-pane {
+    overflow: auto;
+    resize: horizontal;
+}
+#source-record-container {
+    /* make the two divs inside of this div be side-by-side. */
+    display: flex;
+    flex-wrap: nowrap;
+}
+#source-pane {
+    overflow: auto;
+    resize: horizontal;
+    width: 33%;
+    min-width: 100px;
+}
+#record-pane {
+    flex-grow: 1;
+    min-width: 100px;
+}
diff --git a/index.html b/index.html
@@ -3044,7 +3044,6 @@
       $("#new-person-fact-type").on("change", changeFactType);
       $("#edit-person-fact-type").on("change", handleEditFactTypeChange);
 
-
       $(document).keydown(handleEditorKeydown);
 
       dragElement(document.getElementById("new-person"));
@@ -3229,8 +3228,8 @@
             </div>
           </div>
         </div>
-        <div class="row">
-          <div class="col-4">
+        <div class="row" id="source-record-container">
+          <div id="source-pane">
             <div id="source-viewer" class="sticky-top" style="max-height: 100vh; overflow: scroll">
               <div class="pt-4">&nbsp;</div>
               <div id="source-file" class="pt-4"></div>
@@ -3239,7 +3238,7 @@
               <div id="sft-summary"></div>
             </div>
           </div>
-          <div class="col-8 pt-4">
+          <div  id="record-pane">
             <div id="rec-list"></div>
             <div id="rel-chart"></div>
             <div id="record"></div>
@@ -4104,6 +4103,5 @@ <h5 class="modal-title" id="edit-record-metadata-label">Update Record Metadata</
     </div>
   </div>
 </div>
-
 </body>
 </html>