Merge pull request #1040 from dod-ccpo/max-line-width

Max line width

styles/core/_util.scss

@@ -76,3 +76,7 @@
 .user-permission {
   font-weight: $font-normal;
 }
+
+p {
+  max-width: 80ch;
+}

templates/components/alert.html

@@ -31,7 +31,9 @@
       {% endif %}
 
       {% if message %}
-        <div class='usa-alert-text'>{{ message | safe }}</div>
+        <p class='usa-alert-text'>
+          {{ message | safe }}
+        </p>
       {% endif %}
 
       {% if caller %}

templates/components/checkbox_input.html

@@ -18,7 +18,9 @@
             {{ label | safe }}
 
             {% if field.description %}
-            <span class='usa-input__help'>{{ field.description | safe }}</span>
+              <p class='usa-input__help'>
+                {{ field.description | safe }}
+              </p>
             {% endif %}
           </legend>
         </fieldset>

templates/components/date_picker.html

@@ -27,7 +27,9 @@
         </div>
 
         {% if description %}
-          <span class='usa-input__help'>{{ description | safe }}</span>
+          <p class='usa-input__help'>
+            {{ description | safe }}
+          </p>
         {% endif %}
       </legend>
 

templates/components/multi_checkbox_input.html

@@ -31,7 +31,9 @@
           </div>
 
           {% if field.description %}
-            <span class='usa-input__help'>{{ field.description | safe }}</span>
+            <p class='usa-input__help'>
+              {{ field.description | safe }}
+            </p>
             {{ validation_icons }}
           {% endif %}
         </legend>

templates/components/options_input.html

@@ -32,7 +32,9 @@
             </div>
 
             {% if field.description %}
-              <span class='usa-input__help'>{{ field.description | safe }}</span>
+              <p class='usa-input__help'>
+                {{ field.description | safe }}
+              </p>
             {% endif %}
 
             {% if show_validation %}

templates/components/selector.html

@@ -16,7 +16,9 @@
         <div class="usa-input__title">{{ field.label | striptags }}</div>
 
         {% if field.description %}
-          <span class='usa-input__help'>{{ field.description | safe }}</span>
+          <p class='usa-input__help'>
+            {{ field.description | safe }}
+          </p>
         {% endif %}
 
         <span v-show='showError'>{{ Icon('alert',classes="icon-validation") }}</span>

templates/components/text_input.html

@@ -46,7 +46,9 @@
           </div>
 
           {% if field.description %}
-            <span class='usa-input__help'>{{ description | safe }}</span>
+            <p class='usa-input__help'>
+              {{ description | safe }}
+            </p>
           {% endif %}
 
           {% if not disabled %}

templates/components/totals_box.html

@@ -8,13 +8,13 @@
 
     <div class="h4">{{ 'components.totals_box.obligated_funds' | translate }}</div>
     <div class="h3">{{ obligated_funds | dollars }}</div>
-    <div>{{ 'components.totals_box.obligated_text' | translate }}</div>
+    <p>{{ 'components.totals_box.obligated_text' | translate }}</p>
 
     <hr>
 
     <div class="h4">{{ 'components.totals_box.total_amount' | translate }}</div>
     <div class="h3">{{ contract_amount | dollars }}</div>
-    <div>{{ 'components.totals_box.total_text' | translate }}</div>
+    <p>{{ 'components.totals_box.total_text' | translate }}</p>
 
   </div>
 

templates/components/upload_input.html

@@ -23,7 +23,9 @@
       {% if show_label %}
         {{ field.label }}
       {% endif %}
+      <p>
         {{ field.description }}
+      </p>
       <div v-if="!hideInput" class="upload-widget">
         <label class="upload-label" for="{{ field.name }}">
           <span class="upload-button">

templates/portfolios/applications/index.html

@@ -43,7 +43,9 @@
             <header class='accordion__header row'>
               <div class='col col-grow'>
                 <h3 class='icon-link accordion__title' v-on:click="toggleSection('{{ section_name }}')">{{ application.name }}</h3>
-                <span class='accordion__description'>{{ application.description }}</span>
+                <p class='accordion__description'>
+                  {{ application.description }}
+                </p>
                 <div class='accordion__actions'>
                   <a class='icon-link' href='{{ url_for("applications.settings", application_id=application.id) }}'>
                     <span>{{ "portfolios.applications.app_settings_text" | translate }}</span>

templates/portfolios/applications/settings.html

@@ -62,7 +62,9 @@
             <div class="usa-input usa-input__title__view-only">
               {{ application_form.name.label() }}
             </div>
+            <p>
               {{ application_form.name.data }}
+            </p>
           </div>
         </div>
         <div class="form-row">
@@ -70,7 +72,9 @@
             <div class="usa-input usa-input__title__view-only">
               {{ application_form.description.label() }}
             </div>
+            <p>
               {{ application_form.description.data }}
+            </p>
           </div>
         </div>
       </div>

templates/task_orders/form_header.html

@@ -13,7 +13,9 @@
       </div>
     </div>
     <div class="form-row">
+      <p>
         {{ description }}
+      </p>
     </div>
   </div>
 {% endmacro %}