Add max width to CTA footer in the TO builder form

- Created a new mixin (ExpandSidenavMixin) that sets the defaultVisible prop that can be used in both the root component and the SidenavToggler. This makes it so that the Root knows whether or not the sidenav is collapsed or expanded, so then child components can use this to calculate margins/paddings/offsets/etc.
- Added new classes for the .action-group-footer that set the elements padding based on whether or not the sidenav is expanded.
- Added a nested div (.action-group-footer--container) inside .action-group-footer which sets the 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: {
-    defaultVisible: {
-      type: Boolean,
-      default: function() {
-        if (document.cookie.match(cookieName)) {
-          return !!document.cookie.match(cookieName + ' *= *true')
-        } else {
-          return true
-        }
-      },
-    },
+  mounted: function() {
+    this.$parent.$emit('sidenavToggle', this.isVisible)
   },
 
   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/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;
+  }
 }

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 %}