[TWIG] Various fixes related to header elements hierarchy

Widgets shouldn't have a header element from here forward, since their location varies

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

@@ -50,15 +50,16 @@
         </form>
     </details>
 
-    <section class="frame-section-padding">
+    <section class="frame-section frame-section-padding">
+        <h2>{% trans %}Results{% endtrans %}</h2>
         {% if actors is defined and actors is not empty %}
             {% for actor in actors %}
                 {% block profile_view %}{% include 'cards/profile/view.html.twig' %}{% endblock profile_view %}
                 <hr>
             {% endfor %}
-            <p>{% trans %}Page: %page%{% endtrans %}</p>
+            <span class="frame-section-button-like">{% trans %}Page: %page%{% endtrans %}</span>
         {% else %}
-            <h2>{{ empty_message }}</h2>
+            <span>{{ empty_message }}</span>
         {% endif %}
     </section>
 </section>

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

@@ -15,8 +15,13 @@
 
     {% if notes is defined %}
         <header class="feed-header">
+            {% set current_path = app.request.get('_route') %}
             {% if page_title is defined %}
-                <span class="section-title">{{ page_title | trans }}</span>
+                {% 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>
             {% endif %}

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

@@ -1,7 +1,7 @@
 <section class="frame-section collections">
     <details class="section-details-title" title="Expand if you want to access more options.">
         <summary class="details-summary-title">
-            <h2>{{ctitle}}</h2>
+            <span>{{ctitle}}</span>
         </summary>
         {% if has_collections %}
             <section class="section-form">

components/Group/templates/group/settings.html.twig

@@ -10,7 +10,7 @@
 
 {% block body %}
     <nav class='section-settings'>
-        <h2>Settings</h2>
+        <h1>Settings</h1>
         <ul>
             <li>
                 {% set profile_tabs = [{'title': 'Personal Info', 'desc': 'Nickname, Homepage, Bio, Self Tags and more.', 'id': 'settings-personal-info', 'form': personal_info_form}] %}

components/RightPanel/templates/right_panel/view.html.twig

@@ -17,14 +17,14 @@
                 <details class="section-details-title" open="open"
                          title="{{ 'Expand if you want to access more options.' | trans }}">
                     <summary class="details-summary-title">
-                        <h2>
+                        <span>
                             {% set current_path = app.request.get('_route') %}
                             {% if current_path == 'conversation_reply_to' %}
                                 {{ "Reply to note" | trans }}
                             {% else %}
                                 {{ "Create a note" | trans }}
                             {% endif %}
-                        </h2>
+                        </span>
                     </summary>
 
                     <section class="section-form">

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

@@ -9,7 +9,7 @@
     {% endif %}
 
     <section class="frame-section frame-section-padding">
-        <h2>{% trans %}Search{% endtrans %}</h2>
+        <h1 class="section-title">{% trans %}Search{% endtrans %}</h1>
 
         {{ form_start(search_form) }}
         <section class="frame-section section-form">

components/Tag/templates/actor_tag_feed.html.twig

@@ -8,10 +8,10 @@
 {% block body %}
     {% if tag_name is defined and tag_name is not null %}
         {% if tag_name is instanceof('string') %}
-            <h2>{% trans %}Actors with tag: %tag_name%{% endtrans %}</h2>
+            <h1>{% trans %}Actors with tag: %tag_name%{% endtrans %}</h1>
         {% else %}
             {% set tags = tag_name|join(',') %} {# TODO Not ideal, hard to translate #}
-            <h2>{% trans %}Actors with tags: %tags%{% endtrans %}</h2>
+            <h1>{% trans %}Actors with tags: %tags%{% endtrans %}</h1>
         {% endif %}
     {% endif %}
 
@@ -23,7 +23,7 @@
         {% block profile_view %}{% include 'cards/profile/view.html.twig' %}{% endblock profile_view %}
     {% endfor %}
 
-    <div class="frame-section frame-section-padding">
+    <div class="frame-section-button-like">
         {{ "Page: " ~ page }}
     </div>
 {% endblock %}

components/Tag/templates/note_tag_feed.html.twig

@@ -9,10 +9,10 @@
 {% block body %}
     {% if tag_name is defined and tag_name is not null %}
         {% if tag_name is instanceof('string') %}
-            <h2>{% trans %}Notes with tag: %tag_name%{% endtrans %}</h2>
+            <h1>{% trans %}Notes with tag: %tag_name%{% endtrans %}</h1>
         {% else %}
             {% set tags = tag_name|join(', ') %} {# TODO Not ideal, hard to translate #}
-            <h2>{% trans %}People with tags: %tags%{% endtrans %}</h2>
+            <h1>{% trans %}People with tags: %tags%{% endtrans %}</h1>
         {% endif %}
     {% endif %}
 
@@ -26,7 +26,7 @@
         {% endblock current_note %}
     {% endfor %}
 
-    <div class="frame-section frame-section-padding frame-section-paging">
+    <div class="frame-section-button-like">
         {{ "Page " ~ page }}
     </div>
 {% endblock %}

plugins/PinnedNotes/templates/PinnedNotes/notes.html.twig

@@ -3,7 +3,7 @@
 {# Backwards compatibility with hAtom 0.1 #}
 {% if pinnednotes is not empty %}
     <main class="feed pinned" tabindex="0" role="feed">
-        <h2>Pinned Notes</h2>
+        <h1>Pinned Notes</h1>
         <div class="h-feed hfeed notes">
             {% for conversation in pinnednotes %}
                 {% block current_note %}

plugins/RelatedTags/templates/related_tags/actor_tags.html.twig

@@ -1,9 +1,9 @@
 {% if actor_tags is not empty %}
-<div class="frame-section frame-section-padding">
+<section class="frame-section frame-section-padding">
-  <h2>Related tags:</h2>
+  <span class="section-title">Related tags</span>
   {% for at in actor_tags %}
     {% include 'cards/tag/actor_tag.html.twig' with { 'tag': at, 'actor': null } %}
   {% endfor %}
-</div>
+</section>
 {% endif %}
 

plugins/RelatedTags/templates/related_tags/note_tags.html.twig

@@ -1,6 +1,6 @@
 {% if note_tags is not empty %}
   <div class="frame-section frame-section-padding">
-    <h2>Related tags:</h2>
+    <h1>Related tags</h1>
 
     {% for nt in note_tags %}
       {% include 'cards/tag/note_tag.html.twig' with { 'tag': nt } %}

plugins/WebMonetization/templates/WebMonetization/widget.html.twig

@@ -1,7 +1,7 @@
 <section class="frame-section">
     <details class="section-details-title" title="Expand if you want to access more options.">
         <summary class="details-summary-title">
-            <h2>Web Monetization</h2>
+            <span>Web Monetization</span>
         </summary>
         <section class="section-form">
             {{ form(the_form) }}

public/assets/default_theme/css/base.css

@@ -132,7 +132,7 @@ html {
 .section-panel .panel-content {
     background: var(--background-hard);
     display: block;
-    height: 100vh;
+    height: max-content;
 }
 
 @media only screen and (max-width: 1280px) {
@@ -166,6 +166,8 @@ html {
         overflow-y: auto;
         width: 100vw;
         z-index: 1;
+        background: var(--background-hard);
+        box-shadow: var(--shadow);
     }
 }
 

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

@@ -134,7 +134,7 @@
 .feed-header {
     display: flex;
     margin-top: var(--s);
-    margin-bottom: var(--s);
+    margin-bottom: var(--m);
     align-items: center;
 }
 

public/assets/default_theme/css/widgets/sections.css

@@ -306,6 +306,16 @@
     width: 100%;
 }
 
+.details-summary-title {
+    line-height: initial;
+    font-weight: 700;
+    font-size: 1.067em;
+    padding: 6px 12px;
+}
+.details-summary-subtitle {
+    font-weight: 700;
+}
+
 .details-summary-title:after {
     content: "\2193";
     float: right;
@@ -335,10 +345,6 @@
     transform: rotate(180deg);
 }
 
-.details-summary-title {
-    padding: 6px 12px;
-}
-
 .section-form {
     background-color: var(--background-hard);
     border-radius: var(--s);

templates/cards/navigation/view.html.twig

@@ -3,7 +3,7 @@
     <details class="section-details-title" open="open"
              title="{{ 'Expand if you want to access more options.' | trans }}">
       <summary class="details-summary-title">
-        <h2>{{ 'Feeds' | trans }}</h2>
+        <span>{{ 'Feeds' | trans }}</span>
         {% if app.user %}
           {# User custom feeds #}
           <a class="edit-feed-link" href="{{ path('edit_feeds') }}">{{ icon('edit', 'icon icon-edit-feed') | raw }}</a>

templates/security/login.html.twig

@@ -20,12 +20,12 @@
                 {% endif %}
 
                 {% if app.user %}
-                    <h2>
+                    <span>
                         {{ "You are logged in as" | trans }} {{ app.user.username }}.
                         <button class="btn btn-lg btn-primary">
                             <a href="{{ path('app_logout') }}">{{ "Logout" | trans }}</a>
                         </button>
-                    </h2>
+                    </span>
                 {% else %}
                     <div class="form-row">
                         <label class="section-form-label" for="inputNicknameOrEmail">{{ "Nickname or Email" | trans }}</label>