Merge pull request #215 from pertrai1/header-navigation-icons

Header icons stay in place in desktop mode
wevote · Apr 16, 2016 · 80ecc66 · 80ecc66
2 parents fe7f57d + ecaec55
commit 80ecc66
Show file tree

Hide file tree

Showing 4 changed files with 124 additions and 4 deletions.
diff --git a/src/js/components/Header.jsx b/src/js/components/Header.jsx
@@ -1,5 +1,6 @@
 import React, { Component, PropTypes } from "react";
 import { Link } from "react-router";
+import HeaderIcons from "./Navigation/HeaderIcons";
 
 export default class Header extends Component {
   static propTypes = {
@@ -61,11 +62,12 @@ export default class Header extends Component {
               </Link>
               <span className="header-version"> demo</span>
             </h4>
-            <aside className="header-address pull-right gutter-right--window gutter-top--small">
+            <div className="header-address pull-right gutter-right--window gutter-top--small">
               <Link to="/settings/location" className="font-lightest">
                 {location}
               </Link>
-            </aside>
+            </div>
+            <HeaderIcons />
           </section>
       {/* The components/MoreMenu code has to be reproduced here for mobile */}
         <div className={(visible ? "visible" : "hidden") + " device-menu--mobile container-fluid well well-90"}>

diff --git a/src/js/components/Navigation/HeaderIcons.jsx b/src/js/components/Navigation/HeaderIcons.jsx
@@ -0,0 +1,106 @@
+import React, { Component, PropTypes } from "react";
+import { Link } from "react-router";
+
+// import "stylesheets/main.scss";
+
+const links = {
+  ballot: function (active) {
+    var icon = "glyphicon glyphicon-list-alt glyphicon-line-adjustment font-footer_icon";
+
+    var jsx =
+      <Link to="/ballot" className={ "navicon" + (active ? " active-icon" : "")}>
+        <div className="col-xs-3 center-block text-center">
+          <span className={icon} title="Ballot"></span>
+          <br/>
+          <span className="text-center small device-small--hide">
+            Ballot
+          </span>
+        </div>
+      </Link>;
+
+    return jsx;
+  },
+
+  /* className="badgeTotal badge">0</span> TODO badge should only show if positive number */
+  requests: function (active) {
+    var icon = "glyphicon glyphicon-inbox glyphicon-line-adjustment font-footer_icon";
+
+    var jsx =
+      <Link to="/requests" className={ "navicon" + (active ? " active-icon" : "")}>
+        <div className="col-xs-3 center-block text-center">
+          <span className={icon} title="Requests">
+          </span>
+          <br/>
+          <span className="text-center small device-small--hide">
+            Requests
+          </span>
+        </div>
+      </Link>;
+
+    return jsx;
+  },
+
+  connect: function (active) {
+    var icon = "glyphicon icon-icon-connect-1-3 font-footer_icon";
+
+    var jsx =
+      <Link to="/connect" className={ "navicon" + (active ? " active-icon" : "")}>
+        <div className="col-xs-3 center-block text-center">
+          <span className={icon} title="Connect"></span>
+          <br/>
+          <span className="text-center small device-small--hide">
+            Connect
+          </span>
+        </div>
+      </Link>;
+
+    return jsx;
+  },
+
+  activity: function (active) {
+    var icon = "glyphicon icon-icon-activity-1-4 font-footer_icon";
+
+    var jsx =
+      <Link to="/activity" className={ "navicon" + (active ? " active-icon" : "")}>
+        <div className="col-xs-3 center-block text-center">
+          <span className={icon} title="Activity"></span>
+          <br/>
+          <span className="text-center small device-small--hide">
+            Activity
+          </span>
+        </div>
+      </Link>;
+
+    return jsx;
+  }
+};
+
+export default class Navigator extends Component {
+  static propTypes = {
+    pathname: PropTypes.string
+  };
+
+  render () {
+    var { props: { pathname } } = this;
+    var { ballot, requests, connect, activity } = links;
+
+    const navigator =
+      <div className="navigator row">
+        <div className="container-fluid">
+          <div className="device-headericons--large">
+            <div className="container-fluid fluff-loose--top separate-top">
+              <div className="row">
+                {ballot(pathname === "/ballot")}
+                {requests(pathname === "/requests")}
+                {connect(pathname === "/connect")}
+                {activity(pathname === "/activity")}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>;
+
+      return navigator;
+
+  }
+}
diff --git a/src/js/components/Navigator.jsx b/src/js/components/Navigator.jsx
@@ -87,7 +87,7 @@ export default class Navigator extends Component {
     const navigator =
       <div className="navigator row">
         <div className="container-fluid">
-          <div className="navbar navbar-default navbar-fixed-bottom device-footer--large">
+          <div className="navbar navbar-default navbar-fixed-bottom">
             <div className="container-fluid fluff-loose--top separate-top">
               <div className="row">
                 {ballot(pathname === "/ballot")}

diff --git a/src/sass/layout/_mediaquery.scss b/src/sass/layout/_mediaquery.scss
@@ -48,8 +48,19 @@
     }
 }
 
+@media all and (max-width: 661px) {
+    .device {
+        &-headericons--large {
+            display: none;
+        }
+    }
+}
+
 
 @media all and (min-width : 660px) {
+    .navbar-fixed-bottom {
+        display: none;
+    }
     .device {
         &-menu {
             &--large {
@@ -58,13 +69,14 @@
                 width: 220px;
             }
         }
-        &-footer {
+        &-headericons {
             &--large {
                 background: transparent;
                 border-color: #fff;
                 display: inline-block;
                 height: 45px;
                 left: auto;
+                position: fixed;
                 right: 0;
                 top: 0;