mirror of
https://github.com/cisagov/manage.get.gov.git
synced 2025-08-11 20:19:38 +02:00
scss refactor, DS record layout, WIP add new ds record js
This commit is contained in:
Rachid Mrad
parent
99f272cd21
commit
4399aa058c
16 changed files with 537 additions and 481 deletions
|
|
@ -236,14 +236,15 @@ function handleValidationClick(e) {
|
||||||
* Only does something on a single page, but it should be fast enough to run
|
* Only does something on a single page, but it should be fast enough to run
|
||||||
* it everywhere.
|
* it everywhere.
|
||||||
*/
|
*/
|
||||||
(function prepareForms() {
|
(function prepareNameserverForms() {
|
||||||
let serverForm = document.querySelectorAll(".server-form")
|
let serverForm = document.querySelectorAll(".server-form")
|
||||||
let container = document.querySelector("#form-container")
|
let container = document.querySelector("#form-container")
|
||||||
let addButton = document.querySelector("#add-form")
|
let addButton = document.querySelector("#add-form")
|
||||||
let totalForms = document.querySelector("#id_form-TOTAL_FORMS")
|
let totalForms = document.querySelector("#id_form-TOTAL_FORMS")
|
||||||
|
|
||||||
let formNum = serverForm.length-1
|
let formNum = serverForm.length-1
|
||||||
addButton.addEventListener('click', addForm)
|
if (addButton)
|
||||||
|
addButton.addEventListener('click', addForm)
|
||||||
|
|
||||||
function addForm(e){
|
function addForm(e){
|
||||||
let newForm = serverForm[2].cloneNode(true)
|
let newForm = serverForm[2].cloneNode(true)
|
||||||
|
|
@ -261,3 +262,38 @@ function handleValidationClick(e) {
|
||||||
totalForms.setAttribute('value', `${formNum+1}`)
|
totalForms.setAttribute('value', `${formNum+1}`)
|
||||||
}
|
}
|
||||||
})();
|
})();
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* An IIFE that attaches a click handler for our dynamic DNSSEC forms
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
(function prepareDNSSECForms() {
|
||||||
|
let serverForm2 = document.querySelectorAll(".ds-record")
|
||||||
|
let container = document.querySelector("#form-container")
|
||||||
|
let addButton = document.querySelector("#add-form2")
|
||||||
|
let totalForms = document.querySelector("#id_form-TOTAL_FORMS")
|
||||||
|
|
||||||
|
let formNum = serverForm2.length-1
|
||||||
|
if (addButton) {
|
||||||
|
console.log('add button exists')
|
||||||
|
addButton.addEventListener('click', addForm)
|
||||||
|
}
|
||||||
|
|
||||||
|
function addForm(e){
|
||||||
|
console.log('add button clicked' + serverForm2)
|
||||||
|
let newForm = serverForm2[0].cloneNode(true)
|
||||||
|
let formNumberRegex = RegExp(`form-(\\d){1}-`,'g')
|
||||||
|
let formLabelRegex = RegExp(`DS Data record (\\d){1}`, 'g')
|
||||||
|
// let formExampleRegex = RegExp(`ns(\\d){1}`, 'g')
|
||||||
|
|
||||||
|
formNum++
|
||||||
|
newForm.innerHTML = newForm.innerHTML.replace(formNumberRegex, `form-${formNum}-`)
|
||||||
|
newForm.innerHTML = newForm.innerHTML.replace(formLabelRegex, `DS Data Record ${formNum+1}`)
|
||||||
|
// newForm.innerHTML = newForm.innerHTML.replace(formExampleRegex, `ns${formNum+1}`)
|
||||||
|
container.insertBefore(newForm, addButton)
|
||||||
|
newForm.querySelector("input").value = ""
|
||||||
|
|
||||||
|
totalForms.setAttribute('value', `${formNum+1}`)
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
|
|
||||||
17
src/registrar/assets/sass/_theme/_alerts.scss
Normal file
17
src/registrar/assets/sass/_theme/_alerts.scss
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
// Fixes some font size disparities with the Figma
|
||||||
|
// for usa-alert alert elements
|
||||||
|
.usa-alert {
|
||||||
|
.usa-alert__heading.larger-font-sizing {
|
||||||
|
font-size: units(3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// The icon was off center for some reason
|
||||||
|
// Fixes that issue
|
||||||
|
@media (min-width: 64em){
|
||||||
|
.usa-alert--warning{
|
||||||
|
.usa-alert__body::before {
|
||||||
|
left: 1rem !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
105
src/registrar/assets/sass/_theme/_base.scss
Normal file
105
src/registrar/assets/sass/_theme/_base.scss
Normal file
|
|
@ -0,0 +1,105 @@
|
||||||
|
@use "uswds-core" as *;
|
||||||
|
|
||||||
|
/* Styles for making visible to screen reader / AT users only. */
|
||||||
|
.sr-only {
|
||||||
|
@include sr-only;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
#wrapper {
|
||||||
|
flex-grow: 1;
|
||||||
|
padding-top: units(3);
|
||||||
|
padding-bottom: units(6) * 2 ; //Workaround because USWDS units jump from 10 to 15
|
||||||
|
}
|
||||||
|
|
||||||
|
#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');
|
||||||
|
}
|
||||||
|
|
||||||
|
.usa-nav__primary {
|
||||||
|
margin-top: units(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section--outlined {
|
||||||
|
background-color: color('white');
|
||||||
|
border: 1px solid color('base-lighter');
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 0 units(2) units(3);
|
||||||
|
margin-top: units(3);
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
color: color('primary-dark');
|
||||||
|
margin-top: units(2);
|
||||||
|
margin-bottom: units(2);
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include at-media(mobile-lg) {
|
||||||
|
margin-top: units(5);
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.break-word {
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dotgov-status-box {
|
||||||
|
background-color: color('primary-lightest');
|
||||||
|
border-color: color('accent-cool-lighter');
|
||||||
|
}
|
||||||
|
|
||||||
|
.dotgov-status-box--action-need {
|
||||||
|
background-color: color('warning-lighter');
|
||||||
|
border-color: color('warning');
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
border-top: 1px solid color('primary-darker');
|
||||||
|
}
|
||||||
|
|
||||||
|
.usa-footer__secondary-section {
|
||||||
|
background-color: color('primary-lightest');
|
||||||
|
}
|
||||||
|
|
||||||
|
.usa-footer__secondary-section a {
|
||||||
|
color: color('primary');
|
||||||
|
}
|
||||||
|
|
||||||
|
.usa-identifier__logo {
|
||||||
|
height: units(7);
|
||||||
|
}
|
||||||
|
|
||||||
|
abbr[title] {
|
||||||
|
// workaround for underlining abbr element
|
||||||
|
border-bottom: none;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
73
src/registrar/assets/sass/_theme/_buttons.scss
Normal file
73
src/registrar/assets/sass/_theme/_buttons.scss
Normal file
|
|
@ -0,0 +1,73 @@
|
||||||
|
@use "uswds-core" as *;
|
||||||
|
|
||||||
|
/* Make "placeholder" links visually obvious */
|
||||||
|
a[href$="todo"]::after {
|
||||||
|
background-color: yellow;
|
||||||
|
color: color(blue-80v);
|
||||||
|
content: " [link TBD]";
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.breadcrumb__back {
|
||||||
|
display:flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: units(2.5);
|
||||||
|
&:visited {
|
||||||
|
color: color('primary');
|
||||||
|
}
|
||||||
|
|
||||||
|
@include at-media('tablet') {
|
||||||
|
//align to top of sidebar
|
||||||
|
margin-top: units(-0.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
a.withdraw {
|
||||||
|
background-color: color('error');
|
||||||
|
}
|
||||||
|
|
||||||
|
a.withdraw_outline,
|
||||||
|
a.withdraw_outline:visited {
|
||||||
|
box-shadow: inset 0 0 0 2px color('error');
|
||||||
|
color: color('error');
|
||||||
|
}
|
||||||
|
|
||||||
|
a.withdraw_outline:hover,
|
||||||
|
a.withdraw_outline:focus {
|
||||||
|
box-shadow: inset 0 0 0 2px color('error-dark');
|
||||||
|
color: color('error-dark');
|
||||||
|
}
|
||||||
|
|
||||||
|
a.withdraw_outline:active {
|
||||||
|
box-shadow: inset 0 0 0 2px color('error-darker');
|
||||||
|
color: color('error-darker');
|
||||||
|
}
|
||||||
|
|
||||||
|
a.withdraw:hover,
|
||||||
|
a.withdraw:focus {
|
||||||
|
background-color: color('error-dark');
|
||||||
|
}
|
||||||
|
|
||||||
|
a.withdraw:active {
|
||||||
|
background-color: color('error-darker');
|
||||||
|
}
|
||||||
|
|
||||||
|
.usa-button--unstyled .usa-icon {
|
||||||
|
vertical-align: bottom;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.usa-button--unstyled:visited {
|
||||||
|
color: color('primary');
|
||||||
|
}
|
||||||
|
|
||||||
|
.dotgov-button--green {
|
||||||
|
background-color: color('success-dark');
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: color('success-darker');
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background-color: color('green-80v');
|
||||||
|
}
|
||||||
|
}
|
||||||
11
src/registrar/assets/sass/_theme/_fieldsets.scss
Normal file
11
src/registrar/assets/sass/_theme/_fieldsets.scss
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
@use "uswds-core" as *;
|
||||||
|
|
||||||
|
fieldset {
|
||||||
|
border: solid 1px color('base-lighter');
|
||||||
|
padding: units(3);
|
||||||
|
}
|
||||||
|
|
||||||
|
fieldset legend {
|
||||||
|
font-weight: font-weight('bold');
|
||||||
|
color: color('primary')
|
||||||
|
}
|
||||||
15
src/registrar/assets/sass/_theme/_forms.scss
Normal file
15
src/registrar/assets/sass/_theme/_forms.scss
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
@use "uswds-core" as *;
|
||||||
|
|
||||||
|
.usa-form .usa-button {
|
||||||
|
margin-top: units(3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.usa-form--extra-large {
|
||||||
|
max-width: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.usa-textarea {
|
||||||
|
@include at-media('tablet') {
|
||||||
|
height: units('mobile');
|
||||||
|
}
|
||||||
|
}
|
||||||
80
src/registrar/assets/sass/_theme/_register-form.scss
Normal file
80
src/registrar/assets/sass/_theme/_register-form.scss
Normal file
|
|
@ -0,0 +1,80 @@
|
||||||
|
@use "uswds-core" as *;
|
||||||
|
@use "typography" as *;
|
||||||
|
|
||||||
|
.register-form-step > h1 {
|
||||||
|
//align to top of sidebar on first page of the form
|
||||||
|
margin-top: units(-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
//Tighter spacing when H2 is immediatly after H1
|
||||||
|
.register-form-step .usa-fieldset:first-of-type h2:first-of-type,
|
||||||
|
.register-form-step h1 + h2 {
|
||||||
|
margin-top: units(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.register-form-step h3 {
|
||||||
|
color: color('primary-dark');
|
||||||
|
letter-spacing: $letter-space--xs;
|
||||||
|
margin-top: units(3);
|
||||||
|
margin-bottom: 0;
|
||||||
|
|
||||||
|
+ p {
|
||||||
|
margin-top: units(0.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.register-form-step h4 {
|
||||||
|
margin-bottom: 0;
|
||||||
|
|
||||||
|
+ p {
|
||||||
|
margin-top: units(0.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.register-form-step a {
|
||||||
|
color: color('primary');
|
||||||
|
|
||||||
|
&:visited {
|
||||||
|
color: color('violet-70v'); //USWDS default
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.register-form-step .usa-form-group:first-of-type,
|
||||||
|
.register-form-step .usa-label:first-of-type {
|
||||||
|
margin-top: units(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ao_example p {
|
||||||
|
margin-top: units(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.domain_example {
|
||||||
|
p {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.usa-list {
|
||||||
|
margin-top: units(0.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.review__step {
|
||||||
|
margin-top: units(3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-item hr,
|
||||||
|
.review__step hr {
|
||||||
|
border: none; //reset
|
||||||
|
border-top: 1px solid color('primary-dark');
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: units(0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.review__step__title a:visited {
|
||||||
|
color: color('primary');
|
||||||
|
}
|
||||||
|
|
||||||
|
.review__step__name {
|
||||||
|
color: color('primary-dark');
|
||||||
|
font-weight: font-weight('semibold');
|
||||||
|
margin-bottom: units(0.5);
|
||||||
|
}
|
||||||
30
src/registrar/assets/sass/_theme/_sidenav.scss
Normal file
30
src/registrar/assets/sass/_theme/_sidenav.scss
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
@use "uswds-core" as *;
|
||||||
|
|
||||||
|
.usa-sidenav {
|
||||||
|
.usa-sidenav__item {
|
||||||
|
span {
|
||||||
|
a.link_usa-checked {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidenav__step--locked {
|
||||||
|
color: color('base-darker');
|
||||||
|
span {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
padding: units(1);
|
||||||
|
|
||||||
|
.usa-icon {
|
||||||
|
flex-shrink: 0;
|
||||||
|
//align lock body to x-height
|
||||||
|
margin: units('2px') units(1) 0 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.stepnav {
|
||||||
|
margin-top: units(2);
|
||||||
|
}
|
||||||
93
src/registrar/assets/sass/_theme/_tables.scss
Normal file
93
src/registrar/assets/sass/_theme/_tables.scss
Normal file
|
|
@ -0,0 +1,93 @@
|
||||||
|
@use "uswds-core" as *;
|
||||||
|
|
||||||
|
.dotgov-table--stacked {
|
||||||
|
td, th {
|
||||||
|
padding: units(1) units(2) units(2px) 0;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr:first-child th:first-child {
|
||||||
|
border-top: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr {
|
||||||
|
border-bottom: none;
|
||||||
|
border-top: 2px solid color('base-light');
|
||||||
|
margin-top: units(2);
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
td[data-label]:before,
|
||||||
|
th[data-label]:before {
|
||||||
|
color: color('primary-darker');
|
||||||
|
padding-bottom: units(2px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dotgov-table {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
a {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
color: color('primary');
|
||||||
|
|
||||||
|
&:visited {
|
||||||
|
color: color('primary');
|
||||||
|
}
|
||||||
|
|
||||||
|
.usa-icon {
|
||||||
|
// align icon with x height
|
||||||
|
margin-top: units(0.5);
|
||||||
|
margin-right: units(0.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
th[data-sortable]:not([aria-sort]) .usa-table__header__button {
|
||||||
|
right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
tbody th {
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include at-media(mobile-lg) {
|
||||||
|
|
||||||
|
margin-top: units(1);
|
||||||
|
|
||||||
|
tr {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
td, th {
|
||||||
|
border-bottom: 1px solid color('base-light');
|
||||||
|
}
|
||||||
|
|
||||||
|
thead th {
|
||||||
|
color: color('primary-darker');
|
||||||
|
border-bottom: 2px solid color('base-light');
|
||||||
|
}
|
||||||
|
|
||||||
|
tbody tr:last-of-type {
|
||||||
|
td, th {
|
||||||
|
border-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
td, th,
|
||||||
|
.usa-tabel th{
|
||||||
|
padding: units(2) units(2) units(2) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
th:first-of-type {
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
thead tr:first-child th:first-child {
|
||||||
|
border-top: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
24
src/registrar/assets/sass/_theme/_typography.scss
Normal file
24
src/registrar/assets/sass/_theme/_typography.scss
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
@use "uswds-core" as *;
|
||||||
|
|
||||||
|
// Finer grained letterspacing adjustments
|
||||||
|
$letter-space--xs: .0125em;
|
||||||
|
|
||||||
|
p,
|
||||||
|
address,
|
||||||
|
.usa-list li {
|
||||||
|
@include typeset('sans', 'sm', 5);
|
||||||
|
max-width: measure(5);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
@include typeset('sans', '2xl', 2);
|
||||||
|
margin: 0 0 units(2);
|
||||||
|
color: color('primary-darker');
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-weight: font-weight('semibold');
|
||||||
|
line-height: line-height('heading', 3);
|
||||||
|
margin: units(4) 0 units(1);
|
||||||
|
color: color('primary-darker');
|
||||||
|
}
|
||||||
|
|
@ -1,457 +0,0 @@
|
||||||
/*
|
|
||||||
* * * * * ==============================
|
|
||||||
* * * * * ==============================
|
|
||||||
* * * * * ==============================
|
|
||||||
* * * * * ==============================
|
|
||||||
========================================
|
|
||||||
========================================
|
|
||||||
========================================
|
|
||||||
----------------------------------------
|
|
||||||
USWDS THEME CUSTOM STYLES
|
|
||||||
----------------------------------------
|
|
||||||
!! Copy this file to your project's
|
|
||||||
sass root. Don't edit the version
|
|
||||||
in node_modules.
|
|
||||||
----------------------------------------
|
|
||||||
Custom project SASS goes here.
|
|
||||||
|
|
||||||
i.e.
|
|
||||||
@include u-padding-right('05');
|
|
||||||
----------------------------------------
|
|
||||||
*/
|
|
||||||
|
|
||||||
// Finer grained letterspacing adjustments
|
|
||||||
$letter-space--xs: .0125em;
|
|
||||||
|
|
||||||
@use "uswds-core" as *;
|
|
||||||
|
|
||||||
/* Styles for making visible to screen reader / AT users only. */
|
|
||||||
.sr-only {
|
|
||||||
@include sr-only;
|
|
||||||
}
|
|
||||||
|
|
||||||
* {
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
min-height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
#wrapper {
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.usa-logo {
|
|
||||||
@include at-media(desktop) {
|
|
||||||
margin-top: units(2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.usa-logo__text {
|
|
||||||
@include typeset('sans', 'xl', 2);
|
|
||||||
color: color('primary-darker');
|
|
||||||
}
|
|
||||||
|
|
||||||
.usa-nav__primary {
|
|
||||||
margin-top: units(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
p,
|
|
||||||
address,
|
|
||||||
.usa-list li {
|
|
||||||
@include typeset('sans', 'sm', 5);
|
|
||||||
max-width: measure(5);
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
@include typeset('sans', '2xl', 2);
|
|
||||||
margin: 0 0 units(2);
|
|
||||||
color: color('primary-darker');
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
font-weight: font-weight('semibold');
|
|
||||||
line-height: line-height('heading', 3);
|
|
||||||
margin: units(4) 0 units(1);
|
|
||||||
color: color('primary-darker');
|
|
||||||
}
|
|
||||||
|
|
||||||
.register-form-step > h1 {
|
|
||||||
//align to top of sidebar on first page of the form
|
|
||||||
margin-top: units(-1);
|
|
||||||
}
|
|
||||||
|
|
||||||
//Tighter spacing when H2 is immediatly after H1
|
|
||||||
.register-form-step .usa-fieldset:first-of-type h2:first-of-type,
|
|
||||||
.register-form-step h1 + h2 {
|
|
||||||
margin-top: units(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.register-form-step h3 {
|
|
||||||
color: color('primary-dark');
|
|
||||||
letter-spacing: $letter-space--xs;
|
|
||||||
margin-top: units(3);
|
|
||||||
margin-bottom: 0;
|
|
||||||
|
|
||||||
+ p {
|
|
||||||
margin-top: units(0.5);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.register-form-step h4 {
|
|
||||||
margin-bottom: 0;
|
|
||||||
|
|
||||||
+ p {
|
|
||||||
margin-top: units(0.5);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.register-form-step a {
|
|
||||||
color: color('primary');
|
|
||||||
|
|
||||||
&:visited {
|
|
||||||
color: color('violet-70v'); //USWDS default
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.register-form-step .usa-form-group:first-of-type,
|
|
||||||
.register-form-step .usa-label:first-of-type {
|
|
||||||
margin-top: units(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Make "placeholder" links visually obvious */
|
|
||||||
a[href$="todo"]::after {
|
|
||||||
background-color: yellow;
|
|
||||||
color: color(blue-80v);
|
|
||||||
content: " [link TBD]";
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
a.breadcrumb__back {
|
|
||||||
display:flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: units(2.5);
|
|
||||||
&:visited {
|
|
||||||
color: color('primary');
|
|
||||||
}
|
|
||||||
|
|
||||||
@include at-media('tablet') {
|
|
||||||
//align to top of sidebar
|
|
||||||
margin-top: units(-0.5);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
a.withdraw {
|
|
||||||
background-color: color('error');
|
|
||||||
}
|
|
||||||
|
|
||||||
a.withdraw_outline,
|
|
||||||
a.withdraw_outline:visited {
|
|
||||||
box-shadow: inset 0 0 0 2px color('error');
|
|
||||||
color: color('error');
|
|
||||||
}
|
|
||||||
|
|
||||||
a.withdraw_outline:hover,
|
|
||||||
a.withdraw_outline:focus {
|
|
||||||
box-shadow: inset 0 0 0 2px color('error-dark');
|
|
||||||
color: color('error-dark');
|
|
||||||
}
|
|
||||||
|
|
||||||
a.withdraw_outline:active {
|
|
||||||
box-shadow: inset 0 0 0 2px color('error-darker');
|
|
||||||
color: color('error-darker');
|
|
||||||
}
|
|
||||||
a.withdraw:hover,
|
|
||||||
a.withdraw:focus {
|
|
||||||
background-color: color('error-dark');
|
|
||||||
}
|
|
||||||
|
|
||||||
a.withdraw:active {
|
|
||||||
background-color: color('error-darker');
|
|
||||||
}
|
|
||||||
|
|
||||||
.usa-sidenav {
|
|
||||||
.usa-sidenav__item {
|
|
||||||
span {
|
|
||||||
a.link_usa-checked {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidenav__step--locked {
|
|
||||||
color: color('base-darker');
|
|
||||||
span {
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
padding: units(1);
|
|
||||||
|
|
||||||
.usa-icon {
|
|
||||||
flex-shrink: 0;
|
|
||||||
//align lock body to x-height
|
|
||||||
margin: units('2px') units(1) 0 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.stepnav {
|
|
||||||
margin-top: units(2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.ao_example p {
|
|
||||||
margin-top: units(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.domain_example {
|
|
||||||
p {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.usa-list {
|
|
||||||
margin-top: units(0.5);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.review__step {
|
|
||||||
margin-top: units(3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.summary-item hr,
|
|
||||||
.review__step hr {
|
|
||||||
border: none; //reset
|
|
||||||
border-top: 1px solid color('primary-dark');
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: units(0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.review__step__title a:visited {
|
|
||||||
color: color('primary');
|
|
||||||
}
|
|
||||||
|
|
||||||
.review__step__name {
|
|
||||||
color: color('primary-dark');
|
|
||||||
font-weight: font-weight('semibold');
|
|
||||||
margin-bottom: units(0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.usa-form .usa-button {
|
|
||||||
margin-top: units(3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.usa-button--unstyled .usa-icon {
|
|
||||||
vertical-align: bottom;
|
|
||||||
}
|
|
||||||
|
|
||||||
a.usa-button--unstyled:visited {
|
|
||||||
color: color('primary');
|
|
||||||
}
|
|
||||||
|
|
||||||
.dotgov-button--green {
|
|
||||||
background-color: color('success-dark');
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: color('success-darker');
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active {
|
|
||||||
background-color: color('green-80v');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** ---- DASHBOARD ---- */
|
|
||||||
|
|
||||||
#wrapper.dashboard {
|
|
||||||
background-color: color('primary-lightest');
|
|
||||||
padding-top: units(5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.section--outlined {
|
|
||||||
background-color: color('white');
|
|
||||||
border: 1px solid color('base-lighter');
|
|
||||||
border-radius: 4px;
|
|
||||||
padding: 0 units(2) units(3);
|
|
||||||
margin-top: units(3);
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
color: color('primary-dark');
|
|
||||||
margin-top: units(2);
|
|
||||||
margin-bottom: units(2);
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include at-media(mobile-lg) {
|
|
||||||
margin-top: units(5);
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.dotgov-table--stacked {
|
|
||||||
td, th {
|
|
||||||
padding: units(1) units(2) units(2px) 0;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
tr:first-child th:first-child {
|
|
||||||
border-top: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
tr {
|
|
||||||
border-bottom: none;
|
|
||||||
border-top: 2px solid color('base-light');
|
|
||||||
margin-top: units(2);
|
|
||||||
|
|
||||||
&:first-child {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
td[data-label]:before,
|
|
||||||
th[data-label]:before {
|
|
||||||
color: color('primary-darker');
|
|
||||||
padding-bottom: units(2px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.dotgov-table {
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
a {
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
color: color('primary');
|
|
||||||
|
|
||||||
&:visited {
|
|
||||||
color: color('primary');
|
|
||||||
}
|
|
||||||
|
|
||||||
.usa-icon {
|
|
||||||
// align icon with x height
|
|
||||||
margin-top: units(0.5);
|
|
||||||
margin-right: units(0.5);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
th[data-sortable]:not([aria-sort]) .usa-table__header__button {
|
|
||||||
right: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
tbody th {
|
|
||||||
word-break: break-word;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
@include at-media(mobile-lg) {
|
|
||||||
|
|
||||||
margin-top: units(1);
|
|
||||||
|
|
||||||
tr {
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
td, th {
|
|
||||||
border-bottom: 1px solid color('base-light');
|
|
||||||
}
|
|
||||||
|
|
||||||
thead th {
|
|
||||||
color: color('primary-darker');
|
|
||||||
border-bottom: 2px solid color('base-light');
|
|
||||||
}
|
|
||||||
|
|
||||||
tbody tr:last-of-type {
|
|
||||||
td, th {
|
|
||||||
border-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
td, th,
|
|
||||||
.usa-tabel th{
|
|
||||||
padding: units(2) units(2) units(2) 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
th:first-of-type {
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
thead tr:first-child th:first-child {
|
|
||||||
border-top: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.break-word {
|
|
||||||
word-break: break-word;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dotgov-status-box {
|
|
||||||
background-color: color('primary-lightest');
|
|
||||||
border-color: color('accent-cool-lighter');
|
|
||||||
}
|
|
||||||
|
|
||||||
.dotgov-status-box--action-need {
|
|
||||||
background-color: color('warning-lighter');
|
|
||||||
border-color: color('warning');
|
|
||||||
}
|
|
||||||
|
|
||||||
#wrapper {
|
|
||||||
padding-top: units(3);
|
|
||||||
padding-bottom: units(6) * 2 ; //Workaround because USWDS units jump from 10 to 15
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
footer {
|
|
||||||
border-top: 1px solid color('primary-darker');
|
|
||||||
}
|
|
||||||
|
|
||||||
.usa-footer__secondary-section {
|
|
||||||
background-color: color('primary-lightest');
|
|
||||||
}
|
|
||||||
|
|
||||||
.usa-footer__secondary-section a {
|
|
||||||
color: color('primary');
|
|
||||||
}
|
|
||||||
|
|
||||||
.usa-identifier__logo {
|
|
||||||
height: units(7);
|
|
||||||
}
|
|
||||||
|
|
||||||
abbr[title] {
|
|
||||||
// workaround for underlining abbr element
|
|
||||||
border-bottom: none;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.usa-textarea {
|
|
||||||
@include at-media('tablet') {
|
|
||||||
height: units('mobile');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Fixes some font size disparities with the Figma
|
|
||||||
// for usa-alert alert elements
|
|
||||||
.usa-alert {
|
|
||||||
.usa-alert__heading.larger-font-sizing {
|
|
||||||
font-size: units(3);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// The icon was off center for some reason
|
|
||||||
// Fixes that issue
|
|
||||||
@media (min-width: 64em){
|
|
||||||
.usa-alert--warning{
|
|
||||||
.usa-alert__body::before {
|
|
||||||
left: 1rem !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -8,7 +8,15 @@
|
||||||
|
|
||||||
/*--------------------------------------------------
|
/*--------------------------------------------------
|
||||||
--- Custom Styles ---------------------------------*/
|
--- Custom Styles ---------------------------------*/
|
||||||
@forward "uswds-theme-custom-styles";
|
@forward "base";
|
||||||
|
@forward "typography";
|
||||||
|
@forward "buttons";
|
||||||
|
@forward "forms";
|
||||||
|
@forward "fieldsets";
|
||||||
|
@forward "alerts";
|
||||||
|
@forward "tables";
|
||||||
|
@forward "sidenav";
|
||||||
|
@forward "register-form";
|
||||||
|
|
||||||
/*--------------------------------------------------
|
/*--------------------------------------------------
|
||||||
--- Admin ---------------------------------*/
|
--- Admin ---------------------------------*/
|
||||||
|
|
|
||||||
|
|
@ -6,4 +6,5 @@ from .domain import (
|
||||||
DomainOrgNameAddressForm,
|
DomainOrgNameAddressForm,
|
||||||
ContactForm,
|
ContactForm,
|
||||||
DomainDsdataFormset,
|
DomainDsdataFormset,
|
||||||
|
DomainDsdataForm,
|
||||||
)
|
)
|
||||||
|
|
|
||||||
|
|
@ -209,6 +209,11 @@ class DomainDsdataForm(forms.Form):
|
||||||
# )
|
# )
|
||||||
# ],
|
# ],
|
||||||
)
|
)
|
||||||
|
|
||||||
|
delete = forms.BooleanField(
|
||||||
|
required=False,
|
||||||
|
label="Delete",
|
||||||
|
)
|
||||||
|
|
||||||
# TODO: Conditional DS Key Data fields
|
# TODO: Conditional DS Key Data fields
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -9,28 +9,42 @@
|
||||||
|
|
||||||
{% include "includes/required_fields.html" %}
|
{% include "includes/required_fields.html" %}
|
||||||
|
|
||||||
<form class="usa-form usa-form--large" method="post" novalidate id="form-container">
|
<form class="usa-form usa-form--extra-large" method="post" novalidate id="form-container">
|
||||||
{% csrf_token %}
|
{% csrf_token %}
|
||||||
{{ formset.management_form }}
|
{{ formset.management_form }}
|
||||||
|
|
||||||
{% for form in formset %}
|
{% for form in formset %}
|
||||||
<div class="server-form">
|
<fieldset class="ds-record">
|
||||||
{% with attr_required=True %}
|
|
||||||
{% input_with_errors form.key_tag %}
|
<legend>DS Data record {{forloop.counter}}</legend>
|
||||||
{% endwith %}
|
|
||||||
{% with attr_required=True %}
|
<div class="grid-row grid-gap-2">
|
||||||
{% input_with_errors form.algorithm %}
|
<div class="tablet:grid-col-4">
|
||||||
{% endwith %}
|
{% with attr_required=True %}
|
||||||
{% with attr_required=True %}
|
{% input_with_errors form.key_tag %}
|
||||||
{% input_with_errors form.digest_type %}
|
{% endwith %}
|
||||||
{% endwith %}
|
</div>
|
||||||
{% with attr_required=True %}
|
<div class="tablet:grid-col-4">
|
||||||
{% input_with_errors form.digest %}
|
{% with attr_required=True %}
|
||||||
{% endwith %}
|
{% input_with_errors form.algorithm %}
|
||||||
</div>
|
{% endwith %}
|
||||||
|
</div>
|
||||||
|
<div class="tablet:grid-col-4">
|
||||||
|
{% with attr_required=True %}
|
||||||
|
{% input_with_errors form.digest_type %}
|
||||||
|
{% endwith %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% with attr_required=True %}
|
||||||
|
{% input_with_errors form.digest %}
|
||||||
|
{% endwith %}
|
||||||
|
|
||||||
|
{% comment %} {% input_with_errors form.delete_checkbox %} {% endcomment %}
|
||||||
|
|
||||||
|
</fieldset>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
|
||||||
<button type="button" class="usa-button usa-button--unstyled display-block" id="add-form">
|
<button type="button" class="usa-button usa-button--unstyled display-block" id="add-form2">
|
||||||
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24" height="24">
|
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24" height="24">
|
||||||
<use xlink:href="{%static 'img/sprite.svg'%}#add_circle"></use>
|
<use xlink:href="{%static 'img/sprite.svg'%}#add_circle"></use>
|
||||||
</svg><span class="margin-left-05">Add new record</span>
|
</svg><span class="margin-left-05">Add new record</span>
|
||||||
|
|
|
||||||
|
|
@ -29,6 +29,7 @@ from ..forms import (
|
||||||
DomainSecurityEmailForm,
|
DomainSecurityEmailForm,
|
||||||
NameserverFormset,
|
NameserverFormset,
|
||||||
DomainDsdataFormset,
|
DomainDsdataFormset,
|
||||||
|
DomainDsdataForm,
|
||||||
)
|
)
|
||||||
|
|
||||||
from epplibwrapper import (
|
from epplibwrapper import (
|
||||||
|
|
@ -241,6 +242,7 @@ class DomainDsdataView(DomainPermissionView, FormMixin):
|
||||||
|
|
||||||
template_name = "domain_dsdata.html"
|
template_name = "domain_dsdata.html"
|
||||||
form_class = DomainDsdataFormset
|
form_class = DomainDsdataFormset
|
||||||
|
|
||||||
|
|
||||||
def get_initial(self):
|
def get_initial(self):
|
||||||
"""The initial value for the form (which is a formset here)."""
|
"""The initial value for the form (which is a formset here)."""
|
||||||
|
|
@ -256,13 +258,12 @@ class DomainDsdataView(DomainPermissionView, FormMixin):
|
||||||
|
|
||||||
if dnssecdata.dsData is not None:
|
if dnssecdata.dsData is not None:
|
||||||
# Add existing nameservers as initial data
|
# Add existing nameservers as initial data
|
||||||
# TODO: create context for each element in the record
|
|
||||||
# key_tag
|
|
||||||
# algorithm
|
|
||||||
# digest_type
|
|
||||||
# digest
|
|
||||||
initial_data.extend({"key_tag": record.keyTag, "algorithm": record.alg, "digest_type": record.digestType, "digest": record.digest} for record in dnssecdata.dsData)
|
initial_data.extend({"key_tag": record.keyTag, "algorithm": record.alg, "digest_type": record.digestType, "digest": record.digest} for record in dnssecdata.dsData)
|
||||||
|
|
||||||
|
# form = DomainDsdataForm()
|
||||||
|
# delete_checkbox = form.fields['delete']
|
||||||
|
# initial_data.extend({delete_checkbox: delete_checkbox})
|
||||||
|
|
||||||
return initial_data
|
return initial_data
|
||||||
|
|
||||||
def get_success_url(self):
|
def get_success_url(self):
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue