17th-Ranger-Battalion-ORG/17th_Site_Front_End
6
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

added some sorting options to the filters menu, as well as an exit button for the menu. Still not really functional lol

Browse Source
This commit is contained in:
Ajdj100
2023-03-29 09:44:08 -04:00
parent 7f4b0bb78f
commit 83fd1d74ce
2 changed files with 46 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
Users Page/page.html
View File

@@ -44,25 +44,43 @@
</ul> </ul>
</nav> --> </nav> -->
<button onclick="showFilters()">Filter</button> <button id="filterButton" onclick="showFilters()">Filter</button>
<div id="filter-box" style="display:none;"> <div id="filter-box" style="display:none;">
<nav class="subnav"> <div>
<ul class="subnav-links"> <h2 class="subnav-Header">Filters</h2>
<li><a href="#" class="active">All</a></li> <nav class="subnav">
<li><a href="#">Alpha</a></li> <ul class="subnav-links">
<li><a href="#">Echo</a></li> <li><a href="#" class="active">All</a></li>
<li><a href="#">NCO</a></li> <li><a href="#">Alpha</a></li>
<li><a href="#">RRC</a></li> <li><a href="#">Echo</a></li>
<li><a href="#">HHC</a></li> <li><a href="#">NCO</a></li>
<li><a href="#">Recruit</a></li> <li><a href="#">RRC</a></li>
</ul> <li><a href="#">HHC</a></li>
</nav> <li><a href="#">Recruit</a></li>
<li><a href="#">Discharged</a></li>
</ul>
</nav>
</div>
<div>
<h2 class="subnav-Header">Sort</h2>
<nav class="subnav">
<ul class="subnav-links">
<li><a href="#" class="active">None</a></li>
<li><a href="#">Name</a></li>
<li><a href="#">Rank</a></li>
<li><a href="#">Join Date</a></li>
<li><a href="#">LOA Until</a></li>
<li><a href="#">Last Active</a></li>
</ul>
</nav>
</div>
<button onclick="showFilters()" style="height: fit-content;">X</button>
</div> </div>
<script> function showFilters() { <script> function showFilters() {
var filterBox = document.getElementById("filter-box"); var filterBox = document.getElementById("filter-box");
if (filterBox.style.display === "none") { if (filterBox.style.display === "none") {
filterBox.style.display = "block"; filterBox.style.display = "flex";
} else { } else {
filterBox.style.display = "none"; filterBox.style.display = "none";
} }

16
Users Page/styles.css
View File

@@ -116,12 +116,20 @@ th {
.subnav { .subnav {
background-color: transparent; background-color: transparent;
height: 40px; height: fit-content;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.subnav-Header {
color: #333333;
font-size: 20px;
font-weight: bold;
display: flex;
justify-content: center;
}
.subnav-links { .subnav-links {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -170,8 +178,10 @@ th {
#filter-box { #filter-box {
display: flex; display: flex;
flex-direction: row;
position: absolute; position: absolute;
top: 185px; top: 185px;
height: auto;
left: auto; left: auto;
right: 0; right: 0;
padding: 10px; padding: 10px;
@@ -179,4 +189,8 @@ th {
border: 1px solid #ccc; border: 1px solid #ccc;
box-shadow: 0 2px 6px rgba(0,0,0,0.3); box-shadow: 0 2px 6px rgba(0,0,0,0.3);
z-index: 1; z-index: 1;
}
#filterButton {
margin-right: 25px;
} }