datasources filter table bug fix

mitre-attack · Feb 28, 2024 · 9d06a18 · 9d06a18
1 parent 675e721
commit 9d06a18
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 16 deletions.
diff --git a/attack-theme/static/style/_layouts.scss b/attack-theme/static/style/_layouts.scss
@@ -204,6 +204,24 @@ a {
     color: color(secondary);
 }
 
+// used for data sources filter dropdown
+.dropdown {
+    position: relative;
+    display: inline-block;
+}
+
+.dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: on-color(secondary);
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+}
+
+.dropdown:hover .dropdown-content {
+    display: block;
+}
+
 // placeholder for base style of all navy colored buttons
 %button-style {
     color: on-color(secondary);

diff --git a/modules/datasources/templates/datasources-index.html b/modules/datasources/templates/datasources-index.html
@@ -39,22 +39,27 @@ <h6 class="table-object-count"></h6>
                                         <i id="arrow-down-1" class="fa-solid fa-fw fa-chevron-down"></i>
                                         <i id="arrow-up-1" class="fa-solid fa-fw fa-chevron-up"></i>
                                     </th>
-                                    <th scope="col">Domain
-                                        <i class="fa-solid fa-sm fa-filter" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i>
-                                        <div id="filterMenu" class="dropdown-menu data-sources-menu" aria-labelledby="domain-options">
-                                            <div class="custom-control custom-switch dropdown-item">
-                                                <input type="checkbox" checked="checked" id="Enterprise" onchange="showDomain()">
-                                                <label for="Enterprise">Enterprise</label>
-                                              </div>
-                                              <div class="custom-control custom-switch dropdown-item">
-                                                <input type="checkbox" checked="checked" id="Mobile" onchange="showDomain()">
-                                                <label for="Mobile">Mobile</label>
-                                              </div>
-                                              <div class="custom-control custom-switch dropdown-item">
-                                                <input type="checkbox" checked="checked" id="ICS" onchange="showDomain()">
-                                                <label for="ICS">ICS</label>
-                                              </div>
-                                  </div>
+                                    <th scope="col">
+                                        <div class="dropdown">
+                                            Domain
+                                            <i class="fa-solid fa-sm fa-filter"></i>
+                                            <div class="dropdown-content">
+                                                <div id="filterMenu" class="data-sources-menu">
+                                                    <div class="custom-control custom-switch">
+                                                        <input type="checkbox" checked="checked" id="Enterprise" onchange="showDomain()">
+                                                        <label for="Enterprise">Enterprise</label>
+                                                    </div>
+                                                    <div class="custom-control custom-switch">
+                                                        <input type="checkbox" checked="checked" id="Mobile" onchange="showDomain()">
+                                                        <label for="Mobile">Mobile</label>
+                                                    </div>
+                                                    <div class="custom-control custom-switch">
+                                                        <input type="checkbox" checked="checked" id="ICS" onchange="showDomain()">
+                                                        <label for="ICS">ICS</label>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
                                     </th>
                                     <th scope="col">Description</th>
                                 </tr>