Add header bar

5 files changed, 45 insertions, 11 deletions

diff --git a/client/button.js b/client/button.js
index 3670c0e..66181f3 100644
--- a/client/button.js
+++ b/client/button.js
@@ -196,6 +196,18 @@ Template.photos.events({
     animate2();
     return false;
   },
+  'click button.share-instagram': function (event) {
+    window.print();
+  },
+  'click button.share-facebook': function (event) {
+    window.print();
+  },
+  'click button.share-save': function (event) {
+    window.print();
+  },
+  'click button.share-print': function (event) {
+    window.print();
+  },
   'click button.logout': function (event) {
     $('body').append('<div style="display:none;"><iframe src="https://instagram.com/accounts/logout"></iframe></div>');
     Meteor.logout();
@@ -250,6 +262,10 @@ Template.about.events({
 })
 
 Accounts.onLogin(function() {
+  Meteor.call('getInstagramProfilePhoto', function(error, res) {
+    console.log(res);
+    $('img.profile').attr('src', res);
+  });
   if (Router.current().route.getName() == 'login') {
     Router.go('dates');
   }
diff --git a/client/colors.less b/client/colors.less
index ad91421..01b15a6 100644
--- a/client/colors.less
+++ b/client/colors.less
@@ -1,13 +1,23 @@
+@import url(http://fonts.googleapis.com/css?family=Cutive);
+
 body {
-  div.about-link {
-    position: fixed;
-    top: 25px;
-    right: 25px;
-    a {
-      padding: 2px 8px;
-      color: #2636F9;
-      border: 1px #2636F9 solid;
-      font-weight: bold;
+  div.header {
+    font-family: 'Cutive', serif;
+    margin: 3px 23px 3px 23px;
+    border-bottom: 1px #C4C4C4 solid;
+    img.logo {
+      height: 41px;
+    }
+    div.links {
+      float: right;
+      color: #6D6D6D;
+      a {
+        color: #6D6D6D;
+      }
+      img {
+        margin-left: 7px;
+        height: 35px;
+      }
     }
   }
   .page {
diff --git a/client/templates/layout.html b/client/templates/layout.html
index 45b3bb4..c2c0e87 100644
--- a/client/templates/layout.html
+++ b/client/templates/layout.html
@@ -1,6 +1,11 @@
 <template name="layout">
-  <div class="about-link">
-    <a href="/about">i</a>
+  <div class="header">
+    <img class="logo" src="/img/logo_anim.gif">
+    <div class="links">
+      <a href="/about">About</a> /
+      <a class="logout" href="#">Logout</a>
+      <img class="profile" src="https://instagramimages-a.akamaihd.net/profiles/anonymousUser.jpg">
+    </div>
   </div>
   <div class="page">
 {{> yield}}
diff --git a/public/img/logo_anim.gif b/public/img/logo_anim.gif
new file mode 100644
index 0000000..4e33e4d
--- /dev/null
+++ b/public/img/logo_anim.gif
diff --git a/server/methods.js b/server/methods.js
index d4cbaec..2254b08 100644
--- a/server/methods.js
+++ b/server/methods.js
@@ -8,5 +8,8 @@ Meteor.methods({
         'max_timestamp': Math.round(Date.UTC(year, month) / 1000),
       }
     });
+  },
+  getInstagramProfilePhoto: function () {
+    return Meteor.user().services.instagram.profile_picture;
   }
 });