[COMPONENTS][Search] Polished search template for a clearer header hierarchy
This commit is contained in:
Eliseu Amaro
parent
ab6dabf4f7
commit
64a698d255
|
|
@ -19,11 +19,13 @@
|
|||
{% 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 %}
|
||||
<span class="section-title">{{ 'Notes' | trans }}</span>
|
||||
{% 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">
|
||||
|
|
|
|||
|
|
@ -2,118 +2,124 @@
|
|||
|
||||
|
||||
{% block body %}
|
||||
{% if error is defined %}
|
||||
<label class="alert alert-danger">
|
||||
{{ error.getMessage() }}
|
||||
</label>
|
||||
{% endif %}
|
||||
{% if error is defined %}
|
||||
<label class="alert alert-danger">
|
||||
{{ error.getMessage() }}
|
||||
</label>
|
||||
{% endif %}
|
||||
|
||||
<section class="frame-section frame-section-padding">
|
||||
<h1 class="section-title">{% trans %}Search{% endtrans %}</h1>
|
||||
<h1>{% trans %}Search{% endtrans %}</h1>
|
||||
|
||||
{{ form_start(search_form) }}
|
||||
<section class="frame-section section-form">
|
||||
{{ form_errors(search_form) }}
|
||||
{{ form_row(search_form.search_query) }}
|
||||
{% if actor is not null %}
|
||||
<section class="frame-section frame-section-padding">
|
||||
{{ form_start(search_form) }}
|
||||
{{ form_errors(search_form) }}
|
||||
<div class="section-title">
|
||||
{{ form_row(search_form.search_query) }}
|
||||
</div>
|
||||
{% if actor is not null %}
|
||||
<details class="frame-section section-details-subtitle">
|
||||
<summary class="details-summary-subtitle">
|
||||
<strong>{% trans %}Other options{% endtrans %}</strong>
|
||||
</summary>
|
||||
|
||||
<div class="section-form">
|
||||
<details class="section-details-subtitle">
|
||||
<summary class="details-summary-subtitle">
|
||||
<strong>{% trans %}Other options{% endtrans %}</strong>
|
||||
<strong>
|
||||
{% trans %}Save query as a feed{% endtrans %}
|
||||
</strong>
|
||||
</summary>
|
||||
|
||||
<div class="section-form">
|
||||
<details class="section-details-subtitle">
|
||||
<summary class="details-summary-subtitle">
|
||||
<strong>
|
||||
{% trans %}Save query as a feed{% endtrans %}
|
||||
</strong>
|
||||
</summary>
|
||||
<div class="section-form">
|
||||
{{ form_row(search_form.title) }}
|
||||
{{ form_row(search_form.subscribe_to_search) }}
|
||||
</div>
|
||||
<hr>
|
||||
</details>
|
||||
{{ form_row(search_form.title) }}
|
||||
{{ form_row(search_form.subscribe_to_search) }}
|
||||
</div>
|
||||
<hr>
|
||||
</details>
|
||||
{% endif %}
|
||||
{{ form_row(search_form.submit_search) }}
|
||||
</section>
|
||||
{{ form_end(search_form)}}
|
||||
</div>
|
||||
</details>
|
||||
{% endif %}
|
||||
{{ form_row(search_form.submit_search) }}
|
||||
{{ form_rest(search_form) }}
|
||||
{{ form_end(search_form)}}
|
||||
|
||||
<section class="frame-section">
|
||||
<details class="section-details-subtitle">
|
||||
<summary class="details-summary-subtitle">
|
||||
<strong>{% trans %}Build a search query{% endtrans %}</strong>
|
||||
</summary>
|
||||
<hr>
|
||||
|
||||
<section class="frame-section">
|
||||
<details class="section-details-subtitle">
|
||||
<summary class="details-summary-subtitle">
|
||||
<strong>{% trans %}Build a search query{% endtrans %}</strong>
|
||||
</summary>
|
||||
|
||||
<div class="section-form">
|
||||
{{ form_start(search_builder_form) }}
|
||||
<div class="section-form">
|
||||
{# actor options, display if first checked, with checkbox trick #}
|
||||
<details class="section-details-subtitle">
|
||||
<summary class="details-summary-subtitle">
|
||||
<strong>{% trans %}People search options{% endtrans %}</strong>
|
||||
</summary>
|
||||
<div class="section-form">
|
||||
{{ form_row(search_builder_form.include_actors) }}
|
||||
{{ form_row(search_builder_form.include_actors_people) }}
|
||||
{{ form_row(search_builder_form.include_actors_groups) }}
|
||||
{{ form_row(search_builder_form.include_actors_lists) }}
|
||||
{{ form_row(search_builder_form.include_actors_businesses) }}
|
||||
{{ form_row(search_builder_form.include_actors_organizations) }}
|
||||
{{ form_row(search_builder_form.include_actors_bots) }}
|
||||
{{ form_row(search_builder_form.actor_langs) }}
|
||||
{{ form_row(search_builder_form.actor_tags) }}
|
||||
</div>
|
||||
<hr>
|
||||
</details>
|
||||
{# actor options, display if first checked, with checkbox trick #}
|
||||
<details class="section-details-subtitle">
|
||||
<summary class="details-summary-subtitle">
|
||||
<strong>{% trans %}People search options{% endtrans %}</strong>
|
||||
</summary>
|
||||
<div class="section-form">
|
||||
{{ form_row(search_builder_form.include_actors) }}
|
||||
{{ form_row(search_builder_form.include_actors_people) }}
|
||||
{{ form_row(search_builder_form.include_actors_groups) }}
|
||||
{{ form_row(search_builder_form.include_actors_lists) }}
|
||||
{{ form_row(search_builder_form.include_actors_businesses) }}
|
||||
{{ form_row(search_builder_form.include_actors_organizations) }}
|
||||
{{ form_row(search_builder_form.include_actors_bots) }}
|
||||
{{ form_row(search_builder_form.actor_langs) }}
|
||||
{{ form_row(search_builder_form.actor_tags) }}
|
||||
</div>
|
||||
<hr>
|
||||
</details>
|
||||
|
||||
<details class="section-details-subtitle">
|
||||
<summary class="details-summary-subtitle">
|
||||
<strong>{% trans %}Note search options{% endtrans %}</strong>
|
||||
</summary>
|
||||
<div class="section-form">
|
||||
{{ form_row(search_builder_form.include_notes) }}
|
||||
{{ form_row(search_builder_form.include_notes_text) }}
|
||||
{{ form_row(search_builder_form.include_notes_media) }}
|
||||
{{ form_row(search_builder_form.include_notes_polls) }}
|
||||
{{ form_row(search_builder_form.include_notes_bookmarks) }}
|
||||
{{ form_row(search_builder_form.note_langs) }}
|
||||
{{ form_row(search_builder_form.note_tags) }}
|
||||
{{ form_row(search_builder_form.note_actor_langs) }}
|
||||
{{ form_row(search_builder_form.note_actor_tags) }}
|
||||
</div>
|
||||
<hr>
|
||||
</details>
|
||||
</div>
|
||||
<details class="section-details-subtitle">
|
||||
<summary class="details-summary-subtitle">
|
||||
<strong>{% trans %}Note search options{% endtrans %}</strong>
|
||||
</summary>
|
||||
<div class="section-form">
|
||||
{{ form_row(search_builder_form.include_notes) }}
|
||||
{{ form_row(search_builder_form.include_notes_text) }}
|
||||
{{ form_row(search_builder_form.include_notes_media) }}
|
||||
{{ form_row(search_builder_form.include_notes_polls) }}
|
||||
{{ form_row(search_builder_form.include_notes_bookmarks) }}
|
||||
{{ form_row(search_builder_form.note_langs) }}
|
||||
{{ form_row(search_builder_form.note_tags) }}
|
||||
{{ form_row(search_builder_form.note_actor_langs) }}
|
||||
{{ form_row(search_builder_form.note_actor_tags) }}
|
||||
</div>
|
||||
<hr>
|
||||
</details>
|
||||
{{ form_rest(search_builder_form) }}
|
||||
{{ form_end(search_builder_form) }}
|
||||
</details>
|
||||
</section>
|
||||
</div>
|
||||
</details>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<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 %}
|
||||
{{ parent() }}
|
||||
{% else %}
|
||||
<h3>{% trans %}No notes found{% endtrans %}</h3>
|
||||
<em>{% trans %}No notes were found for the specified query...{% endtrans %}</em>
|
||||
{% endif %}
|
||||
</div>
|
||||
<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 %}
|
||||
{{ parent() }}
|
||||
{% else %}
|
||||
<h3>{% trans %}No notes found{% endtrans %}</h3>
|
||||
<em>{% trans %}No notes were found for the specified query...{% endtrans %}</em>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="frame-section frame-section-padding feed-empty">
|
||||
<h3>{% trans %}Actors found{% endtrans %}</h3>
|
||||
{% if actors is defined and actors is not empty %}
|
||||
{% for actor in actors %}
|
||||
{% include 'cards/profile/view.html.twig' with {'actor': actor} %}
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<em>{% trans %}No Actors were found for the specified query...{% endtrans %}</em>
|
||||
{% endif %}
|
||||
</div>
|
||||
</section>
|
||||
<div class="frame-section frame-section-padding feed-empty">
|
||||
<h3>{% trans %}Actors found{% endtrans %}</h3>
|
||||
{% if actors is defined and actors is not empty %}
|
||||
{% for actor in actors %}
|
||||
{% include 'cards/profile/view.html.twig' with {'actor': actor} %}
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<em>{% trans %}No Actors were found for the specified query...{% endtrans %}</em>
|
||||
{% endif %}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="frame-section-button-like">
|
||||
{{ "Page: " ~ page }}
|
||||
</div>
|
||||
{% endblock body %}
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user