UI tweaks

This commit is contained in:
Rachid Mrad 2025-03-19 13:12:30 -04:00
parent 22dd563d61
commit 2739a9b59b
No known key found for this signature in database
4 changed files with 15 additions and 7 deletions

View file

@ -79,6 +79,10 @@ body {
} }
} }
.section-outlined--extra-padding {
padding: units(2) units(3) units(3);
}
.section-outlined--border-base-light { .section-outlined--border-base-light {
border: 1px solid color('base-light'); border: 1px solid color('base-light');
} }
@ -296,6 +300,10 @@ Fit-content itself does not work.
width: 40%; width: 40%;
} }
.width-100px {
width: 100px;
}
.minh-143px { .minh-143px {
min-height: 143px; min-height: 143px;
} }

View file

@ -7,7 +7,7 @@ th {
.dotgov-table--stacked { .dotgov-table--stacked {
td, th { td, th {
padding: units(1) units(2) units(2px) 0; padding: units(1) units(1) units(2px) 0;
border: none; border: none;
} }

View file

@ -71,7 +71,7 @@
{% if forloop.last %} {% if forloop.last %}
{% comment %}This section renders the Add DS data form.{% endcomment %} {% comment %}This section renders the Add DS data form.{% endcomment %}
<section class="add-dsdata-form display-none section-outlined"> <section class="add-dsdata-form display-none section-outlined section-outlined--extra-padding">
<h2 class="margin-top-0">Add DS record</h2> <h2 class="margin-top-0">Add DS record</h2>
<div class="repeatable-form"> <div class="repeatable-form">
<div class="grid-row grid-gap-2 flex-end"> <div class="grid-row grid-gap-2 flex-end">
@ -123,13 +123,13 @@
{% endif %} {% endif %}
{% endfor %} {% endfor %}
<div class="margin-top-4" tabindex="0" id="domains__table-wrapper"> <div class="usa-table-container--scrollable margin-top-4" tabindex="0">
<table class="usa-table usa-table--borderless usa-table--stacked dotgov-table dotgov-table--stacked" id="dsdata-table"> <table class="usa-table usa-table--borderless usa-table--stacked dotgov-table dotgov-table--stacked" id="dsdata-table">
<thead> <thead>
<tr> <tr>
<th scope="col" role="columnheader">Key tag</th> <th scope="col" role="columnheader">Key tag</th>
<th scope="col" role="columnheader">Algorithm</th> <th scope="col" role="columnheader">Algorithm</th>
<th scope="col" role="columnheader">Digest type</th> <th scope="col" role="columnheader" class="width-100px">Digest type</th>
<th scope="col" role="columnheader">Digest</th> <th scope="col" role="columnheader">Digest</th>
<th scope="col" role="columnheader" class="width-0 padding-right-0">Action</th> <th scope="col" role="columnheader" class="width-0 padding-right-0">Action</th>
</tr> </tr>
@ -276,7 +276,7 @@
<div class="add-dsdata-form display-none"> <div class="add-dsdata-form display-none">
{% include "includes/required_fields.html" %} {% include "includes/required_fields.html" %}
<section class="section-outlined"> <section class="section-outlined section-outlined--extra-padding">
<form class="usa-form usa-form--extra-large" method="post" novalidate> <form class="usa-form usa-form--extra-large" method="post" novalidate>
<h2>Add DS record</h2> <h2>Add DS record</h2>
{% csrf_token %} {% csrf_token %}

View file

@ -82,7 +82,7 @@
This section does not render if the last form has initial data (this occurs if 13 nameservers already exist) This section does not render if the last form has initial data (this occurs if 13 nameservers already exist)
{% endcomment %} {% endcomment %}
<section class="add-nameservers-form display-none section-outlined"> <section class="add-nameservers-form display-none section-outlined section-outlined--extra-padding">
{{ form.domain }} {{ form.domain }}
<h2>Add a name server</h2> <h2>Add a name server</h2>
<div class="repeatable-form"> <div class="repeatable-form">
@ -242,7 +242,7 @@
{% endcomment %} {% endcomment %}
<div class="add-nameservers-form display-none"> <div class="add-nameservers-form display-none">
{% include "includes/required_fields.html" %} {% include "includes/required_fields.html" %}
<section class="section-outlined"> <section class="section-outlined section-outlined--extra-padding">
<form class="usa-form usa-form--extra-large" method="post" novalidate> <form class="usa-form usa-form--extra-large" method="post" novalidate>
<h2>Add name servers</h2> <h2>Add name servers</h2>
{% csrf_token %} {% csrf_token %}