pk/atst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Styling

Browse Source
This commit is contained in:
leigh-mil 2019-10-28 16:49:46 -04:00
parent d33fcb6073
commit b653546768
2 changed files with 168 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
styles/sections/_application_edit.scss
View File

@ -91,9 +91,23 @@
margin-bottom: 8 * $gap;
text-align: left;
.usa-input {
.form-row {
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 {
font-weight: $font-bold;
}
@ -102,12 +116,28 @@
margin-bottom: 0;
}
.env-role__no-access {
&.env-role__no-access {
.usa-input__title-inline,
.usa-input__help {
color: $color-gray;
}
}
&__choices {
&.revoke-button label {
padding: 1rem 2rem;
&::before {
display: none;
}
&.link {
color: $color-blue;
text-decoration: underline;
text-align: right;
}
}
}
}
&__head {
@ -118,15 +148,69 @@
margin: 0.5em 0;
}
}
}
.form-row {
.environment-role {
padding: ($gap * 2) 0;
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;
}
}
}
.environment-name--gray {
&.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;
color: $color-gray-medium;
height: 3.6rem;
}
}
}
.application-list-item {

70
templates/applications/fragments/member_form_fields.html
View File

@ -1,13 +1,60 @@
{% from "components/alert.html" import Alert %}
{% from "components/checkbox_input.html" import CheckboxInput %}
{% from "components/text_input.html" import TextInput %}
{% from "components/phone_input.html" import PhoneInput %}
{% macro EnvRoleInput(field, member_role_id=None) %}
{% 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 -%}
<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 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="{% if field.deleted.data or field.role.data == 'No Access' %}env-role__no-access{% endif %}">
<div v-bind:class='["usa-input__title-inline", {"environment-name--gray": value === "None" }]'>
<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 v-else>
{% call Alert(level='warning') %}
<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">
@ -26,22 +73,6 @@
{{ 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.
@ -50,6 +81,7 @@
{{ field.environment_id() }}
</div>
</div>
{% endif %}
{% endmacro %}
{% macro PermsFields(form, new=False, member_role_id=None) %}