Use title-section and align everything left #4380

src/templates/admin/core/accounts/activate_account.html

@@ -10,12 +10,17 @@
   <li>{% trans "Activate Account" %}</li>
 {% endblock breadcrumbs %}
 
+{% block title-section %}
+  {% if account %}
+    {% trans "Activate Account" %}
+  {% else %}
+    {% trans "No account to activate" %}
+  {% endif %}
+{% endblock %}
+
 {% block form_content %}
   {% if account %}
-    <h2 class="text-center">
-      {% trans "Activate Account" %}
-    </h2>
-    {% include "admin/elements/forms/accessible_messages.html" with form=form %}
+    {% include "admin/elements/forms/messages_in_callout.html" with form=form %}
     <p>{% blocktrans %}
       You can complete the activation process by clicking the button
       below.
@@ -24,9 +29,6 @@ <h2 class="text-center">
       {% trans "Activate Account" %}
     </button>
   {% else %}
-    <h2 class="text-center">
-    {% trans "No account to activate" %}
-    </h2>
     <p>{% blocktrans %}
       Sorry, we could not find an account to activate, or your account is active
       already. You can check if it is active by attempting to log in.

src/templates/admin/core/accounts/edit_profile.html

@@ -9,12 +9,17 @@
   {% trans "Edit Profile" %}
 {% endblock contextual_title %}
 
+{% block breadcrumbs %}
+  <li>Edit Profile</li>
+{% endblock breadcrumbs %}
+
+{% block title-section %}
+  {% trans "Edit Profile" %}
+{% endblock %}
+
 {% block body %}
-  <div class="grid place-content-center gap-0">
-    <h2 class="text-center">
-      {% trans "Edit Profile" %}
-    </h2>
-    {% include "admin/elements/forms/accessible_messages.html" with form=form %}
+  <div class="grid">
+    {% include "admin/elements/forms/messages_in_callout.html" with form=form %}
     <div class="max-w-56">
       <section class="card padding-block-2 padding-inline-2">
         <h3>{% trans "Change Your Email Address" %}</h3>

src/templates/admin/core/accounts/get_reset_token.html

@@ -10,11 +10,12 @@
   <li>{% trans "Reset password" %}</li>
 {% endblock breadcrumbs %}
 
+{% block title-section %}
+  {% trans "Reset password" %}
+{% endblock %}
+
 {% block form_content %}
-  <h2 class="text-center">
-    {% trans "Reset password" %}
-  </h2>
-  {% include "admin/elements/forms/accessible_messages.html" with form=form %}
+  {% include "admin/elements/forms/messages_in_callout.html" with form=form %}
   <p>
     {% blocktrans %}
       Enter your email address and then follow the link sent to you by email.

src/templates/admin/core/accounts/login.html

@@ -6,14 +6,15 @@
 {% endblock contextual_title %}
 
 {% block breadcrumbs %}
-  {{ block.super }}
+  <li>Log in</li>
 {% endblock breadcrumbs %}
 
+{% block title-section %}
+  {% trans "Log in" %}
+{% endblock %}
+
 {% block form_content %}
-  <h2 class="text-center">
-    {% trans "Log in" %}
-  </h2>
-  {% include "admin/elements/forms/accessible_messages.html" with form=form %}
+  {% include "admin/elements/forms/messages_in_callout.html" with form=form %}
   {% if settings.ENABLE_ORCID %}
     <div>
       <a

src/templates/admin/core/accounts/orcid_registration.html

@@ -10,11 +10,12 @@
   <li>{% trans "Unregistered ORCiD" %}</li>
 {% endblock breadcrumbs %}
 
+{% block title-section %}
+  {% trans "Unregistered ORCiD" %}
+{% endblock %}
+
 {% block form_content %}
-  <h2 class="text-center">
-    {% trans "Unregistered ORCiD" %}
-  </h2>
-  {% include "admin/elements/forms/accessible_messages.html" with form=form %}
+  {% include "admin/elements/forms/messages_in_callout.html" with form=form %}
   <p>{% blocktrans %}
     The ORCiD you logged in with is not currently linked with an
     account in our system. You can either register a new account, or login with

src/templates/admin/core/accounts/password_guide.html

