Styling
This commit is contained in:
leigh-mil
parent
d33fcb6073
commit
b653546768
@ -91,9 +91,23 @@
|
|||||||
margin-bottom: 8 * $gap;
|
margin-bottom: 8 * $gap;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
|
|
||||||
.usa-input {
|
.form-row {
|
||||||
margin: $gap * 2;
|
margin: $gap * 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.usa-alert {
|
||||||
|
margin: -0.5em 0;
|
||||||
|
padding: $gap;
|
||||||
|
background-image: unset;
|
||||||
|
|
||||||
|
&-body {
|
||||||
|
padding: 0;
|
||||||
|
width: 100%;
|
||||||
|
display: unset;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.usa-input {
|
||||||
&__title-inline {
|
&__title-inline {
|
||||||
font-weight: $font-bold;
|
font-weight: $font-bold;
|
||||||
}
|
}
|
||||||
@ -102,12 +116,28 @@
|
|||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.env-role__no-access {
|
&.env-role__no-access {
|
||||||
.usa-input__title-inline,
|
.usa-input__title-inline,
|
||||||
.usa-input__help {
|
.usa-input__help {
|
||||||
color: $color-gray;
|
color: $color-gray;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&__choices {
|
||||||
|
&.revoke-button label {
|
||||||
|
padding: 1rem 2rem;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.link {
|
||||||
|
color: $color-blue;
|
||||||
|
text-decoration: underline;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__head {
|
&__head {
|
||||||
@ -118,15 +148,69 @@
|
|||||||
margin: 0.5em 0;
|
margin: 0.5em 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-row {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.environment-name--gray {
|
.environment-role {
|
||||||
font-weight: $font-normal;
|
padding: ($gap * 2) 0;
|
||||||
color: $color-gray-medium;
|
|
||||||
|
h4 {
|
||||||
|
margin-bottom: $gap / 4;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__users {
|
||||||
|
background-color: $color-gray-lightest;
|
||||||
|
padding: ($gap * 1.2) ($gap * 0.6);
|
||||||
|
font-size: $small-font-size;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
.environment-role__user {
|
||||||
|
background-color: $color-white;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
padding: ($gap / 2) $gap;
|
||||||
|
border: solid 2px $color-blue;
|
||||||
|
margin: $gap;
|
||||||
|
white-space: nowrap;
|
||||||
|
width: 20rem;
|
||||||
|
position: relative;
|
||||||
|
height: 3.6rem;
|
||||||
|
|
||||||
|
&-field {
|
||||||
|
position: absolute;
|
||||||
|
background-color: $color-white;
|
||||||
|
margin-top: $gap * 2;
|
||||||
|
padding: $gap;
|
||||||
|
left: -0.1rem;
|
||||||
|
border: solid 1px $color-gray-light;
|
||||||
|
width: 20rem;
|
||||||
|
z-index: 3;
|
||||||
|
|
||||||
|
.usa-input {
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
li {
|
||||||
|
background-color: $color-white;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.unassigned {
|
||||||
|
border: solid 1px $color-gray-light;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-link {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.environment-role__no-user {
|
||||||
|
margin: $gap;
|
||||||
|
padding: ($gap / 2) $gap;
|
||||||
|
font-weight: $font-normal;
|
||||||
|
height: 3.6rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.application-list-item {
|
.application-list-item {
|
||||||
|
|||||||
@ -1,55 +1,87 @@
|
|||||||
|
{% from "components/alert.html" import Alert %}
|
||||||
{% from "components/checkbox_input.html" import CheckboxInput %}
|
{% from "components/checkbox_input.html" import CheckboxInput %}
|
||||||
{% from "components/text_input.html" import TextInput %}
|
{% from "components/text_input.html" import TextInput %}
|
||||||
{% from "components/phone_input.html" import PhoneInput %}
|
{% from "components/phone_input.html" import PhoneInput %}
|
||||||
|
|
||||||
{% macro EnvRoleInput(field, member_role_id=None) %}
|
{% macro EnvRoleInput(field, member_role_id=None) %}
|
||||||
{% set role = field.role.data if not field.deleted.data else "Access Suspended" %}
|
{% set role = field.role.data if not field.deleted.data else "Access Suspended" %}
|
||||||
<div class="form-row usa-input">
|
{% if field.role.data != "No Access" and not field.deleted.data -%}
|
||||||
<div class="form-col form-col--two-thirds">
|
<checkboxinput
|
||||||
<div class="{% if field.deleted.data or field.role.data == 'No Access' %}env-role__no-access{% endif %}">
|
name="'{{ field.deleted.name | string }}-{% if member_role_id %}-{{ member_role_id }}{% endif %}'"
|
||||||
<div v-bind:class='["usa-input__title-inline", {"environment-name--gray": value === "None" }]'>
|
inline-template
|
||||||
{{ field.environment_name.data }}
|
key="'{{ field.deleted.name | string }}-{% if member_role_id %}-{{ member_role_id }}{% endif %}'"
|
||||||
|
v-bind:initial-checked='{{ field.deleted.data|string|lower }}'
|
||||||
|
v-bind:optional="true"
|
||||||
|
>
|
||||||
|
<fieldset data-ally-disabled="true" v-on:change="onInput" class="usa-input__choices revoke-button">
|
||||||
|
{% set id = "{}-{}".format(field.deleted.name, member_role_id) %}
|
||||||
|
<div class="form-row" v-if="!isChecked">
|
||||||
|
<div class="form-col form-col--two-thirds">
|
||||||
|
<div class="usa-input__title-inline">
|
||||||
|
{{ field.environment_name.data }}
|
||||||
|
</div>
|
||||||
|
<p class="usa-input__help">
|
||||||
|
{{ role }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="form-col form-col--third">
|
||||||
|
{{ field.deleted(id=id, checked=True, **{"v-model": "isChecked"}) }}
|
||||||
|
{{ field.deleted.label(for=id, class="usa-button button-danger-outline") | safe }}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p class="usa-input__help">
|
<div v-else>
|
||||||
{{ role }}
|
{% call Alert(level='warning') %}
|
||||||
</p>
|
<div class="form-row">
|
||||||
|
<div class="form-col form-col--two-thirds">
|
||||||
|
<div class="usa-input__title-inline">
|
||||||
|
{{ field.environment_name.data }}
|
||||||
|
</div>
|
||||||
|
<p class="usa-input__help">
|
||||||
|
Save changes to revoke access, <strong>this can not be undone.</strong>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="form-col form-col--third">
|
||||||
|
{{ field.deleted(id=id, checked=True, **{"v-model": "isChecked"}) }}
|
||||||
|
<label for="{{ id }}" class="link">Undo</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endcall %}
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
</checkboxinput>
|
||||||
|
{% else %}
|
||||||
|
<div class="form-row">
|
||||||
|
<!-- refactor this into its own macro? -->
|
||||||
|
<div class="form-col form-col--two-thirds">
|
||||||
|
<div class="usa-input {% if field.deleted.data or field.role.data == 'No Access' %}env-role__no-access{% endif %}">
|
||||||
|
<div class='usa-input__title-inline'>
|
||||||
|
{{ field.environment_name.data }}
|
||||||
|
</div>
|
||||||
|
<p class="usa-input__help">
|
||||||
|
{{ role }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-col form-col--third">
|
||||||
|
{% if field.role.data == "No Access" and not field.deleted.data -%}
|
||||||
|
<optionsinput inline-template
|
||||||
|
v-bind:initial-value="'{{ field.role.data | string }}'"
|
||||||
|
v-bind:name="'{{ field.name | string }}{% if member_role_id %}-{{ member_role_id }}{% endif %}'"
|
||||||
|
v-bind:optional="true"
|
||||||
|
v-bind:watch="true">
|
||||||
|
<fieldset data-ally-disabled="true" v-on:change="onInput" class="usa-input__choices">
|
||||||
|
{{ field.role(**{"v-model": "value", "id": "{}-{}".format(field.role.name, member_role_id)}) }}
|
||||||
|
</fieldset>
|
||||||
|
</optionsinput>
|
||||||
|
{% elif field.deleted.data -%}
|
||||||
|
<p class="usa-input__help">
|
||||||
|
Suspended access cannot be modified.
|
||||||
|
</p>
|
||||||
|
{%- endif %}
|
||||||
|
{{ field.environment_id() }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-col form-col--third">
|
{% endif %}
|
||||||
{% if field.role.data == "No Access" and not field.deleted.data -%}
|
|
||||||
<optionsinput inline-template
|
|
||||||
v-bind:initial-value="'{{ field.role.data | string }}'"
|
|
||||||
v-bind:name="'{{ field.name | string }}{% if member_role_id %}-{{ member_role_id }}{% endif %}'"
|
|
||||||
v-bind:optional="true"
|
|
||||||
v-bind:watch="true">
|
|
||||||
<fieldset data-ally-disabled="true" v-on:change="onInput" class="usa-input__choices">
|
|
||||||
{{ field.role(**{"v-model": "value", "id": "{}-{}".format(field.role.name, member_role_id)}) }}
|
|
||||||
</fieldset>
|
|
||||||
</optionsinput>
|
|
||||||
{% elif field.role.data != "No Access" and not field.deleted.data -%}
|
|
||||||
<checkboxinput
|
|
||||||
name="'{{ field.deleted.name | string }}-{% if member_role_id %}-{{ member_role_id }}{% endif %}'"
|
|
||||||
inline-template
|
|
||||||
key="'{{ field.deleted.name | string }}-{% if member_role_id %}-{{ member_role_id }}{% endif %}'"
|
|
||||||
v-bind:initial-checked='{{ field.deleted.data|string|lower }}'
|
|
||||||
v-bind:optional="true"
|
|
||||||
>
|
|
||||||
<fieldset data-ally-disabled="true" v-on:change="onInput" class="usa-input__choices {% if inline %}usa-input__choices--inline{% endif %}">
|
|
||||||
<legend>
|
|
||||||
{% set id = "{}-{}".format(field.deleted.name, member_role_id) %}
|
|
||||||
{{ field.deleted(id=id, checked=True, **{"v-model": "isChecked"}) }}
|
|
||||||
{{ field.deleted.label(for=id) | safe }}
|
|
||||||
</legend>
|
|
||||||
</fieldset>
|
|
||||||
</checkboxinput>
|
|
||||||
{% elif field.deleted.data -%}
|
|
||||||
<p class="usa-input__help">
|
|
||||||
Suspended access cannot be modified.
|
|
||||||
</p>
|
|
||||||
{%- endif %}
|
|
||||||
{{ field.environment_id() }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{% endmacro %}
|
{% endmacro %}
|
||||||
|
|
||||||
{% macro PermsFields(form, new=False, member_role_id=None) %}
|
{% macro PermsFields(form, new=False, member_role_id=None) %}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user