Improve footer layout (#1673)

* Improve footer layout

Author: joshsmith

app/breakpoints.js

@@ -0,0 +1,9 @@
+// also refer to breakpoints in app/styles/layout/_breakpoints.scss
+
+export default {
+  extraSmall: '(max-width: 479px)',
+  small: '(max-width: 599px)',
+  medium: '(max-width: 767px)',
+  large: '(max-width: 991px)',
+  full: '(min-width: 992px)' // ensures default above the large
+};

app/components/site-footer.js

@@ -1,6 +1,14 @@
 import Component from '@ember/component';
+import { alias } from '@ember/object/computed';
+import { inject as service } from '@ember/service';
 
 export default Component.extend({
   tagName: 'footer',
-  classNames: ['site-footer', 'container']
+  classNames: ['site-footer', 'container'],
+  classNameBindings: ['isMedium:site-footer--is-medium'],
+
+  media: service(),
+  siteFooter: service(),
+
+  isMedium: alias('media.isMedium')
 });

app/initializers/responsive.js

@@ -0,0 +1,15 @@
+/**
+ * Ember responsive initializer
+ *
+ * Supports auto injecting media service app-wide.
+ *
+ * Generated by the ember-responsive addon. Customize initialize to change
+ * injection.
+ */
+
+export default {
+  name: 'responsive',
+  initialize() {
+    // no-op to override
+  }
+};

app/mixins/marketing-route-mixin.js

@@ -0,0 +1,19 @@
+import { get } from '@ember/object';
+import Mixin from '@ember/object/mixin';
+import { inject as service } from '@ember/service';
+
+export default Mixin.create({
+  siteFooter: service(),
+
+  actions: {
+    didTransition() {
+      get(this, 'siteFooter').enlarge();
+      return true;
+    },
+
+    willTransition() {
+      get(this, 'siteFooter').shrink();
+      return true;
+    }
+  }
+});

app/routes/about.js

@@ -1,3 +1,4 @@
 import Route from '@ember/routing/route';
+import MarketingRouteMixin from 'code-corps-ember/mixins/marketing-route-mixin';
 
-export default Route.extend({ });
+export default Route.extend(MarketingRouteMixin, { });

app/routes/index.js

@@ -1,8 +1,9 @@
 import { get } from '@ember/object';
 import { inject as service } from '@ember/service';
 import Route from '@ember/routing/route';
+import MarketingRouteMixin from 'code-corps-ember/mixins/marketing-route-mixin';
 
-export default Route.extend({
+export default Route.extend(MarketingRouteMixin, {
   session: service(),
 
   beforeModel() {

app/routes/login.js

@@ -1,4 +1,5 @@
 import Route from '@ember/routing/route';
 import UnauthenticatedRouteMixin from 'ember-simple-auth/mixins/unauthenticated-route-mixin';
+import MarketingRouteMixin from 'code-corps-ember/mixins/marketing-route-mixin';
 
-export default Route.extend(UnauthenticatedRouteMixin, { });
+export default Route.extend(MarketingRouteMixin, UnauthenticatedRouteMixin, { });

app/routes/privacy.js

@@ -0,0 +1,5 @@
+import Route from '@ember/routing/route';
+import MarketingRouteMixin from 'code-corps-ember/mixins/marketing-route-mixin';
+
+export default Route.extend(MarketingRouteMixin, {
+});

app/routes/signup.js

@@ -1,10 +1,11 @@
 import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
 import { set, get } from '@ember/object';
+import MarketingRouteMixin from 'code-corps-ember/mixins/marketing-route-mixin';
 import UnauthenticatedRouteMixin from 'ember-simple-auth/mixins/unauthenticated-route-mixin';
 import { isNonValidationError } from 'code-corps-ember/utils/error-utils';
 
-export default Route.extend(UnauthenticatedRouteMixin, {
+export default Route.extend(MarketingRouteMixin, UnauthenticatedRouteMixin, {
   queryParams: { context: 'default' },
 
   session: service(),

app/routes/team.js

@@ -1,3 +1,4 @@
 import Route from '@ember/routing/route';
+import MarketingRouteMixin from 'code-corps-ember/mixins/marketing-route-mixin';
 
-export default Route.extend({ });
+export default Route.extend(MarketingRouteMixin, { });