Simplify layout

Author: Goran Mekić

app/js/components/Calendar.jsx

@@ -1,86 +1,15 @@
 var React = require('react');
-var Day = require('./Day.jsx')
 var Menu = require('./Menu.jsx')
+var Title = require('./Title.jsx')
 var Week = require('./Week.jsx')
 
 var Calendar = React.createClass({
-  getInitialState: function() {
-    var current_date = new Date();
-    var month_names = [
-      'January',
-      'February',
-      'March',
-      'April',
-      'May',
-      'June',
-      'July',
-      'August',
-      'September',
-      'October',
-      'November',
-      'December'
-    ];
-    var current_month_number = current_date.getMonth();
-    var current_month_name = month_names[current_month_number];
-    var days_in_week = [
-      {
-        'name': 'Monday',
-        'number': 1
-      },
-      {
-        'name': 'Tuesday',
-        'number': 2,
-      },
-      {
-        'name': 'Wednesday',
-        'number': 3,
-      },
-      {
-        'name': 'Thursday',
-        'number': 4,
-      },
-      {
-        'name': 'Friday',
-        'number': 5,
-      },
-      {
-        'name': 'Saturday',
-        'number': 6,
-      },
-      {
-        'name': 'Sunday',
-        'number': 0,
-      }
-    ];
-    return {
-      days: days_in_week,
-      current_month_name: current_month_name,
-      current_month_number: current_month_number,
-    };
-  },
-
-  current_day_number: null,
-
-  componentWillMount: function() {
-    this.current_day_number = new Date().getDay();
-  },
-
   render: function() {
     return (
       <div className="calendar">
         <Menu/>
-        {/* <h1>{this.state.current_month_name}</h1> */}
+        <Title/>
         <Week/>
-        {this.state.days.map((day) => {
-          var classes = "u-1/7 text--center content-item";
-          if (this.current_day_number === day.number) {
-            classes += " current";
-          }
-          if (day.number === 6 || day.number === 0) {
-            classes += " weekend"
-          }
-          return <Day day={day.name} classes={classes}/>
-        })}
       </div>
     );
   }

app/js/components/Day.jsx

@@ -1,13 +1,34 @@
 var React = require('react');
 
 var Day = React.createClass({
-    render() {
-        return (
-          <div className={this.props.classes}>
-            {this.props.day}
-          </div>
-        );
+  render() {
+    var hours = [];
+    for (var hour = 0; hour < 24; hour++) {
+      realHour = hour;
+      if (hour > 12) {
+        realHour -= 12;
+      }
+
+      if (hour > 11) {
+        realHour = String(realHour) + 'pm';
+      }
+      else {
+        realHour = String(realHour) + 'am';
+      }
+      hours.push(realHour);
     }
+    return (
+      <div className="u-1/7 day">
+        <span className="u-6/7 day-name">{this.props.day}</span>
+        <span className="u-1/7 day-of-month">{this.props.dayOfMonth}</span>
+        {hours.map((hour) => {
+          return(
+            <div className="hour" title={hour}></div>
+          );
+        })}
+      </div>
+    );
+  }
 });
 
 module.exports = Day;

app/js/components/Title.jsx

@@ -0,0 +1,21 @@
+var React = require('react');
+
+var Title = React.createClass({
+    render() {
+        return (
+          <div className="title">
+            <div className="u-1/3 title--item title--previous">
+              <a href="#">&lt;</a>
+            </div>
+            <div className="u-1/3 title--item title--data">
+              <h3>September</h3>
+            </div>
+            <div className="u-1/3 title--item title--next">
+              <a href="#">&gt;</a>
+            </div>
+          </div>
+        );
+    }
+});
+
+module.exports = Title;

app/js/components/Week.jsx

@@ -1,24 +1,34 @@
 var React = require('react');
+var Day = require('./Day.jsx');
 
 var Week = React.createClass({
-    render() {
-        return (
-          <div className="title">
-            <div className="u-1/3 title--item title--previous">
-              <a href="#">&lt;</a>
-              <span className="text--small"><br/></span>
-            </div>
-            <div className="u-1/3 title--item title--data">
-              <h3>September</h3> <br/>
-              <span className="text--small">(11 - 17)</span>
-            </div>
-            <div className="u-1/3 title--item title--next">
-              <a href="#">&gt;</a>
-              <span className="text--small"><br/></span>
-            </div>
-          </div>
-        );
+  render() {
+    var days = [];
+    var day_names = [
+      "Monday",
+      "Tuesday",
+      "Wednesday",
+      "Thursday",
+      "Friday",
+      "Saturday",
+      "Sunday"
+    ];
+    for (var day = 1; day <= 7; day++) {
+      days.push({
+        dayOfMonth: day,
+        day: day_names[day-1]
+      });
     }
+    return (
+      <div className="content">
+        {days.map((day) => {
+          return (
+            <Day dayOfMonth={day.dayOfMonth} day={day.day}/>
+          );
+        })}
+      </div>
+    );
+  }
 });
 
 module.exports = Week;

app/sass/_title.scss

@@ -3,7 +3,7 @@
   background: #333;
   background: linear-gradient(#333, #000);
   line-height: 15px;
-  height: 45px;
+  height: 36px;
 }
 
 .title--item {

app/sass/style.scss

@@ -37,11 +37,43 @@
 @import "menu";
 @import "title";
 
+html, body{
+  height: 100%;
+}
+
 body {
-  background: #888;
+  background: #aaa;
   background: linear-gradient(#aaa, #555);
 }
 
 .text--small {
   font-size: 80%;
 }
+
+.day {
+  display: inline-block;
+  text-align: center;
+  border-right: 1px solid #444;
+}
+
+.day:last-child {
+  border-right: none;
+}
+
+.day-name {
+  height: 4%;
+  display: inline-block;
+}
+
+.content {
+  height: calc(100vh - 36px - 36px);
+}
+
+.hour {
+  height: 4%;
+  border-top: 1px solid #aaa;
+}
+
+.day-of-month {
+  font-size: 80%;
+}