Merge pull request #476 from lbryio/433-vertical-align

vertically align channel contents and reverse order

client/build/actions/show.js

@@ -31,8 +31,6 @@ function onHandleShowPageUri(params) {
   };
 }
 
-;
-
 function onRequestError(error) {
   return {
     type: actions.REQUEST_ERROR,
@@ -40,8 +38,6 @@ function onRequestError(error) {
   };
 }
 
-;
-
 function onNewChannelRequest(channelName, channelId) {
   var requestType = _show_request_types.CHANNEL;
   var requestId = "cr#".concat(channelName, "#").concat(channelId);
@@ -56,8 +52,6 @@ function onNewChannelRequest(channelName, channelId) {
   };
 }
 
-;
-
 function onNewAssetRequest(name, id, channelName, channelId, extension) {
   var requestType = extension ? _show_request_types.ASSET_LITE : _show_request_types.ASSET_DETAILS;
   var requestId = "ar#".concat(name, "#").concat(id, "#").concat(channelName, "#").concat(channelId);
@@ -78,8 +72,6 @@ function onNewAssetRequest(name, id, channelName, channelId, extension) {
   };
 }
 
-;
-
 function onRequestUpdate(requestType, requestId) {
   return {
     type: actions.REQUEST_UPDATE,
@@ -90,8 +82,6 @@ function onRequestUpdate(requestType, requestId) {
   };
 }
 
-;
-
 function addRequestToRequestList(id, error, key) {
   return {
     type: actions.REQUEST_LIST_ADD,
@@ -101,9 +91,8 @@ function addRequestToRequestList(id, error, key) {
       key: key
     }
   };
-}
+} // asset actions
 
-; // asset actions
 
 function addAssetToAssetList(id, error, name, claimId, shortId, claimData) {
   return {
@@ -133,8 +122,6 @@ function addNewChannelToChannelList(id, name, shortId, longId, claimsData) {
   };
 }
 
-;
-
 function onUpdateChannelClaims(channelKey, name, longId, page) {
   return {
     type: actions.CHANNEL_CLAIMS_UPDATE_ASYNC,
@@ -147,8 +134,6 @@ function onUpdateChannelClaims(channelKey, name, longId, page) {
   };
 }
 
-;
-
 function updateChannelClaims(channelListId, claimsData) {
   return {
     type: actions.CHANNEL_CLAIMS_UPDATE_SUCCESS,
@@ -157,9 +142,8 @@ function updateChannelClaims(channelListId, claimsData) {
       claimsData: claimsData
     }
   };
-}
+} // display a file
 
-; // display a file
 
 function fileRequested(name, claimId) {
   return {
@@ -171,8 +155,6 @@ function fileRequested(name, claimId) {
   };
 }
 
-;
-
 function updateFileAvailability(status) {
   return {
     type: actions.FILE_AVAILABILITY_UPDATE,
@@ -180,13 +162,9 @@ function updateFileAvailability(status) {
   };
 }
 
-;
-
 function updateDisplayAssetError(error) {
   return {
     type: actions.DISPLAY_ASSET_ERROR,
     data: error
   };
-}
-
-;
+}

client/build/components/AssetPreview/index.js

@@ -21,9 +21,7 @@ var AssetPreview = function AssetPreview(_ref) {
       thumbnail = _ref$claimData.thumbnail;
   var directSourceLink = "".concat(claimId, "/").concat(name, ".").concat(fileExt);
   var showUrlLink = "/".concat(claimId, "/").concat(name);
-  return _react.default.createElement("div", {
-    className: "asset-preview-holder"
-  }, _react.default.createElement(_reactRouterDom.Link, {
+  return _react.default.createElement(_reactRouterDom.Link, {
     to: showUrlLink
   }, function () {
     switch (contentType) {
@@ -47,7 +45,7 @@ var AssetPreview = function AssetPreview(_ref) {
       default:
         return _react.default.createElement("p", null, "unsupported file type");
     }
-  }()));
+  }());
 };
 
 var _default = AssetPreview;

client/build/components/HorizontalQuadSplit/index.js

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Row = _interopRequireDefault(require("@components/Row"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } _setPrototypeOf(subClass.prototype, superClass && superClass.prototype); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.getPrototypeOf || function _getPrototypeOf(o) { return o.__proto__; }; return _getPrototypeOf(o); }
+
+var HorizontalTriSplit =
+/*#__PURE__*/
+function (_React$Component) {
+  function HorizontalTriSplit() {
+    _classCallCheck(this, HorizontalTriSplit);
+
+    return _possibleConstructorReturn(this, _getPrototypeOf(HorizontalTriSplit).apply(this, arguments));
+  }
+
+  _createClass(HorizontalTriSplit, [{
+    key: "render",
+    value: function render() {
+      return _react.default.createElement("div", {
+        className: 'horizontal-quad-split'
+      }, _react.default.createElement("div", {
+        className: 'left-side'
+      }, _react.default.createElement("div", {
+        className: 'column-a'
+      }, _react.default.createElement(_Row.default, null, this.props.columnA)), _react.default.createElement("div", {
+        className: 'column-b'
+      }, _react.default.createElement(_Row.default, null, this.props.columnB))), _react.default.createElement("div", {
+        className: 'right-side'
+      }, _react.default.createElement("div", {
+        className: 'column-c'
+      }, _react.default.createElement(_Row.default, null, this.props.columnC)), _react.default.createElement("div", {
+        className: 'column-d'
+      }, _react.default.createElement(_Row.default, null, this.props.columnD))));
+    }
+  }]);
+
+  _inherits(HorizontalTriSplit, _React$Component);
+
+  return HorizontalTriSplit;
+}(_react.default.Component);
+
+var _default = HorizontalTriSplit;
+exports.default = _default;

client/build/containers/ChannelClaimsDisplay/view.js

@@ -9,6 +9,14 @@ var _react = _interopRequireDefault(require("react"));
 
 var _AssetPreview = _interopRequireDefault(require("@components/AssetPreview"));
 
+var _HorizontalQuadSplit = _interopRequireDefault(require("@components/HorizontalQuadSplit"));
+
+var _Row = _interopRequireDefault(require("@components/Row"));
+
+var _ButtonSecondary = _interopRequireDefault(require("@components/ButtonSecondary"));
+
+var _createGroupedList = _interopRequireDefault(require("../../utils/createGroupedList.js"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
@@ -76,21 +84,49 @@ function (_React$Component) {
           currentPage = _this$props2$channel$.currentPage,
           totalPages = _this$props2$channel$.totalPages,
           defaultThumbnail = _this$props2.defaultThumbnail;
-      return _react.default.createElement("div", {
-        className: "row row--tall"
-      }, claims.length > 0 ? _react.default.createElement("div", null, claims.map(function (claim, index) {
-        return _react.default.createElement(_AssetPreview.default, {
-          defaultThumbnail: defaultThumbnail,
-          claimData: claim,
-          key: "".concat(claim.name, "-").concat(index)
-        });
-      }), _react.default.createElement("div", null, currentPage > 1 && _react.default.createElement("button", {
-        className: 'button--secondary',
-        onClick: this.showPreviousResultsPage
-      }, "Previous Page"), currentPage < totalPages && _react.default.createElement("button", {
-        className: 'button--secondary',
-        onClick: this.showNextResultsPage
-      }, "Next Page"))) : _react.default.createElement("p", null, "There are no claims in this channel"));
+      var groupedClaimsList = (0, _createGroupedList.default)(claims, 4);
+
+      if (claims.length > 0) {
+        return _react.default.createElement("div", {
+          className: 'channel-claims-display'
+        }, _react.default.createElement("div", null, groupedClaimsList.map(function (group, index) {
+          var itemA = group[0];
+          var itemB = group[1];
+          var itemC = group[2];
+          var itemD = group[3];
+          return _react.default.createElement(_HorizontalQuadSplit.default, {
+            key: "claims-row-".concat(index),
+            columnA: itemA && _react.default.createElement(_AssetPreview.default, {
+              defaultThumbnail: defaultThumbnail,
+              claimData: itemA,
+              key: "".concat(itemA.name, "-").concat(itemA.id)
+            }),
+            columnB: itemB && _react.default.createElement(_AssetPreview.default, {
+              defaultThumbnail: defaultThumbnail,
+              claimData: itemB,
+              key: "".concat(itemB.name, "-").concat(itemB.id)
+            }),
+            columnC: itemC && _react.default.createElement(_AssetPreview.default, {
+              defaultThumbnail: defaultThumbnail,
+              claimData: itemC,
+              key: "".concat(itemC.name, "-").concat(itemC.id)
+            }),
+            columnD: itemD && _react.default.createElement(_AssetPreview.default, {
+              defaultThumbnail: defaultThumbnail,
+              claimData: itemD,
+              key: "".concat(itemD.name, "-").concat(itemD.id)
+            })
+          });
+        })), _react.default.createElement(_Row.default, null, currentPage > 1 && _react.default.createElement(_ButtonSecondary.default, {
+          value: 'Previous Page',
+          onClickHandler: this.showPreviousResultsPage
+        }), currentPage < totalPages && _react.default.createElement(_ButtonSecondary.default, {
+          value: 'Next Page',
+          onClickHandler: this.showNextResultsPage
+        })));
+      } else {
+        return _react.default.createElement("p", null, "There are no claims in this channel");
+      }
     }
   }]);
 
@@ -99,6 +135,5 @@ function (_React$Component) {
   return ChannelClaimsDisplay;
 }(_react.default.Component);
 
-;
 var _default = ChannelClaimsDisplay;
 exports.default = _default;

client/build/containers/PublishTitleInput/view.js

@@ -53,7 +53,7 @@ function (_React$Component) {
       return _react.default.createElement("input", {
         type: "text",
         id: "publish-title",
-        className: 'text--large input--full-width',
+        className: 'text--extra-large input--full-width',
         name: "title",
         placeholder: "Give your content a title...",
         onChange: this.handleInput,

client/build/containers/PublishUrlInput/view.js

@@ -143,4 +143,4 @@ function (_React$Component) {
 }(_react.default.Component);
 
 var _default = PublishUrlInput;
-exports.default = _default;
+exports.default = _default;

client/build/pages/ShowChannel/view.js

@@ -15,6 +15,8 @@ var _ChannelInfoDisplay = _interopRequireDefault(require("@components/ChannelInf
 
 var _ChannelClaimsDisplay = _interopRequireDefault(require("@containers/ChannelClaimsDisplay"));
 
+var _Row = _interopRequireDefault(require("@components/Row"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
@@ -56,11 +58,11 @@ function (_React$Component) {
         return _react.default.createElement(_PageLayout.default, {
           pageTitle: name,
           channel: channel
-        }, _react.default.createElement(_ChannelInfoDisplay.default, {
+        }, _react.default.createElement(_Row.default, null, _react.default.createElement(_ChannelInfoDisplay.default, {
           name: name,
           longId: longId,
           shortId: shortId
-        }), _react.default.createElement(_ChannelClaimsDisplay.default, null));
+        })), _react.default.createElement(_ChannelClaimsDisplay.default, null));
       }
 
       return _react.default.createElement(_ErrorPage.default, {

client/build/sagas/show_channel.js

@@ -35,14 +35,13 @@ regeneratorRuntime.mark(getNewClaimsAndUpdateChannel),
 regeneratorRuntime.mark(watchUpdateChannelClaims);
 
 function newChannelRequest(action) {
-  var _action$data, requestType, requestId, channelName, channelId, state, host, longId, shortId, _ref, _ref$data, channelKey, claimsData, _ref2;
+  var _action$data, requestType, requestId, channelName, channelId, claimsData, state, host, longId, shortId, _ref, _ref$data, channelKey, _ref2;
 
   return regeneratorRuntime.wrap(function newChannelRequest$(_context) {
     while (1) {
       switch (_context.prev = _context.next) {
         case 0:
-          _action$data = action.data, requestType = _action$data.requestType, requestId = _action$data.requestId, channelName = _action$data.channelName, channelId = _action$data.channelId; // put an action to update the request in redux
-
+          _action$data = action.data, requestType = _action$data.requestType, requestId = _action$data.requestId, channelName = _action$data.channelName, channelId = _action$data.channelId;
           _context.next = 3;
           return (0, _effects.put)((0, _show.onRequestUpdate)(requestType, requestId));
 
@@ -153,8 +152,6 @@ function watchNewChannelRequest() {
   }, _marked2, this);
 }
 
-;
-
 function getNewClaimsAndUpdateChannel(action) {
   var _action$data2, channelKey, name, longId, page, host, claimsData, _ref3;
 

client/build/utils/createGroupedList.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createGroupedList = void 0;
+
+var createGroupedList = function createGroupedList(list, size) {
+  if (!size) {
+    throw new Error('no size provided to createGroupedList');
+  }
+
+  if (!list) {
+    throw new Error('no list provided to createGroupedList');
+  }
+
+  var groupedList = [];
+
+  for (var i = 0; i < list.length; i = i + size) {
+    var group = [];
+
+    for (var j = i; j < i + size; j++) {
+      group.push(list[j]);
+    }
+
+    groupedList.push(group);
+  }
+
+  return groupedList;
+};
+
+exports.createGroupedList = createGroupedList;

client/scss/all.scss

@@ -21,6 +21,7 @@
 @import 'components/_click-to-copy';
 @import 'components/_column';
 @import 'components/_form-feedback';
+@import 'components/_horizontal-quad-split';
 @import 'components/_horizontal-split';
 @import 'components/_label';
 @import 'components/_nav-bar';
@@ -35,6 +36,7 @@
 @import 'components/_vertical-split';
 @import 'components/_tooltip';
 
+@import 'containers/_channel-claims-display';
 @import 'containers/_dropzone';
 @import 'containers/_publish-url-input';
 @import 'containers/_publish-status';

client/scss/components/_asset-preview.scss

@@ -1,11 +1,3 @@
-.asset-preview-holder {
-  clear  : both;
-  display: inline-block;
-  width  : 31%;
-  padding: 0px;
-  margin : 1%;
-}
-
 .asset-preview-image {
   width  : 100%;
   padding: 0px;

client/scss/components/_horizontal-quad-split.scss

@@ -0,0 +1,53 @@
+.horizontal-quad-split {
+  display       : flex;
+  flex-direction : row;
+  justify-content: space-between;
+  align-items    : flex-start;
+  .left-side, .right-side {
+    width          : 50%;
+    display        : flex;
+    flex-direction : row;
+    justify-content: space-between;
+    align-items    : flex-start;
+    .column-a, .column-b, .column-c, .column-d {
+      width: 50%;
+    };
+    .column-a, .column-b, .column-c {
+      padding-right: $secondary-padding;
+    };
+  };
+};
+
+
+
+@media (max-width: $break-point-large ) {
+
+  .horizontal-quad-split {
+    flex-direction : column;
+    .left-side, .right-side {
+      width          : 100%;
+      .column-a, .column-b, .column-c, .column-d {
+        width: 50%;
+      };
+      .column-b {
+        padding-right: 0;
+      }
+    }
+  };
+
+}
+
+@media (max-width: $break-point-medium ) {
+
+  .horizontal-quad-split {
+    flex-direction : column;
+    .left-side, .right-side {
+      flex-direction : column;
+      .column-a, .column-b, .column-c, .column-d {
+        width: 100%;
+        padding: 0;
+      };
+    }
+  };
+
+}

client/scss/containers/_channel-claims-display.scss

@@ -0,0 +1,5 @@
+.channel-claims-display {
+  .button--secondary {
+    margin-right: $secondary-padding;
+  }
+}

client/src/actions/show.js

@@ -7,14 +7,14 @@ export function onHandleShowPageUri (params) {
     type: actions.HANDLE_SHOW_URI,
     data: params,
   };
-};
+}
 
 export function onRequestError (error) {
   return {
     type: actions.REQUEST_ERROR,
     data: error,
   };
-};
+}
 
 export function onNewChannelRequest (channelName, channelId) {
   const requestType = CHANNEL;
@@ -23,7 +23,7 @@ export function onNewChannelRequest (channelName, channelId) {
     type: actions.CHANNEL_REQUEST_NEW,
     data: { requestType, requestId, channelName, channelId },
   };
-};
+}
 
 export function onNewAssetRequest (name, id, channelName, channelId, extension) {
   const requestType = extension ? ASSET_LITE : ASSET_DETAILS;
@@ -43,7 +43,7 @@ export function onNewAssetRequest (name, id, channelName, channelId, extension)
       },
     },
   };
-};
+}
 
 export function onRequestUpdate (requestType, requestId) {
   return {
@@ -53,14 +53,14 @@ export function onRequestUpdate (requestType, requestId) {
       requestId,
     },
   };
-};
+}
 
 export function addRequestToRequestList (id, error, key) {
   return {
     type: actions.REQUEST_LIST_ADD,
     data: { id, error, key },
   };
-};
+}
 
 // asset actions
 
@@ -76,23 +76,29 @@ export function addAssetToAssetList (id, error, name, claimId, shortId, claimDat
 export function addNewChannelToChannelList (id, name, shortId, longId, claimsData) {
   return {
     type: actions.CHANNEL_ADD,
-    data: { id, name, shortId, longId, claimsData },
+    data: {
+      id,
+      name,
+      shortId,
+      longId,
+      claimsData,
+    },
   };
-};
+}
 
 export function onUpdateChannelClaims (channelKey, name, longId, page) {
   return {
     type: actions.CHANNEL_CLAIMS_UPDATE_ASYNC,
     data: {channelKey, name, longId, page},
   };
-};
+}
 
 export function updateChannelClaims (channelListId, claimsData) {
   return {
     type: actions.CHANNEL_CLAIMS_UPDATE_SUCCESS,
     data: {channelListId, claimsData},
   };
-};
+}
 
 // display a file
 
@@ -101,18 +107,18 @@ export function fileRequested (name, claimId) {
     type: actions.FILE_REQUESTED,
     data: { name, claimId },
   };
-};
+}
 
 export function updateFileAvailability (status) {
   return {
     type: actions.FILE_AVAILABILITY_UPDATE,
     data: status,
   };
-};
+}
 
 export function updateDisplayAssetError (error) {
   return {
     type: actions.DISPLAY_ASSET_ERROR,
     data: error,
   };
-};
+}

