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

Begin adding tooltips to req form fields

Browse Source
This commit is contained in:
luis cielak 2018-08-09 14:57:45 -04:00
parent 659edcd183
commit a9be4665ce
7 changed files with 9 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
atst/forms/request.py
View File

@ -26,9 +26,6 @@ class RequestForm(ValidatedForm):
jedi_usage = TextAreaField( jedi_usage = TextAreaField(
"JEDI Usage", "JEDI Usage",
description="Briefly describe how you are expecting to use the JEDI Cloud", description="Briefly describe how you are expecting to use the JEDI Cloud",
render_kw={
"placeholder": "e.g. We are migrating XYZ application to the cloud so that..."
},
) )
# Details of Use: Cloud Readiness # Details of Use: Cloud Readiness

2
styles/elements/_inputs.scss
View File

@ -71,7 +71,7 @@
@include line-max; @include line-max;
position: relative; position: relative;
.icon { .icon-validation {
position: absolute; position: absolute;
left: 100%; left: 100%;
top: 100%; top: 100%;

2
styles/elements/_tooltip.scss
View File

@ -109,5 +109,5 @@
} }
.tooltip-wrapper { .tooltip-wrapper {
// display: none;
} }

2
templates/components/options_input.html
View File

@ -12,7 +12,7 @@
{% endif %} {% endif %}
{% if field.errors %} {% if field.errors %}
{{ Icon('alert') }} <span class="icon-validation">{{ Icon('alert') }}</span>
{% endif %} {% endif %}
</legend> </legend>

7
templates/components/text_input.html
View File

@ -1,15 +1,16 @@
{% from "components/icon.html" import Icon %} {% from "components/icon.html" import Icon %}
{% from "components/tooltip.html" import Tooltip %}
{% macro TextInput(field, placeholder='') -%} {% macro TextInput(field, tooltip='', placeholder='') -%}
<div class='usa-input {% if field.errors %}usa-input--error{% endif %}'> <div class='usa-input {% if field.errors %}usa-input--error{% endif %}'>
<label for={{field.name}}> <label for={{field.name}}>
{{ field.label }} {{ field.label }} {% if tooltip %}{{ Tooltip(tooltip) }}{% endif %}
{% if field.description %} {% if field.description %}
<span class='usa-input__help'>{{ field.description | safe }}</span> <span class='usa-input__help'>{{ field.description | safe }}</span>
{% endif %} {% endif %}
{% if field.errors %}{{ Icon('alert') }}{% endif %} {% if field.errors %} <span class="icon-validation">{{ Icon('alert') }}</span>{% endif %}
</label> </label>
{{ field(placeholder=placeholder) | safe }} {{ field(placeholder=placeholder) | safe }}

2
templates/components/tooltip.html
View File

@ -2,7 +2,7 @@
{% macro Tooltip(message) -%} {% macro Tooltip(message) -%}
<span class="tooltip-wrapper" v-tooltip="{content: '{{message}}'}"> <span class="icon-tooltip" v-tooltip="{content: '{{message}}'}">
{{ Icon('help') }} {{ Icon('help') }}
</span> </span>

2
templates/requests/screen-1.html
View File

@ -23,7 +23,7 @@
<h2>General</h2> <h2>General</h2>
{{ TextInput(f.dod_component) }} {{ TextInput(f.dod_component) }}
{{ TextInput(f.jedi_usage,placeholder="e.g. We are migrating XYZ application to the cloud so that...") }} {{ TextInput(f.jedi_usage,placeholder="e.g. We are migrating XYZ application to the cloud so that...",tooltip="Your answer will help us provide tangible examples to DoD leadership how and why commercial cloud resources are accelerating the Departments missions.<br>Please tell us more about what the systems / applications you are working with and why the cloud is a good place to host these applications.") }}
<h2>Cloud Readiness</h2> <h2>Cloud Readiness</h2>
{{ TextInput(f.num_software_systems,placeholder="Number of systems") }} {{ TextInput(f.num_software_systems,placeholder="Number of systems") }}