reorder search UI to be more intuitive

remotes/1693045480750635534/spooky-22
Aevann1 2022-08-16 18:14:10 +02:00
parent 32e8f68ef5
commit 88d16db94b
1 changed files with 51 additions and 48 deletions

View File

@ -6,10 +6,8 @@
<title>Search for "{{query}}" - {{SITE_NAME}}"</title> <meta name="description" content="{{total}} result{{'s' if total != 1 else ''}}">
{% endblock %}
{% block PseudoSubmitForm %}{% endblock %}
{% block navbar %}
<form class="form-inline search flex-nowrap mx-0 mx-lg-auto" action="/search/{% if '/posts' in request.path %}posts{% elif '/comments' in request.path %}comments{% else %}users{% endif %}" method="get" style="padding-top:42px">
{% block PseudoSubmitForm %}
<form class="form-inline search flex-nowrap mx-0 mx-lg-auto mt-1" action="/search/{% if '/posts' in request.path %}posts{% elif '/comments' in request.path %}comments{% else %}users{% endif %}" method="get">
<input autocomplete="off" class="form-control w-100" type="search" placeholder="Search" aria-label="Search" name="q" value="{{query}}">
<span class="input-group-append">
<span class="input-group-text border-0 bg-transparent" style="margin-left: -2.5rem;">
@ -17,8 +15,47 @@
</span>
</span>
</form>
{% endblock %}
{% block navbar %}
{% endblock %}
{% block content %}
<div class="row no-gutters my-md-3">
<div class="col">
<div class="card search-results">
<div class="card-header bg-white d-none">
<ul class="list-inline no-bullets mb-0">
<li class="list-inline-item active mr-4"><i class="fas fa-align-left text-gray-400"></i></li>
<li class="list-inline-item"><i class="fas fa-link text-gray-400"></i></li>
</ul>
</div>
<div class="card-body pb-2">
<div class="pl-md-3">
{% if not request.path.startswith('/search/users') %}
<strong>Advanced search parameters (with examples)</strong>
<ul class="mt-2">
<li class="mb-1">author:quadnarca</li>
<li class="mb-1">domain:reddit.com</li>
<li class="mb-1">over18:true</li>
<li class="mb-1">{{HOLE_NAME}}:music</li>
<li class="mb-1">before:1660590018</li>
<li class="mb-1">after:1660590018</li>
{% if request.path.startswith('/search/comments') %}
<li class="mb-1">post:504</li>
{% endif %}
</ul>
<br>
{% endif %}
<div class="text-muted text-small mb-1">Showing {% block listinglength %}{{listing | length}}{% endblock %} of {{total}} result{{'s' if total != 1 else ''}} for</div>
<h1 class="h4 mb-0">{{query}}</h1>
{% if not '/users' in request.path %}
<div class="mt-5 d-flex align-items-center">
<div class="mt-3 d-flex align-items-center" style="float:right">
<div class="dropdown dropdown-actions">
<button class="btn btn-secondary dropdown-toggle" role="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{% if t=="hour" %}<i class="fas fa-clock mr-1"></i>
@ -61,41 +98,7 @@
</div>
</div>
{% endif %}
{% endblock %}
{% block content %}
<div class="row no-gutters my-md-3">
<div class="col">
<div class="card search-results">
<div class="card-header bg-white d-none">
<ul class="list-inline no-bullets mb-0">
<li class="list-inline-item active mr-4"><i class="fas fa-align-left text-gray-400"></i></li>
<li class="list-inline-item"><i class="fas fa-link text-gray-400"></i></li>
</ul>
</div>
<div class="card-body">
<div class="pl-md-3">
{% if not request.path.startswith('/search/users') %}
<strong>Advanced search parameters (with examples)</strong>
<ul class="mt-2">
<li class="mb-1">author:quadnarca</li>
<li class="mb-1">domain:reddit.com</li>
<li class="mb-1">over18:true</li>
<li class="mb-1">{{HOLE_NAME}}:music</li>
<li class="mb-1">before:1660590018</li>
<li class="mb-1">after:1660590018</li>
{% if request.path.startswith('/search/comments') %}
<li class="mb-1">post:504</li>
{% endif %}
</ul>
<br>
{% endif %}
<div class="text-muted text-small mb-1">Showing {% block listinglength %}{{listing | length}}{% endblock %} of {{total}} result{{'s' if total != 1 else ''}} for</div>
<h1 class="h4 mb-0">{{query}}</h1>
</div>
</div>