Merge pull request #146 from openmcac/ac_redesign_2

Add home page and nav bar

Author: achan

app/components/bulletin-cover.js

@@ -20,5 +20,7 @@ export default Ember.Component.extend({
 });
 
 function suitableScreenHeight() {
-  return Math.max(Ember.$(window).height() - 40, 320);
+  const navBarHeightPx = 50;
+  const coverBorderWidthPx = 10;
+  return Math.max(Ember.$(window).height() - (navBarHeightPx + coverBorderWidthPx), 320);
 }

app/components/cover-page.js

@@ -0,0 +1,18 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  init() {
+    this._super();
+    this.get("resizeService").on("debouncedDidResize", () => {
+      this.resizeCover();
+    });
+  },
+  classNames: ["cover-page"],
+  resizeCover: Ember.on("didInsertElement", function() {
+    Ember.$(".cover-page").height(suitableScreenHeight());
+  })
+});
+
+function suitableScreenHeight() {
+  return Math.max(Ember.$(window).height(), 320);
+}

app/controllers/index.js

@@ -0,0 +1,16 @@
+import Ember from 'ember';
+
+export default Ember.Controller.extend({
+  actions: {
+    viewEnglishService() {
+      this.transitionToRoute("group.index", "english-service");
+    },
+    viewOnlineSermons() {
+      this.transitionToRoute("bulletin/sunday");
+    }
+  }
+});
+
+function suitableScreenHeight() {
+  return Math.max(Ember.$(window).height() - 40, 320);
+}

app/helpers/cloudinary-fetch.js

@@ -4,7 +4,31 @@ import ENV from "mcac/config/environment";
 const FETCH_PREFIX = `https://res.cloudinary.com/${ENV.cloudinary.cloudName}/image/fetch`;
 
 export function cloudinaryFetch(_, args) {
-  return `${FETCH_PREFIX}/w_${args.width}/${args.url}`;
+  return `${FETCH_PREFIX}/${transformations(args)}/${args.url}`;
 }
 
 export default Ember.Helper.helper(cloudinaryFetch);
+
+const helperToCloudinaryMap = {
+  "crop": "c",
+  "height": "h",
+  "radius": "r",
+  "width": "w"
+};
+
+function transformations(helperArgs) {
+  const args = cloudinaryArgs(helperArgs);
+  return Object.keys(cloudinaryArgs(helperArgs)).map(k => `${k}_${args[k]}`);
+}
+
+function cloudinaryArgs(helperArgs) {
+  return Object.keys(helperToCloudinaryMap).reduce((obj, current) => {
+    const helperArg = helperArgs[current];
+
+    if (helperArg) {
+      obj[helperToCloudinaryMap[current]] = helperArg;
+    }
+
+    return obj;
+  }, {});
+}

app/router.js

@@ -1,7 +1,8 @@
 import Ember from "ember";
 import config from "./config/environment";
+import RouterScroll from 'ember-router-scroll';
 
-const Router = Ember.Router.extend({
+const Router = Ember.Router.extend(RouterScroll, {
 	rootURL: config.rootURL,
   location: config.locationType,
   metrics: Ember.inject.service(),

app/routes/index.js

@@ -22,5 +22,5 @@ $small-device-break: 768px;
 $medium-device-break: 992px;
 $large-device-break: 1200px;
 
-$nav-bar-height: 30px;
+$nav-bar-height: 50px;
 $bulletin-announcements-color: $gray-blue-light;

app/styles/_variables.scss

@@ -1,8 +1,10 @@
 @import "utils";
+@import "hiding-menu";
 @import "announcement-editor";
 @import "components/bulletin-cover";
 @import "components/bulletin-navigator";
 @import "components/bulletin-view";
+@import "components/cover-page";
 @import "components/group-header";
 @import "components/image-preview";
 @import "components/mcac-header.scss";
@@ -15,6 +17,7 @@
 @import "pages/bulletin-form";
 @import "pages/dashboard-index";
 @import "pages/group-index";
+@import "pages/index";
 @import "pages/login";
 @import "pages/not-found";
 @import "pages/password-form";

app/styles/app.scss

@@ -6,7 +6,7 @@
   margin: 0 $padding-m $padding-m $padding-m;
 
   .inner {
-    bottom: $padding-m;
+    bottom: 0;
     color: $white;
     position: absolute;
     margin: $padding-m;
@@ -65,8 +65,6 @@
 
   @media only screen and (min-width: $small-device-break) {
     .inner {
-      padding: 0 $padding-xl;
-
       audio {
         max-width: initial;
       }
@@ -84,4 +82,10 @@
       font-size: 24px;
     }
   }
+
+  @media only screen and (min-width: $medium-device-break) {
+    .inner {
+      padding: 0 $padding-xl;
+    }
+  }
 }

app/styles/components/bulletin-cover.scss

@@ -1,6 +1,6 @@
 .bulletin-navigator {
-  margin-left: $padding-l;
-  margin-top: $padding-l;
+  margin-left: $padding-m * 2;
+  margin-top: $padding-m * 2;
   position: absolute;
   z-index: 100;
 
@@ -16,6 +16,6 @@
   }
 
   @media only screen and (min-width: $medium-device-break) {
-    margin-left: $padding-xl;
+    padding-left: $padding-xl;
   }
 }