Skip to content

Commit

Permalink
Merge pull request #2431 from cisagov/rjm/2349-portfolio-ui
Browse files Browse the repository at this point in the history
Issue #2349: Portfolio templates - [RJM]
  • Loading branch information
rachidatecs authored Jul 22, 2024
2 parents 76d9b8c + c162d81 commit 0c8f0b4
Show file tree
Hide file tree
Showing 33 changed files with 514 additions and 398 deletions.
4 changes: 4 additions & 0 deletions src/djangooidc/tests/test_views.py
Original file line number Diff line number Diff line change
Expand Up @@ -429,6 +429,10 @@ def test_login_callback_does_not_requires_step_up_auth(self, mock_client):
# Create a mock request
request = self.factory.get("/some-url")
request.session = {"acr_value": ""}
# Mock user and its attributes
mock_user = MagicMock()
mock_user.is_authenticated = True
request.user = mock_user
# Ensure that the CLIENT instance used in login_callback is the mock
# patch _requires_step_up_auth to return False
with patch("djangooidc.views._requires_step_up_auth", return_value=False), patch(
Expand Down
14 changes: 14 additions & 0 deletions src/registrar/assets/js/get-gov.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -1173,8 +1174,20 @@ document.addEventListener('DOMContentLoaded', function() {
const expirationDateFormatted = expirationDate ? expirationDate.toLocaleDateString('en-US', options) : '';
const expirationDateSortValue = expirationDate ? expirationDate.getTime() : '';
const actionUrl = domain.action_url;
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}
Expand All @@ -1195,6 +1208,7 @@ document.addEventListener('DOMContentLoaded', function() {
<use aria-hidden="true" xlink:href="/public/img/sprite.svg#info_outline"></use>
</svg>
</td>
${markupForSuborganizationRow}
<td>
<a href="${actionUrl}">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24">
Expand Down
108 changes: 27 additions & 81 deletions src/registrar/assets/sass/_theme/_base.scss
Original file line number Diff line number Diff line change
Expand Up @@ -29,52 +29,14 @@ body {

#wrapper.dashboard {
background-color: color('primary-lightest');
padding-top: units(5);
}

.usa-logo {
@include at-media(desktop) {
margin-top: units(2);
}
}

.usa-logo__text {
@include typeset('sans', 'xl', 2);
color: color('primary-darker');
padding-top: units(5)!important;
}

.usa-nav__primary {
margin-top:units(1);
#wrapper.dashboard--portfolio {
background-color: color('gray-1');
padding-top: units(4)!important;
}

.usa-nav__primary-username {
display: inline-block;
padding: units(1) units(2);
max-width: 208px;
overflow: hidden;
text-overflow: ellipsis;
@include at-media(desktop) {
padding: units(2);
max-width: 500px;
}
}

@include at-media(desktop) {
.usa-nav__primary-item:not(:first-child) {
position: relative;
}

.usa-nav__primary-item:not(:first-child)::before {
content: '';
position: absolute;
top: 50%;
left: 0;
width: 0; /* No width since it's a border */
height: 40%;
border-left: solid 1px color('base-light');
transform: translateY(-50%);
}
}

.section--outlined {
background-color: color('white');
Expand Down Expand Up @@ -136,10 +98,6 @@ footer {
color: color('primary');
}

.usa-identifier__logo {
height: units(7);
}

abbr[title] {
// workaround for underlining abbr element
border-bottom: none;
Expand Down Expand Up @@ -179,47 +137,35 @@ abbr[title] {
cursor: pointer;
}

.input-with-edit-button {
svg.usa-icon {
width: 1.5em !important;
height: 1.5em !important;
color: #{$dhs-green};
position: absolute;
}
&.input-with-edit-button__error {
svg.usa-icon {
color: #{$dhs-red};
}
div.input-with-edit-button__readonly-field {
color: #{$dhs-red};
}
}
.padding--8-8-9 {
padding: 8px 8px 9px !important;
}

// We need to deviate from some default USWDS styles here
// in this particular case, so we have to override this.
.usa-form .usa-button.readonly-edit-button {
margin-top: 0px !important;
padding-top: 0px !important;
svg {
width: 1.25em !important;
height: 1.25em !important;
}
.ellipsis {
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

// Define some styles for the .gov header/logo
.usa-logo button {
color: #{$dhs-dark-gray-85};
font-weight: 700;
font-family: family('sans');
font-size: 1.6rem;
line-height: 1.1;
.ellipsis--23 {
max-width: 23ch;
}

.usa-logo button.usa-button--unstyled.disabled-button:hover{
color: #{$dhs-dark-gray-85};
.ellipsis--30 {
max-width: 30ch;
}

.padding--8-8-9 {
padding: 8px 8px 9px !important;
.ellipsis--50 {
max-width: 50ch;
}

.vertical-align-middle {
vertical-align: middle;
}

@include at-media(desktop) {
.ellipsis--desktop-50 {
max-width: 50ch;
}
}
28 changes: 28 additions & 0 deletions src/registrar/assets/sass/_theme/_buttons.scss
Original file line number Diff line number Diff line change
Expand Up @@ -162,6 +162,34 @@ a.usa-button--unstyled:visited {
}
}

.input-with-edit-button {
svg.usa-icon {
width: 1.5em !important;
height: 1.5em !important;
color: #{$dhs-green};
position: absolute;
}
&.input-with-edit-button__error {
svg.usa-icon {
color: #{$dhs-red};
}
div.readonly-field {
color: #{$dhs-red};
}
}
}

// We need to deviate from some default USWDS styles here
// in this particular case, so we have to override this.
.usa-form .usa-button.readonly-edit-button {
margin-top: 0px !important;
padding-top: 0px !important;
svg {
width: 1.25em !important;
height: 1.25em !important;
}
}

.usa-button--filter {
width: auto;
// For mobile stacking
Expand Down
121 changes: 121 additions & 0 deletions src/registrar/assets/sass/_theme/_header.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
@use "uswds-core" as *;
@use "cisa_colors" as *;

// Define some styles for the .gov header/logo
.usa-logo button {
color: #{$dhs-dark-gray-85};
font-weight: 700;
font-family: family('sans');
font-size: 1.6rem;
line-height: 1.1;
}

.usa-logo button:hover{
color: #{$dhs-dark-gray-85};
}

.usa-header {
.usa-logo {
@include at-media(desktop) {
margin-top: units(2);
}
}
.usa-logo__text {
@include typeset('sans', 'xl', 2);
}
.usa-nav__username {
max-width: 208px;
min-height: units(2);
@include at-media(desktop) {
max-width: 500px;
}
}
.padding-y-0 {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
}

.usa-header--basic {
.usa-logo__text {
color: color('primary-darker');
}
.usa-nav__username {
padding: units(1) units(2);
@include at-media(desktop) {
padding: units(2);
}
}
.usa-nav__primary {
margin-top:units(1);
}
@include at-media(desktop) {
.usa-nav__primary-item:not(:first-child) {
position: relative;
}
.usa-nav__primary-item:not(:first-child)::before {
content: '';
position: absolute;
top: 50%;
left: 0;
width: 0; /* No width since it's a border */
height: 40%;
border-left: solid 1px color('base-light');
transform: translateY(-50%);
}
}
}

.usa-header--extended {
@include at-media(desktop) {
background-color: color('primary-darker');
border-top: solid 1px color('base-light');
border-bottom: solid 1px color('base-lighter');

.usa-logo__text a,
.usa-logo__text button,
.usa-logo__text button:hover {
color: color('white');
}
.usa-nav {
background-color: color('primary-lightest');
}
.usa-nav__primary-item:last-child {
margin-left: auto;
.usa-nav-link {
margin-right: units(-2);
}
}
.usa-nav__primary {
.usa-nav-link,
.usa-nav-link:hover,
.usa-nav-link:active {
color: color('primary');
font-weight: font-weight('normal');
font-size: 16px;
}
.usa-current,
.usa-current:hover,
.usa-current:active {
font-weight: font-weight('bold');
}
}
.usa-nav__secondary {
// I don't know why USWDS has this at 2 rem, which puts it out of alignment
right: 3rem;
color: color('white');
bottom: 4.3rem;
.usa-nav-link,
.usa-nav-link:hover,
.usa-nav-link:active {
font-weight: font-weight('bold');
color: color('primary-lighter');
font-size: 16px;
}
}
> .usa-navbar {
// This is a dangerous override to USWDS, necessary because we have a tooltip on the logo
overflow: visible;
}
}
}
9 changes: 9 additions & 0 deletions src/registrar/assets/sass/_theme/_identifier.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
@use "uswds-core" as *;

.usa-banner {
background-color: color('primary-darker');
}

.usa-identifier__logo {
height: units(7);
}
Loading

0 comments on commit 0c8f0b4

Please sign in to comment.