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

components/Collection/templates/collection/notes.html.twig

@@ -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>

components/Search/templates/search/view.html.twig

@@ -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>{% trans %}Search{% endtrans %}</h1>
-        <h1 class="section-title">{% 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 %}
 

public/assets/default_theme/css/base.css

@@ -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);

public/assets/default_theme/css/pages/feeds.css

@@ -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;
 }