Fixes + Updates to meet new ACs

src/registrar/templates/home.html

@@ -15,14 +15,14 @@
       {% include "includes/form_messages.html" %}
     {% endblock %}
   
-    <h1>Manage your domains</h1>
+    <div class="grid-row margin-bottom-3">
-
+      <h1 class="flex-fill">Manage your domains</h1>
-    <p class="margin-top-4">
+      <div>
-      <button data-href="{% url 'domain-request:start' %}" class="usa-button use-button-as-link"
+        <button data-href="{% url 'domain-request:start' %}" class="usa-button use-button-as-link">
-      >
           Start a new domain request
         </button>
-    </p>
+      </div>
+    </div>
 
     {% include "includes/domains_table.html" with user_domain_count=user_domain_count %}
     {% include "includes/domain_requests_table.html" %}

src/registrar/templates/includes/domain_requests_table.html

@@ -4,17 +4,25 @@
 {% url 'get_domain_requests_json' as url %}
 <span id="get_domain_requests_json_url" class="display-none">{{url}}</span>
 
-<section class="section-outlined domain-requests {% if portfolio %}section-outlined--border-base-light{% endif %}" id="domain-requests">
+<section class="section-outlined domain-requests {% if portfolio %}margin-top-0 section-outlined--border-base-light{% endif %}" id="domain-requests">
     <div class="section-outlined__header margin-bottom-3 {% if not portfolio %}section-outlined__header--no-portfolio flex-wrap{% else %} grid-row{% endif %}">
         {% if not portfolio %}
-            <h2 id="domain-requests-header" class="display-inline-block">Domain requests</h2>
+        <div class="grid-row grid-col-12">
+            <h2 id="domain-requests-header" class="display-inline-block flex-fill">Domain requests</h2>
+        </div>
         {% else %}
         <!-- Embedding the portfolio value in a data attribute -->
         <span id="portfolio-js-value" data-portfolio="{{ portfolio.id }}"></span>
         {% endif %}
-        <!-- ---------- SEARCH & EXPORT ---------- -->
+        <!-- ---------- SEARCH ---------- -->
-        {% with label_text=portfolio|yesno:"Search by domain name or creator,Search by domain name"  item_id_prefix="domain-requests" aria_label_text="Domain requests search component" %}
+        {% with label_text=portfolio|yesno:"Search by domain name or creator,Search by domain name"  item_name="domain-requests" aria_label_text="Domain requests search component"%}
-            {% include "includes/search_table.html" %}
+            {% if portfolio %}
+                {% with use_search_icon="true" %}
+                    {% include "includes/search.html" %}
+                {% endwith %}
+            {% else %}
+                {% include "includes/search.html" %}
+            {% endif %}
         {% endwith %}
     </div>
 

src/registrar/templates/includes/domains_table.html

@@ -28,19 +28,33 @@
 <section class="section-outlined domains margin-top-0{% if portfolio %} section-outlined--border-base-light{% endif %}" id="domains">
   <div class="section-outlined__header margin-bottom-3 {% if not portfolio %} section-outlined__header--no-portfolio flex-wrap{% else %} grid-row{% endif %}">
     {% if not portfolio %}
-      <h2 id="domains-header" class="display-inline-block">Domains</h2>
+      <div class="grid-row grid-col-12">
+        <h2 id="domains-header" class="display-inline-block flex-fill">Domains</h2>
+        <!-- ---------- EXPORT (non-org placement) ---------- -->
+        {% if user_domain_count and user_domain_count > 0 %}
+          {% with export_aria="Domains report component" export_url='export_data_type_user' %}
+              {% include "includes/export.html" %}
+          {% endwith %}
+        {% endif %}
+      </div>
     {% else %}
       <!-- Embedding the portfolio value in a data attribute -->
       <span id="portfolio-js-value" data-portfolio="{{ portfolio.id }}"></span>
     {% endif %}
-    <!-- ---------- SEARCH & EXPORT ---------- -->
+    <!-- ---------- SEARCH ---------- -->
-    {% if user_domain_count and user_domain_count > 0 %}
+    {% with label_text="Search by domain name" item_name="domains" aria_label_text="Domains search component"%}
-      {% with label_text="Search by domain name" item_id_prefix="domains" aria_label_text="Domains search component" with_export="true" export_aria="Domains report component" export_url='export_data_type_user' %}
+      {% if portfolio %}
-          {% include "includes/search_table.html" %}
+        {% with use_search_icon="true" %}
+            {% include "includes/search.html" %}
         {% endwith %}
       {% else %}
