Mirrors/headscale-webui
1
0
Fork 1
mirror of https://github.com/iFargle/headscale-webui.git synced 2026-03-17 19:32:31 +01:00
Code Issues Packages Projects Releases Wiki Activity

testing a different method

Browse Source
This commit is contained in:
iFargle
2023-03-21 20:23:53 +09:00
parent e4cc6356e8
commit e5b309a9fe
3 changed files with 22 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
renderer.py
View File

@@ -583,20 +583,8 @@ def oidc_nav_mobile(user_name, email_address, name):
def render_search():
html_payload = """
<li class="hide-on-medium-and-down">
<a href="#">
<form id="navbarsearch">
<div class="navfix">
<div id="navfix2">
<div class="input-field">
<input id="search" type="search" required>
<label class="label-icon" for="search"><i class="material-icons">search</i></label>
<i class="material-icons">close</i>
</div>
</div>
</div>
</form>
</a>
</li>
<li role="menu-item" class="tooltipped" data-position="bottom" data-tooltip="Search" onclick="show_search()">
<a href="#"><i class="material-icons">search</i></a>
</li>
"""
return Markup(html_payload)

12
static/js/custom.js
View File

@@ -7,7 +7,6 @@ $(document).ready(function() {
$("#search").addClass('searchbarfix');
//animate searchbar width increase to +150%
$('#search').click(function(e) {
//handle other nav elements visibility here to avoid push down
$('.search-hide').addClass('hide');
if (trig == 1){
$('#navfix2').animate({
@@ -29,7 +28,16 @@ $(document).ready(function() {
$('.search-hide').removeClass('hide');
});
});
function show_search() {
$('.').removeClass('hide');
}
function hide_search() {
$('.').addClass('hide');
}
//-----------------------------------------------------------
// General Helpers
//-----------------------------------------------------------

9
templates/template.html
View File

@@ -55,6 +55,15 @@
<body>
<nav>
<div class="nav-wrapper {{ COLOR_NAV }}">
<div id="nav-search hide">
<form>
<div class="input-field">
<input id="search" type="search" required>
<label class="label-icon" for="search"><i class="material-icons">search</i></label>
<i class="material-icons" onclick="hide_search()">close</i>
</div>
</form>
</div>
<img class="hide-on-med-and-down" style="padding-left: 10px" src="static/img/headscale3-dots.png" height="64px"></img>
<a href="overview" class="brand-logo bold" style="padding-left: 10px">
Headscale