Merge branch 'main' of https://github.com/cisagov/manage.get.gov into rh/3348-domain-dropdown

src/docker-compose.yml

@@ -79,6 +79,8 @@ services:
       - POSTGRES_DB=app
       - POSTGRES_USER=user
       - POSTGRES_PASSWORD=feedabee
+    ports:
+      - "5432:5432"
 
   node:
     build:

src/registrar/assets/src/js/getgov/table-domain-requests.js

@@ -116,10 +116,10 @@ export class DomainRequestsTable extends BaseTable {
       <td data-label="Status">
         ${request.status}
       </td>
-      <td class="${ this.portfolioValue ? '' : "width-quarter"}">
+      <td class="width--action-column">
-        <div class="tablet:display-flex tablet:flex-row">
+        <div class="tablet:display-flex tablet:flex-row flex-wrap">
           <a href="${actionUrl}" ${customTableOptions.hasAdditionalActions ? "class='margin-right-2'" : ''}>
-            <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24">
+            <svg class="usa-icon top-1px" aria-hidden="true" focusable="false" role="img" width="24">
               <use xlink:href="/public/img/sprite.svg#${request.svg_icon}"></use>
             </svg>
             ${actionLabel} <span class="usa-sr-only">${request.requested_domain ? request.requested_domain : 'New domain request'}</span>

src/registrar/assets/src/js/getgov/table-domains.js

@@ -56,13 +56,15 @@ export class DomainsTable extends BaseTable {
         </svg>
       </td>
       ${markupForSuborganizationRow}
-      <td class="${ this.portfolioValue ? '' : "width-quarter"}">
+      <td class="width--action-column">
-        <a href="${actionUrl}">
+        <div class="tablet:display-flex tablet:flex-row flex-align-center margin-right-2">
-          <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24">
+          <a href="${actionUrl}">
-            <use xlink:href="/public/img/sprite.svg#${domain.svg_icon}"></use>
+            <svg class="usa-icon top-1px" aria-hidden="true" focusable="false" role="img" width="24">
-          </svg>
+              <use xlink:href="/public/img/sprite.svg#${domain.svg_icon}"></use>
-          ${domain.action_label} <span class="usa-sr-only">${domain.name}</span>
+            </svg>
-        </a>
+            ${domain.action_label} <span class="usa-sr-only">${domain.name}</span>
+          </a>
+        </div>
       </td>
     `;
     tbody.appendChild(row);

src/registrar/assets/src/js/getgov/table-members.js

@@ -48,18 +48,6 @@ export class MembersTable extends BaseTable {
     // Get whether the logged in user has edit members permission
     const hasEditPermission = this.portfolioElement ? this.portfolioElement.getAttribute('data-has-edit-permission')==='True' : null;
 
-    let existingExtraActionsHeader =  document.querySelector('.extra-actions-header');
-
-    if (hasEditPermission && !existingExtraActionsHeader) {
-      const extraActionsHeader = document.createElement('th');
-      extraActionsHeader.setAttribute('id', 'extra-actions');
-      extraActionsHeader.setAttribute('role', 'columnheader');
-      extraActionsHeader.setAttribute('class', 'extra-actions-header width-5');
-      extraActionsHeader.innerHTML = `
-        <span class="usa-sr-only">Extra Actions</span>`;
-      let tableHeaderRow = this.tableWrapper.querySelector('thead tr');
-      tableHeaderRow.appendChild(extraActionsHeader);
-    }
     return { 
       'hasAdditionalActions': hasEditPermission,
       'UserPortfolioPermissionChoices' : data.UserPortfolioPermissionChoices
@@ -121,15 +109,17 @@ export class MembersTable extends BaseTable {
       <td headers="header-last-active row-header-${unique_id}" data-sort-value="${last_active.sort_value}" data-label="last_active">
         ${last_active.display_value}
       </td>
-      <td headers="header-action row-header-${unique_id}">
+      <td headers="header-action row-header-${unique_id}" class="width--action-column">
-        <a href="${member.action_url}">
+        <div class="tablet:display-flex tablet:flex-row flex-align-center">
-          <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24">
+          <a href="${member.action_url}">
-            <use xlink:href="/public/img/sprite.svg#${member.svg_icon}"></use>
+            <svg class="usa-icon top-1px" aria-hidden="true" focusable="false" role="img" width="24">
-          </svg>
+              <use xlink:href="/public/img/sprite.svg#${member.svg_icon}"></use>
-          ${member.action_label} <span class="usa-sr-only">${member.name}</span>
+            </svg>
-        </a>
+            ${member.action_label} <span class="usa-sr-only">${member.name}</span>
+          </a>
+          <span class="padding-left-1">${customTableOptions.hasAdditionalActions ? kebabHTML : ''}</span>
+        </div>
       </td>
-      ${customTableOptions.hasAdditionalActions ? '<td>'+kebabHTML+'</td>' : ''}
     `;
     tbody.appendChild(row);
     if (domainsHTML || permissionsHTML) {

src/registrar/assets/src/sass/_theme/_base.scss

@@ -1,7 +1,7 @@
 @use "uswds-core" as *;
 @use "cisa_colors" as *;
 
-$widescreen-max-width: 1920px;
+$widescreen-max-width: 1536px;
 $widescreen-x-padding: 4.5rem;
 
 $hot-pink: #FFC3F9;
@@ -50,7 +50,7 @@ body {
   background-color: color('white');
   border: 1px solid color('base-lighter');
   border-radius: 4px;
-  padding: 0 units(4) units(3) units(2);
+  padding: 0 units(2) units(3) units(2);
   margin-top: units(3);
 
   &.margin-top-0 {
@@ -274,3 +274,12 @@ abbr[title] {
 .width-quarter {
   width: 25%;
 }
+
+/* 
+NOTE: width: 3% basically forces a fit-content effect in the table.
+Fit-content itself does not work.
+*/
+.width--action-column {
+  width: 3%;
+  padding-right: 0px !important;
+}

src/registrar/templates/admin/analytics.html

@@ -1,8 +1,21 @@
 {% extends "admin/base_site.html" %}
 {% load static %}
+{% load i18n %}
 
 {% block content_title %}<h1>Registrar Analytics</h1>{% endblock %}
 
+{% block breadcrumbs %}
+{% comment %} 
+Overrides the breadcrumb styles found in this file: 
+https://github.com/django/django/blob/main/django/contrib/admin/templates/admin/base.html
+{% endcomment %}
+<div class="breadcrumbs">
+  <a href="{% url "admin:index" %}">{% trans "Home" %}</a>
+  &rsaquo;
+  <span>{% trans "Analytics Dashboard" %}</span>
+</div>
+{% endblock %}
+
 {% block content %}
 
   <div id="content-main" class="custom-admin-template">

src/registrar/templates/includes/members_table.html

@@ -59,7 +59,7 @@
               role="columnheader"
               id="header-action"
             >
-              <span class="usa-sr-only">Action</span>
+              Action
             </th>
           </tr>
         </thead>

src/registrar/templates/portfolio_base.html

@@ -9,7 +9,7 @@
             {# the entire logged in page goes here #}
             
             <div class="grid-row {% if not is_widescreen_centered %}max-width--grid-container{% endif %}">
-              <div class="tablet:grid-col-11 desktop:grid-col-10 {% if is_widescreen_centered %}tablet:grid-offset-1{% endif %}">
+              <div class="desktop:grid-col-10 {% if not is_widescreen_centered %}tablet:grid-col-11 {% else %}tablet:padding-left-4 tablet:padding-right-4 tablet:grid-col-12 desktop:grid-offset-1{% endif %}">
             
                 {% block portfolio_content %}{% endblock %}