-      {% with label_text="Search by domain name" item_id_prefix="domains" aria_label_text="Domains search component"%}
+        {% include "includes/search.html" %}
-          {% include "includes/search_table.html" %}
+      {% endif %}
+    {% endwith %}
+    <!-- ---------- EXPORT (org placement) ---------- -->
+    {% if user_domain_count and user_domain_count > 0 and portfolio%}
+      {% with export_aria="Domains report component" export_url='export_data_type_user' %}
+          {% include "includes/export.html" %}
       {% endwith %}
     {% endif %}
   </div>

src/registrar/templates/includes/export.html

@@ -0,0 +1,12 @@
+{% load static %}
+<div class="section-outlined__utility-button mobile-lg:padding-right-105 {% if portfolio %} flex-auto desktop:padding-left-3{% endif %} margin-top-0">
+    <section aria-label="{{export_aria}}" class="margin-top-205">
+        <a href="{% url export_url %}" class="usa-button usa-button--unstyled usa-button--with-icon usa-button--justify-right">
+        <svg class="usa-icon usa-icon--large" aria-hidden="true" focusable="false" role="img" width="24" height="24">
+            <use xlink:href="{%static 'img/sprite.svg'%}#file_download"></use>
+        </svg>Export as CSV
+        </a>
+    </section>
+</div>
+
+    

src/registrar/templates/includes/members_table.html

@@ -7,9 +7,12 @@
 <span id="get_members_json_url" class="display-none">{{url}}</span>
 <section class="section-outlined members margin-top-0 section-outlined--border-base-light" id="members">
   <div class="section-outlined__header margin-bottom-3 grid-row">
-    <!-- ---------- SEARCH & EXPORT ---------- -->
+    <!-- ---------- SEARCH ---------- -->
-    {% with label_text="Search by member name" item_id_prefix="members" aria_label_text="Members search component" with_export="true" export_aria="Members report component" export_url='export_members_portfolio'%}
+    {% with label_text="Search by member name" item_name="members" aria_label_text="Members search component" use_search_icon="true" %}
-        {% include "includes/search_table.html" %}
+        {% include "includes/search.html" %}
+    {% endwith %}
+    {% with export_aria="Members report component" export_url='export_members_portfolio' %}
+        {% include "includes/export.html" %}
     {% endwith %}
   </div>
 

src/registrar/templates/includes/search.html

@@ -1,26 +1,29 @@
 {% load static %}
 
-<div class="section-outlined__search mobile:grid-col-12 desktop:grid-col-9">
+<div class="section-outlined__search tablet:grid-col">
     <section aria-label="{{aria_label_text}}">
-        <form class="usa-search usa-search--show-label" method="POST" role="search">
+        <form class="usa-search usa-search--small usa-search--show-label" method="POST" role="search">
             {% csrf_token %}
-            <label class="usa-label display-block margin-bottom-05 maxw-none" for="{{item_name}}__search-field">
+            <label class="usa-label display-block maxw-none margin-top-2 margin-bottom-1" for="{{item_id_prefix}}__search-field">
                 {{ label_text }}
             </label> 
-            <div class="usa-search--show-label__input-wrapper flex-align-self-end">
+            <div class="usa-search--show-label__input-wrapper">
                 <input
                 class="usa-input minw-15"
                 id="{{item_name}}__search-field"
                 type="search"
                 name="{{item_name}}-search"
                 />
-                <button class="usa-button" type="submit" id="{{item_name}}__search-field-submit">
+                <button class="usa-button" type="submit" id="{{item_name}}__search-field-submit" aria-labelledby="{{item_id_prefix}}__search-label">
-                    <span class="usa-search__submit-text">Search </span>
+                    {% if use_search_icon %} 
                     <img
                         src="{% static 'img/usa-icons-bg/search--white.svg' %}"
                         class="usa-search__submit-icon"
                         alt="Search"
                     />