client/src/components/AssetPreview/index.jsx

@@ -5,37 +5,35 @@ const AssetPreview = ({ defaultThumbnail, claimData: { name, claimId, fileExt, c
   const directSourceLink = `${claimId}/${name}.${fileExt}`;
   const showUrlLink = `/${claimId}/${name}`;
   return (
-    <div className='asset-preview-holder'>
-      <Link to={showUrlLink} >
-        {(() => {
-          switch (contentType) {
-            case 'image/jpeg':
-            case 'image/jpg':
-            case 'image/png':
-            case 'image/gif':
-              return (
-                <img
-                  className={'asset-preview-image'}
-                  src={directSourceLink}
-                  alt={name}
-                />
-              );
-            case 'video/mp4':
-              return (
-                <img
-                  className={'asset-preview-video'}
-                  src={thumbnail || defaultThumbnail}
-                  alt={name}
-                />
-              );
-            default:
-              return (
-                <p>unsupported file type</p>
-              );
-          }
-        })()}
-      </Link>
-    </div>
+    <Link to={showUrlLink} >
+      {(() => {
+        switch (contentType) {
+          case 'image/jpeg':
+          case 'image/jpg':
+          case 'image/png':
+          case 'image/gif':
+            return (
+              <img
+                className={'asset-preview-image'}
+                src={directSourceLink}
+                alt={name}
+              />
+            );
+          case 'video/mp4':
+            return (
+              <img
+                className={'asset-preview-video'}
+                src={thumbnail || defaultThumbnail}
+                alt={name}
+              />
+            );
+          default:
+            return (
+              <p>unsupported file type</p>
+            );
+        }
+      })()}
+    </Link>
   );
 };
 

client/src/components/HorizontalQuadSplit/index.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import Row from '@components/Row';
+
+class HorizontalTriSplit extends React.Component {
+  render () {
+    return (
+      <div className={'horizontal-quad-split'}>
+        <div className={'left-side'}>
+          <div className={'column-a'}>
+            <Row>
+              {this.props.columnA}
+            </Row>
+          </div>
+          <div className={'column-b'}>
+            <Row>
+              {this.props.columnB}
+            </Row>
+          </div>
+        </div>
+        <div className={'right-side'}>
+          <div className={'column-c'}>
+            <Row>
+              {this.props.columnC}
+            </Row>
+          </div>
+          <div className={'column-d'}>
+            <Row>
+              {this.props.columnD}
+            </Row>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default HorizontalTriSplit;

client/src/containers/ChannelClaimsDisplay/view.jsx

@@ -1,5 +1,9 @@
 import React from 'react';
 import AssetPreview from '@components/AssetPreview';
+import HorizontalQuadSplit from '@components/HorizontalQuadSplit';
+import Row from '@components/Row';
+import ButtonSecondary from '@components/ButtonSecondary';
+import createGroupedList from '../../utils/createGroupedList.js';
 
 class ChannelClaimsDisplay extends React.Component {
   constructor (props) {
@@ -22,31 +26,82 @@ class ChannelClaimsDisplay extends React.Component {
     this.props.onUpdateChannelClaims(channelKey, name, longId, page);
   }
   render () {
-    const { channel: { claimsData: { claims, currentPage, totalPages } }, defaultThumbnail } = this.props;
-    return (
-      <div className='row row--tall'>
-        {(claims.length > 0) ? (
+    const {channel: {claimsData: {claims, currentPage, totalPages}}, defaultThumbnail} = this.props;
+    const groupedClaimsList = createGroupedList(claims, 4);
+    if (claims.length > 0) {
+      return (
+        <div className={'channel-claims-display'}>
           <div>
-            {claims.map((claim, index) => <AssetPreview
-              defaultThumbnail={defaultThumbnail}
-              claimData={claim}
-              key={`${claim.name}-${index}`}
-            />)}
-            <div>
-              {(currentPage > 1) &&
-              <button className={'button--secondary'} onClick={this.showPreviousResultsPage}>Previous Page</button>
-              }
-              {(currentPage < totalPages) &&
-              <button className={'button--secondary'} onClick={this.showNextResultsPage}>Next Page</button>
-              }
-            </div>
+            {groupedClaimsList.map((group, index) => {
+              const itemA = group[0];
+              const itemB = group[1];
+              const itemC = group[2];
+              const itemD = group[3];
+              return (
+                <HorizontalQuadSplit
+                  key={`claims-row-${index}`}
+                  columnA={
+                    itemA && (
+                      <AssetPreview
+                        defaultThumbnail={defaultThumbnail}
+                        claimData={itemA}
+                        key={`${itemA.name}-${itemA.id}`}
+                      />
+                    )
+                  }
+                  columnB={
+                    itemB && (
+                      <AssetPreview
+                        defaultThumbnail={defaultThumbnail}
+                        claimData={itemB}
+                        key={`${itemB.name}-${itemB.id}`}
+                      />
+                    )
+                  }
+                  columnC={
+                    itemC && (
+                      <AssetPreview
+                        defaultThumbnail={defaultThumbnail}
+                        claimData={itemC}
+                        key={`${itemC.name}-${itemC.id}`}
+                      />
+                    )
+                  }
+                  columnD={
+                    itemD && (
+                      <AssetPreview
+                        defaultThumbnail={defaultThumbnail}
+                        claimData={itemD}
+                        key={`${itemD.name}-${itemD.id}`}
+                      />
+                    )
+                  }
+                />
+              );
+            })}
           </div>
-        ) : (
-          <p>There are no claims in this channel</p>
-        )}
-      </div>
-    );
+          <Row>
+            {(currentPage > 1) &&
+            <ButtonSecondary
+              value={'Previous Page'}
+              onClickHandler={this.showPreviousResultsPage}
+            />
+            }
+            {(currentPage < totalPages) &&
+            <ButtonSecondary
+              value={'Next Page'}
+              onClickHandler={this.showNextResultsPage}
+            />
+            }
+          </Row>
+        </div>
+      );
+    } else {
+      return (
+        <p>There are no claims in this channel</p>
+      );
+    }
   }
-};
+}
 
 export default ChannelClaimsDisplay;

client/src/containers/PublishTitleInput/view.jsx

@@ -15,7 +15,7 @@ class PublishTitleInput extends React.Component {
       <input
         type='text'
         id='publish-title'
-        className={'text--x-large input--full-width'}
+        className={'text--extra-large input--full-width'}
         name='title'
         placeholder='Give your content a title...'
         onChange={this.handleInput}

client/src/pages/ShowChannel/view.jsx

@@ -3,6 +3,7 @@ import PageLayout from '@components/PageLayout';
 import ErrorPage from '@pages/ErrorPage';
 import ChannelInfoDisplay from '@components/ChannelInfoDisplay';
 import ChannelClaimsDisplay from '@containers/ChannelClaimsDisplay';
+import Row from '@components/Row';
 
 class ShowChannel extends React.Component {
   render () {
@@ -14,11 +15,13 @@ class ShowChannel extends React.Component {
           pageTitle={name}
           channel={channel}
         >
-          <ChannelInfoDisplay
-            name={name}
-            longId={longId}
-            shortId={shortId}
-          />
+          <Row>
+            <ChannelInfoDisplay
+              name={name}
+              longId={longId}
+              shortId={shortId}
+            />
+          </Row>
           <ChannelClaimsDisplay />
         </PageLayout>
       );

client/src/sagas/show_channel.js

@@ -7,6 +7,7 @@ import { selectSiteHost } from '../selectors/site';
 
 export function * newChannelRequest (action) {
   const { requestType, requestId, channelName, channelId } = action.data;
+  let claimsData;
   // put an action to update the request in redux
   yield put(onRequestUpdate(requestType, requestId));
   // is this an existing request?
@@ -26,27 +27,28 @@ export function * newChannelRequest (action) {
   // store the request in the channel requests list
   const channelKey = `c#${channelName}#${longId}`;
   yield put(addRequestToRequestList(requestId, null, channelKey));
-  // is this an existing channel?
+
   // If this channel is in the channel list, it's already been fetched
   if (state.channelList[channelKey]) {
     return null;
   }
   // get channel claims data
-  let claimsData;
   try {
     ({ data: claimsData } = yield call(getChannelClaims, host, channelName, longId, 1));
   } catch (error) {
     return yield put(onRequestError(error.message));
   }
+
   // store the channel data in the channel list
   yield put(addNewChannelToChannelList(channelKey, channelName, shortId, longId, claimsData));
+
   // clear any request errors
   yield put(onRequestError(null));
 }
 
 export function * watchNewChannelRequest () {
   yield takeLatest(actions.CHANNEL_REQUEST_NEW, newChannelRequest);
-};
+}
 
 function * getNewClaimsAndUpdateChannel (action) {
   const { channelKey, name, longId, page } = action.data;

client/src/utils/createGroupedList.js

@@ -0,0 +1,18 @@
+export const createGroupedList = (list, size) => {
+  if (!size) {
+    throw new Error('no size provided to createGroupedList');
+  }
+
+  if (!list) {
+    throw new Error('no list provided to createGroupedList');
+  }
+  let groupedList = [];
+  for (let i = 0; i < list.length; i = i + size) {
+    let group = [];
+    for (let j = i; j < (i + size); j++) {
+      group.push(list[j]);
+    }
+    groupedList.push(group);
+  }
+  return groupedList;
+};

server/controllers/api/channel/claims/getChannelClaims.js

@@ -1,5 +1,4 @@
 const db = require('../../../../models');
-
 const { returnPaginatedChannelClaims } = require('./channelPagination.js');
 
 const getChannelClaims = (channelName, channelClaimId, page) => {

server/controllers/api/channel/claims/index.js

@@ -1,5 +1,6 @@
 const { handleErrorResponse } = require('../../../utils/errorHandlers.js');
 const getChannelClaims = require('./getChannelClaims.js');
+const logger = require('winston');
 
 const NO_CHANNEL = 'NO_CHANNEL';
 

server/models/claim.js

@@ -231,7 +231,6 @@ module.exports = (sequelize, { STRING, BOOLEAN, INTEGER, TEXT, DECIMAL }) => {
           raw  : true,  // returns an array of only data, not an array of instances
         })
         .then(channelClaimsArray => {
-          // logger.debug('channelclaimsarray length:', channelClaimsArray.length);
           switch (channelClaimsArray.length) {
             case 0:
               return resolve(null);

server/render/build/handleShowRender.js

@@ -57,11 +57,12 @@ module.exports = function (req, res) {
   var sagaMiddleware = (0, _reduxSaga.default)();
   var middleware = (0, _redux.applyMiddleware)(sagaMiddleware); // create a new Redux store instance
 
-  var store = (0, _redux.createStore)(_reducers.default, middleware); // create saga
+  var store = (0, _redux.createStore)(_reducers.default, middleware); // create an action to handle the given url,
+  // and create a the saga needed to handle that action
 
   var action = _actions.default.onHandleShowPageUri(req.params);
 
-  var saga = returnSagaWithParams(_sagas.default.handleShowPageUri, action); // run the saga middleware
+  var saga = returnSagaWithParams(_sagas.default.handleShowPageUri, action); // run the saga middleware with the saga call
 
   sagaMiddleware.run(saga).done.then(function () {
     // render component to a string

server/render/src/handleShowRender.jsx

@@ -30,11 +30,12 @@ module.exports = (req, res) => {
   // create a new Redux store instance
   const store = createStore(Reducers, middleware);
 
-  // create saga
+  // create an action to handle the given url,
+  // and create a the saga needed to handle that action
   const action = Actions.onHandleShowPageUri(req.params);
   const saga = returnSagaWithParams(Sagas.handleShowPageUri, action);
 
-  // run the saga middleware
+  // run the saga middleware with the saga call
   sagaMiddleware
     .run(saga)
     .done