maketank/Froxlor
2
0
Fork 0
Code Pull Requests Releases Activity

update search

Browse Source
This commit is contained in:
envoyr
2022-04-10 13:41:07 +02:00
parent 64994e6444
commit e9d1f9d68f
4 changed files with 41 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
templates/Froxlor/src/js/components/search.js
View File

@@ -7,7 +7,7 @@ $(document).ready(function () {
search.find('input').on('keyup', function () { search.find('input').on('keyup', function () {
let query = $(this).val(); let query = $(this).val();
let dropdown = $('#search-dropdown'); let dropdown = $('#search .search-results');
// Hide search if query is empty // Hide search if query is empty
if (!query.length) { if (!query.length) {
dropdown.hide().html(''); dropdown.hide().html('');

32
templates/Froxlor/src/scss/components/_search.scss Normal file
View File

@@ -0,0 +1,32 @@
#search {
display: flex;
position: relative;
i {
margin-right: .5rem;
}
.search-input {
outline: none;
border: none;
}
.search-results-box {
position: absolute;
top: 2.75rem;
z-index: 50;
width: 70vh;
max-height: 50vh;
background: #fff;
border: $border-color solid 1px;
border-radius: 0 0 $border-radius $border-radius;
.search-results {
width: 70vh; /** same as .search-results-box **/
max-height: calc(50vh - 2px); /** same as .search-results-box - border (top/bottom) **/
overflow: auto;
border-radius: $border-radius;
}
}
}

1
templates/Froxlor/src/scss/main.scss
View File

@@ -12,3 +12,4 @@
@import "components/form"; @import "components/form";
@import "components/navbar"; @import "components/navbar";
@import "components/sidebar"; @import "components/sidebar";
@import "components/search";

11
templates/Froxlor/userarea.html.twig
View File

@@ -31,11 +31,14 @@
</button> </button>
</div> </div>
<div class="collapse navbar-collapse px-3 px-lg-5" id="navbar"> <div class="collapse navbar-collapse px-3 px-lg-5" id="navbar">
<form id="search" class="d-flex position-relative" method="post"> <form id="search" method="post">
<div class="input-group"> <div class="d-flex align-items-center">
<input title="search" type="search" class="form-control-plaintext" placeholder="Search for ..." style="outline: none"> <i class="fa fa-search text-muted"></i>
<input title="search" type="search" class="search-input" placeholder="Search for ...">
</div>
<div class="search-results-box">
<div class="search-results list-group-flush" style="display: none"></div>
</div> </div>
<ul id="search-dropdown" class="bg-white border list-group list-group-flush position-absolute" style="top: 2.5rem; display:none; z-index: 50; max-height: 300px; overflow-y: scroll"></ul>
</form> </form>
<ul class="navbar-nav ms-auto"> <ul class="navbar-nav ms-auto">
{% if call_static('\\Froxlor\\CurrentUser', 'getField', ['switched_user']) is not empty and call_static('\\Froxlor\\CurrentUser', 'getField', ['switched_user']) is iterable %} {% if call_static('\\Froxlor\\CurrentUser', 'getField', ['switched_user']) is not empty and call_static('\\Froxlor\\CurrentUser', 'getField', ['switched_user']) is iterable %}