Hide suborgs on domains for regular users

src/registrar/assets/js/get-gov.js

@@ -1140,6 +1140,7 @@ document.addEventListener('DOMContentLoaded', function() {
     const statusCheckboxes = document.querySelectorAll('input[name="filter-status"]');
     const statusIndicator = document.querySelector('.domain__filter-indicator');
     const statusToggle = document.querySelector('.usa-button--filter');
+    const noPortfolioFlag = document.getElementById('no-portfolio-js-flag');
 
     /**
      * Loads rows in the domains list, as well as updates pagination around the domains list
@@ -1176,6 +1177,17 @@ document.addEventListener('DOMContentLoaded', function() {
             const suborganization = domain.suborganization ? domain.suborganization : '';
 
             const row = document.createElement('tr');
+
+            let markupForSuborganizationRow = '';
+
+            if (!noPortfolioFlag) {
+              markupForSuborganizationRow = `
+                <td>
+                    <span class="${suborganization ? 'ellipsis ellipsis--30 vertical-align-middle' : ''}" aria-label="${suborganization}" title="${suborganization}">${suborganization}</span>
+                </td>
+              `
+            }
+
             row.innerHTML = `
               <th scope="row" role="rowheader" data-label="Domain name">
                 ${domain.name}
@@ -1196,9 +1208,7 @@ document.addEventListener('DOMContentLoaded', function() {
                   <use aria-hidden="true" xlink:href="/public/img/sprite.svg#info_outline"></use>
                 </svg>
               </td>
-              <td>
+              ${markupForSuborganizationRow}
-                  <span class="${suborganization ? 'ellipsis ellipsis--30 vertical-align-middle' : ''}" aria-label="${suborganization}" title="${suborganization}">${suborganization}</span>
-              </td>
               <td>
                 <a href="${actionUrl}">
                   <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24">

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

@@ -29,9 +29,15 @@ body {
 
 #wrapper.dashboard {
   background-color: color('primary-lightest');
-  padding-top: units(5);
+  padding-top: units(5)!important;
 }
 
+#wrapper.dashboard--portfolio {
+  background-color: color('gray-1');
+  padding-top: units(4)!important;
+}
+
+
 .section--outlined {
   background-color: color('white');
   border: 1px solid color('base-lighter');

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

@@ -69,7 +69,7 @@
 .usa-header--extended {
     @include at-media(desktop) {
         background-color: color('primary-darker');
-        border-top: solid 1px color('base');
+        border-top: solid 1px color('base-light');
         border-bottom: solid 1px color('base-lighter');
 
         .usa-logo__text a,
@@ -83,7 +83,7 @@
         .usa-nav__primary-item:last-child {
             margin-left: auto;
             .usa-nav-link {
-                padding-right: 0;
+                margin-right: units(-2);
             }
         }
         .usa-nav__primary {

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

@@ -34,22 +34,6 @@
       pointer-events: none;
     }
   }
-
-  // Ticket #1510
-  // @include at-media('desktop') {
-  //   th:first-child {
-  //     width: 220px;
-  //   }
-  //   th:nth-child(2) {
-  //     width: 175px;
-  //   }
-  //   th:nth-child(3) {
-  //     width: 130px;
-  //   }
-  //   th:nth-child(5) {
-  //     width: 130px;
-  //   }
-  // }
 }
 
 .dotgov-table {
@@ -96,46 +80,3 @@
     }
   }
 }
-@media (min-width: 1040px){
-  .domain-requests__table {
-    th:nth-of-type(1) {
-      width: 200px;
-    }
-
-    th:nth-of-type(2) {
-      width: 158px;
-    }
-
-    th:nth-of-type(3) {
-      width: 120px;
-    }
-
-    th:nth-of-type(4) {
-      width: 95px;
-    }
-
-    th:nth-of-type(5) {
-      width: 85px;
-    }
-  }
-}
-
-@media (min-width: 1040px){
-  .domains__table {
-    th:nth-of-type(1) {
-      width: 200px;
-    }
-
-    th:nth-of-type(2) {
-      width: 158px;
-    }
-
-    th:nth-of-type(3) {
-      width: 215px;
-    }
-
-    th:nth-of-type(4) {
-      width: 95px;
-    }
-  }
-}

src/registrar/templates/includes/domain_requests_table.html

@@ -2,6 +2,7 @@
 
 <section class="section--outlined domain-requests" id="domain-requests">
     <div class="grid-row">
+      <!-- Use portfolio_base_permission when merging into 2366 then delete this comment -->
       {% if portfolio is None %}
         <div class="mobile:grid-col-12 desktop:grid-col-6">
           <h2 id="domain-requests-header" class="flex-6">Domain requests</h2>

src/registrar/templates/includes/domains_table.html

@@ -2,16 +2,18 @@
 
 <section class="section--outlined domains{% if portfolio is not None %} margin-top-0{% endif %}" id="domains">
     <div class="grid-row">
+      <!-- Use portfolio_base_permission when merging into 2366 then delete this comment -->
       {% if portfolio is None %}
         <div class="mobile:grid-col-12 desktop:grid-col-6">
           <h2 id="domains-header" class="flex-6">Domains</h2>
         </div>
+        <span class="display-none" id="no-portfolio-js-flag"></span>
       {% endif %}
       <div class="mobile:grid-col-12 desktop:grid-col-6">
         <section aria-label="Domains search component" class="flex-6 margin-y-2">
           <form class="usa-search usa-search--small" method="POST" role="search">
             {% csrf_token %}
-            <button class="usa-button usa-button--unstyled margin-right-2 domains__reset-search display-none" type="button">
+            <button class="usa-button usa-button--unstyled margin-right-3 domains__reset-search display-none" 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>
@@ -36,6 +38,7 @@
         </section>
       </div>
     </div>
+    <!-- Use portfolio_base_permission when merging into 2366 then delete this comment -->
     {% if portfolio %}
     <div class="display-flex flex-align-center margin-top-1"> 
       <span class="margin-right-2 margin-top-neg-1 usa-prose text-base-darker">Filter by</span>
@@ -139,7 +142,10 @@
             <th data-sortable="name" scope="col" role="columnheader">Domain name</th>
             <th data-sortable="expiration_date" scope="col" role="columnheader">Expires</th>
             <th data-sortable="state_display" scope="col" role="columnheader">Status</th>
-            <th data-sortable="suborganization" scope="col" role="columnheader">Suborganization</th>
+            <!-- Use portfolio_base_permission when merging into 2366 then delete this comment -->
+            {% if portfolio %}
+              <th data-sortable="suborganization" scope="col" role="columnheader">Suborganization</th>
+            {% endif %}
             <th 
               scope="col" 
               role="columnheader" 

src/registrar/templates/portfolio_base.html

@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 
 {% block wrapper %}
-  <div id="wrapper">
+  <div id="wrapper" class="dashboard--portfolio">
       {% block content %}
         
         <main id="main-content" class="grid-container">