From 8a2fac0a228e7777a8850b7a7718ff60652dd344 Mon Sep 17 00:00:00 2001
From: Joshua Orvis <jorvis@gmail.com>
Date: Tue, 26 Dec 2023 21:31:43 -0600
Subject: [PATCH] Removed bulma-divider dependency, tightened up the form
 elements myself.

---
 www/css/common.v2.css |  1 +
 www/index.html        | 23 +++++++++++++++--------
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/www/css/common.v2.css b/www/css/common.v2.css
index 207840a8..7f33a296 100644
--- a/www/css/common.v2.css
+++ b/www/css/common.v2.css
@@ -24,6 +24,7 @@ html, body {
     margin-top: 0 !important;
 }
 
+
 /* ---------------- */
 /* -= Typography =- */
 
diff --git a/www/index.html b/www/index.html
index 3d59bc07..3b63d57e 100644
--- a/www/index.html
+++ b/www/index.html
@@ -25,8 +25,7 @@
         <script>document.write('<link rel="stylesheet" href="css/common.v2.' + (new Date()).getTime() + '.css" />');</script>
 
         <!-- Any other extension here -->
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@creativebulma/bulma-divider@1.1.0/dist/bulma-divider.min.css" />
-       
+        
         <!--Page-specific CSS here -->
         <script>document.write('<link rel="stylesheet" href="css/index.' + (new Date()).getTime() + '.css" />');</script>
     </head>
@@ -149,22 +148,30 @@ <h3 class="mt-6 mb-3">
                   <ul>
                       <li class="is-active">
                         <!-- has-addons connects, is-grouped makes together inline-->
-                        <div class="field is-grouped mr-0 pr-0">
-
-                          <div class="control has-icons-left has-icons-right">
+                        <div class="field has-addons is-grouped">
+                          <div class="control has-icons-left has-icons-right mr-0">
                             <input class="input" type="input" placeholder="Type here to search using specific gene symbols">
                             <span class="icon is-small is-left">
                               <i class="mdi mdi-magnify"></i>
                             </span>
                           </div>
-                          <div class="divider is-vertical">OR</div>
-                          <div class="control select">
+                          <!-- div with the text 'OR' centered vertically. this is awkward -->
+                          <div class="columns">
+                            <div class="column is-1">
+                              <div class="is-vertical is-size-7 ml-2 mr-2">OR</div>
+                            </div>
+                          </div>
+                          <div class="control select mr-0">
                             <select>
                               <option>Quick search using Gene Lists</option>
                               <option>With options</option>
                             </select>
                           </div>
-                          <div class="divider is-vertical">IN</div>
+                          <div class="columns">
+                            <div class="column is-1">
+                              <div class="is-vertical is-size-7 ml-2 mr-2">IN</div>
+                            </div>
+                          </div>
                           <div class="control select">
                             <select>
                               <option>Hearing</option>