From ff3c805c50d2d8b96936dfa2e7349383c9773b21 Mon Sep 17 00:00:00 2001
From: Nicole Finks <nicole.finks@utsouthwestern.edu>
Date: Wed, 17 Jul 2019 10:46:48 -0500
Subject: [PATCH] [add css and js for dropdown filter menu]
---
layouts/custom/repository.html | 22 ++++++++++++++++++++--
static/css/sidenavRepository.css | 30 +++++++++++++++++++++++-------
static/js/repositoryJS.js | 15 +++++++++++++++
3 files changed, 58 insertions(+), 9 deletions(-)
create mode 100644 static/js/repositoryJS.js
diff --git a/layouts/custom/repository.html b/layouts/custom/repository.html
index 18c3dec..9570500 100644
--- a/layouts/custom/repository.html
+++ b/layouts/custom/repository.html
@@ -11,9 +11,24 @@
<!-- Sidebar for Filters -->
<div class= "sidenav">
+ <button class="dropdown-btn">
+ Gender
+ <i class="fa fa-caret-down"></i>
+ </button>
+
+ <div id="gender">
+ <input type="checkbox" name="genderF" value="female"> Female</input><br>
+ <input type="checkbox" name="genderM" value="male"> Male</input><br>
+ <input type="checkbox" name="genderTF" value="transFem"> Transgender Female</input><br>
+ <input type="checkbox" name="genderTM" value="transMale"> Transgender Male</input><br>
+ <input type="checkbox" name="genderFl" value="fluid"> Gender Fluid</input><br>
+ <input type="checkbox" name="other" value="other"> Other </input>
+</div>
+ <button class="dropdown-btn">
+ Age
+ <i class="fa fa-caret-down"></i>
+ </button>
- <a href="#">Example</a>
-
</div>
@@ -39,9 +54,12 @@
<head>
<link rel="stylesheet" type="text/css" href="/css/sidenavRepository.css"/>
+ <script src="/js/repositoryJS.js"></script>
</head>
+<body>
+</body>
{{ partial "footer.html" . }}
diff --git a/static/css/sidenavRepository.css b/static/css/sidenavRepository.css
index 0929ca0..cd72e8e 100644
--- a/static/css/sidenavRepository.css
+++ b/static/css/sidenavRepository.css
@@ -1,6 +1,6 @@
/* the sidebar menu */
.sidenav {
- width: 130px;
+ width: 20% ;
position: fixed/* stay in place on scroll */
/* z-index:1; /* stay on top*/
top : 0; /* stay on top*/
@@ -8,21 +8,35 @@
background: #eee;
padding-top: 20px;
+ padding-right:20px;
}
/* Sidenav filters */
-.sidenav a {
- padding: 6px 8px 6px 16px;
+.sidenav a, .dropdown-btn, #gender {
+ padding: 6px 15px 6px 6px;
text-decoration: none;
- font-size: 25px;
+ font-size: 15px;
color: #818181;
display: block;
+ border: none;
+ background: none;
+ width:100%;
+ text-align: left;
+ cursor: pointer;
+ outline: none;
}
-/* when you hover over filters, change colors */
-.sidenav a:hover{
- color: #f1f1f1;
+/* On mouse-over */
+.sidenav a:hover, .dropdown-btn:hover {
+ color: #FFF;
+}
+
+
+/* Add an active class to the active dropdown button */
+.active {
+ background-color: green;
+ color: white;
}
/*change style of sidebar on smaller screens */
@@ -30,3 +44,5 @@
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
+
+
diff --git a/static/js/repositoryJS.js b/static/js/repositoryJS.js
new file mode 100644
index 0000000..7c2c71b
--- /dev/null
+++ b/static/js/repositoryJS.js
@@ -0,0 +1,15 @@
+//* Loop through all dropdown buttons to toggle between hiding and showing its dropdown content - This allows the user to have multiple dropdowns without any conflict */
+var dropdown = document.getElementsByClassName("dropdown-btn");
+var i;
+
+for (i = 0; i < dropdown.length; i++) {
+ dropdown[i].addEventListener("click", function() {
+ this.classList.toggle("active");
+ var dropdownContent = this.nextElementSibling;
+ if (dropdownContent.style.display === "block") {
+ dropdownContent.style.display = "none";
+ } else {
+ dropdownContent.style.display = "block";
+ }
+ });
+ }
--
GitLab