updated scss on asset details page
This commit is contained in:
parent
149af453f4
commit
84e20dfe79
74 changed files with 743 additions and 510 deletions
|
@ -9,8 +9,10 @@ var _react = _interopRequireDefault(require("react"));
|
|||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
var AboutChannels = function AboutChannels() {
|
||||
return _react.default.createElement("div", null, _react.default.createElement("p", null, "Channels allow you to publish and group content under an identity. You can create a channel for yourself, or share one with like-minded friends. You can create 1 channel, or 100, so whether you're ", _react.default.createElement("a", {
|
||||
var ChannelAbout = function ChannelAbout() {
|
||||
return _react.default.createElement("div", null, _react.default.createElement("p", {
|
||||
className: 'large'
|
||||
}, "Channels allow you to publish and group content under an identity. You can create a channel for yourself, or share one with like-minded friends. You can create 1 channel, or 100, so whether you're ", _react.default.createElement("a", {
|
||||
className: "link--primary",
|
||||
target: "_blank",
|
||||
href: "/@catalonia2017:43dcf47163caa21d8404d9fe9b30f78ef3e146a8"
|
||||
|
@ -21,5 +23,5 @@ var AboutChannels = function AboutChannels() {
|
|||
}, "cat gifs"), " (password: '1234'), try creating a channel for it!"));
|
||||
};
|
||||
|
||||
var _default = AboutChannels;
|
||||
var _default = ChannelAbout;
|
||||
exports.default = _default;
|
|
@ -7,25 +7,35 @@ 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 }; }
|
||||
|
||||
var AboutSpeechDetails = function AboutSpeechDetails() {
|
||||
return _react.default.createElement("div", null, _react.default.createElement("p", null, "Spee.ch is a media-hosting site that reads from and publishes content to the ", _react.default.createElement("a", {
|
||||
return _react.default.createElement("div", null, _react.default.createElement(_Row.default, null, _react.default.createElement("p", {
|
||||
className: 'large'
|
||||
}, "Spee.ch is a media-hosting site that reads from and publishes content to the ", _react.default.createElement("a", {
|
||||
className: "link--primary",
|
||||
href: "https://lbry.io"
|
||||
}, "LBRY"), " blockchain."), _react.default.createElement("p", null, "Spee.ch is a hosting service, but with the added benefit that it stores your content on a decentralized network of computers -- the ", _react.default.createElement("a", {
|
||||
}, "LBRY"), " blockchain."), _react.default.createElement("p", {
|
||||
className: 'large'
|
||||
}, "Spee.ch is a hosting service, but with the added benefit that it stores your content on a decentralized network of computers -- the ", _react.default.createElement("a", {
|
||||
className: "link--primary",
|
||||
href: "https://lbry.io/get"
|
||||
}, "LBRY"), " network. This means that your images are stored in multiple locations without a single point of failure."), _react.default.createElement("h3", null, "Contribute"), _react.default.createElement("p", null, "If you have an idea for your own spee.ch-like site on top of LBRY, fork our ", _react.default.createElement("a", {
|
||||
}, "LBRY"), " network. This means that your images are stored in multiple locations without a single point of failure.")), _react.default.createElement(_Row.default, null, _react.default.createElement("h3", null, "Contribute"), _react.default.createElement("p", {
|
||||
className: 'large'
|
||||
}, "If you have an idea for your own spee.ch-like site on top of LBRY, fork our ", _react.default.createElement("a", {
|
||||
className: "link--primary",
|
||||
href: "https://github.com/lbryio/spee.ch"
|
||||
}, "github repo"), " and go to town!"), _react.default.createElement("p", null, "If you want to improve spee.ch, join our ", _react.default.createElement("a", {
|
||||
}, "github repo"), " and go to town!"), _react.default.createElement("p", {
|
||||
className: 'large'
|
||||
}, "If you want to improve spee.ch, join our ", _react.default.createElement("a", {
|
||||
className: "link--primary",
|
||||
href: "https://chat.lbry.io"
|
||||
}, "discord channel"), " or solve one of our ", _react.default.createElement("a", {
|
||||
className: "link--primary",
|
||||
href: "https://github.com/lbryio/spee.ch/issues"
|
||||
}, "github issues"), "."));
|
||||
}, "github issues"), ".")));
|
||||
};
|
||||
|
||||
var _default = AboutSpeechDetails;
|
||||
|
|
|
@ -7,28 +7,38 @@ 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 }; }
|
||||
|
||||
var AboutSpeechOverview = function AboutSpeechOverview() {
|
||||
return _react.default.createElement("div", null, _react.default.createElement("p", {
|
||||
className: "text--pull-quote"
|
||||
}, "Spee.ch is an open-source project. Please contribute to the existing site, or fork it and make your own."), _react.default.createElement("p", null, _react.default.createElement("a", {
|
||||
return _react.default.createElement("div", null, _react.default.createElement(_Row.default, null, _react.default.createElement("p", {
|
||||
className: "extra-large"
|
||||
}, "Spee.ch is an open-source project. Please contribute to the existing site, or fork it and make your own.")), _react.default.createElement(_Row.default, null, _react.default.createElement("p", {
|
||||
className: 'large'
|
||||
}, _react.default.createElement("a", {
|
||||
className: "link--primary",
|
||||
target: "_blank",
|
||||
href: "https://twitter.com/spee_ch"
|
||||
}, "TWITTER")), _react.default.createElement("p", null, _react.default.createElement("a", {
|
||||
}, "TWITTER")), _react.default.createElement("p", {
|
||||
className: 'large'
|
||||
}, _react.default.createElement("a", {
|
||||
className: "link--primary",
|
||||
target: "_blank",
|
||||
href: "https://github.com/lbryio/spee.ch"
|
||||
}, "GITHUB")), _react.default.createElement("p", null, _react.default.createElement("a", {
|
||||
}, "GITHUB")), _react.default.createElement("p", {
|
||||
className: 'large'
|
||||
}, _react.default.createElement("a", {
|
||||
className: "link--primary",
|
||||
target: "_blank",
|
||||
href: "https://discord.gg/YjYbwhS"
|
||||
}, "DISCORD CHANNEL")), _react.default.createElement("p", null, _react.default.createElement("a", {
|
||||
}, "DISCORD CHANNEL")), _react.default.createElement("p", {
|
||||
className: 'large'
|
||||
}, _react.default.createElement("a", {
|
||||
className: "link--primary",
|
||||
target: "_blank",
|
||||
href: "https://github.com/lbryio/spee.ch/blob/master/README.md"
|
||||
}, "DOCUMENTATION")));
|
||||
}, "DOCUMENTATION"))));
|
||||
};
|
||||
|
||||
var _default = AboutSpeechOverview;
|
||||
|
|
27
client/build/components/ChannelAbout/index.js
Normal file
27
client/build/components/ChannelAbout/index.js
Normal file
|
@ -0,0 +1,27 @@
|
|||
"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 ChannelAbout = function ChannelAbout() {
|
||||
return _react.default.createElement("div", null, _react.default.createElement("p", {
|
||||
className: 'large'
|
||||
}, "Channels allow you to publish and group content under an identity. You can create a channel for yourself, or share one with like-minded friends. You can create 1 channel, or 100, so whether you're ", _react.default.createElement("a", {
|
||||
className: "link--primary",
|
||||
target: "_blank",
|
||||
href: "/@catalonia2017:43dcf47163caa21d8404d9fe9b30f78ef3e146a8"
|
||||
}, "documenting important events"), ", or making a public repository for ", _react.default.createElement("a", {
|
||||
className: "link--primary",
|
||||
target: "_blank",
|
||||
href: "/@catGifs"
|
||||
}, "cat gifs"), " (password: '1234'), try creating a channel for it!"));
|
||||
};
|
||||
|
||||
var _default = ChannelAbout;
|
||||
exports.default = _default;
|
|
@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
|
|||
|
||||
var _Label = _interopRequireDefault(require("@components/Label"));
|
||||
|
||||
var _PublishDetailsRow = _interopRequireDefault(require("@components/PublishDetailsRow"));
|
||||
var _RowLabeled = _interopRequireDefault(require("@components/RowLabeled"));
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
|
@ -17,7 +17,7 @@ var ChannelCreateNameInput = function ChannelCreateNameInput(_ref) {
|
|||
var value = _ref.value,
|
||||
error = _ref.error,
|
||||
handleNameInput = _ref.handleNameInput;
|
||||
return _react.default.createElement(_PublishDetailsRow.default, {
|
||||
return _react.default.createElement(_RowLabeled.default, {
|
||||
label: _react.default.createElement(_Label.default, {
|
||||
value: 'Name:'
|
||||
}),
|
||||
|
|
|
@ -9,14 +9,14 @@ var _react = _interopRequireDefault(require("react"));
|
|||
|
||||
var _Label = _interopRequireDefault(require("@components/Label"));
|
||||
|
||||
var _PublishDetailsRow = _interopRequireDefault(require("@components/PublishDetailsRow"));
|
||||
var _RowLabeled = _interopRequireDefault(require("@components/RowLabeled"));
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
var ChannelCreatePasswordInput = function ChannelCreatePasswordInput(_ref) {
|
||||
var value = _ref.value,
|
||||
handlePasswordInput = _ref.handlePasswordInput;
|
||||
return _react.default.createElement(_PublishDetailsRow.default, {
|
||||
return _react.default.createElement(_RowLabeled.default, {
|
||||
label: _react.default.createElement(_Label.default, {
|
||||
value: 'Password:'
|
||||
}),
|
||||
|
|
|
@ -7,7 +7,7 @@ exports.default = void 0;
|
|||
|
||||
var _react = _interopRequireDefault(require("react"));
|
||||
|
||||
var _PublishDetailsRow = _interopRequireDefault(require("@components/PublishDetailsRow"));
|
||||
var _RowLabeled = _interopRequireDefault(require("@components/RowLabeled"));
|
||||
|
||||
var _Label = _interopRequireDefault(require("@components/Label"));
|
||||
|
||||
|
@ -16,7 +16,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|||
var ChannelLoginNameInput = function ChannelLoginNameInput(_ref) {
|
||||
var channelName = _ref.channelName,
|
||||
handleInput = _ref.handleInput;
|
||||
return _react.default.createElement(_PublishDetailsRow.default, {
|
||||
return _react.default.createElement(_RowLabeled.default, {
|
||||
label: _react.default.createElement(_Label.default, {
|
||||
value: 'Name:'
|
||||
}),
|
||||
|
|
|
@ -7,7 +7,7 @@ exports.default = void 0;
|
|||
|
||||
var _react = _interopRequireDefault(require("react"));
|
||||
|
||||
var _PublishDetailsRow = _interopRequireDefault(require("@components/PublishDetailsRow"));
|
||||
var _RowLabeled = _interopRequireDefault(require("@components/RowLabeled"));
|
||||
|
||||
var _Label = _interopRequireDefault(require("@components/Label"));
|
||||
|
||||
|
@ -16,7 +16,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|||
var ChannelLoginPasswordInput = function ChannelLoginPasswordInput(_ref) {
|
||||
var channelPassword = _ref.channelPassword,
|
||||
handleInput = _ref.handleInput;
|
||||
return _react.default.createElement(_PublishDetailsRow.default, {
|
||||
return _react.default.createElement(_RowLabeled.default, {
|
||||
label: _react.default.createElement(_Label.default, {
|
||||
value: 'Password:'
|
||||
}),
|
||||
|
|
|
@ -11,14 +11,12 @@ var _ChannelLoginForm = _interopRequireDefault(require("@containers/ChannelLogin
|
|||
|
||||
var _ChannelCreateForm = _interopRequireDefault(require("@containers/ChannelCreateForm"));
|
||||
|
||||
var _Row = _interopRequireDefault(require("@components/Row"));
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
var ChannelTools = function ChannelTools() {
|
||||
return _react.default.createElement("div", null, _react.default.createElement("h3", {
|
||||
className: "h3--no-bottom"
|
||||
}, "Log in to an existing channel:"), _react.default.createElement(_ChannelLoginForm.default, null), _react.default.createElement("h3", {
|
||||
className: "h3--no-bottom"
|
||||
}, "Create a brand new channel:"), _react.default.createElement(_ChannelCreateForm.default, null));
|
||||
return _react.default.createElement("div", null, _react.default.createElement(_Row.default, null, _react.default.createElement("h3", null, "Log in to an existing channel:"), _react.default.createElement(_ChannelLoginForm.default, null)), _react.default.createElement(_Row.default, null, _react.default.createElement("h3", null, "Create a brand new channel:"), _react.default.createElement(_ChannelCreateForm.default, null)));
|
||||
};
|
||||
|
||||
var _default = ChannelTools;
|
||||
|
|
|
@ -21,10 +21,10 @@ var ChooseAnonymousPublishRadio = function ChooseAnonymousPublishRadio(_ref) {
|
|||
checked: !publishInChannel,
|
||||
onChange: toggleAnonymousPublish
|
||||
}), _react.default.createElement("label", {
|
||||
className: "label label--pointer",
|
||||
className: "label-radio",
|
||||
htmlFor: "anonymous-radio"
|
||||
}, "Anonymous"));
|
||||
};
|
||||
|
||||
var _default = ChooseAnonymousPublishRadio;
|
||||
exports.default = _default;
|
||||
exports.default = _default;
|
||||
|
|
|
@ -21,10 +21,10 @@ var ChooseChannelPublishRadio = function ChooseChannelPublishRadio(_ref) {
|
|||
checked: publishInChannel,
|
||||
onChange: toggleAnonymousPublish
|
||||
}), _react.default.createElement("label", {
|
||||
className: "label label--pointer",
|
||||
className: "label-radio",
|
||||
htmlFor: "channel-radio"
|
||||
}, "In a channel"));
|
||||
};
|
||||
|
||||
var _default = ChooseChannelPublishRadio;
|
||||
exports.default = _default;
|
||||
exports.default = _default;
|
||||
|
|
|
@ -13,7 +13,7 @@ var DropzoneDropItDisplay = function DropzoneDropItDisplay() {
|
|||
return _react.default.createElement("div", {
|
||||
className: "dropzone-dropit-display"
|
||||
}, _react.default.createElement("p", {
|
||||
className: "text--interactive"
|
||||
className: "interactive"
|
||||
}, "Drop it."));
|
||||
};
|
||||
|
||||
|
|
|
@ -14,13 +14,14 @@ var DropzoneInstructionsDisplay = function DropzoneInstructionsDisplay(_ref) {
|
|||
return _react.default.createElement("div", {
|
||||
className: "dropzone-instructions-display"
|
||||
}, _react.default.createElement("p", {
|
||||
className: "info-message-placeholder info-message--failure",
|
||||
id: "input-error-file-selection"
|
||||
}, fileError), _react.default.createElement("p", null, "Drag & drop image or video here to publish"), _react.default.createElement("p", {
|
||||
className: "fine-print"
|
||||
className: 'large'
|
||||
}, "Drag & drop image or video here to publish"), _react.default.createElement("p", {
|
||||
className: "small"
|
||||
}, "OR"), _react.default.createElement("p", {
|
||||
className: "text--underline"
|
||||
}, "CHOOSE FILE"));
|
||||
className: "large underline"
|
||||
}, "CHOOSE FILE"), _react.default.createElement("p", {
|
||||
className: "small form-feedback--failure"
|
||||
}, fileError));
|
||||
};
|
||||
|
||||
var _default = DropzoneInstructionsDisplay;
|
||||
|
|
|
@ -12,11 +12,15 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|||
var FormFeedbackDisplay = function FormFeedbackDisplay(_ref) {
|
||||
var errorMessage = _ref.errorMessage,
|
||||
defaultMessage = _ref.defaultMessage;
|
||||
return _react.default.createElement("div", null, errorMessage ? _react.default.createElement("p", {
|
||||
className: "info-message--failure"
|
||||
}, errorMessage) : _react.default.createElement("p", {
|
||||
className: "info-message"
|
||||
}, defaultMessage));
|
||||
return _react.default.createElement("div", null, errorMessage ? _react.default.createElement("div", {
|
||||
className: 'form-feedback--failure'
|
||||
}, _react.default.createElement("p", {
|
||||
className: "small"
|
||||
}, errorMessage)) : _react.default.createElement("div", {
|
||||
className: 'form-feedback'
|
||||
}, _react.default.createElement("p", {
|
||||
className: "small"
|
||||
}, defaultMessage)));
|
||||
};
|
||||
|
||||
var _default = FormFeedbackDisplay;
|
||||
|
|
|
@ -15,10 +15,12 @@ function NavBarChannelDropdown(_ref) {
|
|||
defaultSelection = _ref.defaultSelection,
|
||||
VIEW = _ref.VIEW,
|
||||
LOGOUT = _ref.LOGOUT;
|
||||
return _react.default.createElement("select", {
|
||||
return _react.default.createElement("div", {
|
||||
className: 'nav-bar-link link--nav'
|
||||
}, _react.default.createElement("select", {
|
||||
type: "text",
|
||||
id: "nav-bar-channel-select",
|
||||
className: "select select--arrow link--nav",
|
||||
className: "select select--arrow",
|
||||
onChange: handleSelection,
|
||||
value: defaultSelection
|
||||
}, _react.default.createElement("option", {
|
||||
|
@ -27,9 +29,8 @@ function NavBarChannelDropdown(_ref) {
|
|||
value: VIEW
|
||||
}, "View"), _react.default.createElement("option", {
|
||||
value: LOGOUT
|
||||
}, "Logout"));
|
||||
}, "Logout")));
|
||||
}
|
||||
|
||||
;
|
||||
var _default = NavBarChannelDropdown;
|
||||
exports.default = _default;
|
|
@ -7,7 +7,7 @@ exports.default = void 0;
|
|||
|
||||
var _react = _interopRequireDefault(require("react"));
|
||||
|
||||
var _PublishDetailsRow = _interopRequireDefault(require("@components/PublishDetailsRow"));
|
||||
var _RowLabeled = _interopRequireDefault(require("@components/RowLabeled"));
|
||||
|
||||
var _Label = _interopRequireDefault(require("@components/Label"));
|
||||
|
||||
|
@ -18,7 +18,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|||
var PublishDescriptionInput = function PublishDescriptionInput(_ref) {
|
||||
var description = _ref.description,
|
||||
handleInput = _ref.handleInput;
|
||||
return _react.default.createElement(_PublishDetailsRow.default, {
|
||||
return _react.default.createElement(_RowLabeled.default, {
|
||||
label: _react.default.createElement(_Label.default, {
|
||||
value: 'Description:'
|
||||
}),
|
||||
|
|
|
@ -7,6 +7,8 @@ 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); }
|
||||
|
@ -27,32 +29,32 @@ function _assertThisInitialized(self) { if (self === void 0) { throw new Referen
|
|||
|
||||
function _getPrototypeOf(o) { _getPrototypeOf = Object.getPrototypeOf || function _getPrototypeOf(o) { return o.__proto__; }; return _getPrototypeOf(o); }
|
||||
|
||||
var PublishDetailsRow =
|
||||
var RowLabeled =
|
||||
/*#__PURE__*/
|
||||
function (_React$Component) {
|
||||
function PublishDetailsRow() {
|
||||
_classCallCheck(this, PublishDetailsRow);
|
||||
function RowLabeled() {
|
||||
_classCallCheck(this, RowLabeled);
|
||||
|
||||
return _possibleConstructorReturn(this, _getPrototypeOf(PublishDetailsRow).apply(this, arguments));
|
||||
return _possibleConstructorReturn(this, _getPrototypeOf(RowLabeled).apply(this, arguments));
|
||||
}
|
||||
|
||||
_createClass(PublishDetailsRow, [{
|
||||
_createClass(RowLabeled, [{
|
||||
key: "render",
|
||||
value: function render() {
|
||||
return _react.default.createElement("div", {
|
||||
return _react.default.createElement(_Row.default, null, _react.default.createElement("div", {
|
||||
className: 'publish-details-row'
|
||||
}, _react.default.createElement("div", {
|
||||
className: 'publish-details-label'
|
||||
}, this.props.label), _react.default.createElement("div", {
|
||||
className: 'publish-details-content'
|
||||
}, this.props.content));
|
||||
}, this.props.content)));
|
||||
}
|
||||
}]);
|
||||
|
||||
_inherits(PublishDetailsRow, _React$Component);
|
||||
_inherits(RowLabeled, _React$Component);
|
||||
|
||||
return PublishDetailsRow;
|
||||
return RowLabeled;
|
||||
}(_react.default.Component);
|
||||
|
||||
var _default = PublishDetailsRow;
|
||||
var _default = RowLabeled;
|
||||
exports.default = _default;
|
|
@ -11,7 +11,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|||
|
||||
var PublishFinePrint = function PublishFinePrint() {
|
||||
return _react.default.createElement("p", {
|
||||
className: "text--fine-print"
|
||||
className: "extra-small secondary"
|
||||
}, "By clicking 'Publish', you affirm that you have the rights to publish this content to the LBRY network, and that you understand the properties of publishing it to a decentralized, user-controlled network. ", _react.default.createElement("a", {
|
||||
className: "link--primary",
|
||||
target: "_blank",
|
||||
|
|
|
@ -7,7 +7,7 @@ exports.default = void 0;
|
|||
|
||||
var _react = _interopRequireDefault(require("react"));
|
||||
|
||||
var _PublishDetailsRow = _interopRequireDefault(require("@components/PublishDetailsRow"));
|
||||
var _RowLabeled = _interopRequireDefault(require("@components/RowLabeled"));
|
||||
|
||||
var _Label = _interopRequireDefault(require("@components/Label"));
|
||||
|
||||
|
@ -15,7 +15,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|||
|
||||
var PublishLicenseInput = function PublishLicenseInput(_ref) {
|
||||
var handleSelect = _ref.handleSelect;
|
||||
return _react.default.createElement(_PublishDetailsRow.default, {
|
||||
return _react.default.createElement(_RowLabeled.default, {
|
||||
label: _react.default.createElement(_Label.default, {
|
||||
value: 'License:'
|
||||
}),
|
||||
|
|
|
@ -7,7 +7,7 @@ exports.default = void 0;
|
|||
|
||||
var _react = _interopRequireDefault(require("react"));
|
||||
|
||||
var _PublishDetailsRow = _interopRequireDefault(require("@components/PublishDetailsRow"));
|
||||
var _RowLabeled = _interopRequireDefault(require("@components/RowLabeled"));
|
||||
|
||||
var _Label = _interopRequireDefault(require("@components/Label"));
|
||||
|
||||
|
@ -16,7 +16,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|||
var PublishNsfwInput = function PublishNsfwInput(_ref) {
|
||||
var nsfw = _ref.nsfw,
|
||||
handleInput = _ref.handleInput;
|
||||
return _react.default.createElement(_PublishDetailsRow.default, {
|
||||
return _react.default.createElement(_RowLabeled.default, {
|
||||
label: _react.default.createElement(_Label.default, {
|
||||
value: 'Mature:'
|
||||
}),
|
||||
|
|
58
client/build/components/RowLabeled/index.js
Normal file
58
client/build/components/RowLabeled/index.js
Normal file
|
@ -0,0 +1,58 @@
|
|||
"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 RowLabeled =
|
||||
/*#__PURE__*/
|
||||
function (_React$Component) {
|
||||
function RowLabeled() {
|
||||
_classCallCheck(this, RowLabeled);
|
||||
|
||||
return _possibleConstructorReturn(this, _getPrototypeOf(RowLabeled).apply(this, arguments));
|
||||
}
|
||||
|
||||
_createClass(RowLabeled, [{
|
||||
key: "render",
|
||||
value: function render() {
|
||||
return _react.default.createElement("div", {
|
||||
className: 'row-labeled'
|
||||
}, _react.default.createElement("div", {
|
||||
className: 'row-labeled-label'
|
||||
}, this.props.label), _react.default.createElement("div", {
|
||||
className: 'row-labeled-content'
|
||||
}, this.props.content));
|
||||
}
|
||||
}]);
|
||||
|
||||
_inherits(RowLabeled, _React$Component);
|
||||
|
||||
return RowLabeled;
|
||||
}(_react.default.Component);
|
||||
|
||||
var _default = RowLabeled;
|
||||
exports.default = _default;
|
|
@ -9,6 +9,14 @@ var _react = _interopRequireDefault(require("react"));
|
|||
|
||||
var _reactRouterDom = require("react-router-dom");
|
||||
|
||||
var _Label = _interopRequireDefault(require("@components/Label"));
|
||||
|
||||
var _RowLabeled = _interopRequireDefault(require("@components/RowLabeled"));
|
||||
|
||||
var _Row = _interopRequireDefault(require("@components/Row"));
|
||||
|
||||
var _SpaceBetween = _interopRequireDefault(require("@components/SpaceBetween"));
|
||||
|
||||
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); }
|
||||
|
@ -29,6 +37,44 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.getPrototypeOf || functio
|
|||
|
||||
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
|
||||
|
||||
var AssetShareButtons = function AssetShareButtons(_ref) {
|
||||
var host = _ref.host,
|
||||
name = _ref.name,
|
||||
shortId = _ref.shortId;
|
||||
return _react.default.createElement(_SpaceBetween.default, null, _react.default.createElement("a", {
|
||||
className: "link--primary",
|
||||
target: "_blank",
|
||||
href: "https://twitter.com/intent/tweet?text=".concat(host, "/").concat(shortId, "/").concat(name)
|
||||
}, "twitter"), _react.default.createElement("a", {
|
||||
className: "link--primary",
|
||||
target: "_blank",
|
||||
href: "https://www.facebook.com/sharer/sharer.php?u=".concat(host, "/").concat(shortId, "/").concat(name)
|
||||
}, "facebook"), _react.default.createElement("a", {
|
||||
className: "link--primary",
|
||||
target: "_blank",
|
||||
href: "http://tumblr.com/widgets/share/tool?canonicalUrl=".concat(host, "/").concat(shortId, "/").concat(name)
|
||||
}, "tumblr"), _react.default.createElement("a", {
|
||||
className: "link--primary",
|
||||
target: "_blank",
|
||||
href: "https://www.reddit.com/submit?url=".concat(host, "/").concat(shortId, "/").concat(name, "&title=").concat(name)
|
||||
}, "reddit"));
|
||||
};
|
||||
|
||||
var ClickToCopy = function ClickToCopy(_ref2) {
|
||||
var id = _ref2.id,
|
||||
value = _ref2.value,
|
||||
copyToClipboard = _ref2.copyToClipboard;
|
||||
return _react.default.createElement("input", {
|
||||
id: id,
|
||||
value: value,
|
||||
onClick: copyToClipboard,
|
||||
type: "text",
|
||||
className: "click-to-copy",
|
||||
readOnly: true,
|
||||
spellCheck: "false"
|
||||
});
|
||||
};
|
||||
|
||||
var AssetInfo =
|
||||
/*#__PURE__*/
|
||||
function (_React$Component) {
|
||||
|
@ -45,7 +91,10 @@ function (_React$Component) {
|
|||
_createClass(AssetInfo, [{
|
||||
key: "copyToClipboard",
|
||||
value: function copyToClipboard(event) {
|
||||
var elementToCopy = event.target.dataset.elementtocopy;
|
||||
console.log('event:', event);
|
||||
console.log('event.target:', event.target);
|
||||
console.log('event.target.id:', event.target.id);
|
||||
var elementToCopy = event.target.id;
|
||||
var element = document.getElementById(elementToCopy);
|
||||
element.select();
|
||||
|
||||
|
@ -72,147 +121,61 @@ function (_React$Component) {
|
|||
contentType = _this$props$asset$cla.contentType,
|
||||
thumbnail = _this$props$asset$cla.thumbnail,
|
||||
host = _this$props$asset$cla.host;
|
||||
return _react.default.createElement("div", null, channelName && _react.default.createElement("div", {
|
||||
className: "row row--padded row--wide row--no-top"
|
||||
}, _react.default.createElement("div", {
|
||||
className: "column column--2 column--med-10"
|
||||
}, _react.default.createElement("span", {
|
||||
className: "text"
|
||||
}, "Channel:")), _react.default.createElement("div", {
|
||||
className: "column column--8 column--med-10"
|
||||
}, _react.default.createElement("span", {
|
||||
className: "text"
|
||||
}, _react.default.createElement(_reactRouterDom.Link, {
|
||||
to: "/".concat(channelName, ":").concat(certificateId)
|
||||
}, channelName)))), description && _react.default.createElement("div", {
|
||||
className: "row row--padded row--wide row--no-top"
|
||||
}, _react.default.createElement("span", {
|
||||
className: "text"
|
||||
}, description)), _react.default.createElement("div", {
|
||||
id: "show-share-buttons",
|
||||
className: "row row--padded row--wide row--no-top"
|
||||
}, _react.default.createElement("div", {
|
||||
className: "column column--2 column--med-10"
|
||||
}, _react.default.createElement("span", {
|
||||
className: "text"
|
||||
}, "Share:")), _react.default.createElement("div", {
|
||||
className: "column column--8 column--med-10"
|
||||
}, _react.default.createElement("div", {
|
||||
className: "row row--short row--wide flex-container--row flex-container--space-between-bottom flex-container--wrap"
|
||||
}, _react.default.createElement("a", {
|
||||
className: "link--primary",
|
||||
target: "_blank",
|
||||
href: "https://twitter.com/intent/tweet?text=".concat(host, "/").concat(shortId, "/").concat(name)
|
||||
}, "twitter"), _react.default.createElement("a", {
|
||||
className: "link--primary",
|
||||
target: "_blank",
|
||||
href: "https://www.facebook.com/sharer/sharer.php?u=".concat(host, "/").concat(shortId, "/").concat(name)
|
||||
}, "facebook"), _react.default.createElement("a", {
|
||||
className: "link--primary",
|
||||
target: "_blank",
|
||||
href: "http://tumblr.com/widgets/share/tool?canonicalUrl=".concat(host, "/").concat(shortId, "/").concat(name)
|
||||
}, "tumblr"), _react.default.createElement("a", {
|
||||
className: "link--primary",
|
||||
target: "_blank",
|
||||
href: "https://www.reddit.com/submit?url=".concat(host, "/").concat(shortId, "/").concat(name, "&title=").concat(name)
|
||||
}, "reddit")))), _react.default.createElement("div", {
|
||||
className: "row row--padded row--wide row--no-top"
|
||||
}, _react.default.createElement("div", {
|
||||
id: "show-short-link"
|
||||
}, _react.default.createElement("div", {
|
||||
className: "column column--2 column--med-10"
|
||||
}, _react.default.createElement("span", {
|
||||
className: "text"
|
||||
}, "Link:")), _react.default.createElement("div", {
|
||||
className: "column column--8 column--med-10"
|
||||
}, _react.default.createElement("div", {
|
||||
className: "row row--short row--wide"
|
||||
}, _react.default.createElement("div", {
|
||||
className: "column column--7"
|
||||
}, _react.default.createElement("div", {
|
||||
className: "input-error",
|
||||
id: "input-error-copy-short-link",
|
||||
hidden: "true"
|
||||
}, "error here"), _react.default.createElement("input", {
|
||||
type: "text",
|
||||
id: "short-link",
|
||||
className: "input-disabled input-text--full-width",
|
||||
readOnly: true,
|
||||
spellCheck: "false",
|
||||
value: "".concat(host, "/").concat(shortId, "/").concat(name, ".").concat(fileExt),
|
||||
onClick: this.select
|
||||
})), _react.default.createElement("div", {
|
||||
className: "column column--1"
|
||||
}), _react.default.createElement("div", {
|
||||
className: "column column--2"
|
||||
}, _react.default.createElement("button", {
|
||||
className: "button--primary button--wide",
|
||||
"data-elementtocopy": "short-link",
|
||||
onClick: this.copyToClipboard
|
||||
}, "copy"))))), _react.default.createElement("div", {
|
||||
id: "show-embed-code"
|
||||
}, _react.default.createElement("div", {
|
||||
className: "column column--2 column--med-10"
|
||||
}, _react.default.createElement("span", {
|
||||
className: "text"
|
||||
}, "Embed:")), _react.default.createElement("div", {
|
||||
className: "column column--8 column--med-10"
|
||||
}, _react.default.createElement("div", {
|
||||
className: "row row--short row--wide"
|
||||
}, _react.default.createElement("div", {
|
||||
className: "column column--7"
|
||||
}, _react.default.createElement("div", {
|
||||
className: "input-error",
|
||||
id: "input-error-copy-embed-text",
|
||||
hidden: "true"
|
||||
}, "error here"), contentType === 'video/mp4' ? _react.default.createElement("input", {
|
||||
type: "text",
|
||||
id: "embed-text",
|
||||
className: "input-disabled input-text--full-width",
|
||||
readOnly: true,
|
||||
onClick: this.select,
|
||||
spellCheck: "false",
|
||||
value: "<video width=\"100%\" controls poster=\"".concat(thumbnail, "\" src=\"").concat(host, "/").concat(claimId, "/").concat(name, ".").concat(fileExt, "\"/></video>")
|
||||
}) : _react.default.createElement("input", {
|
||||
type: "text",
|
||||
id: "embed-text",
|
||||
className: "input-disabled input-text--full-width",
|
||||
readOnly: true,
|
||||
onClick: this.select,
|
||||
spellCheck: "false",
|
||||
value: "<img src=\"".concat(host, "/").concat(claimId, "/").concat(name, ".").concat(fileExt, "\"/>")
|
||||
})), _react.default.createElement("div", {
|
||||
className: "column column--1"
|
||||
}), _react.default.createElement("div", {
|
||||
className: "column column--2"
|
||||
}, _react.default.createElement("button", {
|
||||
className: "button--primary button--wide",
|
||||
"data-elementtocopy": "embed-text",
|
||||
onClick: this.copyToClipboard
|
||||
}, "copy")))))), _react.default.createElement("div", {
|
||||
className: "row row--padded row--wide row--no-top"
|
||||
}, _react.default.createElement("div", {
|
||||
className: "flex-container--row flex-container--space-between-bottom"
|
||||
}, _react.default.createElement(_reactRouterDom.Link, {
|
||||
return _react.default.createElement("div", null, channelName && _react.default.createElement(_Row.default, null, _react.default.createElement(_RowLabeled.default, {
|
||||
label: _react.default.createElement(_Label.default, {
|
||||
value: 'Channel:'
|
||||
}),
|
||||
content: _react.default.createElement("span", {
|
||||
className: "text"
|
||||
}, _react.default.createElement(_reactRouterDom.Link, {
|
||||
to: "/".concat(channelName, ":").concat(certificateId)
|
||||
}, channelName))
|
||||
})), _react.default.createElement(_Row.default, null, _react.default.createElement(_RowLabeled.default, {
|
||||
label: _react.default.createElement(_Label.default, {
|
||||
value: 'Share:'
|
||||
}),
|
||||
content: _react.default.createElement(AssetShareButtons, {
|
||||
host: host,
|
||||
shortId: shortId
|
||||
})
|
||||
})), _react.default.createElement(_Row.default, null, _react.default.createElement(_RowLabeled.default, {
|
||||
label: _react.default.createElement(_Label.default, {
|
||||
value: 'Link:'
|
||||
}),
|
||||
content: _react.default.createElement(ClickToCopy, {
|
||||
id: 'short-link',
|
||||
value: "".concat(host, "/").concat(shortId, "/").concat(name, ".").concat(fileExt),
|
||||
copyToClipboard: this.copyToClipboard
|
||||
})
|
||||
})), _react.default.createElement(_Row.default, null, _react.default.createElement(_RowLabeled.default, {
|
||||
label: _react.default.createElement(_Label.default, {
|
||||
value: 'Embed:'
|
||||
}),
|
||||
content: _react.default.createElement("div", null, contentType === 'video/mp4' ? _react.default.createElement(ClickToCopy, {
|
||||
id: 'embed-text-video',
|
||||
value: "<video width=\"100%\" controls poster=\"".concat(thumbnail, "\" src=\"").concat(host, "/").concat(claimId, "/").concat(name, ".").concat(fileExt, "\"/></video>"),
|
||||
copyToClipboard: this.copyToClipboard
|
||||
}) : _react.default.createElement(ClickToCopy, {
|
||||
id: 'embed-text-image',
|
||||
value: "<img src=\"".concat(host, "/").concat(claimId, "/").concat(name, ".").concat(fileExt, "\"/>"),
|
||||
copyToClipboard: this.copyToClipboard
|
||||
}))
|
||||
})), _react.default.createElement(_Row.default, null, _react.default.createElement(_SpaceBetween.default, null, _react.default.createElement(_reactRouterDom.Link, {
|
||||
className: "link--primary",
|
||||
to: "/".concat(shortId, "/").concat(name, ".").concat(fileExt)
|
||||
}, _react.default.createElement("span", {
|
||||
className: "text"
|
||||
}, "Direct Link")), _react.default.createElement("a", {
|
||||
className: "link--primary",
|
||||
}, "Direct Link"), _react.default.createElement("a", {
|
||||
className: 'link--primary',
|
||||
href: "".concat(host, "/").concat(claimId, "/").concat(name, ".").concat(fileExt),
|
||||
download: name
|
||||
}, "Download"), _react.default.createElement("a", {
|
||||
className: "link--primary",
|
||||
className: 'link--primary',
|
||||
target: "_blank",
|
||||
href: "https://lbry.io/dmca"
|
||||
}, "Report"))), _react.default.createElement("div", {
|
||||
className: "row row--padded row--wide row--no-top"
|
||||
}, "Hosted via the ", _react.default.createElement("a", {
|
||||
className: "link--primary",
|
||||
}, "Report"))), description && _react.default.createElement(_Row.default, null, _react.default.createElement("p", null, description)), _react.default.createElement(_Row.default, null, _react.default.createElement("p", null, "Hosted via the ", _react.default.createElement("a", {
|
||||
className: 'link--primary',
|
||||
href: 'https://lbry.io/get',
|
||||
target: '_blank'
|
||||
}, "LBRY blockchain")));
|
||||
}, "LBRY"), " blockchain")));
|
||||
}
|
||||
}]);
|
||||
|
||||
|
|
|
@ -7,11 +7,13 @@ 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 }; }
|
||||
|
||||
var AssetTitle = function AssetTitle(_ref) {
|
||||
var title = _ref.title;
|
||||
return _react.default.createElement("div", null, _react.default.createElement("h3", null, title));
|
||||
return _react.default.createElement(_Row.default, null, _react.default.createElement("h3", null, title));
|
||||
};
|
||||
|
||||
var _default = AssetTitle;
|
||||
|
|
|
@ -13,7 +13,7 @@ var _ChannelCreateForm = _interopRequireDefault(require("@containers/ChannelCrea
|
|||
|
||||
var _publish_channel_select_states = require("../../constants/publish_channel_select_states");
|
||||
|
||||
var _PublishDetailsRow = _interopRequireDefault(require("@components/PublishDetailsRow"));
|
||||
var _RowLabeled = _interopRequireDefault(require("@components/RowLabeled"));
|
||||
|
||||
var _ChooseAnonymousPublishRadio = _interopRequireDefault(require("@components/ChooseAnonymousPublishRadio"));
|
||||
|
||||
|
@ -93,7 +93,7 @@ function (_React$Component) {
|
|||
channelError = _this$props.channelError,
|
||||
selectedChannel = _this$props.selectedChannel,
|
||||
loggedInChannelName = _this$props.loggedInChannelName;
|
||||
return _react.default.createElement("div", null, _react.default.createElement(_PublishDetailsRow.default, {
|
||||
return _react.default.createElement("div", null, _react.default.createElement(_RowLabeled.default, {
|
||||
label: _react.default.createElement(_ChooseAnonymousPublishRadio.default, {
|
||||
publishInChannel: publishInChannel,
|
||||
toggleAnonymousPublish: this.toggleAnonymousPublish
|
||||
|
@ -105,7 +105,7 @@ function (_React$Component) {
|
|||
}), _react.default.createElement(_FormFeedbackDisplay.default, {
|
||||
errorMessage: channelError,
|
||||
defaultMessage: 'Publish anonymously or in a channel'
|
||||
}), this.props.publishInChannel && _react.default.createElement("div", null, _react.default.createElement(_PublishDetailsRow.default, {
|
||||
}), this.props.publishInChannel && _react.default.createElement("div", null, _react.default.createElement(_RowLabeled.default, {
|
||||
label: _react.default.createElement(_Label.default, {
|
||||
value: 'Channel:'
|
||||
}),
|
||||
|
|
|
@ -43,9 +43,9 @@ function (_React$Component) {
|
|||
return _react.default.createElement("div", {
|
||||
className: "row dropzone--disabled row--tall flex-container--column flex-container--center-center"
|
||||
}, _react.default.createElement("p", {
|
||||
className: "text--secondary"
|
||||
className: "secondary"
|
||||
}, "Publishing is currently disabled."), _react.default.createElement("p", {
|
||||
className: "text--secondary"
|
||||
className: "secondary"
|
||||
}, message));
|
||||
}
|
||||
}]);
|
||||
|
|
|
@ -54,11 +54,11 @@ function (_React$Component) {
|
|||
}, status === publishStates.LOAD_START && _react.default.createElement("div", {
|
||||
className: "row align-content-center"
|
||||
}, _react.default.createElement("p", null, "File is loading to server"), _react.default.createElement("p", {
|
||||
className: "text--primary"
|
||||
className: "primary"
|
||||
}, "0%")), status === publishStates.LOADING && _react.default.createElement("div", null, _react.default.createElement("div", {
|
||||
className: "row align-content-center"
|
||||
}, _react.default.createElement("p", null, "File is loading to server"), _react.default.createElement("p", {
|
||||
className: "text--primary"
|
||||
className: "primary"
|
||||
}, message))), status === publishStates.PUBLISHING && _react.default.createElement("div", {
|
||||
className: "row align-content-center"
|
||||
}, _react.default.createElement("p", null, "Upload complete. Your file is now being published on the blockchain..."), _react.default.createElement(_ProgressBar.default, {
|
||||
|
|
|
@ -53,7 +53,7 @@ function (_React$Component) {
|
|||
return _react.default.createElement("input", {
|
||||
type: "text",
|
||||
id: "publish-title",
|
||||
className: "input-text input-text--full-width",
|
||||
className: "large full-width",
|
||||
name: "title",
|
||||
placeholder: "Give your content a title...",
|
||||
onChange: this.handleInput,
|
||||
|
|
|
@ -39,8 +39,8 @@ function (_React$Component) {
|
|||
_createClass(SiteDescription, [{
|
||||
key: "render",
|
||||
value: function render() {
|
||||
return _react.default.createElement("div", {
|
||||
className: "site-description"
|
||||
return _react.default.createElement("p", {
|
||||
className: "extra-small"
|
||||
}, this.props.siteDescription);
|
||||
}
|
||||
}]);
|
||||
|
|
|
@ -13,7 +13,7 @@ var _PageLayout = _interopRequireDefault(require("@components/PageLayout"));
|
|||
|
||||
var _HorizontalSplit = _interopRequireDefault(require("@components/HorizontalSplit"));
|
||||
|
||||
var _AboutChannels = _interopRequireDefault(require("@components/AboutChannels"));
|
||||
var _ChannelAbout = _interopRequireDefault(require("@components/ChannelAbout"));
|
||||
|
||||
var _ChannelTools = _interopRequireDefault(require("@components/ChannelTools"));
|
||||
|
||||
|
@ -61,7 +61,7 @@ function (_React$Component) {
|
|||
pageTitle: 'Login',
|
||||
pageUri: 'login'
|
||||
}, _react.default.createElement(_HorizontalSplit.default, {
|
||||
leftSide: _react.default.createElement(_AboutChannels.default, null),
|
||||
leftSide: _react.default.createElement(_ChannelAbout.default, null),
|
||||
rightSide: _react.default.createElement(_ChannelTools.default, null)
|
||||
}));
|
||||
}
|
||||
|
|
|
@ -56,8 +56,8 @@ function (_React$Component) {
|
|||
}, _react.default.createElement(_SEO.default, {
|
||||
pageTitle: name,
|
||||
asset: asset
|
||||
}), _react.default.createElement(_AssetDisplay.default, null), _react.default.createElement("div", {
|
||||
className: "fine-print"
|
||||
}), _react.default.createElement(_AssetDisplay.default, null), _react.default.createElement("p", {
|
||||
className: "extra-small"
|
||||
}, _react.default.createElement(_reactRouterDom.Link, {
|
||||
id: "asset-boilerpate",
|
||||
className: "link--primary",
|
||||
|
@ -66,7 +66,7 @@ function (_React$Component) {
|
|||
className: "link--primary",
|
||||
href: 'https://lbry.io/get',
|
||||
target: '_blank'
|
||||
}, "LBRY blockchain")));
|
||||
}, "LBRY"), " blockchain"));
|
||||
}
|
||||
|
||||
return _react.default.createElement("div", {
|
||||
|
@ -82,4 +82,4 @@ function (_React$Component) {
|
|||
|
||||
;
|
||||
var _default = ShowLite;
|
||||
exports.default = _default;
|
||||
exports.default = _default;
|
|
@ -120,4 +120,4 @@ function _default() {
|
|||
}
|
||||
}
|
||||
|
||||
;
|
||||
;
|
|
@ -1,15 +0,0 @@
|
|||
.info-message, .info-message--success, .info-message--failure {
|
||||
|
||||
font-size: medium;
|
||||
margin: 0px;
|
||||
padding: 0.3em;
|
||||
color: #9b9b9b;
|
||||
}
|
||||
|
||||
.info-message--success {
|
||||
color: green;
|
||||
}
|
||||
|
||||
.info-message--failure {
|
||||
color: red;
|
||||
}
|
|
@ -2,21 +2,16 @@ input:-webkit-autofill {
|
|||
-webkit-box-shadow: 0 0 0px 1000px white inset;
|
||||
}
|
||||
|
||||
.label, .input-text, .select, .textarea {
|
||||
margin: 0px;
|
||||
padding: 0.3em;
|
||||
input, select, textarea {
|
||||
margin: 0;
|
||||
outline: none;
|
||||
border: 0px;
|
||||
background-color: white;
|
||||
padding: $thin-padding;
|
||||
border: 0;
|
||||
background-color: $background-color;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.input-disabled {
|
||||
border: 1px solid black;
|
||||
padding: 0.5em;
|
||||
margin: 0px;
|
||||
color: black;
|
||||
background-color: white;
|
||||
.full-width {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
option {
|
||||
|
@ -38,7 +33,7 @@ option {
|
|||
z-index: -1;
|
||||
}
|
||||
|
||||
.input-radio, .label--pointer {
|
||||
.input-radio {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
@ -55,36 +50,28 @@ option {
|
|||
}
|
||||
|
||||
.input-text--primary:focus, .select--primary:focus {
|
||||
border-bottom: 1px solid #9b9b9b;
|
||||
border-bottom: 1px solid $secondary-color;
|
||||
}
|
||||
|
||||
.textarea--primary {
|
||||
border-bottom: 1px solid #9b9b9b;
|
||||
border-bottom: 1px solid $secondary-color;
|
||||
}
|
||||
|
||||
.input-area--primary:focus {
|
||||
border-bottom: 1px solid black;
|
||||
}
|
||||
|
||||
.input-text--full-width, .textarea--full-width {
|
||||
width: calc(100% - 0.6em);
|
||||
}
|
||||
|
||||
.input-disabled--full-width {
|
||||
width: calc(100% - 1em - 2px);
|
||||
border-bottom: 1px solid $primary-color;
|
||||
}
|
||||
|
||||
.url-text--primary, .url-text--secondary {
|
||||
margin:0px;
|
||||
padding:0px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.url-text--primary {
|
||||
color: black;
|
||||
color: $primary-color;
|
||||
}
|
||||
|
||||
.url-text--secondary {
|
||||
color: #9b9b9b;
|
||||
color: $secondary-color;
|
||||
}
|
||||
|
||||
.slider {
|
||||
|
|
|
@ -5,31 +5,30 @@ a, a:visited {
|
|||
}
|
||||
|
||||
.link--primary, .link--primary:visited {
|
||||
color: #4156C5;
|
||||
color: $interactive-color;
|
||||
}
|
||||
|
||||
.link--secondary, .link--secondary:visited {
|
||||
font-size: medium;
|
||||
margin: 0px;
|
||||
padding: 0.3em;
|
||||
color: #9b9b9b;
|
||||
color: $secondary-color;
|
||||
}
|
||||
|
||||
.link--disabled-text {
|
||||
color: #9b9b9b;
|
||||
color: $secondary-color;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.link--nav {
|
||||
color: black;
|
||||
color: $primary-color;
|
||||
border-bottom: 2px solid white;
|
||||
}
|
||||
|
||||
.link--nav:hover {
|
||||
color: #4156C5;
|
||||
color: $interactive-color;
|
||||
}
|
||||
|
||||
.link--nav-active {
|
||||
color: #4156C5;
|
||||
border-bottom: 2px solid #4156C5;
|
||||
color: $interactive-color;
|
||||
border-bottom: 2px solid $interactive-color;
|
||||
}
|
||||
|
|
|
@ -1,10 +1,14 @@
|
|||
// set defaults
|
||||
|
||||
h1, h2, h3, h4, p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: xx-large;
|
||||
}
|
||||
|
||||
h2, h3, p {
|
||||
|
||||
h2, h3 {
|
||||
font-size: x-large;
|
||||
}
|
||||
|
||||
|
@ -16,39 +20,36 @@ h3 {
|
|||
font-weight: bold;
|
||||
}
|
||||
|
||||
body, button, input, textarea, label, select, option {
|
||||
p, body, button, input, textarea, label, select, option {
|
||||
font-family: 'Lekton', monospace;
|
||||
font-size: large;
|
||||
.extra-large {
|
||||
font-size: 2.5em;
|
||||
}
|
||||
.large {
|
||||
font-size: x-large;
|
||||
}
|
||||
.small {
|
||||
font-size: medium;
|
||||
}
|
||||
.extra-small {
|
||||
font-size: small;
|
||||
}
|
||||
.underline {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.primary {
|
||||
color: $primary-color;
|
||||
}
|
||||
.secondary {
|
||||
color: $secondary-color;
|
||||
}
|
||||
.tertiary {
|
||||
color: $tertiary-color;
|
||||
}
|
||||
.interactive {
|
||||
color: $interactive-color;
|
||||
}
|
||||
}
|
||||
|
||||
// color modifiers
|
||||
.text--primary {
|
||||
color: $primary-color;
|
||||
}
|
||||
|
||||
.text--secondary {
|
||||
color: $secondary-color;
|
||||
}
|
||||
|
||||
.text--tertiary {
|
||||
color: $tertiary-color;
|
||||
}
|
||||
|
||||
.text--interactive {
|
||||
color: $interactive-color;
|
||||
}
|
||||
|
||||
// special texts
|
||||
|
||||
.text--pull-quote {
|
||||
font-size: 3rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.text--fine-print {
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
.text--underline {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
|
|
@ -6,6 +6,8 @@ $interactive-color : blue;
|
|||
|
||||
$primary-padding: 3em;
|
||||
$secondary-padding: 2em;
|
||||
$thin-padding: 0.3em;
|
||||
$full-width-thin-padding: calc(100% - 0.6em);
|
||||
|
||||
$background-color: $base-color;
|
||||
$font-color: $primary-color;
|
||||
|
|
|
@ -8,29 +8,32 @@
|
|||
@import '_flex-container';
|
||||
@import '_tooltip';
|
||||
@import '_link';
|
||||
@import '_info-message';
|
||||
@import '_input';
|
||||
@import '_video';
|
||||
@import '_asset';
|
||||
@import '_asset-preview';
|
||||
@import '_progress-bar';
|
||||
@import '_publish-preview';
|
||||
@import 'components/_page-layout';
|
||||
@import 'components/_page-content';
|
||||
@import 'components/_horizontal-split';
|
||||
@import 'components/_space-between';
|
||||
@import 'components/_space-around';
|
||||
@import 'components/_column';
|
||||
@import 'components/_row';
|
||||
@import 'components/_nav-bar';
|
||||
@import 'components/_publish-details-row';
|
||||
|
||||
@import 'components/_button';
|
||||
@import 'components/_button-primary';
|
||||
@import 'components/_button-secondary';
|
||||
@import 'components/_button-tertiary';
|
||||
@import 'components/_click-to-copy';
|
||||
@import 'components/_column';
|
||||
@import 'components/_form-feedback';
|
||||
@import 'components/_horizontal-split';
|
||||
@import 'components/_label';
|
||||
@import 'components/_nav-bar';
|
||||
@import 'components/_page-layout';
|
||||
@import 'components/_page-content';
|
||||
@import 'components/_space-between';
|
||||
@import 'components/_space-around';
|
||||
@import 'components/_row';
|
||||
|
||||
@import 'containers/_dropzone';
|
||||
@import 'containers/_publish-url-input';
|
||||
@import 'containers/_site-description';
|
||||
|
||||
@import '_media-queries';
|
||||
|
||||
|
||||
|
|
9
client/scss/components/_click-to-copy.scss
Normal file
9
client/scss/components/_click-to-copy.scss
Normal file
|
@ -0,0 +1,9 @@
|
|||
.click-to-copy {
|
||||
cursor: pointer;
|
||||
border: 1px solid black;
|
||||
padding: 0.5em;
|
||||
margin: 0;
|
||||
color: black;
|
||||
background-color: white;
|
||||
width: calc(100% - 1em - 2px);
|
||||
}
|
11
client/scss/components/_form-feedback.scss
Normal file
11
client/scss/components/_form-feedback.scss
Normal file
|
@ -0,0 +1,11 @@
|
|||
.form-feedback {
|
||||
color: $secondary-color;
|
||||
}
|
||||
|
||||
.form-feedback--success {
|
||||
color: green;
|
||||
}
|
||||
|
||||
.form-feedback--failure {
|
||||
color: red;
|
||||
}
|
11
client/scss/components/_label.scss
Normal file
11
client/scss/components/_label.scss
Normal file
|
@ -0,0 +1,11 @@
|
|||
.label {
|
||||
padding-top: $thin-padding;
|
||||
padding-bottom: $thin-padding;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.label-radio {
|
||||
padding-left: $thin-padding;
|
||||
padding-right: $thin-padding;
|
||||
cursor: pointer;
|
||||
}
|
|
@ -2,6 +2,9 @@
|
|||
padding-left: $primary-padding;
|
||||
padding-right: $primary-padding;
|
||||
border-bottom: 0.5px solid $tertiary-color;
|
||||
.select--arrow {
|
||||
padding: 0 1.5em 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
// old
|
||||
|
|
|
@ -1,14 +0,0 @@
|
|||
.publish-details-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.publish-details-label {
|
||||
width: 30%;
|
||||
}
|
||||
.publish-details-content {
|
||||
width: 70%;
|
||||
}
|
|
@ -1,3 +1,19 @@
|
|||
.row {
|
||||
padding-bottom: 2em;
|
||||
}
|
||||
|
||||
.row-labeled {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.row-labeled-label {
|
||||
align-self: flex-start;
|
||||
width: 30%;
|
||||
}
|
||||
.row-labeled-content {
|
||||
align-self: center;
|
||||
width: 70%;
|
||||
}
|
||||
|
|
|
@ -1,11 +0,0 @@
|
|||
import React from 'react';
|
||||
|
||||
const AboutChannels = () => {
|
||||
return (
|
||||
<div>
|
||||
<p>Channels allow you to publish and group content under an identity. You can create a channel for yourself, or share one with like-minded friends. You can create 1 channel, or 100, so whether you're <a className='link--primary' target='_blank' href='/@catalonia2017:43dcf47163caa21d8404d9fe9b30f78ef3e146a8'>documenting important events</a>, or making a public repository for <a className='link--primary' target='_blank' href='/@catGifs'>cat gifs</a> (password: '1234'), try creating a channel for it!</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AboutChannels;
|
|
@ -1,13 +1,26 @@
|
|||
import React from 'react';
|
||||
import Row from '@components/Row';
|
||||
|
||||
const AboutSpeechDetails = () => {
|
||||
return (
|
||||
<div>
|
||||
<p>Spee.ch is a media-hosting site that reads from and publishes content to the <a className='link--primary' href='https://lbry.io'>LBRY</a> blockchain.</p>
|
||||
<p>Spee.ch is a hosting service, but with the added benefit that it stores your content on a decentralized network of computers -- the <a className='link--primary' href='https://lbry.io/get'>LBRY</a> network. This means that your images are stored in multiple locations without a single point of failure.</p>
|
||||
<h3>Contribute</h3>
|
||||
<p>If you have an idea for your own spee.ch-like site on top of LBRY, fork our <a className='link--primary' href='https://github.com/lbryio/spee.ch'>github repo</a> and go to town!</p>
|
||||
<p>If you want to improve spee.ch, join our <a className='link--primary' href='https://chat.lbry.io'>discord channel</a> or solve one of our <a className='link--primary' href='https://github.com/lbryio/spee.ch/issues'>github issues</a>.</p>
|
||||
<Row>
|
||||
<p className={'large'}>
|
||||
Spee.ch is a media-hosting site that reads from and publishes content to the <a className='link--primary' href='https://lbry.io'>LBRY</a> blockchain.
|
||||
</p>
|
||||
<p className={'large'}>
|
||||
Spee.ch is a hosting service, but with the added benefit that it stores your content on a decentralized network of computers -- the <a className='link--primary' href='https://lbry.io/get'>LBRY</a> network. This means that your images are stored in multiple locations without a single point of failure.
|
||||
</p>
|
||||
</Row>
|
||||
<Row>
|
||||
<h3>Contribute</h3>
|
||||
<p className={'large'}>
|
||||
If you have an idea for your own spee.ch-like site on top of LBRY, fork our <a className='link--primary' href='https://github.com/lbryio/spee.ch'>github repo</a> and go to town!
|
||||
</p>
|
||||
<p className={'large'}>
|
||||
If you want to improve spee.ch, join our <a className='link--primary' href='https://chat.lbry.io'>discord channel</a> or solve one of our <a className='link--primary' href='https://github.com/lbryio/spee.ch/issues'>github issues</a>.
|
||||
</p>
|
||||
</Row>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -1,13 +1,26 @@
|
|||
import React from 'react';
|
||||
import Row from '@components/Row';
|
||||
|
||||
const AboutSpeechOverview = () => {
|
||||
return (
|
||||
<div>
|
||||
<p className='text--pull-quote'>Spee.ch is an open-source project. Please contribute to the existing site, or fork it and make your own.</p>
|
||||
<p><a className='link--primary' target='_blank' href='https://twitter.com/spee_ch'>TWITTER</a></p>
|
||||
<p><a className='link--primary' target='_blank' href='https://github.com/lbryio/spee.ch'>GITHUB</a></p>
|
||||
<p><a className='link--primary' target='_blank' href='https://discord.gg/YjYbwhS'>DISCORD CHANNEL</a></p>
|
||||
<p><a className='link--primary' target='_blank' href='https://github.com/lbryio/spee.ch/blob/master/README.md'>DOCUMENTATION</a></p>
|
||||
<Row>
|
||||
<p className='extra-large'>Spee.ch is an open-source project. Please contribute to the existing site, or fork it and make your own.</p>
|
||||
</Row>
|
||||
<Row>
|
||||
<p className={'large'}>
|
||||
<a className='link--primary' target='_blank' href='https://twitter.com/spee_ch'>TWITTER</a>
|
||||
</p>
|
||||
<p className={'large'}>
|
||||
<a className='link--primary' target='_blank' href='https://github.com/lbryio/spee.ch'>GITHUB</a>
|
||||
</p>
|
||||
<p className={'large'}>
|
||||
<a className='link--primary' target='_blank' href='https://discord.gg/YjYbwhS'>DISCORD CHANNEL</a>
|
||||
</p>
|
||||
<p className={'large'}>
|
||||
<a className='link--primary' target='_blank' href='https://github.com/lbryio/spee.ch/blob/master/README.md'>DOCUMENTATION</a>
|
||||
</p>
|
||||
</Row>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
11
client/src/components/ChannelAbout/index.jsx
Normal file
11
client/src/components/ChannelAbout/index.jsx
Normal file
|
@ -0,0 +1,11 @@
|
|||
import React from 'react';
|
||||
|
||||
const ChannelAbout = () => {
|
||||
return (
|
||||
<div>
|
||||
<p className={'large'}>Channels allow you to publish and group content under an identity. You can create a channel for yourself, or share one with like-minded friends. You can create 1 channel, or 100, so whether you're <a className='link--primary' target='_blank' href='/@catalonia2017:43dcf47163caa21d8404d9fe9b30f78ef3e146a8'>documenting important events</a>, or making a public repository for <a className='link--primary' target='_blank' href='/@catGifs'>cat gifs</a> (password: '1234'), try creating a channel for it!</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ChannelAbout;
|
|
@ -1,10 +1,10 @@
|
|||
import React from 'react';
|
||||
import Label from '@components/Label';
|
||||
import PublishDetailsRow from '@components/PublishDetailsRow';
|
||||
import RowLabeled from '@components/RowLabeled';
|
||||
|
||||
const ChannelCreateNameInput = ({ value, error, handleNameInput }) => {
|
||||
return (
|
||||
<PublishDetailsRow
|
||||
<RowLabeled
|
||||
label={
|
||||
<Label value={'Name:'} />
|
||||
}
|
||||
|
|
|
@ -1,10 +1,10 @@
|
|||
import React from 'react';
|
||||
import Label from '@components/Label';
|
||||
import PublishDetailsRow from '@components/PublishDetailsRow';
|
||||
import RowLabeled from '@components/RowLabeled';
|
||||
|
||||
const ChannelCreatePasswordInput = ({ value, handlePasswordInput }) => {
|
||||
return (
|
||||
<PublishDetailsRow
|
||||
<RowLabeled
|
||||
label={
|
||||
<Label value={'Password:'} />
|
||||
}
|
||||
|
|
|
@ -1,10 +1,10 @@
|
|||
import React from 'react';
|
||||
import PublishDetailsRow from '@components/PublishDetailsRow';
|
||||
import RowLabeled from '@components/RowLabeled';
|
||||
import Label from '@components/Label';
|
||||
|
||||
const ChannelLoginNameInput = ({ channelName, handleInput }) => {
|
||||
return (
|
||||
<PublishDetailsRow
|
||||
<RowLabeled
|
||||
label={
|
||||
<Label value={'Name:'} />
|
||||
}
|
||||
|
|
|
@ -1,10 +1,10 @@
|
|||
import React from 'react';
|
||||
import PublishDetailsRow from '@components/PublishDetailsRow';
|
||||
import RowLabeled from '@components/RowLabeled';
|
||||
import Label from '@components/Label';
|
||||
|
||||
const ChannelLoginPasswordInput = ({ channelPassword, handleInput }) => {
|
||||
return (
|
||||
<PublishDetailsRow
|
||||
<RowLabeled
|
||||
label={
|
||||
<Label value={'Password:'} />
|
||||
}
|
||||
|
|
|
@ -1,14 +1,19 @@
|
|||
import React from 'react';
|
||||
import ChannelLoginForm from '@containers/ChannelLoginForm';
|
||||
import ChannelCreateForm from '@containers/ChannelCreateForm';
|
||||
import Row from '@components/Row';
|
||||
|
||||
const ChannelTools = () => {
|
||||
return (
|
||||
<div>
|
||||
<h3 className='h3--no-bottom'>Log in to an existing channel:</h3>
|
||||
<ChannelLoginForm />
|
||||
<h3 className='h3--no-bottom'>Create a brand new channel:</h3>
|
||||
<ChannelCreateForm />
|
||||
<Row>
|
||||
<h3>Log in to an existing channel:</h3>
|
||||
<ChannelLoginForm />
|
||||
</Row>
|
||||
<Row>
|
||||
<h3>Create a brand new channel:</h3>
|
||||
<ChannelCreateForm />
|
||||
</Row>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -13,7 +13,7 @@ const ChooseAnonymousPublishRadio = ({ publishInChannel, toggleAnonymousPublish
|
|||
onChange={toggleAnonymousPublish}
|
||||
/>
|
||||
<label
|
||||
className='label label--pointer'
|
||||
className='label-radio'
|
||||
htmlFor='anonymous-radio'
|
||||
>
|
||||
Anonymous
|
||||
|
|
|
@ -13,7 +13,7 @@ const ChooseChannelPublishRadio = ({ publishInChannel, toggleAnonymousPublish })
|
|||
onChange={toggleAnonymousPublish}
|
||||
/>
|
||||
<label
|
||||
className='label label--pointer'
|
||||
className='label-radio'
|
||||
htmlFor='channel-radio'
|
||||
>
|
||||
In a channel
|
||||
|
|
|
@ -3,7 +3,7 @@ import React from 'react';
|
|||
const DropzoneDropItDisplay = () => {
|
||||
return (
|
||||
<div className='dropzone-dropit-display'>
|
||||
<p className='text--interactive'>Drop it.</p>
|
||||
<p className='interactive'>Drop it.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -3,10 +3,18 @@ import React from 'react';
|
|||
const DropzoneInstructionsDisplay = ({fileError}) => {
|
||||
return (
|
||||
<div className='dropzone-instructions-display'>
|
||||
<p className='info-message-placeholder info-message--failure' id='input-error-file-selection'>{fileError}</p>
|
||||
<p>Drag & drop image or video here to publish</p>
|
||||
<p className='fine-print'>OR</p>
|
||||
<p className='text--underline'>CHOOSE FILE</p>
|
||||
<p className={'large'}>
|
||||
Drag & drop image or video here to publish
|
||||
</p>
|
||||
<p className='small'>
|
||||
OR
|
||||
</p>
|
||||
<p className='large underline'>
|
||||
CHOOSE FILE
|
||||
</p>
|
||||
<p className='small form-feedback--failure'>
|
||||
{fileError}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -4,9 +4,13 @@ const FormFeedbackDisplay = ({ errorMessage, defaultMessage }) => {
|
|||
return (
|
||||
<div>
|
||||
{ errorMessage ? (
|
||||
<p className='info-message--failure'>{errorMessage}</p>
|
||||
<div className={'form-feedback--failure'}>
|
||||
<p className='small'>{errorMessage}</p>
|
||||
</div>
|
||||
) : (
|
||||
<p className='info-message'>{defaultMessage}</p>
|
||||
<div className={'form-feedback'}>
|
||||
<p className='small'>{defaultMessage}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -2,12 +2,20 @@ import React from 'react';
|
|||
|
||||
function NavBarChannelDropdown ({ channelName, handleSelection, defaultSelection, VIEW, LOGOUT }) {
|
||||
return (
|
||||
<select type='text' id='nav-bar-channel-select' className='select select--arrow link--nav' onChange={handleSelection} value={defaultSelection}>
|
||||
<option id='nav-bar-channel-select-channel-option'>{channelName}</option>
|
||||
<option value={VIEW}>View</option>
|
||||
<option value={LOGOUT}>Logout</option>
|
||||
</select>
|
||||
<div className={'nav-bar-link link--nav'}>
|
||||
<select
|
||||
type='text'
|
||||
id='nav-bar-channel-select'
|
||||
className='select select--arrow'
|
||||
onChange={handleSelection}
|
||||
value={defaultSelection}
|
||||
>
|
||||
<option id='nav-bar-channel-select-channel-option'>{channelName}</option>
|
||||
<option value={VIEW}>View</option>
|
||||
<option value={LOGOUT}>Logout</option>
|
||||
</select>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
export default NavBarChannelDropdown;
|
||||
|
|
|
@ -1,11 +1,11 @@
|
|||
import React from 'react';
|
||||
import PublishDetailsRow from '@components/PublishDetailsRow';
|
||||
import RowLabeled from '@components/RowLabeled';
|
||||
import Label from '@components/Label';
|
||||
import ExpandingTextArea from '@components/ExpandingTextArea';
|
||||
|
||||
const PublishDescriptionInput = ({ description, handleInput }) => {
|
||||
return (
|
||||
<PublishDetailsRow
|
||||
<RowLabeled
|
||||
label={
|
||||
<Label value={'Description:'} />
|
||||
}
|
||||
|
|
|
@ -1,14 +0,0 @@
|
|||
import React from 'react';
|
||||
|
||||
class PublishDetailsRow extends React.Component {
|
||||
render () {
|
||||
return (
|
||||
<div className={'publish-details-row'}>
|
||||
<div className={'publish-details-label'}>{this.props.label}</div>
|
||||
<div className={'publish-details-content'}>{this.props.content}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default PublishDetailsRow;
|
|
@ -2,7 +2,7 @@ import React from 'react';
|
|||
|
||||
const PublishFinePrint = () => {
|
||||
return (
|
||||
<p className='text--fine-print'>
|
||||
<p className='extra-small secondary'>
|
||||
By clicking 'Publish', you affirm that you have the rights to publish this content to the LBRY network, and that you understand the properties of publishing it to a decentralized, user-controlled network. <a className='link--primary' target='_blank' href='https://lbry.io/learn'>Read more.</a>
|
||||
</p>
|
||||
);
|
||||
|
|
|
@ -1,10 +1,10 @@
|
|||
import React from 'react';
|
||||
import PublishDetailsRow from '@components/PublishDetailsRow';
|
||||
import RowLabeled from '@components/RowLabeled';
|
||||
import Label from '@components/Label';
|
||||
|
||||
const PublishLicenseInput = ({ handleSelect }) => {
|
||||
return (
|
||||
<PublishDetailsRow
|
||||
<RowLabeled
|
||||
label={
|
||||
<Label value={'License:'} />
|
||||
}
|
||||
|
|
|
@ -1,10 +1,10 @@
|
|||
import React from 'react';
|
||||
import PublishDetailsRow from '@components/PublishDetailsRow';
|
||||
import RowLabeled from '@components/RowLabeled';
|
||||
import Label from '@components/Label';
|
||||
|
||||
const PublishNsfwInput = ({ nsfw, handleInput }) => {
|
||||
return (
|
||||
<PublishDetailsRow
|
||||
<RowLabeled
|
||||
label={
|
||||
<Label value={'Mature:'} />
|
||||
}
|
||||
|
|
14
client/src/components/RowLabeled/index.jsx
Normal file
14
client/src/components/RowLabeled/index.jsx
Normal file
|
@ -0,0 +1,14 @@
|
|||
import React from 'react';
|
||||
|
||||
class RowLabeled extends React.Component {
|
||||
render () {
|
||||
return (
|
||||
<div className={'row-labeled'}>
|
||||
<div className={'row-labeled-label'}>{this.props.label}</div>
|
||||
<div className={'row-labeled-content'}>{this.props.content}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default RowLabeled;
|
|
@ -1,5 +1,58 @@
|
|||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import Label from '@components/Label';
|
||||
import RowLabeled from '@components/RowLabeled';
|
||||
import Row from '@components/Row';
|
||||
import SpaceBetween from '@components/SpaceBetween';
|
||||
|
||||
const AssetShareButtons = ({ host, name, shortId }) => {
|
||||
return (
|
||||
<SpaceBetween >
|
||||
<a
|
||||
className='link--primary'
|
||||
target='_blank'
|
||||
href={`https://twitter.com/intent/tweet?text=${host}/${shortId}/${name}`}
|
||||
>
|
||||
twitter
|
||||
</a>
|
||||
<a
|
||||
className='link--primary'
|
||||
target='_blank'
|
||||
href={`https://www.facebook.com/sharer/sharer.php?u=${host}/${shortId}/${name}`}
|
||||
>
|
||||
facebook
|
||||
</a>
|
||||
<a
|
||||
className='link--primary'
|
||||
target='_blank'
|
||||
href={`http://tumblr.com/widgets/share/tool?canonicalUrl=${host}/${shortId}/${name}`}
|
||||
>
|
||||
tumblr
|
||||
</a>
|
||||
<a
|
||||
className='link--primary'
|
||||
target='_blank'
|
||||
href={`https://www.reddit.com/submit?url=${host}/${shortId}/${name}&title=${name}`}
|
||||
>
|
||||
reddit
|
||||
</a>
|
||||
</SpaceBetween>
|
||||
);
|
||||
};
|
||||
|
||||
const ClickToCopy = ({id, value, copyToClipboard}) => {
|
||||
return (
|
||||
<input
|
||||
id={id}
|
||||
value={value}
|
||||
onClick={copyToClipboard}
|
||||
type='text'
|
||||
className='click-to-copy'
|
||||
readOnly
|
||||
spellCheck='false'
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
class AssetInfo extends React.Component {
|
||||
constructor (props) {
|
||||
|
@ -7,8 +60,11 @@ class AssetInfo extends React.Component {
|
|||
this.copyToClipboard = this.copyToClipboard.bind(this);
|
||||
}
|
||||
copyToClipboard (event) {
|
||||
var elementToCopy = event.target.dataset.elementtocopy;
|
||||
var element = document.getElementById(elementToCopy);
|
||||
console.log('event:', event);
|
||||
console.log('event.target:', event.target);
|
||||
console.log('event.target.id:', event.target.id);
|
||||
const elementToCopy = event.target.id;
|
||||
const element = document.getElementById(elementToCopy);
|
||||
element.select();
|
||||
try {
|
||||
document.execCommand('copy');
|
||||
|
@ -20,104 +76,111 @@ class AssetInfo extends React.Component {
|
|||
const { asset: { shortId, claimData : { channelName, certificateId, description, name, claimId, fileExt, contentType, thumbnail, host } } } = this.props;
|
||||
return (
|
||||
<div>
|
||||
{channelName &&
|
||||
<div className='row row--padded row--wide row--no-top'>
|
||||
<div className='column column--2 column--med-10'>
|
||||
<span className='text'>Channel:</span>
|
||||
</div>
|
||||
<div className='column column--8 column--med-10'>
|
||||
<span className='text'><Link to={`/${channelName}:${certificateId}`}>{channelName}</Link></span>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
{channelName && (
|
||||
<Row>
|
||||
<RowLabeled
|
||||
label={
|
||||
<Label value={'Channel:'} />
|
||||
}
|
||||
content={
|
||||
<span className='text'>
|
||||
<Link to={`/${channelName}:${certificateId}`}>{channelName}</Link>
|
||||
</span>
|
||||
}
|
||||
/>
|
||||
</Row>
|
||||
)}
|
||||
|
||||
{description &&
|
||||
<div className='row row--padded row--wide row--no-top'>
|
||||
<span className='text'>{description}</span>
|
||||
</div>
|
||||
}
|
||||
<Row>
|
||||
<RowLabeled
|
||||
label={
|
||||
<Label value={'Share:'} />
|
||||
}
|
||||
content={
|
||||
<AssetShareButtons
|
||||
host={host}
|
||||
shortId={shortId}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</Row>
|
||||
|
||||
<div id='show-share-buttons' className='row row--padded row--wide row--no-top'>
|
||||
<div className='column column--2 column--med-10'>
|
||||
<span className='text'>Share:</span>
|
||||
</div>
|
||||
<div className='column column--8 column--med-10'>
|
||||
<div
|
||||
className='row row--short row--wide flex-container--row flex-container--space-between-bottom flex-container--wrap'>
|
||||
<a className='link--primary' target='_blank' href={`https://twitter.com/intent/tweet?text=${host}/${shortId}/${name}`}>twitter</a>
|
||||
<a className='link--primary' target='_blank' href={`https://www.facebook.com/sharer/sharer.php?u=${host}/${shortId}/${name}`}>facebook</a>
|
||||
<a className='link--primary' target='_blank' href={`http://tumblr.com/widgets/share/tool?canonicalUrl=${host}/${shortId}/${name}`}>tumblr</a>
|
||||
<a className='link--primary' target='_blank' href={`https://www.reddit.com/submit?url=${host}/${shortId}/${name}&title=${name}`}>reddit</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Row>
|
||||
<RowLabeled
|
||||
label={
|
||||
<Label value={'Link:'} />
|
||||
}
|
||||
content={
|
||||
<ClickToCopy
|
||||
id={'short-link'}
|
||||
value={`${host}/${shortId}/${name}.${fileExt}`}
|
||||
copyToClipboard={this.copyToClipboard}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</Row>
|
||||
|
||||
<div className='row row--padded row--wide row--no-top'>
|
||||
<div id='show-short-link'>
|
||||
<div className='column column--2 column--med-10'>
|
||||
<span className='text'>Link:</span>
|
||||
</div>
|
||||
<div className='column column--8 column--med-10'>
|
||||
<div className='row row--short row--wide'>
|
||||
<div className='column column--7'>
|
||||
<div className='input-error' id='input-error-copy-short-link' hidden='true'>error here</div>
|
||||
<input type='text' id='short-link' className='input-disabled input-text--full-width' readOnly
|
||||
spellCheck='false'
|
||||
value={`${host}/${shortId}/${name}.${fileExt}`}
|
||||
onClick={this.select} />
|
||||
</div>
|
||||
<div className='column column--1' />
|
||||
<div className='column column--2'>
|
||||
<button className='button--primary button--wide' data-elementtocopy='short-link'
|
||||
onClick={this.copyToClipboard}>copy
|
||||
</button>
|
||||
</div>
|
||||
<Row>
|
||||
<RowLabeled
|
||||
label={
|
||||
<Label value={'Embed:'} />
|
||||
}
|
||||
content={
|
||||
<div>
|
||||
{(contentType === 'video/mp4') ? (
|
||||
<ClickToCopy
|
||||
id={'embed-text-video'}
|
||||
value={`<video width="100%" controls poster="${thumbnail}" src="${host}/${claimId}/${name}.${fileExt}"/></video>`}
|
||||
copyToClipboard={this.copyToClipboard}
|
||||
/>
|
||||
) : (
|
||||
<ClickToCopy
|
||||
id={'embed-text-image'}
|
||||
value={`<img src="${host}/${claimId}/${name}.${fileExt}"/>`}
|
||||
copyToClipboard={this.copyToClipboard}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</Row>
|
||||
|
||||
<div id='show-embed-code'>
|
||||
<div className='column column--2 column--med-10'>
|
||||
<span className='text'>Embed:</span>
|
||||
</div>
|
||||
<div className='column column--8 column--med-10'>
|
||||
<div className='row row--short row--wide'>
|
||||
<div className='column column--7'>
|
||||
<div className='input-error' id='input-error-copy-embed-text' hidden='true'>error here</div>
|
||||
{(contentType === 'video/mp4') ? (
|
||||
<input type='text' id='embed-text' className='input-disabled input-text--full-width' readOnly
|
||||
onClick={this.select} spellCheck='false'
|
||||
value={`<video width="100%" controls poster="${thumbnail}" src="${host}/${claimId}/${name}.${fileExt}"/></video>`} />
|
||||
) : (
|
||||
<input type='text' id='embed-text' className='input-disabled input-text--full-width' readOnly
|
||||
onClick={this.select} spellCheck='false'
|
||||
value={`<img src="${host}/${claimId}/${name}.${fileExt}"/>`}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className='column column--1' />
|
||||
<div className='column column--2'>
|
||||
<button className='button--primary button--wide' data-elementtocopy='embed-text'
|
||||
onClick={this.copyToClipboard}>copy
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Row>
|
||||
<SpaceBetween>
|
||||
<Link
|
||||
className='link--primary'
|
||||
to={`/${shortId}/${name}.${fileExt}`}
|
||||
>
|
||||
Direct Link
|
||||
</Link>
|
||||
<a
|
||||
className={'link--primary'}
|
||||
href={`${host}/${claimId}/${name}.${fileExt}`}
|
||||
download={name}
|
||||
>
|
||||
Download
|
||||
</a>
|
||||
<a
|
||||
className={'link--primary'}
|
||||
target='_blank'
|
||||
href='https://lbry.io/dmca'
|
||||
>
|
||||
Report
|
||||
</a>
|
||||
</SpaceBetween>
|
||||
</Row>
|
||||
|
||||
<div className='row row--padded row--wide row--no-top'>
|
||||
<div className='flex-container--row flex-container--space-between-bottom'>
|
||||
<Link className='link--primary' to={`/${shortId}/${name}.${fileExt}`}><span
|
||||
className='text'>Direct Link</span></Link>
|
||||
<a className='link--primary' href={`${host}/${claimId}/${name}.${fileExt}`} download={name}>Download</a>
|
||||
<a className='link--primary' target='_blank' href='https://lbry.io/dmca'>Report</a>
|
||||
</div>
|
||||
</div>
|
||||
{description && (
|
||||
<Row>
|
||||
<p>{description}</p>
|
||||
</Row>
|
||||
)}
|
||||
|
||||
<div className='row row--padded row--wide row--no-top'>
|
||||
Hosted via the <a className='link--primary' href={'https://lbry.io/get'} target={'_blank'}>LBRY blockchain</a>
|
||||
</div>
|
||||
<Row>
|
||||
<p>
|
||||
Hosted via the <a className={'link--primary'} href={'https://lbry.io/get'} target={'_blank'}>LBRY</a> blockchain
|
||||
</p>
|
||||
</Row>
|
||||
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -1,10 +1,11 @@
|
|||
import React from 'react';
|
||||
import Row from '@components/Row';
|
||||
|
||||
const AssetTitle = ({ title }) => {
|
||||
return (
|
||||
<div>
|
||||
<Row>
|
||||
<h3>{title}</h3>
|
||||
</div>
|
||||
</Row>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
@ -2,7 +2,7 @@ import React from 'react';
|
|||
import ChannelLoginForm from '@containers/ChannelLoginForm';
|
||||
import ChannelCreateForm from '@containers/ChannelCreateForm';
|
||||
import { LOGIN, CREATE } from '../../constants/publish_channel_select_states';
|
||||
import PublishDetailsRow from '@components/PublishDetailsRow';
|
||||
import RowLabeled from '@components/RowLabeled';
|
||||
import ChooseAnonymousPublishRadio from '@components/ChooseAnonymousPublishRadio';
|
||||
import ChooseChannelPublishRadio from '@components/ChooseChannelPublishRadio';
|
||||
import FormFeedbackDisplay from '@components/FormFeedbackDisplay';
|
||||
|
@ -37,7 +37,7 @@ class ChannelSelect extends React.Component {
|
|||
const { publishInChannel, channelError, selectedChannel, loggedInChannelName } = this.props;
|
||||
return (
|
||||
<div>
|
||||
<PublishDetailsRow
|
||||
<RowLabeled
|
||||
label={
|
||||
<ChooseAnonymousPublishRadio
|
||||
publishInChannel={publishInChannel}
|
||||
|
@ -58,7 +58,7 @@ class ChannelSelect extends React.Component {
|
|||
|
||||
{ this.props.publishInChannel && (
|
||||
<div>
|
||||
<PublishDetailsRow
|
||||
<RowLabeled
|
||||
label={
|
||||
<Label value={'Channel:'} />
|
||||
}
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import React from 'react';
|
||||
import { NavLink, withRouter } from 'react-router-dom';
|
||||
import NavBarChannelDropdown from '@components/NavBarChannelOptionsDropdown';
|
||||
import NavBarChannelOptionsDropdown from '@components/NavBarChannelOptionsDropdown';
|
||||
|
||||
const VIEW = 'VIEW';
|
||||
const LOGOUT = 'LOGOUT';
|
||||
|
@ -30,10 +30,23 @@ class NavigationLinks extends React.Component {
|
|||
render () {
|
||||
return (
|
||||
<div className='navigation-links'>
|
||||
<NavLink className='nav-bar-link link--nav' activeClassName='link--nav-active' to='/' exact>Publish</NavLink>
|
||||
<NavLink className='nav-bar-link link--nav' activeClassName='link--nav-active' to='/about'>About</NavLink>
|
||||
<NavLink
|
||||
className='nav-bar-link link--nav'
|
||||
activeClassName='link--nav-active'
|
||||
to='/'
|
||||
exact
|
||||
>
|
||||
Publish
|
||||
</NavLink>
|
||||
<NavLink
|
||||
className='nav-bar-link link--nav'
|
||||
activeClassName='link--nav-active'
|
||||
to='/about'
|
||||
>
|
||||
About
|
||||
</NavLink>
|
||||
{ this.props.channelName ? (
|
||||
<NavBarChannelDropdown
|
||||
<NavBarChannelOptionsDropdown
|
||||
channelName={this.props.channelName}
|
||||
handleSelection={this.handleSelection}
|
||||
defaultSelection={this.props.channelName}
|
||||
|
@ -41,7 +54,14 @@ class NavigationLinks extends React.Component {
|
|||
LOGOUT={LOGOUT}
|
||||
/>
|
||||
) : (
|
||||
<NavLink id='nav-bar-login-link' className='nav-bar-link link--nav' activeClassName='link--nav-active' to='/login'>Channel</NavLink>
|
||||
<NavLink
|
||||
id='nav-bar-login-link'
|
||||
className='nav-bar-link link--nav'
|
||||
activeClassName='link--nav-active'
|
||||
to='/login'
|
||||
>
|
||||
Channel
|
||||
</NavLink>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -5,8 +5,8 @@ class PublishDisabledMessage extends React.Component {
|
|||
const message = this.props.message;
|
||||
return (
|
||||
<div className='row dropzone--disabled row--tall flex-container--column flex-container--center-center'>
|
||||
<p className='text--secondary'>Publishing is currently disabled.</p>
|
||||
<p className='text--secondary'>{message}</p>
|
||||
<p className='secondary'>Publishing is currently disabled.</p>
|
||||
<p className='secondary'>{message}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -10,14 +10,14 @@ class PublishStatus extends React.Component {
|
|||
{status === publishStates.LOAD_START &&
|
||||
<div className='row align-content-center'>
|
||||
<p>File is loading to server</p>
|
||||
<p className='text--primary'>0%</p>
|
||||
<p className='primary'>0%</p>
|
||||
</div>
|
||||
}
|
||||
{status === publishStates.LOADING &&
|
||||
<div>
|
||||
<div className='row align-content-center'>
|
||||
<p>File is loading to server</p>
|
||||
<p className='text--primary'>{message}</p>
|
||||
<p className='primary'>{message}</p>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
|
|
@ -12,7 +12,14 @@ class PublishTitleInput extends React.Component {
|
|||
}
|
||||
render () {
|
||||
return (
|
||||
<input type='text' id='publish-title' className='input-text input-text--full-width' name='title' placeholder='Give your content a title...' onChange={this.handleInput} value={this.props.title} />
|
||||
<input
|
||||
type='text'
|
||||
id='publish-title'
|
||||
className='large full-width'
|
||||
name='title'
|
||||
placeholder='Give your content a title...'
|
||||
onChange={this.handleInput}
|
||||
value={this.props.title} />
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -3,9 +3,9 @@ import React from 'react';
|
|||
class SiteDescription extends React.Component {
|
||||
render () {
|
||||
return (
|
||||
<div className='site-description'>
|
||||
<p className='extra-small'>
|
||||
{this.props.siteDescription}
|
||||
</div>
|
||||
</p>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -3,7 +3,7 @@ import { withRouter } from 'react-router-dom';
|
|||
import PageLayout from '@components/PageLayout';
|
||||
import HorizontalSplit from '@components/HorizontalSplit';
|
||||
|
||||
import AboutChannels from '@components/AboutChannels';
|
||||
import ChannelAbout from '@components/ChannelAbout';
|
||||
import ChannelTools from '@components/ChannelTools';
|
||||
|
||||
class LoginPage extends React.Component {
|
||||
|
@ -17,7 +17,7 @@ class LoginPage extends React.Component {
|
|||
return (
|
||||
<PageLayout pageTitle={'Login'} pageUri={'login'} >
|
||||
<HorizontalSplit
|
||||
leftSide={<AboutChannels />}
|
||||
leftSide={<ChannelAbout />}
|
||||
rightSide={<ChannelTools />}
|
||||
/>
|
||||
</PageLayout>
|
||||
|
|
|
@ -12,9 +12,9 @@ class ShowLite extends React.Component {
|
|||
<div className='row--tall flex-container--column flex-container--center-center show-lite-container'>
|
||||
<SEO pageTitle={name} asset={asset} />
|
||||
<AssetDisplay />
|
||||
<div className='fine-print'>
|
||||
<Link id='asset-boilerpate' className='link--primary' to={`/${claimId}/${name}`}> hosted on spee.ch</Link> via the <a className='link--primary' href={'https://lbry.io/get'} target={'_blank'}>LBRY blockchain</a>
|
||||
</div>
|
||||
<p className='extra-small'>
|
||||
<Link id='asset-boilerpate' className='link--primary' to={`/${claimId}/${name}`}> hosted on spee.ch</Link> via the <a className='link--primary' href={'https://lbry.io/get'} target={'_blank'}>LBRY</a> blockchain
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Add table
Reference in a new issue