clones/Froxlor
1
0
Fork 0
mirror of https://github.com/Froxlor/Froxlor.git synced 2024-09-21 10:27:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

adjust searchbar-size for better ux, fixes #1197

Browse Source 
Signed-off-by: Michael Kaufmann <d00p@froxlor.org>
This commit is contained in:
Michael Kaufmann 2023-11-11 14:53:18 +01:00
parent ace1651ceb
commit 7717a82d5c
No known key found for this signature in database
GPG Key ID: C121F97338D7A352
2 changed files with 6 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
templates/Froxlor/assets/scss/components/_search.scss
View File

@ -17,7 +17,8 @@
position: absolute;
top: 2.75rem;
z-index: 50;
width: 70vh;
width: 90vw;
max-width: 750px;
max-height: 50vh;
background: $search-bg;

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

@ -27,7 +27,7 @@
<a class="navbar-brand me-0 {% if block('heading') %}shadow-sm{% endif %}" href="{{ linker({'section': 'index'}) }}">
<img src="{{ header_logo }}" alt="logo" class="header-logo d-inline-block align-text-top ms-md-3">
</a>
<div class="order-0 order-md-1 d-flex flex-grow-0 flex-md-grow-1" id="navbar">
<div class="order-0 order-md-1 d-flex flex-grow-0 flex-md-grow-auto" id="navbar">
<ul class="navbar-nav ms-md-auto me-3 me-lg-5">
<a class="nav-link d-md-none" data-bs-toggle="collapse" href="#collapseSearch" role="button" aria-expanded="false" aria-controls="collapseSearch">
<i class="fa-solid fa-search text-body-secondary"></i>
@ -77,10 +77,10 @@
</ul>
</div>
<div class="order-1 order-md-0 collapse navbar-collapse" id="collapseSearch">
<form class="ms-3 mt-3 ms-lg-5 my-md-0" id="search" method="post">
<div class="d-flex align-items-center">
<form class="ms-3 mt-3 ms-lg-5 my-md-0 w-100" id="search" method="post">
<div class="d-flex align-items-center w-100">
<i class="fa-solid fa-search text-body-secondary"></i>
<input tabindex="1" class="search-input" title="search" type="search" placeholder="{{ lng('panel.search') }}...">
<input tabindex="1" class="search-input w-75" title="search" type="search" placeholder="{{ lng('panel.search') }}...">
</div>
<div class="search-results-box p-2 shadow" style="display:none;">
<div class="search-results list-group-flush"></div>