Drop splitpanes component; this is more clear and usable automaticall…

…y flex'd
dannon · Oct 17, 2023 · 0ce9ac0 · 0ce9ac0
1 parent 349a78d
commit 0ce9ac0
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 22 deletions.
diff --git a/client/package.json b/client/package.json
@@ -88,7 +88,6 @@
     "rxjs-spy-devtools-plugin": "^0.0.4",
     "slugify": "^1.6.6",
     "snake-case": "^3.0.4",
-    "splitpanes": "2.3.8",
     "stream-browserify": "^3.0.0",
     "timers-browserify": "^2.0.12",
     "toastr": "^2.1.4",

diff --git a/client/src/components/Collections/PairedListCollectionCreator.vue b/client/src/components/Collections/PairedListCollectionCreator.vue
@@ -324,8 +324,8 @@
                                 </div>
                             </div>
                         </div>
-                        <Splitpanes horizontal style="height: 400px">
-                            <Pane>
+                        <div class="pairing-split-parent">
+                            <div class="pairing-split-child">
                                 <div v-if="noUnpairedElementsDisplayed">
                                     <b-alert show variant="warning">
                                         {{ l("No datasets were found matching the current filters.") }}
@@ -372,8 +372,8 @@
                                         </ol>
                                     </div>
                                 </div>
-                            </Pane>
-                            <Pane>
+                            </div>
+                            <div class="pairing-split-child">
                                 <div class="column-header">
                                     <div class="column-title paired-column-title">
                                         <span class="title"> {{ numOfPairs }} {{ l(" pairs") }}</span>
@@ -398,20 +398,17 @@
                                         </draggable>
                                     </ol>
                                 </div>
-                            </Pane>
-                        </Splitpanes>
+                            </div>
+                        </div>
                     </template>
                 </collection-creator>
             </div>
         </div>
     </div>
 </template>
 <script>
-import "splitpanes/dist/splitpanes.css";
-
 import BootstrapVue from "bootstrap-vue";
 import STATES from "mvc/dataset/states";
-import { Pane, Splitpanes } from "splitpanes";
 import levenshteinDistance from "utils/levenshtein";
 import _l from "utils/localization";
 import naturalSort from "utils/natural-sort";
@@ -427,8 +424,6 @@ export default {
     components: {
         UnpairedDatasetElementView,
         PairedElementView,
-        Splitpanes,
-        Pane,
         draggable,
     },
     mixins: [mixin],
@@ -1192,11 +1187,15 @@ li.dataset.paired {
         text-align: center;
     }
 }
-.splitpanes--horizontal > .splitpanes__splitter {
-    min-height: 6px;
-    background: linear-gradient(0deg, #ccc, #111);
+.pairing-split-parent {
+    display: flex;
+    flex-direction: column; /* stacks children vertically */
+    min-height: 400px;
 }
-.splitpanes__pane {
-    overflow: scroll;
+
+.pairing-split-child {
+    flex: 1; /* makes each child take up 50% of the parent's height */
+    overflow-y: auto; /* makes the child scrollable if content exceeds its height */
+    border: 1px solid black; /* Optional: just to visualize the boxes */
 }
 </style>
diff --git a/client/yarn.lock b/client/yarn.lock
@@ -10693,11 +10693,6 @@ split-string@^3.0.1, split-string@^3.0.2:
   dependencies:
     extend-shallow "^3.0.0"
 
-[email protected]:
-  version "2.3.8"
-  resolved "https://registry.npmjs.org/splitpanes/-/splitpanes-2.3.8.tgz"
-  integrity sha512-eM/qZ1v7U5BMV8FQR7oeqVlllz3sTGTm0//g/eJMa0hZ4s+A1VK68j26FWzcaVlw2P5+dCXk7/X6ZRjjwcbrgw==
-
 sprintf-js@~1.0.2:
   version "1.0.3"
   resolved "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz"