From ee04571f4df3a03d5b30c01eceff4984794fe590 Mon Sep 17 00:00:00 2001
From: Eliseu Amaro <mail@eliseuama.ro>
Date: Sun, 23 Jan 2022 19:46:47 +0000
Subject: [PATCH] [TWIG] Various fixes related to header elements hierarchy

Widgets shouldn't have a header element from here forward, since their location varies
---
 .../templates/collection/actors.html.twig          |  7 ++++---
 .../templates/collection/notes.html.twig           |  7 ++++++-
 .../templates/collection/widget_add_to.html.twig   |  2 +-
 .../Group/templates/group/settings.html.twig       |  2 +-
 .../templates/right_panel/view.html.twig           |  4 ++--
 components/Search/templates/search/view.html.twig  |  2 +-
 components/Tag/templates/actor_tag_feed.html.twig  |  6 +++---
 components/Tag/templates/note_tag_feed.html.twig   |  6 +++---
 .../templates/PinnedNotes/notes.html.twig          |  2 +-
 .../templates/related_tags/actor_tags.html.twig    |  6 +++---
 .../templates/related_tags/note_tags.html.twig     |  2 +-
 .../templates/WebMonetization/widget.html.twig     |  2 +-
 public/assets/default_theme/css/base.css           |  4 +++-
 public/assets/default_theme/css/pages/feeds.css    |  2 +-
 .../assets/default_theme/css/widgets/sections.css  | 14 ++++++++++----
 templates/cards/navigation/view.html.twig          |  2 +-
 templates/security/login.html.twig                 |  4 ++--
 17 files changed, 44 insertions(+), 30 deletions(-)

diff --git a/components/Collection/templates/collection/actors.html.twig b/components/Collection/templates/collection/actors.html.twig
index 483b608a69..eb3bd23103 100644
--- a/components/Collection/templates/collection/actors.html.twig
+++ b/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>
diff --git a/components/Collection/templates/collection/notes.html.twig b/components/Collection/templates/collection/notes.html.twig
index cda2adcfb0..011073a333 100644
--- a/components/Collection/templates/collection/notes.html.twig
+++ b/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 %}
diff --git a/components/Collection/templates/collection/widget_add_to.html.twig b/components/Collection/templates/collection/widget_add_to.html.twig
index f5b65d1bd1..6720e69d41 100644
--- a/components/Collection/templates/collection/widget_add_to.html.twig
+++ b/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">
diff --git a/components/Group/templates/group/settings.html.twig b/components/Group/templates/group/settings.html.twig
index 8a9115a325..575a3f99f7 100644
--- a/components/Group/templates/group/settings.html.twig
+++ b/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}] %}
diff --git a/components/RightPanel/templates/right_panel/view.html.twig b/components/RightPanel/templates/right_panel/view.html.twig
index ff96414851..2fc95259f0 100644
--- a/components/RightPanel/templates/right_panel/view.html.twig
+++ b/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">
diff --git a/components/Search/templates/search/view.html.twig b/components/Search/templates/search/view.html.twig
index e805ee70d4..0113a60598 100644
--- a/components/Search/templates/search/view.html.twig
+++ b/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">
diff --git a/components/Tag/templates/actor_tag_feed.html.twig b/components/Tag/templates/actor_tag_feed.html.twig
index 36e6129999..6b68b8c107 100644
--- a/components/Tag/templates/actor_tag_feed.html.twig
+++ b/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 %}
diff --git a/components/Tag/templates/note_tag_feed.html.twig b/components/Tag/templates/note_tag_feed.html.twig
index 6998bf8c36..857e01ad8d 100644
--- a/components/Tag/templates/note_tag_feed.html.twig
+++ b/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 %}
diff --git a/plugins/PinnedNotes/templates/PinnedNotes/notes.html.twig b/plugins/PinnedNotes/templates/PinnedNotes/notes.html.twig
index c4a6e9db29..bdaa18b47b 100644
--- a/plugins/PinnedNotes/templates/PinnedNotes/notes.html.twig
+++ b/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 %}
diff --git a/plugins/RelatedTags/templates/related_tags/actor_tags.html.twig b/plugins/RelatedTags/templates/related_tags/actor_tags.html.twig
index f78a5440b7..a744143e07 100644
--- a/plugins/RelatedTags/templates/related_tags/actor_tags.html.twig
+++ b/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">
-  <h2>Related tags:</h2>
+<section class="frame-section frame-section-padding">
+  <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 %}
 
diff --git a/plugins/RelatedTags/templates/related_tags/note_tags.html.twig b/plugins/RelatedTags/templates/related_tags/note_tags.html.twig
index 5c451abb0a..733c6d6831 100644
--- a/plugins/RelatedTags/templates/related_tags/note_tags.html.twig
+++ b/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 } %}
diff --git a/plugins/WebMonetization/templates/WebMonetization/widget.html.twig b/plugins/WebMonetization/templates/WebMonetization/widget.html.twig
index c3a3f3ea74..6c84db8e35 100644
--- a/plugins/WebMonetization/templates/WebMonetization/widget.html.twig
+++ b/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) }}
diff --git a/public/assets/default_theme/css/base.css b/public/assets/default_theme/css/base.css
index 04c5a67fa3..74e3702a56 100644
--- a/public/assets/default_theme/css/base.css
+++ b/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);
     }
 }
 
diff --git a/public/assets/default_theme/css/pages/feeds.css b/public/assets/default_theme/css/pages/feeds.css
index afbffab846..242a1a3ea0 100644
--- a/public/assets/default_theme/css/pages/feeds.css
+++ b/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;
 }
 
diff --git a/public/assets/default_theme/css/widgets/sections.css b/public/assets/default_theme/css/widgets/sections.css
index 9503bf06c5..46240dee24 100644
--- a/public/assets/default_theme/css/widgets/sections.css
+++ b/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);
diff --git a/templates/cards/navigation/view.html.twig b/templates/cards/navigation/view.html.twig
index c06906e6a5..b2780586d2 100644
--- a/templates/cards/navigation/view.html.twig
+++ b/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>
diff --git a/templates/security/login.html.twig b/templates/security/login.html.twig
index 9622f220e0..278378c2af 100644
--- a/templates/security/login.html.twig
+++ b/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>