[COMPONENTS][Search] Polished search template for a clearer header hierarchy

This commit is contained in:
Eliseu Amaro 2022-01-27 02:17:41 +00:00
parent ab6dabf4f7
commit 64a698d255
No known key found for this signature in database
GPG Key ID: 96DA09D4B97BC2D5
4 changed files with 111 additions and 103 deletions

View File

@ -19,12 +19,14 @@
{% if page_title is defined %}
{% if current_path starts with 'feed_' %}
<h1 class="section-title">{{ page_title | trans }}</h1>
{% else %}
<span class="section-title">{{ page_title | trans }}</span>
{% endif %}
{% else %}
{% if current_path starts with 'search' %}
<h3 class="heading-no-margin">{{ 'Notes found' | trans }}</h3>
{% else %}
<span class="section-title">{{ 'Notes' | trans }}</span>
{% endif %}
{% endif %}
<nav class="feed-actions">
<details class="feed-actions-details">
<summary>

View File

@ -2,21 +2,22 @@
{% block body %}
{% if error is defined %}
{% if error is defined %}
<label class="alert alert-danger">
{{ error.getMessage() }}
</label>
{% endif %}
{% endif %}
<section class="frame-section frame-section-padding">
<h1 class="section-title">{% trans %}Search{% endtrans %}</h1>
<h1>{% trans %}Search{% endtrans %}</h1>
<section class="frame-section frame-section-padding">
{{ form_start(search_form) }}
<section class="frame-section section-form">
{{ form_errors(search_form) }}
<div class="section-title">
{{ form_row(search_form.search_query) }}
</div>
{% if actor is not null %}
<details class="section-details-subtitle">
<details class="frame-section section-details-subtitle">
<summary class="details-summary-subtitle">
<strong>{% trans %}Other options{% endtrans %}</strong>
</summary>
@ -38,17 +39,19 @@
</details>
{% endif %}
{{ form_row(search_form.submit_search) }}
</section>
{{ form_rest(search_form) }}
{{ form_end(search_form)}}
<hr>
<section class="frame-section">
<details class="section-details-subtitle">
<summary class="details-summary-subtitle">
<strong>{% trans %}Build a search query{% endtrans %}</strong>
</summary>
{{ form_start(search_builder_form) }}
<div class="section-form">
{{ form_start(search_builder_form) }}
{# actor options, display if first checked, with checkbox trick #}
<details class="section-details-subtitle">
<summary class="details-summary-subtitle">
@ -85,13 +88,14 @@
</div>
<hr>
</details>
</div>
{{ form_rest(search_builder_form) }}
{{ form_end(search_builder_form) }}
</div>
</details>
</section>
</section>
</section>
<section class="frame-section frame-section-padding">
<section class="frame-section frame-section-padding">
<h2>{% trans %}Results{% endtrans %}</h2>
<div class="frame-section frame-section-padding feed-empty">
{% if notes is defined and notes is not empty %}
@ -112,8 +116,10 @@
<em>{% trans %}No Actors were found for the specified query...{% endtrans %}</em>
{% endif %}
</div>
</section>
</section>
<div class="frame-section-button-like">
{{ "Page: " ~ page }}
</div>
{% endblock body %}

View File

@ -8,6 +8,11 @@ html {
scroll-margin-top: var(--xxl);
}
hr {
margin-top: var(--s);
margin-bottom: var(--s);
}
.icon {
align-self: center;
fill: var(--foreground);

View File

@ -134,7 +134,6 @@
.feed-header {
display: flex;
margin-top: var(--s);
margin-bottom: var(--m);
align-items: center;
}
@ -202,10 +201,6 @@
border: 2px solid var(--accent) !important;
}
.h-feed hr, .notes hr {
margin-top: var(--s);
}
.note-attachments {
display: flex;
}