#3481: Move alerts below breadcrumbs [meoward] (#3835)

* Move error msg in domain_add_user

* Move errors in profile

* Update remaining domain org model templates

* Update member org templates

* Also move other alerts

* Move success alerts in profile

* Add breadcrumbs block to domain_base and move breadcrumbs out of domain_content block into content block

* Remove extra div to fix spacing

* Update domain_renewal and suborganization pages

src/registrar/templates/domain_add_user.html

@@ -3,9 +3,6 @@
 
 {% block title %}Add a domain manager | {% endblock %}
 
-{% block domain_content %}
-
-  {% include "includes/form_errors.html" with form=form %}
 
   {% block breadcrumb %}
     {% if portfolio %}
@@ -41,6 +38,11 @@
     {% endif %}
   {% endblock breadcrumb %}
 
+{% block domain_content %}
+
+  <!-- Error message -->
+  {% include "includes/form_errors.html" with form=form %}
+
   <h1>Add a domain manager</h1>
   {% if portfolio %}
     <p>

src/registrar/templates/domain_base.html

@@ -21,7 +21,13 @@
       {% endif %}
     </div>
 
-    <div class="tablet:grid-col" id="main-content">
+      <main id="main-content" class="grid-container tablet:grid-col">
+
+        <!-- Navigation breadcrumbs -->
+        {% block breadcrumb %}
+        {% endblock breadcrumb %}
+
+        <!-- Alert messages -->
       {% if not domain.domain_info %}
         <div class="usa-alert usa-alert--error margin-bottom-2">
           <div class="usa-alert__body">
