Basic View planner design mode.

recipes/src/containers/Planner/index.tsx

@@ -113,6 +113,10 @@ class PlannerContainer extends Component<PlannerContainerProps, PlannerContainer
               }
               </Navbar>
               <DisplayPlanner
+                week={this.state.week.map(([day]) => day)}
+                planner={this.props.planner}
+              />
+              {/* <DisplayPlannerDrag
                 mode={this.props.mode}
                 week={this.state.week}
                 weekNumber={this.props.week}
@@ -123,7 +127,7 @@ class PlannerContainer extends Component<PlannerContainerProps, PlannerContainer
                 addToBacklog={this.props.addToBacklog}
                 assignToDay={this.props.assignToDay}
                 changeWeek={this.changeWeek}
-              />
+              /> */}
             </>
           ) 
           :(<MobileDisplayPlanner 
@@ -140,6 +144,49 @@ class PlannerContainer extends Component<PlannerContainerProps, PlannerContainer
   }
 }
 
+const DisplayPlanner: React.SFC<{
+  week: Weekday[],
+  planner: WeekPlan
+}> = ({ week, planner }) => (
+  <section className='cbk-planner__body'>
+    <div className='cbk-planner__body__planner'>
+      {/* <div className='meals'>
+      </div> */}
+      <div className='week'>
+        <div className='day meal'>
+          <div className='meal-placeholder'> x </div>
+          {
+            Meals.map(meal => (
+              <div className='meal-name' key={meal}>
+                <h5 className='meal-name--style'>{Meal[meal].toLowerCase()}</h5>
+              </div>
+            ))
+          }
+        </div>
+        {
+          week.map(day => (
+            <div className='day' key={day}>
+              <div className='day-date'>
+                <h5>{planner[day].date.format('ddd DD.MM')}</h5>
+              </div>
+              {
+                Meals.map(meal => {
+                  const recipe = planner[day][meal];
+                  return (
+                    <div className='day-meal' key={meal}>
+                      <h5 title={recipe && recipe.name}>{ recipe && recipe.name }</h5>
+                    </div>
+                  )
+                })
+              }
+            </div>
+          ))
+        }
+      </div>
+    </div>
+  </section>
+)
+
 const MobileDisplayPlanner: React.SFC<{
   week: [Weekday, string][],
   weekNumber: number,
@@ -187,7 +234,7 @@ const MobileDisplayPlanner: React.SFC<{
   </section>
 )
 
-const DisplayPlanner: React.SFC<{
+const DisplayPlannerDrag: React.SFC<{
   week: [Weekday, string][],
   onDragEnd: OnDragEndResponder,
   weekNumber: number,
@@ -203,7 +250,7 @@ const DisplayPlanner: React.SFC<{
     <DragDropContext onDragEnd={onDragEnd}>
       {
         mode === PlannerMode.Edit ? (
-          <div className='cbk-planner__body__backlog'>
+          <div className='cbk-planner-dnd__body__backlog'>
             <RecipeSearch onSelect={(selected)=>{ addToBacklog(selected) }}/>
             <Droppable droppableId='recipeList'>
               {(provided) => (
@@ -235,7 +282,7 @@ const DisplayPlanner: React.SFC<{
           </div>
         ) : null
       }
-      <div className='cbk-planner__body__calendar'>
+      <div className='cbk-planner-dnd__body__calendar'>
         <div>
           Week {weekNumber}
           </div>

recipes/src/containers/Planner/styles.scss

@@ -2,6 +2,72 @@
 
 .cbk-planner {
   &__body {
+    padding: $spacing-small;
+    &__planner {
+      display: flex;
+      min-height: 16rem;
+      .week {
+        display: flex;
+        .day,
+        .meal {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          background-color: black;
+          border-bottom: 1px solid black;
+          min-width: 0;
+          &-date,
+          .meal-placeholder {
+            flex-basis: 1rem;
+            color: white;
+            font-family: $font-family-display;
+            h5 {
+              padding: 0 $spacing-small/2;
+            }
+          }
+          &-meal {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            flex-basis: 5rem;
+            background-color: white;
+            box-sizing: border-box;
+            margin: 0.5px;
+            overflow: hidden;
+            h5 {
+              text-align: center;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              display: -webkit-box;
+              -webkit-line-clamp: 2;
+              -webkit-box-orient: vertical;
+            }
+          }
+        }
+        .meal {
+          
+          max-width: $spacing-regular;
+          flex-basis: $spacing-regular;
+          &-placeholder {
+            color: black!important;
+          }
+          &-name {
+            flex-basis: 5rem;
+            background-color: white;
+            box-sizing: border-box;
+            margin: 0.5px;
+            padding: 0!important;
+            &--style {
+              writing-mode: vertical-lr;
+              margin-top: $spacing-small/2;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &-dnd__body {
     display: flex;
     margin: 1rem 0.5rem;
 

recipes/src/styles/app.scss

@@ -12,6 +12,11 @@ body {
   background-color: $grey-100;
 }
 
+::selection { 
+  background: rgba(255,183,0,1);
+  color: black;
+}
+
 ul {
   list-style-type: none;
   margin: 0;