Scss #471

Merged
bones7242 merged 25 commits from scss into master 2018-06-12 01:00:38 +02:00
11 changed files with 86 additions and 196 deletions
Showing only changes of commit 57c14f10af - Show all commits

View file

@ -0,0 +1,24 @@
"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 }; }
var ChannelInfoDisplay = function ChannelInfoDisplay(_ref) {
var name = _ref.name,
longId = _ref.longId,
shortId = _ref.shortId;
return _react.default.createElement("div", null, _react.default.createElement("h2", null, "channel name: ", name), _react.default.createElement("p", {
className: 'fine-print'
}, "full channel id: ", longId), _react.default.createElement("p", {
className: 'fine-print'
}, "short channel id: ", shortId));
};
var _default = ChannelInfoDisplay;
exports.default = _default;

View file

@ -7,17 +7,17 @@ exports.default = void 0;
var _react = _interopRequireDefault(require("react")); var _react = _interopRequireDefault(require("react"));
var _SEO = _interopRequireDefault(require("@components/SEO")); var _PageLayout = _interopRequireDefault(require("@components/PageLayout"));
var _index = _interopRequireDefault(require("../../containers/NavBar/index")); var _HorizontalSplit = _interopRequireDefault(require("@components/HorizontalSplit"));
var _index2 = _interopRequireDefault(require("../ErrorPage/index")); var _AssetTitle = _interopRequireDefault(require("@containers/AssetTitle"));
var _index3 = _interopRequireDefault(require("../../containers/AssetTitle/index")); var _AssetDisplay = _interopRequireDefault(require("@containers/AssetDisplay"));
var _index4 = _interopRequireDefault(require("../../containers/AssetDisplay/index")); var _AssetInfo = _interopRequireDefault(require("@containers/AssetInfo"));
var _index5 = _interopRequireDefault(require("../../containers/AssetInfo/index")); var _ErrorPage = _interopRequireDefault(require("@pages/ErrorPage"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@ -55,26 +55,16 @@ function (_React$Component) {
if (asset) { if (asset) {
var name = asset.claimData.name; var name = asset.claimData.name;
return _react.default.createElement("div", null, _react.default.createElement(_SEO.default, { return _react.default.createElement(_PageLayout.default, {
pageTitle: "".concat(name, " - details"), pageTitle: "".concat(name, " - details"),
asset: asset asset: asset
}), _react.default.createElement(_index.default, null), _react.default.createElement("div", { }, _react.default.createElement(_AssetTitle.default, null), _react.default.createElement(_HorizontalSplit.default, {
className: "row row--tall row--padded" leftSide: _react.default.createElement(_AssetDisplay.default, null),
}, _react.default.createElement("div", { rightSide: _react.default.createElement(_AssetInfo.default, null)
className: "column column--10" }));
}, _react.default.createElement(_index3.default, null)), _react.default.createElement("div", {
className: "column column--5 column--sml-10 align-content-top"
}, _react.default.createElement("div", {
className: "row row--padded show-details-container"
}, _react.default.createElement(_index4.default, null))), _react.default.createElement("div", {
className: "column column--5 column--sml-10 align-content-top"
}, _react.default.createElement("div", {
className: "row row--padded"
}, _react.default.createElement(_index5.default, null)))));
} }
; return _react.default.createElement(_ErrorPage.default, {
return _react.default.createElement(_index2.default, {
error: 'loading asset data...' error: 'loading asset data...'
}); });
} }

View file

@ -11,7 +11,7 @@ var _reactRouterDom = require("react-router-dom");
var _SEO = _interopRequireDefault(require("@components/SEO")); var _SEO = _interopRequireDefault(require("@components/SEO"));
var _index = _interopRequireDefault(require("../../containers/AssetDisplay/index")); var _AssetDisplay = _interopRequireDefault(require("@containers/AssetDisplay"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@ -52,12 +52,11 @@ function (_React$Component) {
name = _asset$claimData.name, name = _asset$claimData.name,
claimId = _asset$claimData.claimId; claimId = _asset$claimData.claimId;
return _react.default.createElement("div", { return _react.default.createElement("div", {
className: "row row--tall flex-container--column flex-container--center-center show-lite-container" className: "row--tall flex-container--column flex-container--center-center show-lite-container"
}, _react.default.createElement(_SEO.default, { }, _react.default.createElement(_SEO.default, {
pageTitle: name, pageTitle: name,
asset: asset asset: asset
}), _react.default.createElement(_index.default, null), _react.default.createElement(_reactRouterDom.Link, { }), _react.default.createElement(_AssetDisplay.default, null), _react.default.createElement(_reactRouterDom.Link, {
id: "asset-boilerpate",
className: "link--primary fine-print", className: "link--primary fine-print",
to: "/".concat(claimId, "/").concat(name) to: "/".concat(claimId, "/").concat(name)
}, "hosted via Spee.ch")); }, "hosted via Spee.ch"));

View file

@ -11,6 +11,8 @@ var _PageLayout = _interopRequireDefault(require("@components/PageLayout"));
var _ErrorPage = _interopRequireDefault(require("@pages/ErrorPage")); var _ErrorPage = _interopRequireDefault(require("@pages/ErrorPage"));
var _ChannelInfoDisplay = _interopRequireDefault(require("@components/ChannelInfoDisplay"));
var _ChannelClaimsDisplay = _interopRequireDefault(require("@containers/ChannelClaimsDisplay")); var _ChannelClaimsDisplay = _interopRequireDefault(require("@containers/ChannelClaimsDisplay"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@ -53,15 +55,14 @@ function (_React$Component) {
shortId = channel.shortId; shortId = channel.shortId;
return _react.default.createElement(_PageLayout.default, { return _react.default.createElement(_PageLayout.default, {
pageTitle: name, pageTitle: name,
pageUri: channel channel: channel
}, _react.default.createElement("h2", null, "channel name: ", name), _react.default.createElement("p", { }, _react.default.createElement(_ChannelInfoDisplay.default, {
className: 'fine-print' name: name,
}, "full channel id: ", longId), _react.default.createElement("p", { longId: longId,
className: 'fine-print' shortId: shortId
}, "short channel id: ", shortId), _react.default.createElement(_ChannelClaimsDisplay.default, null)); }), _react.default.createElement(_ChannelClaimsDisplay.default, null));
} }
;
return _react.default.createElement(_ErrorPage.default, { return _react.default.createElement(_ErrorPage.default, {
error: 'loading channel data...' error: 'loading channel data...'
}); });

View file

@ -1,30 +0,0 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _reactRedux = require("react-redux");
var _show = require("../../actions/show");
var _view = _interopRequireDefault(require("./view"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var mapStateToProps = function mapStateToProps(_ref) {
var show = _ref.show;
return {
error: show.request.error,
requestType: show.request.type
};
};
var mapDispatchToProps = {
onHandleShowPageUri: _show.onHandleShowPageUri
};
var _default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(_view.default);
exports.default = _default;

View file

@ -1,97 +0,0 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _ErrorPage = _interopRequireDefault(require("@pages/ErrorPage"));
var _ShowAssetLite = _interopRequireDefault(require("@containers/ShowAssetLite"));
var _ShowAssetDetails = _interopRequireDefault(require("@containers/ShowAssetDetails"));
var _ShowChannel = _interopRequireDefault(require("@containers/ShowChannel"));
var _show_request_types = require("../../constants/show_request_types");
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 ShowPage =
/*#__PURE__*/
function (_React$Component) {
function ShowPage() {
_classCallCheck(this, ShowPage);
return _possibleConstructorReturn(this, _getPrototypeOf(ShowPage).apply(this, arguments));
}
_createClass(ShowPage, [{
key: "componentDidMount",
value: function componentDidMount() {
this.props.onHandleShowPageUri(this.props.match.params);
}
}, {
key: "componentWillReceiveProps",
value: function componentWillReceiveProps(nextProps) {
if (nextProps.match.params !== this.props.match.params) {
this.props.onHandleShowPageUri(nextProps.match.params);
}
}
}, {
key: "render",
value: function render() {
var _this$props = this.props,
error = _this$props.error,
requestType = _this$props.requestType;
if (error) {
return _react.default.createElement(_ErrorPage.default, {
error: error
});
}
switch (requestType) {
case _show_request_types.CHANNEL:
return _react.default.createElement(_ShowChannel.default, null);
case _show_request_types.ASSET_LITE:
return _react.default.createElement(_ShowAssetLite.default, null);
case _show_request_types.ASSET_DETAILS:
return _react.default.createElement(_ShowAssetDetails.default, null);
default:
return _react.default.createElement("p", null, "loading...");
}
}
}]);
_inherits(ShowPage, _React$Component);
return ShowPage;
}(_react.default.Component);
;
var _default = ShowPage;
exports.default = _default;

View file

@ -0,0 +1,13 @@
import React from 'react';
const ChannelInfoDisplay = ({name, longId, shortId}) => {
return (
<div>
<h2>channel name: {name}</h2>
<p className={'fine-print'}>full channel id: {longId}</p>
<p className={'fine-print'}>short channel id: {shortId}</p>
</div>
);
};
export default ChannelInfoDisplay;

View file

@ -4,7 +4,6 @@ import HorizontalSplit from '@components/HorizontalSplit';
import AboutSpeechOne from '@components/AboutSpeechOne'; import AboutSpeechOne from '@components/AboutSpeechOne';
import AboutSpeechTwo from '@components/AboutSpeechTwo'; import AboutSpeechTwo from '@components/AboutSpeechTwo';
class AboutPage extends React.Component { class AboutPage extends React.Component {
render () { render () {
return ( return (

View file

@ -1,10 +1,11 @@
import React from 'react'; import React from 'react';
import SEO from '@components/SEO'; import PageLayout from '@components/PageLayout';
import NavBar from '../../containers/NavBar/index';
import ErrorPage from '../ErrorPage/index'; import HorizontalSplit from '@components/HorizontalSplit';
import AssetTitle from '../../containers/AssetTitle/index'; import AssetTitle from '@containers/AssetTitle';
import AssetDisplay from '../../containers/AssetDisplay/index'; import AssetDisplay from '@containers/AssetDisplay';
import AssetInfo from '../../containers/AssetInfo/index'; import AssetInfo from '@containers/AssetInfo';
import ErrorPage from '@pages/ErrorPage';
class ShowAssetDetails extends React.Component { class ShowAssetDetails extends React.Component {
render () { render () {
@ -12,26 +13,15 @@ class ShowAssetDetails extends React.Component {
if (asset) { if (asset) {
const { claimData: { name } } = asset; const { claimData: { name } } = asset;
return ( return (
<div> <PageLayout pageTitle={`${name} - details`} asset={asset}>
<SEO pageTitle={`${name} - details`} asset={asset} /> <AssetTitle />
<NavBar /> <HorizontalSplit
<div className='row row--tall row--padded'> leftSide={<AssetDisplay />}
<div className='column column--10'> rightSide={<AssetInfo />}
<AssetTitle /> />
</div> </PageLayout>
<div className='column column--5 column--sml-10 align-content-top'>
<div className='row row--padded show-details-container'>
<AssetDisplay />
</div>
</div><div className='column column--5 column--sml-10 align-content-top'>
<div className='row row--padded'>
<AssetInfo />
</div>
</div>
</div>
</div>
); );
}; }
return ( return (
<ErrorPage error={'loading asset data...'} /> <ErrorPage error={'loading asset data...'} />
); );

View file

@ -1,9 +1,7 @@
import React from 'react'; import React from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
// components
import SEO from '@components/SEO'; import SEO from '@components/SEO';
// containers import AssetDisplay from '@containers/AssetDisplay';
import AssetDisplay from '../../containers/AssetDisplay/index';
class ShowLite extends React.Component { class ShowLite extends React.Component {
render () { render () {
@ -11,10 +9,10 @@ class ShowLite extends React.Component {
if (asset) { if (asset) {
const { name, claimId } = asset.claimData; const { name, claimId } = asset.claimData;
return ( return (
<div className='row row--tall flex-container--column flex-container--center-center show-lite-container'> <div className='row--tall flex-container--column flex-container--center-center show-lite-container'>
<SEO pageTitle={name} asset={asset} /> <SEO pageTitle={name} asset={asset} />
<AssetDisplay /> <AssetDisplay />
<Link id='asset-boilerpate' className='link--primary fine-print' to={`/${claimId}/${name}`}>hosted <Link className='link--primary fine-print' to={`/${claimId}/${name}`}>hosted
via Spee.ch</Link> via Spee.ch</Link>
</div> </div>
); );

View file

@ -1,6 +1,7 @@
import React from 'react'; import React from 'react';
import PageLayout from '@components/PageLayout'; import PageLayout from '@components/PageLayout';
import ErrorPage from '@pages/ErrorPage'; import ErrorPage from '@pages/ErrorPage';
import ChannelInfoDisplay from '@components/ChannelInfoDisplay';
import ChannelClaimsDisplay from '@containers/ChannelClaimsDisplay'; import ChannelClaimsDisplay from '@containers/ChannelClaimsDisplay';
class ShowChannel extends React.Component { class ShowChannel extends React.Component {
@ -9,14 +10,16 @@ class ShowChannel extends React.Component {
if (channel) { if (channel) {
const { name, longId, shortId } = channel; const { name, longId, shortId } = channel;
return ( return (
<PageLayout pageTitle={name} pageUri={channel}> <PageLayout pageTitle={name} channel={channel}>
<h2>channel name: {name}</h2> <ChannelInfoDisplay
<p className={'fine-print'}>full channel id: {longId}</p> name={name}
<p className={'fine-print'}>short channel id: {shortId}</p> longId={longId}
shortId={shortId}
/>
<ChannelClaimsDisplay /> <ChannelClaimsDisplay />
</PageLayout> </PageLayout>
); );
}; }
return ( return (
<ErrorPage error={'loading channel data...'} /> <ErrorPage error={'loading channel data...'} />
); );