@@ -62,7 +68,7 @@
 
         {% endblock %}  {# domain_content #}
       {% endif %}
-    </div>
+      </main>
   </div>
 </div>
 {% endblock %}  {# content #}

src/registrar/templates/domain_detail.html

@@ -2,7 +2,6 @@
 {% load static url_helpers %}
 {% load custom_filters %}
 
-{% block domain_content %}
   {% block breadcrumb %}
   {% if portfolio %}
   <!-- Navigation breadcrumbs -->
@@ -19,6 +18,7 @@
   {% endif %}
   {% endblock breadcrumb %}
 
+{% block domain_content %}
   {{ block.super }}
   <div class="margin-top-2 tablet:grid-col-10">
     <h2 class="string-wrap margin-top-2">{{ domain.name }}</h2>

src/registrar/templates/domain_dns.html

@@ -3,7 +3,6 @@
 
 {% block title %}DNS | {{ domain.name }} | {% endblock %}
 
-{% block domain_content %}
   {% block breadcrumb %}
   {% if portfolio %}
   <!-- Navigation breadcrumbs -->
@@ -23,6 +22,8 @@
   {% endif %}
   {% endblock breadcrumb %}
 
+{% block domain_content %}
+
   <h1>DNS</h1>
 
   <p>The Domain Name System (DNS) is the internet service that translates your domain name into an IP address. Before your .gov domain can be used, you'll need to connect it to a DNS hosting service and provide us with your name server information.</p>

src/registrar/templates/domain_dnssec.html

@@ -3,7 +3,6 @@
 
 {% block title %}DNSSEC | {{ domain.name }} | {% endblock %}
 
-{% block domain_content %}
 
   {% block breadcrumb %}
   {% if portfolio %}
@@ -26,6 +25,8 @@
   </nav>
   {% endif %}
   {% endblock breadcrumb %}
+  
+  {% block domain_content %}
 
   <h1 id="domain-dnssec">DNSSEC</h1>
 

src/registrar/templates/domain_dsdata.html

@@ -3,11 +3,6 @@
 
 {% block title %}DS data | {{ domain.name }} | {% endblock %}
 
-{% block domain_content %}
-
-  {% for form in formset %}
-    {% include "includes/form_errors.html" with form=form %}
-  {% endfor %}
 
   {% block breadcrumb %}
   {% if portfolio %}
@@ -34,6 +29,13 @@
   {% endif %}
   {% endblock breadcrumb %}
 
+  {% block domain_content %}
+
+  <!-- Error message -->
+  {% for form in formset %}
+      {% include "includes/form_errors.html" with form=form %}
+  {% endfor %}
+
   <div class="grid-row grid-gap">
     <div class="tablet:grid-col-6">
       <h1 class="tablet:margin-bottom-1" id="domain-dsdata">DS data</h1>

src/registrar/templates/domain_nameservers.html

@@ -2,47 +2,46 @@
 {% load static field_helpers%}
 
 {% block title %}DNS name servers | {{ domain.name }} | {% endblock %}
+  {% block breadcrumb %}
+    {% if portfolio %}
+    <!-- Navigation breadcrumbs -->
+    <nav class="usa-breadcrumb padding-top-0" aria-label="Domain breadcrumb">
+      <ol class="usa-breadcrumb__list">
+        <li class="usa-breadcrumb__list-item">
+          <a href="{% url 'domains' %}" class="usa-breadcrumb__link"><span>Domains</span></a>
+        </li>
+        <li class="usa-breadcrumb__list-item">
+          <a href="{% url 'domain' domain_pk=domain.id %}" class="usa-breadcrumb__link"><span>{{ domain.name }}</span></a>
+        </li>
+        <li class="usa-breadcrumb__list-item">
+          <a href="{% url 'domain-dns' domain_pk=domain.id %}" class="usa-breadcrumb__link"><span>DNS</span></a>
+        </li>
+        <li class="usa-breadcrumb__list-item usa-current" aria-current="page">
+          <span>DNS name servers</span>
+        </li>
+      </ol>
+    </nav>
+    {% endif %}
+  {% endblock breadcrumb %}
 
-{% block domain_content %}
+  {% block domain_content %}
 
   {# this is right after the messages block in the parent template. #}
+  <!-- Error message -->
+  {% if formset.initial|length >= formset.max_num %}
+  <div class="usa-alert usa-alert--do-not-reset usa-alert--info usa-alert--slim margin-bottom-2" role="alert">
+    <div class="usa-alert__body">
+      <p class="usa-alert__text">
+        You’ve reached the maximum amount of allowed name server records (13).
+      </p>
+    </div>
+  </div>
+{% endif %}
 
   {% for form in formset %}
     {% include "includes/form_errors.html" with form=form %}
   {% endfor %}
 
-  {% if formset.initial|length >= formset.max_num %}
-    <div class="usa-alert usa-alert--do-not-reset usa-alert--info usa-alert--slim margin-bottom-2" role="alert">
-      <div class="usa-alert__body">
-        <p class="usa-alert__text">
-          You’ve reached the maximum amount of allowed name server records (13).
-        </p>
-      </div>
-    </div>
-  {% endif %}
-  
-  {% block breadcrumb %}
-  {% if portfolio %}
-  <!-- Navigation breadcrumbs -->
-  <nav class="usa-breadcrumb padding-top-0" aria-label="Domain breadcrumb">
-    <ol class="usa-breadcrumb__list">
-      <li class="usa-breadcrumb__list-item">
-        <a href="{% url 'domains' %}" class="usa-breadcrumb__link"><span>Domains</span></a>
-      </li>
-      <li class="usa-breadcrumb__list-item">
-        <a href="{% url 'domain' domain_pk=domain.id %}" class="usa-breadcrumb__link"><span>{{ domain.name }}</span></a>
-      </li>
-      <li class="usa-breadcrumb__list-item">
-        <a href="{% url 'domain-dns' domain_pk=domain.id %}" class="usa-breadcrumb__link"><span>DNS</span></a>
-      </li>
-      <li class="usa-breadcrumb__list-item usa-current" aria-current="page">
-        <span>DNS name servers</span>
-      </li>
-    </ol>
-  </nav>
-  {% endif %}
-  {% endblock breadcrumb %}
-
   <div class="grid-row grid-gap">
     <div class="tablet:grid-col-6">
       <h1 class="tablet:margin-bottom-1">Name servers</h1>

src/registrar/templates/domain_renewal.html

@@ -2,20 +2,8 @@
 {% load static url_helpers %}
 {% load custom_filters %}
 
-{% block domain_content %}
   {% block breadcrumb %}
 
-  <!-- Banner for if_policy_acknowledged -->
-  {% if form.is_policy_acknowledged.errors %}
-    <div class="usa-alert usa-alert--error usa-alert--slim margin-bottom-2" role="alert">
-      <div class="usa-alert__body">
-        {% for error in form.is_policy_acknowledged.errors %}
-          <p class="usa-alert__text">{{ error }}</p>
-        {% endfor %}
-      </div>
-    </div>
-  {% endif %}
-
   {% if portfolio %}
   <!-- Navigation breadcrumbs -->
   <nav class="usa-breadcrumb padding-top-0" aria-label="Domain breadcrumb">
@@ -35,6 +23,18 @@
   {% endif %}
   {% endblock breadcrumb %}
 
+  {% block domain_content %}
+   <!-- Banner for if_policy_acknowledged -->
+  {% if form.is_policy_acknowledged.errors %}
+    <div class="usa-alert usa-alert--error usa-alert--slim margin-bottom-2" role="alert">
+      <div class="usa-alert__body">
+        {% for error in form.is_policy_acknowledged.errors %}
+          <p class="usa-alert__text">{{ error }}</p>
+        {% endfor %}
+      </div>
+    </div>
+  {% endif %}
+
   {{ block.super }}
   <div class="margin-top-4 tablet:grid-col-10">
     <h2 class="domain-name-wrap">Confirm the following information for accuracy</h2>

src/registrar/templates/domain_security_email.html

@@ -3,9 +3,6 @@
 
 {% block title %}Security email | {{ domain.name }} | {% endblock %}
 
-{% block domain_content %}
-
-  {% include "includes/form_errors.html" with form=form %}
 
   {% block breadcrumb %}
   {% if portfolio %}
@@ -26,6 +23,10 @@
   {% endif %}
   {% endblock breadcrumb %}
 
+{% block domain_content %}
+  <!-- Error message -->
+  {% include "includes/form_errors.html" with form=form %}
+
   <h1>Security email</h1>
 
   <p>We strongly recommend that you provide a security email. This email will allow the  public to report observed or suspected security issues on your domain. Security emails are made public and included in the <a class="usa-link" rel="noopener noreferrer" target="_blank" href="{% public_site_url 'about/data/' %}">.gov domain data</a> we provide.</p>

src/registrar/templates/domain_suborganization.html

@@ -3,10 +3,6 @@
 
 {% block title %}Suborganization{% if suborganization_name %} | suborganization_name{% endif %} | {% endblock %}
 
-{% block domain_content %}
-
-    {% include "includes/form_errors.html" with form=form %}
-
     {% block breadcrumb %}
     {% if portfolio %}
     <!-- Navigation breadcrumbs -->
@@ -26,6 +22,11 @@
     {% endif %}
     {% endblock breadcrumb %}
 
+    {% block domain_content %}
+
+    <!-- Error message -->
+    {% include "includes/form_errors.html" with form=form %}
+
     <h1>Suborganization</h1>
 
     <p>

src/registrar/templates/domain_users.html

@@ -3,7 +3,6 @@
 
 {% block title %}Domain managers | {{ domain.name }} | {% endblock %}
 
-{% block domain_content %}
   {% block breadcrumb %}
   {% if portfolio %}
   <!-- Navigation breadcrumbs -->
@@ -23,6 +22,8 @@
   {% endif %}
   {% endblock breadcrumb %}
 
+{% block domain_content %}
+
   <h1>Domain managers</h1>
 
   <p>

src/registrar/templates/portfolio_member.html

@@ -9,11 +9,6 @@ Organization member
 
 {% block portfolio_content %}
 <div id="main-content" class="{% if not is_widescreen_centered %}desktop:grid-offset-2{% endif %}">
-  <!-- Form messages -->
-  {% include "includes/form_errors.html" with form=form %}
-  {% block messages %}
-    {% include "includes/form_messages.html" %}
-  {% endblock messages%}
 
   {% url 'members' as url %}
   <nav class="usa-breadcrumb padding-top-0" aria-label="Portfolio member breadcrumb">
@@ -27,6 +22,11 @@ Organization member
   </ol>
   </nav>
   
+  <!-- Form messages -->
+  {% block messages %}
+    {% include "includes/form_messages.html" %}
+  {% endblock messages%}
+  {% include "includes/form_errors.html" with form=form %}
 
   <h1 class="margin-bottom-3">Manage member</h1>
 

src/registrar/templates/portfolio_member_domains.html

@@ -7,11 +7,6 @@
 
 {% block portfolio_content %}
 <div id="main-content" class=" {% if not is_widescreen_centered %}desktop:grid-offset-2{% endif %}">
-    <!-- Form messages -->
-    {% include "includes/form_errors.html" with form=form %}
-    {% block messages %}
-      {% include "includes/form_messages.html" %}
-    {% endblock messages%}
 
     {% url 'members' as url %}
     {% if portfolio_permission %}
@@ -35,6 +30,13 @@
     </ol>
     </nav>
 
+    <!-- Form messages -->
+    {% block messages %}
+      {% include "includes/form_messages.html" %}
+    {% endblock messages%}
+    {% include "includes/form_errors.html" with form=form %}
+
+
     <div class="grid-row grid-gap">
         <div class="mobile:grid-col-12 tablet:grid-col-7">
             <h1>Domain assignments</h1>

src/registrar/templates/portfolio_member_domains_edit.html

@@ -7,11 +7,6 @@
 
 {% block portfolio_content %}
 <div id="main-content" class=" {% if not is_widescreen_centered %}desktop:grid-offset-2{% endif %}">
-    <!-- Form messages -->
-    {% include "includes/form_errors.html" with form=form %}
-    {% block messages %}
-      {% include "includes/form_messages.html" %}
-    {% endblock messages%}
 
     {% url 'members' as url %}
     {% if portfolio_permission %}
@@ -38,6 +33,12 @@
         </ol>
     </nav>
 
+    <!-- Form messages -->
+    {% block messages %}
+      {% include "includes/form_messages.html" %}
+    {% endblock messages%}
+    {% include "includes/form_errors.html" with form=form %}
+
     <section id="domain-assignments-edit-view">
         <h1>Edit domain assignments</h1>
 

src/registrar/templates/portfolio_member_permissions.html

@@ -11,11 +11,6 @@
 {% block portfolio_content %}
 
 <div id="main-content" class=" {% if not is_widescreen_centered %}desktop:grid-offset-2{% endif %}">
-  <!-- Form messages -->
-  {% include "includes/form_errors.html" with form=form %}
-  {% block messages %}
-    {% include "includes/form_messages.html" %}
-  {% endblock messages%}
   
   <!-- Navigation breadcrumbs -->
   {% url 'members' as url %}
@@ -38,6 +33,13 @@
   </ol>
   </nav>
 
+  <!-- Form messages -->
+  {% block messages %}
+    {% include "includes/form_messages.html" %}
+  {% endblock messages%}
+  {% include "includes/form_errors.html" with form=form %}
+
+
   <!-- Page header -->
   <h1>Member access and permissions</h1>
 

src/registrar/templates/portfolio_members_add_new.html

@@ -11,11 +11,7 @@
 {% block portfolio_content %}
 
 <div id="main-content" class=" {% if not is_widescreen_centered %}desktop:grid-offset-2{% endif %}">
-  <!-- Form messages -->
+
-  {% include "includes/form_errors.html" with form=form %}
-  {% block messages %}
-    {% include "includes/form_messages.html" %}
-  {% endblock messages%}
 
 <!-- Navigation breadcrumbs -->
 <nav class="usa-breadcrumb padding-top-0 bg-gray-1" aria-label="Domain request breadcrumb">
@@ -29,6 +25,12 @@
   </ol>
 </nav>
 
+  <!-- Form messages -->
+  {% block messages %}
+    {% include "includes/form_messages.html" %}
+  {% endblock messages%}
+  {% include "includes/form_errors.html" with form=form %}
+
   <!-- Page header -->
   <h1>Add a new member</h1>
 

src/registrar/templates/profile.html

@@ -14,16 +14,6 @@ Edit your User Profile |
 <main id="main-content" class="grid-container grid-container--widescreen">
     <div class="{% if not is_widescreen_centered %}max-width--grid-container{% endif %}">
         <div class="desktop:grid-col-8 desktop:grid-offset-2">
-            {% if messages %}
-            {% for message in messages %}
-            <div class="usa-alert usa-alert--{{ message.tags }} usa-alert--slim margin-bottom-3" role="alert">
-                <div class="usa-alert__body">
-                {{ message }}
-                </div>
-            </div>
-            {% endfor %}
-            {% endif %}
-            {% include "includes/form_errors.html" with form=form %}
 
             {% if show_back_button %}
             <a href="{% url form.initial.redirect %}" class="breadcrumb__back">
@@ -35,7 +25,20 @@ Edit your User Profile |
                 </p>
             </a>
             {% endif %}
-            
+
+            <!-- Form messages -->
+            {% if messages %}
+            {% for message in messages %}
+            <div class="usa-alert usa-alert--{{ message.tags }} usa-alert--slim margin-bottom-3" role="alert">
+                <div class="usa-alert__body">
+                {{ message }}
+                </div>
+            </div>
+            {% endfor %}
+            {% endif %}
+
+            {% include "includes/form_errors.html" with form=form %}
+
             {% if show_confirmation_modal %}
                 <a
                     href="#toggle-confirmation-modal"