updated scss on asset details page

This commit is contained in:
bill bittner 2018-06-08 08:50:25 -07:00
parent 149af453f4
commit 84e20dfe79
74 changed files with 743 additions and 510 deletions

View file

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

View file

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

View file

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

View 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;

View file

@ -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:'
}),

View file

@ -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:'
}),

View file

@ -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:'
}),

View file

@ -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:'
}),

View file

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

View file

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

View file

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

View file

@ -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."));
};

View file

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

View file

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

View file

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

View file

@ -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:'
}),

View file

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

View file

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

View file

@ -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:'
}),

View file

@ -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:'
}),

View 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;

View file

@ -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")));
}
}]);

View file

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

View file

@ -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:'
}),

View file

@ -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));
}
}]);

View file

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

View file

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

View file

@ -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);
}
}]);

View file

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

View file

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

View file

@ -120,4 +120,4 @@ function _default() {
}
}
;
;

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View 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);
}

View file

@ -0,0 +1,11 @@
.form-feedback {
color: $secondary-color;
}
.form-feedback--success {
color: green;
}
.form-feedback--failure {
color: red;
}

View 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;
}

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View 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;

View file

@ -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:'} />
}

View file

@ -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:'} />
}

View file

@ -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:'} />
}

View file

@ -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:'} />
}

View file

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

View file

@ -13,7 +13,7 @@ const ChooseAnonymousPublishRadio = ({ publishInChannel, toggleAnonymousPublish
onChange={toggleAnonymousPublish}
/>
<label
className='label label--pointer'
className='label-radio'
htmlFor='anonymous-radio'
>
Anonymous

View file

@ -13,7 +13,7 @@ const ChooseChannelPublishRadio = ({ publishInChannel, toggleAnonymousPublish })
onChange={toggleAnonymousPublish}
/>
<label
className='label label--pointer'
className='label-radio'
htmlFor='channel-radio'
>
In a channel

View file

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

View file

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

View file

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

View file

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

View file

@ -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:'} />
}

View file

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

View file

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

View file

@ -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:'} />
}

View file

@ -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:'} />
}

View 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;

View file

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

View file

@ -1,10 +1,11 @@
import React from 'react';
import Row from '@components/Row';
const AssetTitle = ({ title }) => {
return (
<div>
<Row>
<h3>{title}</h3>
</div>
</Row>
);
};

View file

@ -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:'} />
}

View file

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

View file

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

View file

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

View file

@ -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} />
);
}
}

View file

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

View file

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

View file

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