Merge pull request #1391 from dod-ccpo/fix-max-width

Fix max width

js/components/sidenav_toggler.js

@@ -1,30 +1,21 @@
+import ExpandSidenavMixin from '../mixins/expand_sidenav'
 import ToggleMixin from '../mixins/toggle'
 
-const cookieName = 'expandSidenav'
-
 export default {
   name: 'sidenav-toggler',
 
-  mixins: [ToggleMixin],
+  mixins: [ExpandSidenavMixin, ToggleMixin],
 
-  props: {
+  mounted: function() {
-    defaultVisible: {
+    this.$parent.$emit('sidenavToggle', this.isVisible)
-      type: Boolean,
-      default: function() {
-        if (document.cookie.match(cookieName)) {
-          return !!document.cookie.match(cookieName + ' *= *true')
-        } else {
-          return true
-        }
-      },
-    },
   },
 
   methods: {
     toggle: function(e) {
       e.preventDefault()
       this.isVisible = !this.isVisible
-      document.cookie = cookieName + '=' + this.isVisible + '; path=/'
+      document.cookie = this.cookieName + '=' + this.isVisible + '; path=/'
+      this.$parent.$emit('sidenavToggle', this.isVisible)
     },
   },
 }

js/index.js

@@ -32,12 +32,14 @@ import ToForm from './components/forms/to_form'
 import ClinFields from './components/clin_fields'
 import PopDateRange from './components/pop_date_range'
 import ToggleMenu from './components/toggle_menu'
+import ExpandSidenav from './mixins/expand_sidenav'
 
 Vue.config.productionTip = false
 
 Vue.use(VTooltip)
 
 Vue.mixin(Modal)
+Vue.mixin(ExpandSidenav)
 
 const app = new Vue({
   el: '#app-root',
@@ -67,6 +69,12 @@ const app = new Vue({
     ToggleMenu,
   },
 
+  data: function() {
+    return {
+      sidenavExpanded: this.defaultVisible,
+    }
+  },
+
   mounted: function() {
     this.$on('modalOpen', data => {
       if (data['isOpen']) {
@@ -105,6 +113,10 @@ const app = new Vue({
         }
       })
     })
+
+    this.$on('sidenavToggle', data => {
+      this.sidenavExpanded = data
+    })
   },
   delimiters: ['!{', '}'],
 

js/mixins/expand_sidenav.js

@@ -0,0 +1,15 @@
+export default {
+  props: {
+    cookieName: 'expandSidenav',
+    defaultVisible: {
+      type: Boolean,
+      default: function() {
+        if (document.cookie.match(this.cookieName)) {
+          return !!document.cookie.match(this.cookieName + ' *= *true')
+        } else {
+          return true
+        }
+      },
+    },
+  },
+}

styles/atat.scss

@@ -47,3 +47,4 @@
 @import "sections/application_edit";
 @import "sections/reports";
 @import "sections/task_order";
+@import "sections/ccpo";

styles/components/_alerts.scss

@@ -11,6 +11,7 @@
 
 .usa-alert {
   padding-bottom: 2.4rem;
+  max-width: $max-panel-width;
 }
 
 @mixin alert {
@@ -97,38 +98,3 @@
     }
   }
 }
-
-.alert {
-  @include alert;
-  @include alert-level("info");
-
-  &.alert--success {
-    @include alert-level("success");
-
-    .alert__actions {
-      .icon-link {
-        @include icon-link-color($color-green, $color-white);
-      }
-    }
-  }
-
-  &.alert--warning {
-    @include alert-level("warning");
-
-    .alert__actions {
-      .icon-link {
-        @include icon-link-color($color-gold-dark, $color-white);
-      }
-    }
-  }
-
-  &.alert--error {
-    @include alert-level("error");
-
-    .alert__actions {
-      .icon-link {
-        @include icon-link-color($color-red, $color-white);
-      }
-    }
-  }
-}

styles/components/_error_page.scss

@@ -1,8 +1,13 @@
 .error-page {
+  max-width: $max-page-width;
+
+  .panel {
+    box-shadow: none;
+    background-color: unset;
+    border: none;
     max-width: 475px;
     margin: auto;
 
-  .panel {
     &__heading {
       text-align: center;
       padding: $gap 0;
@@ -15,17 +20,6 @@
         margin-bottom: $gap;
       }
     }
-
-    &__body {
-      padding: $gap * 2;
-      margin: 0;
-
-      hr {
-        width: 80%;
-        margin: auto;
-        margin-bottom: $gap * 3;
-      }
-    }
   }
 
   .icon {

styles/components/_topbar.scss

@@ -12,7 +12,7 @@
     flex-direction: row;
     align-items: stretch;
     justify-content: space-between;
-    max-width: 1190px;
+    max-width: $max-page-width;
 
     a {
       color: $color-white;

styles/core/_variables.scss

@@ -19,6 +19,7 @@ $sidenav-collapsed-width: 10rem;
 $max-panel-width: 90rem;
 $home-pg-icon-width: 6rem;
 $large-spacing: 4rem;
+$max-page-width: $max-panel-width + $sidenav-expanded-width + $large-spacing;
 
 /*
  * USWDS Variables

styles/elements/_action_group.scss

@@ -32,22 +32,35 @@
 }
 
 .action-group-footer {
+  padding-top: $gap;
+  padding-bottom: $gap;
+  padding-right: $gap * 4;
+  position: fixed;
+  bottom: $footer-height;
+  left: 0;
+  background: white;
+  border-top: 1px solid $color-gray-lighter;
+  z-index: 1;
+  width: 100%;
+
+  &.action-group-footer--expand-offset {
+    padding-left: $sidenav-expanded-width;
+  }
+
+  &.action-group-footer--collapse-offset {
+    padding-left: $sidenav-collapsed-width;
+  }
+
+  .action-group-footer--container {
     @extend .action-group;
 
+    margin-top: 0;
+    margin-bottom: 0;
+    margin-left: $large-spacing;
+    max-width: $max-panel-width;
+
     &:last-child {
       margin-bottom: 0;
     }
-  margin-top: 0;
+  }
-  margin-bottom: 0;
-  padding-top: $gap;
-  padding-bottom: $gap;
-
-  position: fixed;
-  bottom: $footer-height;
-  background: white;
-  right: 0;
-  padding-right: $gap * 4;
-  border-top: 1px solid $color-gray-lighter;
-  width: 100%;
-  z-index: 1;
 }

styles/sections/_ccpo.scss

@@ -0,0 +1,3 @@
+.ccpo-panel-container {
+  max-width: $max-panel-width;
+}

templates/applications/new/step_1.html

@@ -39,14 +39,18 @@
       </div>
 
 
-      <span class="action-group-footer">
+      <div
+        class="action-group-footer"
+        v-bind:class="{'action-group-footer--expand-offset': this.$root.sidenavExpanded, 'action-group-footer--collapse-offset': !this.$root.sidenavExpanded}">
+        <div class="action-group-footer--container">
           {% block next_button %}
             {{ SaveButton(text=('portfolios.applications.new.step_1_button_text' | translate)) }}
           {% endblock %}
           <a href="{{ url_for('applications.portfolio_applications', portfolio_id=portfolio.id) }}">
             Cancel
           </a>
-      </span>
+        </div>
+      </div>
     </form>
   </base-form>
 

templates/applications/new/step_2.html

@@ -61,7 +61,10 @@
           </div>
         </div>
       </div>
-      <span class="action-group-footer">
+      <div
+        class="action-group-footer"
+        v-bind:class="{'action-group-footer--expand-offset': this.$root.sidenavExpanded, 'action-group-footer--collapse-offset': !this.$root.sidenavExpanded}">
+        <div class="action-group-footer--container">
           {% block next_button %}
             {{ SaveButton(text=('portfolios.applications.new.step_2_button_text' | translate)) }}
           {% endblock %}
@@ -71,7 +74,8 @@
           <a href="{{ url_for('applications.portfolio_applications', portfolio_id=portfolio.id) }}">
             Cancel
           </a>
-      </span>
+        </div>
+      </div>
     </form>
   </application-environments>
 

templates/applications/new/step_3.html

@@ -25,7 +25,10 @@
     action_update="applications.update_new_application_step_3") }}
 
 
-  <span class="action-group-footer">
+  <div
+    class="action-group-footer"
+    v-bind:class="{'action-group-footer--expand-offset': this.$root.sidenavExpanded, 'action-group-footer--collapse-offset': !this.$root.sidenavExpanded}">
+    <div class="action-group-footer--container">
       <a class="usa-button" href="{{ url_for('applications.settings', application_id=application_id) }}">
         {{ "portfolios.applications.new.step_3_button_text" | translate }}
       </a>
@@ -35,6 +38,7 @@
       <a href="{{ url_for('applications.portfolio_applications', portfolio_id=portfolio.id) }}">
         {{ "common.cancel" | translate }}
       </a>
-  </span>
+    </div>
+  </div>
 
 {% endblock %}

templates/ccpo/add_user.html

@@ -4,6 +4,7 @@
 {% from "components/text_input.html" import TextInput %}
 
 {% block content %}
+  <div class="ccpo-panel-container">
     <base-form inline-template>
       <form id="add-ccpo-user-form" action="{{ url_for('ccpo.submit_new_user') }}" method="POST">
         {{ form.csrf_token }}
@@ -21,4 +22,5 @@
         </div>
       </form>
     </base-form>
+  </div>
 {% endblock %}

templates/ccpo/confirm_user.html

@@ -3,6 +3,7 @@
 {% from "components/text_input.html" import TextInput %}
 
 {% block content %}
+  <div class="ccpo-panel-container">
     {% if new_user %}
       <h3>{{ 'ccpo.form.confirm_user_title' | translate }}</h3>
       <form id="add-ccpo-user-form" action="{{ url_for('ccpo.confirm_new_user') }}" method="POST">
@@ -30,4 +31,5 @@
         </div>
       </form>
     {% endif %}
+  </div>
 {% endblock %}

templates/ccpo/users.html

@@ -6,6 +6,7 @@
 {% from "components/modal.html" import Modal %}
 
 {% block content %}
+  <div class="ccpo-panel-container">
     <div class='col'>
       <div class="h2">
         {{ "ccpo.users_title" | translate }}
@@ -80,4 +81,5 @@
         {% endcall %}
       {% endfor %}
     {% endif %}
+  </div>
 {% endblock %}

templates/error.html

@@ -5,6 +5,7 @@
 {% block content %}
 
 <main class="usa-section usa-content error-page">
+  <div class="panel">
     <div class="panel__heading">
       {{ Icon('cloud', classes="icon--red icon--large")}}
       <hr>
@@ -17,6 +18,7 @@
         {%- endif %}
       </p>
     </div>
+  </div>
 </main>
 
 {% endblock %}

templates/error_base.html

@@ -10,7 +10,7 @@
   <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='img/favicon.ico') }} " />
 </head>
 <body class="{% if g.modalOpen %} modalOpen{% endif %}">
-
+  <div id='app-root'>
     {% block template_vars %}{% endblock %}
 
     {% include 'components/usa_header.html' %}
@@ -34,5 +34,6 @@
     {% assets "js_all" %}
       <script src="{{ ASSET_URL }}"></script>
     {% endassets %}
+  </div>
 </body>
 </html>

templates/portfolios/new/step_1.html

@@ -15,6 +15,7 @@
       <p>{{ "portfolios.header" | translate }}</p>
       <h1>{{ 'portfolios.new.title' | translate }}</h1>
     </div>
+  </div>
   {{ StickyCTA(text="portfolios.new.cta_step_1"|translate, context=("portfolios.new.sticky_header_context"|translate({"step": "1"}) )) }}
   <base-form inline-template>
     <div class="row">
@@ -38,13 +39,18 @@
             {{ "forms.portfolio.defense_component.help_text" | translate | safe }}
           </div>
         </div>
-        <div class='action-group-footer'>
+        <div
+          class='action-group-footer'
+          v-bind:class="{'action-group-footer--expand-offset': this.$root.sidenavExpanded, 'action-group-footer--collapse-offset': !this.$root.sidenavExpanded}">
+          <div class="action-group-footer--container">
             {% block next_button %}
               {{ SaveButton(text=('portfolios.new.save' | translate), form="portfolio-create", element="input") }}
             {% endblock %}
             <a class="usa-button usa-button-secondary" href="{{ url_for('atst.home') }}">
               Cancel
             </a>
+          </div>
+        </div>
       </form>
     </div>
   </base-form>

templates/task_orders/builder_base.html

@@ -31,7 +31,10 @@
       <div class="task-order">
         {% block to_builder_form_field %}{% endblock %}
       </div>
-       <span class="action-group-footer">
+      <div
+        class="action-group-footer"
+        v-bind:class="{'action-group-footer--expand-offset': this.$root.sidenavExpanded, 'action-group-footer--collapse-offset': !this.$root.sidenavExpanded}">
+        <div class="action-group-footer--container">
           {% block next_button %}
             <input
               type="submit"
@@ -58,14 +61,13 @@
               </a>
             {%- endif %}
           {% endif %}
-
           <a
             v-on:click="openModal('cancel')"
             class="action-group__action icon-link">
             {{ "common.cancel" | translate }}
           </a>
-        </span>
+        </div>
-
+      </div>
     </form>
   </to-form>
 {% endblock %}