LBRYCommunity/spee.ch
1
0
Fork 0
Code Issues 95 Pull requests 2 Projects Releases 4 Packages Wiki Activity

added horizontal quad split for channel content

Browse source
This commit is contained in:
bill bittner 2018-06-11 11:36:32 -07:00
parent 0a716dbf4a
commit 49715e742e
12 changed files with 290 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

66
client/build/components/HorizontalQuadSplit/index.js Normal file
View file

@ -0,0 +1,66 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
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'
}, this.props.itemA), _react.default.createElement("div", {
className: 'column'
}, this.props.itemB)), _react.default.createElement("div", {
className: 'right-side'
}, _react.default.createElement("div", {
className: 'column'
}, this.props.itemC), _react.default.createElement("div", {
className: 'column'
}, this.props.itemD)));
}
}]);
_inherits(HorizontalTriSplit, _React$Component);
return HorizontalTriSplit;
}(_react.default.Component);
var _default = HorizontalTriSplit;
exports.default = _default;

60
client/build/containers/ChannelClaimsDisplay/view.js
View file

@ -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 = 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,42 @@ 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.createGroupedList)(claims, 4);
if (claims.length > 0) {
return _react.default.createElement("div", null, _react.default.createElement(_Row.default, null, groupedClaimsList.map(function (group, index) {
return _react.default.createElement(_HorizontalQuadSplit.default, {
itemA: group[0] ? _react.default.createElement(_AssetPreview.default, {
defaultThumbnail: defaultThumbnail,
claimData: group[0],
key: "".concat(group[0].name, "-").concat(index)
}) : null,
itemB: group[1] ? _react.default.createElement(_AssetPreview.default, {
defaultThumbnail: defaultThumbnail,
claimData: group[1],
key: "".concat(group[1].name, "-").concat(index)
}) : null,
itemC: group[2] ? _react.default.createElement(_AssetPreview.default, {
defaultThumbnail: defaultThumbnail,
claimData: group[2],
key: "".concat(group[2].name, "-").concat(index)
}) : null,
itemD: group[3] ? _react.default.createElement(_AssetPreview.default, {
defaultThumbnail: defaultThumbnail,
claimData: group[3],
key: "".concat(group[3].name, "-").concat(index)
}) : null
});
})), _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 +128,5 @@ function (_React$Component) {
return ChannelClaimsDisplay;
}(_react.default.Component);
;
var _default = ChannelClaimsDisplay;
exports.default = _default;

2
client/build/containers/PublishTitleInput/view.js
View file

@ -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,

18
client/build/utils/createGroupedList.js Normal file
View file

@ -0,0 +1,18 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.createGroupedList = void 0;
var createGroupedList = function createGroupedList(list, size) {
var groupedList = [];
while (list.length > 0) {
groupedList.push(list.splice(0, size));
}
return groupedList;
};
exports.createGroupedList = createGroupedList;

1
client/scss/all.scss
View file

@ -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';

49
client/scss/components/_horizontal-quad-split.scss Normal file
View file

@ -0,0 +1,49 @@
.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 {
width: 50%;
}
}
};
@media (max-width: $break-point-large ) {
.horizontal-quad-split {
flex-direction : column;
.left-side, .right-side {
width : 100%;
padding-left: 0;
padding-right: 0;
padding-bottom: $secondary-padding;
}
};
}
@media (max-width: $break-point-medium ) {
.horizontal-quad-split {
flex-direction : column;
.left-side, .right-side {
flex-direction : column;
.column {
width : 100%;
padding-left: 0;
padding-right: 0;
padding-bottom: $secondary-padding;
}
}
};
}

28
client/src/components/HorizontalQuadSplit/index.jsx Normal file
View file

@ -0,0 +1,28 @@
import React from 'react';
class HorizontalTriSplit extends React.Component {
render () {
return (
<div className={'horizontal-quad-split'}>
<div className={'left-side'}>
<div className={'column'}>
{this.props.itemA}
</div>
<div className={'column'}>
{this.props.itemB}
</div>
</div>
<div className={'right-side'}>
<div className={'column'}>
{this.props.itemC}
</div>
<div className={'column'}>
{this.props.itemD}
</div>
</div>
</div>
);
}
}
export default HorizontalTriSplit;

95
client/src/containers/ChannelClaimsDisplay/view.jsx
View file

@ -1,5 +1,10 @@
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 +27,73 @@ 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) ? (
<div>
{claims.map((claim, index) => <AssetPreview
defaultThumbnail={defaultThumbnail}
claimData={claim}
key={`${claim.name}-${index}`}
const {channel: {claimsData: {claims, currentPage, totalPages}}, defaultThumbnail} = this.props;
const groupedClaimsList = createGroupedList(claims, 4);
if (claims.length > 0) {
return (
<div>
<Row>
{groupedClaimsList.map((group, index) => <HorizontalQuadSplit
itemA={
group[0] ? (
<AssetPreview
defaultThumbnail={defaultThumbnail}
claimData={group[0]}
key={`${group[0].name}-${index}`}
/>
) : null
}
itemB={
group[1] ? (
<AssetPreview
defaultThumbnail={defaultThumbnail}
claimData={group[1]}
key={`${group[1].name}-${index}`}
/>
) : null
}
itemC={
group[2] ? (
<AssetPreview
defaultThumbnail={defaultThumbnail}
claimData={group[2]}
key={`${group[2].name}-${index}`}
/>
) : null
}
itemD={
group[3] ? (
<AssetPreview
defaultThumbnail={defaultThumbnail}
claimData={group[3]}
key={`${group[3].name}-${index}`}
/>
) : null
}
/>)}
<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>
</div>
) : (
<p>There are no claims in this channel</p>
)}
</div>
);
</Row>
<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;

2
client/src/containers/PublishTitleInput/view.jsx
View file

@ -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}

7
client/src/utils/createGroupedList.js Normal file
View file

@ -0,0 +1,7 @@
export const createGroupedList = (list, size) => {
let groupedList = [];
while (list.length > 0) {
groupedList.push(list.splice(0, size));
}
return groupedList;
};

4
server/controllers/api/channel/claims/getChannelClaims.js
View file

@ -1,5 +1,6 @@
const db = require('../../../../models');
const logger = require('winston');
const db = require('../../../../models');
const { returnPaginatedChannelClaims } = require('./channelPagination.js');
const getChannelClaims = (channelName, channelClaimId, page) => {
@ -15,6 +16,7 @@ const getChannelClaims = (channelName, channelClaimId, page) => {
.getAllChannelClaims(longChannelClaimId);
})
.then(channelClaimsArray => {
logger.debug('channel claim array:', channelClaimsArray);
// 3. format the data for the view, including pagination
let paginatedChannelViewData = returnPaginatedChannelClaims(channelName, longChannelClaimId, channelClaimsArray, page);
// 4. return all the channel information and contents