hacky gene collection dropdown resizing and removed class that had no…

… CSS associated
IGS · Jan 9, 2024 · 0c4549f · 0c4549f
1 parent 8160f0a
commit 0c4549f
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 15 deletions.
diff --git a/www/css/index.css b/www/css/index.css
@@ -1,7 +1,23 @@
-div.dropdown-item {
-    /* TODO: Make the width not extend past the screen width */
+div.dropdown-menu {
     width: 60vw;
 }
+@media (min-width: 1320px) {
+    div.dropdown-menu {
+        width: 55vw;
+    }
+}
+
+@media (min-width: 1440px) {
+    div.dropdown-menu {
+        width: 50vw;
+    }
+}
+
+@media (min-width: 1580px) {
+    div.dropdown-menu {
+        width: 45vw;
+    }
+}
 div.dropdown-item h3 {
     font-weight: bold;
     font-size: 120%;

diff --git a/www/index.html b/www/index.html
@@ -25,7 +25,7 @@
         <script>document.write('<link rel="stylesheet" href="css/common.v2.' + (new Date()).getTime() + '.css" />');</script>
 
         <!-- Any other extension here -->
-        
+
         <!--Page-specific CSS here -->
         <script>document.write('<link rel="stylesheet" href="css/index.' + (new Date()).getTime() + '.css" />');</script>
     </head>
@@ -35,7 +35,7 @@
         <!--#include virtual="/include/primary_nav.html" -->
 
         <section id="main_c" class="column pl-0 pt-0">
-          
+
           <!--#include virtual="/include/header_bar.html" -->
 
           <section id="content_c" class="m-3">
@@ -51,7 +51,7 @@ <h3 class="mt-4 mb-4">
             </h3>
             <div id="guides_c" class="columns">
               <div class="column">
-                <div class="guide_element pr-3"> 
+                <div class="guide_element pr-3">
                   <div><!-- without the 2nd level div here the images disappears-->
                     <div class="media">
                       <div class="media-left">
@@ -70,7 +70,7 @@ <h3 class="mt-4 mb-4">
                 </div>
               </div>
               <div class="column">
-                <div class="guide_element pr-3"> 
+                <div class="guide_element pr-3">
                   <div><!-- without the 2nd level div here the images disappears-->
                     <div class="media">
                       <div class="media-left">
@@ -89,7 +89,7 @@ <h3 class="mt-4 mb-4">
                 </div>
               </div>
               <div class="column">
-                <div class="guide_element pr-3"> 
+                <div class="guide_element pr-3">
                   <div><!-- without the 2nd level div here the images disappears-->
                     <div class="media">
                       <div class="media-left">
@@ -108,7 +108,7 @@ <h3 class="mt-4 mb-4">
                 </div>
               </div>
               <div class="column">
-                <div class="guide_element pr-3"> 
+                <div class="guide_element pr-3">
                   <div><!-- without the 2nd level div here the images disappears-->
                     <div class="media">
                       <div class="media-left">
@@ -172,7 +172,7 @@ <h3 class="mt-6 mb-3">
                               </button>
                             </div>
                             <div class="dropdown-menu" role="menu">
-                              <div class="dropdown-content is-full-width">
+                              <div class="dropdown-content">
                                 <div class="dropdown-item">
                                   <div class="field">
                                     <p class="control has-icons-left">
@@ -196,15 +196,15 @@ <h3>Saved Items</h3>
                                         <div class="ul-li is-clickable" data-category="recent">
                                           Recent
                                           <span class="icon is-pulled-right"><i class="mdi mdi-18px mdi-chevron-right"></i></span>
-                                        </div> 
+                                        </div>
                                         <div class="ul-li is-clickable" data-category="saved">
                                           Saved gene lists
                                           <span class="icon is-pulled-right"><i class="mdi mdi-18px mdi-chevron-right"></i></span>
-                                        </div> 
+                                        </div>
                                         <div class="ul-li is-clickable" data-category="shared">
                                           Shared gene lists
                                           <span class="icon is-pulled-right"><i class="mdi mdi-18px mdi-chevron-right"></i></span>
-                                        </div> 
+                                        </div>
                                       </div>
                                     </div>
                                     <div class="column is-one-third is-scrollable">
@@ -234,7 +234,7 @@ <h3>Genes</h3>
                                         <span class="gene-item-label"></span>
                                       </div>
                                     </template>
-                                  </div> 
+                                  </div>
                                 </div>
                                 <div class="dropdown-item">
                                   <div class="columns">
@@ -245,7 +245,7 @@ <h3>Genes</h3>
                                       <button class="button is-primary is-rounded is-small mb-1">Proceed</button><br />
                                       <button id="dropdown-gene-list-cancel" class="button is-secondary is-rounded is-small">Reset</button>
                                     </div>
-                                  </div>  
+                                  </div>
                                 </div>
                               </div>
                             </div>
@@ -276,7 +276,7 @@ <h3>Genes</h3>
                               <input type="checkbox">
                               Exact
                             </label>
-                          </div>  
+                          </div>
                           <div class="control">
                             <label class="radio">
                               <input type="radio" name="answer">