glax/tranga-website
1
0
Fork 0
mirror of https://github.com/C9Glax/tranga-website.git synced 2025-06-12 06:47:53 +02:00
Code Issues Packages Projects Releases Wiki Activity

Filter functionality

Browse Source 
Removed textbox in top bar and added filter icon that opens up a box where you can search or select a connector/status and combination to filter by. Appearance and behavior needs to be refined.
This commit is contained in:
db-2001
2024-02-06 22:23:19 -05:00
parent 1ba49ddf08
commit 148af6abaa
4 changed files with 337 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
Website/index.html
View File

@ -9,17 +9,44 @@
</head>
<body>
<wrapper>
<topbar>
<titlebox>
<img alt="website image is Blahaj" src="media/blahaj.png">
<span>Tranga</span>
</titlebox>
<spacer></spacer>
<searchdiv>
<label for="searchbox"></label><input id="searchbox" placeholder="Filter" type="text">
</searchdiv>
<img id="filterFunnel" src="media/filter-funnel.svg" height="50%" alt="filterFunnel">
<img id="settingscog" src="media/settings-cogwheel.svg" height="100%" alt="settingscog">
</topbar>
<filter-box id="filterBox">
<border-bar>
<popup-title>Filter by: </popup-title>
<popup-close onclick="filterBox.classList.toggle('animate')" >&times</popup-close>
</border-bar>
<popup-content>
<div class="popup-section">
NAME:
<div class="section-content">
<label for="searchbox"></label><input id="searchbox" placeholder="Title" type="text">
</div>
</div>
<div class = "popup-section">
CONNECTOR:
<div class="section-content" id="connectorFilterBox">
</div>
</div>
<div class = "popup-section">
STATUS:
<div class="section-content" id="statusFilterBox">
</div>
</div>
</popup-content>
<border-bar-button onclick="ClearFilter()" class="clearFilter">Clear Filter</border-bar-button>
</filter-box>
<viewport>
<div id="loaderdiv">
<blur-background></blur-background>
@ -54,8 +81,7 @@
</popup>
<popup id="settingsPopup">
<blur-background id="blurBackgroundSettingsPopup" onclick="
settingsPopup.style.display = 'none';"></blur-background>
<blur-background id="blurBackgroundSettingsPopup" onclick="settingsPopup.style.display = 'none';"></blur-background>
<popup-window>
<border-bar>
<popup-title>Settings</popup-title>