+                    {% else %}
+                    <span class="usa-search__submit-text">Search </span>
+                    {% endif %}
                 </button>
                 <button class="usa-button usa-button--unstyled margin-left-3 display-none flex-1" id="{{item_name}}__reset-search" type="button">
                     <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24">

src/registrar/templates/includes/search_table.html

@@ -1,50 +0,0 @@
-{% load static %}
-<div class="grid-col-12">
-    <label class="usa-label display-block maxw-none" for="{{item_id_prefix}}__search-field">
-        {{ label_text }}
-    </label> 
-</div>
-<div class="section-outlined__search section-outlined__search--widescreen {% if portfolio %}mobile:grid-col-12 desktop:grid-col-6{% endif %}">
-    <section aria-label="{{aria_label_text}}" class="margin-top-2">
-    <!-- ---------- SEARCH ---------- -->
-        <form class="usa-search usa-search--small usa-search--show-label" method="POST" role="search">
-        {% csrf_token %} 
-        <div class="usa-search--show-label__input-wrapper flex-align-self-end">
-            <input
-            class="usa-input"
-            id="{{item_id_prefix}}__search-field"
-            type="search"
-            name="{{item_id_prefix}}-search"
-            placeholder="{{label_text}}"
-            />
-            <button class="usa-button" type="submit" id="{{item_id_prefix}}__search-field-submit" aria-labelledby="{{item_id_prefix}}__search-label">
-            <img
-                src="{% static 'img/usa-icons-bg/search--white.svg' %}"
-                class="usa-search__submit-icon"
-                alt="Search"
-            />
-            </button>
-            <button class="usa-button usa-button--unstyled margin-left-1 display-none" id="{{item_id_prefix}}__reset-search" type="button">
-                <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24">
-                <use xlink:href="{%static 'img/sprite.svg'%}#close"></use>
-                </svg>
-                Reset
-            </button>
-        </div>
-        </form>
-    </section>
-</div>
-<!-- ---------- EXPORT ---------- -->
-{% if with_export|lower == "true" %}
-<div class="section-outlined__utility-button mobile-lg:padding-right-105 {% if portfolio %} mobile:grid-col-12 desktop:grid-col-6 desktop:padding-left-3{% endif %}">
-    <section aria-label="{{export_aria}}" class="margin-top-205">
-        <a href="{% url export_url %}" class="usa-button usa-button--unstyled usa-button--with-icon usa-button--justify-right">
-        <svg class="usa-icon usa-icon--large" aria-hidden="true" focusable="false" role="img" width="24" height="24">
-            <use xlink:href="{%static 'img/sprite.svg'%}#file_download"></use>
-        </svg>Export as CSV
-        </a>
-    </section>
-</div>
-{% endif %}
-
-    

src/registrar/templates/portfolio_requests.html

@@ -16,15 +16,18 @@
 {% endblock messages%}
 
 <div id="main-content">
+    <div class="grid-row grid-gap margin-bottom-3">
+        <div class="mobile:grid-col-12 tablet:grid-col-6"> 
             <h1 id="domain-requests-header" class="margin-bottom-1">Domain requests</h1>
-    <div class="grid-row grid-gap">
+            {% if has_edit_request_portfolio_permission %}
+                <p class="margin-y-0">Domain requests can only be modified by the person who created the request.</p>
+            {% else %}
+                <p class="margin-y-0">Domain requests can only be modified by the person who created the request.</p>
+            {% endif %}
+        </div>
        
         {% if has_edit_request_portfolio_permission %}
             <div class="mobile:grid-col-12 tablet:grid-col-6">
-                <p class="margin-y-0">Domain requests can only be modified by the person who created the request.</p>
-            </div>
-            <div class="mobile:grid-col-12 tablet:grid-col-6">
- 
                 <p class="float-right-tablet tablet:margin-y-0">
                     <button data-href="{% url 'domain-request:start' %}" class="usa-button use-button-as-link"
                     >
@@ -32,12 +35,11 @@
                     </button>
                 </p>
             </div>
-        {% else %}
-            <p class="margin-y-0">Domain requests can only be modified by the person who created the request.</p>
         {% endif %}
     </div>
 
     
+    
     {% include "includes/domain_requests_table.html" with portfolio=portfolio %}
 </div>
 {% endblock %}