Add PageItemMobile component

js/components/PageItemMobile.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import Badge from './Badge';
+import ItemList from './ItemList';
+import Link from './Link';
+import Fadeable from './Fadeable';
+import SetTitle from './SetTitle';
+
+import { translate } from '../../common/config';
+import { groupByQuadrants } from '../../common/model';
+
+class PageItem extends React.Component {
+
+  getItem = (props) => {
+    const [quadrantName, itemName] = props.pageName.split('/');
+    const item = props.items.filter(item => item.quadrant === quadrantName && item.name === itemName)[0];
+    return item;
+  }
+
+  getItemsInRing = (props) => {
+    const item = this.getItem(props);
+    const itemsInRing = groupByQuadrants(props.items)[item.quadrant][item.ring];
+    return itemsInRing;
+  };
+
+  render() {
+    const item = this.getItem(this.props);
+    const itemsInRing = this.getItemsInRing(this.props);
+    return (
+      <Fadeable leaving={this.props.leaving} onLeave={this.props.onLeave}>
+        <SetTitle {...this.props} title={item.title} />
+        <div className="mobile-item-page">
+          <div className="mobile-item-page__content">
+            <div className="mobile-item-page__content__inner">
+              <div className="mobile-item-page__header">
+                <div className="split">
+                  <div className="split__left">
+                    <h3 className="headline">{translate(item.quadrant)}</h3>
+                    <h1 className="hero-headline hero-headline--inverse">{item.title}</h1>
+                  </div>
+                  <div className="split__right">
+                    <Badge big type={item.ring}>{item.ring}</Badge>
+                  </div>
+                </div>
+              </div>
+              <div className="markdown" dangerouslySetInnerHTML={{__html: item.body}} />
+            </div>
+          </div>
+        </div>
+        <aside className="mobile-item-page__aside">
+          <ItemList
+              items={itemsInRing}
+              activeItem={item}
+          >
+            <div className="split">
+              <div className="split__left">
+                <h3 className="headline">{translate(item.quadrant)}</h3>
+              </div>
+              <div className="split__right">
+                <Link className="icon-link" pageName={item.quadrant}>
+                  <span className="icon icon--pie icon-link__icon"></span>Quadrant Overview
+                </Link>
+              </div>
+            </div>
+          </ItemList>
+        </aside>
+      </Fadeable>
+    );
+  }
+}
+
+export default PageItem;

js/components/Router.js

@@ -5,8 +5,8 @@ import PageHelp from './PageHelp';
 import PageToolbox from './PageToolbox';
 import PageQuadrant from './PageQuadrant';
 import PageItem from './PageItem';
-import { quadrants, getItemPageNames } from '../../common/config';
-
+import PageItemMobile from './PageItemMobile';
+import { quadrants, getItemPageNames, isMobileViewport } from '../../common/config';
 
 const getPageByName = (items, pageName) => {
   if (pageName === 'index') {
@@ -25,7 +25,7 @@ const getPageByName = (items, pageName) => {
     return PageQuadrant;
   }
   if (getItemPageNames(items).includes(pageName)) {
-    return PageItem;
+    return isMobileViewport() ? PageItemMobile : PageItem;
   }
 
   return 'div';

styles/components/item-page.css

@@ -40,3 +40,13 @@
     }
   }
 }
+
+.mobile-item-page {
+  background: #fff;
+  margin: 0 -15px;
+  padding: 15px;
+
+  &__aside {
+    padding: 20px 0
+  }
+}