@@ -10,7 +10,7 @@
     <div class="card-divider">
       <h2>{% trans "Password Guide" %}</h2>
     </div>
-    {% include "admin/elements/forms/accessible_messages.html" with form=form %}
+    {% include "admin/elements/forms/messages_in_callout.html" with form=form %}
     <div class="card-section">
       <p class="lead">{% blocktrans %}
         When it comes to passwords, length is better than complexity.

src/templates/admin/core/accounts/register.html

@@ -5,22 +5,19 @@
   {% trans "Register for an account" %}
 {% endblock contextual_title %}
 
-{% block css %}
-    {% include "common/elements/edit_profile_css_block.html" %}
-{% endblock %}
-
 {% block breadcrumbs %}
   {{ block.super }}
   <li>{% trans "Register for an account" %}</li>
 {% endblock breadcrumbs %}
 
+{% block title-section %}
+  {% trans "Register for an account" %}
+{% endblock %}
+
 {% block form_content %}
-  <h2 class="text-center">
-    {% trans "Register for an account" %}
-  </h2>
-  {% include "admin/elements/forms/accessible_messages.html" with form=form %}
-  <div class="grid place-content-center">
-    {% include "common/elements/orcid_registration.html" with button_classes="button expanded orcid-button" %}
+  {% include "admin/elements/forms/messages_in_callout.html" with form=form %}
+  <div class="flex wrap gap-1">
+    {% include "common/elements/orcid_registration.html" with button_classes="button orcid-button" %}
   </div>
   <div class="flex wrap gap-1">
     {% include "admin/elements/forms/field.html" with field=form.email %}

src/templates/admin/core/accounts/reset_password.html

@@ -10,11 +10,12 @@
   <li>{% trans "Enter your new password" %}</li>
 {% endblock breadcrumbs %}
 
+{% block title-section %}
+  {% trans "Enter your new password" %}
+{% endblock %}
+
 {% block form_content %}
-  <h2 class="text-center">
-    {% trans "Enter your new password" %}
-  </h2>
-  {% include "admin/elements/forms/accessible_messages.html" with form=form %}
+  {% include "admin/elements/forms/messages_in_callout.html" with form=form %}
   <div><strong>{% trans "Password Rules" %}</strong></div>
   <ul class="no-top-margin">
     {% include "common/elements/password_rules.html" %}

src/templates/admin/core/base.html

@@ -69,20 +69,12 @@
         </div>
     </div>
 
-    {% if request.user.is_authenticated %}
-      {% comment %}
-        The way title-section is established below
-        breaks accessibility because if it is not used,
-        there is an empty h1. So, for the short-term, we exclude it from
-        public-facing account management pages.
-      {% endcomment %}
-      <section class="title">
-        <div class="row expanded column">
-            <h1>{% block title-section %}{% endblock %}</h1>
-            <p>{% block title-sub %}{% endblock %}</p>
-        </div>
-      </section>
-    {% endif %}
+    <section class="title">
+      <div class="row expanded column">
+          <h1>{% block title-section %}{% endblock %}</h1>
+          <p>{% block title-sub %}{% endblock %}</p>
+      </div>
+    </section>
 
     {% block body %}
     {% endblock body %}

src/templates/admin/core/large_form.html

@@ -14,11 +14,11 @@
 {% endblock breadcrumbs %}
 
 {% block body %}
-  <div class="grid place-content-center">
-    <div class="max-w-56">
+  <div class="grid">
+    <div class="padding-block-1 max-w-56">
       <form method="POST">
         {% csrf_token %}
-        {% include "admin/elements/forms/accessible_messages.html" %}
+        {% include "admin/elements/forms/messages_in_callout.html" %}
         <div class="card padding-block-2 padding-inline-2">
           {% block form_content %}
           {% endblock form_content %}

src/templates/admin/core/small_form.html

@@ -14,8 +14,8 @@
 {% endblock breadcrumbs %}
 
 {% block body %}
-  <div class="grid place-content-center">
-    <div class="max-w-24">
+  <div class="grid">
+    <div class="max-w-24 padding-block-1">
       <form method="POST">
         {% csrf_token %}
         <div class="card padding-block-2 padding-inline-2">