Mooar work

firehose/components/MakePreview.jsx

@@ -0,0 +1,11 @@
+var React = require("react");
+
+var MakePreview = React.createClass({
+  render: function() {
+    return (
+      <iframe src="https://chrisdecairos.ca" className="make-preview"></iframe>
+    );
+  }
+});
+
+module.exports = MakePreview;

firehose/components/header/Header.jsx

@@ -5,19 +5,22 @@ var ViewToggle = require("./ViewToggle.jsx");
 var Header = React.createClass({
   getInitialState: function() {
     return {
-      loggedIn: this.props.loggedIn,
+      loggedIn: false,
+      isAdmin: false,
       viewState: this.props.viewState
     };
   },
   handleLoggedIn: function(user) {
     this.setState({
-      loggedIn: true
+      loggedIn: true,
+      isAdmin: user.isAdmin
     });
     this.props.onLoggedIn(user);
   },
   handleLoggedOut: function() {
     this.setState({
-      loggedIn: false
+      loggedIn: false,
+      isAdmin: false
     });
     this.props.onLoggedOut();
   },
@@ -31,24 +34,17 @@ var Header = React.createClass({
   render: function() {
     var toggle;
 
-    if ( this.state.loggedIn ) {
+    if ( this.state.loggedIn && this.state.isAdmin ) {
       toggle =  <ViewToggle
                   onToggle={this.onToggle}
                   viewState={this.state.viewState} />;
     } else {
       toggle = "";
     }
 
-    var navbarClasses = "navbar navbar-inverse navbar-fixed-top ";
-
-    if (this.props.viewState === "one-up") {
-      navbarClasses += "one-up-enabled";
-    } else {
-      navbarClasses += "grid-enabled";
-    }
 
     return (
-      <div className={navbarClasses}>
+      <div className="navbar navbar-inverse navbar-fixed-top">
         <div className="container">
           <div className="navbar-header">
             <div className="navbar-brand">

firehose/components/shared/FeatureMake.jsx

@@ -10,7 +10,7 @@ var FeatureMake = React.createClass({
     this.props.onClick();
   },
   render: function() {
-    var featureClass = "make-feature-toggle fa fa-4 ";
+    var featureClass = "feature-toggle fa ";
 
     if ( this.state.featured ) {
       featureClass += "fa-star";

firehose/components/shared/Navigate.jsx

@@ -14,7 +14,7 @@ var Navigate = React.createClass({
     this.props.onNavigate(this.state.delta);
   },
   render: function() {
-    var navigationClass = "firehose-make-nav fa fa-4 ";
+    var navigationClass = "make-nav fa ";
 
     if ( this.state.delta > 0 ) {
       navigationClass += "fa-arrow-right";

firehose/components/shared/Trash.jsx

@@ -3,7 +3,7 @@ var React = require("react");
 var Trash = React.createClass({
   render: function() {
     return (
-      <i className="firehose-trash-make fa fa-trash fa-4" on></i>
+      <i className="firehose-trash-make fa fa-trash-o"></i>
     );
   }
 });

firehose/components/views/MakeDetails.jsx

@@ -9,13 +9,13 @@ var MakeDetails = React.createClass({
   },
   render: function() {
     return (
-      <div>
-        <div>AVATAR</div>
+      <div className="firehose-make-details">
+        <div className="details-avatar">AVATAR</div>
         <div>
           <span>TITLE</span>
           <span>AuthorLink</span>
         </div>
-        <div>
+        <div className="firehose-one-up-controls">
           <Trash />
           <FeatureMake />
           <Navigation onNavigate={this.onNavigate} delta="-1"/>

firehose/less/firehose.less

@@ -15,40 +15,23 @@
   background: white;
 }
 
-.navbar.one-up-enabled,
-.one-up-enabled {
+.navbar {
   color: @firehose-white;
   background: @firehose-light-blue;
 }
-.navbar.grid-enabled,
-.grid-enabled {
-  color: @firehose-light-blue;
-  background: @firehose-white;
-}
 
-.one-up-enabled .firehose-slider {
+.firehose-slider {
   background-color: @firehose-white;
 }
-.grid-enabled .firehose-slider {
-  background-color: @firehose-light-blue;
-}
 
-.one-up-enabled .navbar-brand {
+.navbar-brand {
   background: @firehose-light-blue;
   color: @firehose-white;
   &:hover {
     background: @firehose-light-blue !important;
     color: @firehose-white !important;
   }
 }
-.grid-enabled .navbar-brand {
-  background: @firehose-white;
-  color: @firehose-light-blue;
-  &:hover {
-    background-color: @firehose-white !important;
-    color: @firehose-light-blue !important;
-  }
-}
 
 .nav {
   li {
@@ -71,14 +54,12 @@
   cursor: pointer;
   &.left {
     .firehose-slider {
-      float: left;
-      margin-left: 2px;
+      right: 72px;
     }
   }
   &.right {
     .firehose-slider {
-      float: right;
-      margin-right: 2px;
+      right: 27px;
     }
   }
   .firehose-toggle-icon {
@@ -98,9 +79,32 @@
     border-radius: 35px;
   }
   .firehose-slider {
+    position: absolute;
     height: 20px;
     width: 20px;
     margin-top: 2px;
     border-radius: 15px;
+    transition: right .25s ease-out;
+  }
+}
+
+.firehose-make-details {
+  width: 100%;
+  height: 70px;
+
+  .details-avatar {
+    float: left;
+    height: 70px;
+    width: 70px;
+  }
+
+  .details-controls {
+    float: rightl
+  }
+
+  .trash-make,
+  .feature-toggle,
+  .make-nav {
+    font-weight: bold;
   }
 }