GNUsocial/gnu-social
4
0
Fork 1
Code Issues Releases Wiki Activity

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

Browse Source
This commit is contained in:
Eliseu Amaro 2022-01-27 02:17:41 +00:00
parent ab6dabf4f7
commit 64a698d255
Signed by: eliseuamaro
GPG Key ID: 96DA09D4B97BC2D5
4 changed files with 111 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/Collection/templates/collection/notes.html.twig
View File

@ -19,11 +19,13 @@
{% if page_title is defined %} {% if page_title is defined %}
{% if current_path starts with 'feed_' %} {% if current_path starts with 'feed_' %}
<h1 class="section-title">{{ page_title | trans }}</h1> <h1 class="section-title">{{ page_title | trans }}</h1>
{% else %}
<span class="section-title">{{ page_title | trans }}</span>
{% endif %} {% endif %}
{% else %} {% 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 %} {% endif %}
<nav class="feed-actions"> <nav class="feed-actions">
<details class="feed-actions-details"> <details class="feed-actions-details">

196
components/Search/templates/search/view.html.twig
View File

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

5
public/assets/default_theme/css/base.css
View File

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

5
public/assets/default_theme/css/pages/feeds.css
View File

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