navigation and cardview page done

client/main.css

@@ -165,3 +165,134 @@ body{
 	margin: 20px auto 0;
 	display: block;
 }
+
+
+
+/************************************  HOME CARD  ************************************/
+
+.complainContainer{
+    width: 90%;
+    margin: 20px auto;
+    background: #fff;
+    border-radius: 5px;
+    box-shadow: 2px 2px 4px #9FA4A8;
+    padding: 20px;
+    position: relative;
+		cursor: pointer;
+}
+.complainContainer03{
+    width: 90%;
+    margin: 0px auto;
+    background: #fff;
+    padding: 20px;
+    position: relative;
+  border-bottom: 1px solid #ddd;
+  color: #757575;
+}
+.complainContainer03:first-child{
+  margin-top: 20px;
+}
+.complainContainer03:last-child{
+  margin-bottom: 20px;
+}
+.complainContainer02{
+	  width: 90%;
+    margin: 20px auto 20px;
+    background: #fff;
+    border-radius: 2px;
+    box-shadow: 0px 1px 4px rgba(0,0,0,0.14);
+    padding: 20px;
+    position: relative;
+}
+.complainContainer > img,
+.complainContainer02 > img{
+    max-height: 60px;
+    max-width: 60px;
+    border-radius: 50%;
+    float: left;
+    margin: 0px 20px 10px 0px;
+}
+.complainContainer > h3{
+    margin: 0px 0px 10px;
+}
+.complainContainer02 > h3{
+    margin: 0px;
+}
+.rightFloatedIcon{
+	float: right;
+  margin-left: 20px;
+}
+.complainItems{
+  float: left;
+}
+.complainItems span,
+.complainItems a{
+    margin-right: 10px;
+    color: #365C7A;
+    cursor: pointer;
+}
+.endTimeIndicator{
+  color: #FF4081;
+  float: right;
+}
+.votingOptions{
+  padding-left: 50px;
+}
+.votingOptions li{
+  padding-bottom: 5px;
+  margin-bottom: 5px;
+  border-bottom: 1px solid #eee;
+}
+.votingOptions li:last-child{
+  border: 0;
+}
+.votingOptions li:last-child a{
+  color: #333;
+  margin-left: 30px;
+}
+.votingOptions li:last-child a:hover{
+  text-decoration: underline;
+}
+.perticipatorOptions{
+  padding-left: 50px;
+  color: #FF9800;
+  list-style-type: disc;
+}
+.perticipatorOptions li span{
+  color: #333;
+}
+.threadRemoveIcon{
+    position: absolute;
+    right: 10px;
+    top: 10px;
+}
+.complainAddBtn{
+    position: fixed;
+    bottom: 5vh;
+    right: 2.5vw;
+    z-index: 999;
+}
+.complainInputContainer{
+    width: 60%;
+    margin: 0px auto;
+}
+.complainInput{
+    width: 100%;
+    padding: 7px 10px;
+    border: 0px;
+    border-bottom: 1px solid #ddd;
+    margin: 10px 0px;
+    resize: none;
+    transition: all  0.3s;
+}
+.complainInput:focus{
+    border-bottom: 2px solid #026DB5;
+}
+.complainInputContainer li i{
+    color: rgba(0,0,0,.87);
+    margin-right: 15px;
+}
+.modalHeader{
+    background: #F7F7F7 !important;
+    text-align: center;
+}

imports/ui/components/HomeCard.jsx

@@ -0,0 +1,34 @@
+import React, { Component } from 'react';
+
+
+import HomeCardPage from '/imports/ui/pages/HomeCardPage.jsx';
+
+
+export default class HomeCard extends React.Component{
+  constructor(props){
+    super(props);
+  }
+
+  render(){
+    console.log(this.props)
+    return(
+      <div className='complainContainer'>
+        <i className='remove red link icon threadRemoveIcon'></i>
+        <img src='images/logo.png'/>
+        <h3>Complain title goes here</h3>
+        <p className='complainItems'>
+          <span><i className='wait icon'></i>5:05 pm</span>
+          <a><i className='talk outline icon'></i>11 replies</a>
+          <a><i className='attach icon'></i></a>
+        </p>
+        <div className='clr'></div>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+        </p>
+        <button className="circular ui icon blue button complainAddBtn" >
+          <i className="icon add"></i>
+        </button>
+      </div>
+    )
+  }
+}

imports/ui/components/SampleComponent.jsx

@@ -1,8 +1,16 @@
 import React, { Component } from 'react';
+import { mount } from 'react-mounter';
+
+import HomeCardPage from '/imports/ui/pages/HomeCardPage.jsx';
 
 export default class SampleComponent extends Component{
   constructor(props){
     super(props);
+
+    this.state = {
+      radio_net: -1,
+      cmd_net: -1,
+    }
   }
 
   componentDidMount(){
@@ -11,15 +19,23 @@ export default class SampleComponent extends Component{
 
   handleChange(name, e) {
     let val = parseInt(e.target.value);
-    if(val.isNan() || val == -1) return;
+    if(val == -1) return;
 
     let change = {}
     change[name] = val
     this.setState(change)
   }
 
   handleSubmit(){
-
+    let x = {
+      radio_net: this.state.radio_net,
+      cmd_net: this.state.cmd_net,
+    }
+    if(x.radio_net == -1 || x.cmd_net == -1){
+      alert('Please select values from both dropdowns')
+      return;
+    }
+    mount(HomeCardPage, x)
   }
 
   render(){
@@ -41,7 +57,7 @@ export default class SampleComponent extends Component{
               <option value="2">Admin Net</option>
             </select>
             <div className='actionButtonContainer'>
-              <button className='ui blue icon labeled button'>
+              <button className='ui blue icon labeled button' onClick={this.handleSubmit.bind(this)}>
                 <i className='send icon'></i>
                 Submit
               </button>

imports/ui/pages/HomeCardPage.jsx

@@ -0,0 +1,15 @@
+import React, { Component } from 'react';
+
+import SampleLayout from '/imports/ui/layouts/SampleLayout.jsx';
+import HomeCard from '/imports/ui/components/HomeCard.jsx';
+
+export default class HomeCardPage extends Component{
+
+  render(){
+    console.log("SamplePage being rendered");
+
+      return(
+        <SampleLayout content={<HomeCard combo={this.props}/>}/>
+      );
+  }
+}