{data.slates && data.slates.length ? (
-
,
+ ];
+ } else {
+ let trimmed =
+ this.props.slate.data.objects.length > numItems
+ ? this.props.slate.data.objects.slice(1, numItems)
+ : this.props.slate.data.objects.slice(1, this.props.slate.data.objects.length);
+ objects = trimmed.map((each) => (
+
+
+
+ ));
+ }
+ return (
+
+ {objects}
+
+ );
+ }
+}
+
+const STYLES_BLOCK = css`
+ box-shadow: 0 0 0 0.5px ${Constants.system.lightBorder} inset,
+ 0 0 40px 0 ${Constants.system.shadow};
+ padding: 16px;
+ font-size: 12px;
+ text-align: left;
+ cursor: pointer;
+ height: 480px;
+ width: 100%;
+
+ @media (max-width: ${Constants.sizes.mobile}px) {
+ margin: 24px auto;
+ height: auto;
+ }
+`;
+
+const STYLES_TITLE_LINE = css`
+ width: 100%;
+ display: flex;
+ align-items: center;
+ font-size: ${Constants.typescale.lvl1};
+ margin-bottom: 8px;
+ overflow-wrap: break-word;
+`;
+
+const STYLES_BODY = css`
+ font-family: ${Constants.font.text};
+ font-size: ${Constants.typescale.lvl1};
+ margin-bottom: 24px;
+ white-space: pre-wrap;
+ word-wrap: break-word;
+
+ @media (max-width: ${Constants.sizes.mobile}px) {
+ display: none;
+ }
+`;
+
+const STYLES_TITLE = css`
+ font-size: ${Constants.typescale.lvl2};
+ font-family: ${Constants.font.semiBold};
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ margin: 16px 0 0 0;
+
+ @media (max-width: ${Constants.sizes.mobile}px) {
+ font-size: ${Constants.typescale.lvl1};
+ }
+`;
+
+const STYLES_PREVIEW = css`
+ display: flex;
+`;
+
+const STYLES_INFO = css`
+ display: flex;
+`;
+
+const STYLES_OBJECT_COUNT = css`
+ margin-top: 18px;
+ width: 15%;
+ font-size: ${Constants.typescale.lvl0};
+ color: ${Constants.system.darkGray};
+`;
+
+export class SlatePreviewBlock extends React.Component {
+ _ref;
+ _test;
+
+ state = {
+ showMenu: false,
+ copyValue: "",
+ windowWidth: 360,
+ };
+
+ componentDidMount = () => {
+ this.calculateWidth();
+ window.addEventListener("resize", this.calculateWidth);
+ };
+
+ componentWillUnmount = () => {
+ window.removeEventListener("resize", this.calculateWidth);
+ };
+
+ calculateWidth = () => {
+ this.setState({ windowWidth: window.innerWidth });
+ };
+
+ _handleCopy = (e, value) => {
+ e.stopPropagation();
+ this.setState({ copyValue: value }, () => {
+ this._ref.select();
+ document.execCommand("copy");
+ this._handleHide();
+ });
+ };
+
+ _handleClick = (e) => {
+ e.stopPropagation();
+ if (this.state.showMenu) {
+ this._handleHide();
+ return;
+ }
+ this.setState({ showMenu: true });
+ // dispatchCustomEvent({
+ // name: "show-tooltip",
+ // detail: {
+ // id: `slate-tooltip-${this.props.slate.id}`,
+ // },
+ // });
+ };
+
+ _handleHide = (e) => {
+ this.setState({ showMenu: false });
+ // dispatchCustomEvent({
+ // name: "hide-tooltip",
+ // detail: {
+ // id: `slate-tooltip-${this.props.slate.id}`,
+ // },
+ // });
+ };
+
+ render() {
+ let first = this.props.slate.data.objects ? this.props.slate.data.objects[0] : null;
+ console.log(this.props.slate.data);
+
+ return (
+
+
+ {this.props.slate.data.objects.length === 1 ? (
+
+
+
+ ) : first ? (
+
+ ) : (
+
+ )}
+
+
{this.props.slate.data.objects.length}
+
+
+
{this.props.slate.data.name}
+
+ {this.props.slate.data.body ? (
+
+ ) : (
+
+ )}
+
+
+
+
+
+ {first ? (
+
+ ) : (
+
+ )}
+
+
{this.props.slate.data.objects.length}
+
+
+
{this.props.slate.data.name}
+
+
+
+
+ );
+ }
+}
+
+const STYLES_LINK = css`
+ color: ${Constants.system.black};
+ text-decoration: none;
+ width: calc(33.33% - 16px);
+ margin-bottom: 24px;
+
+ @media (max-width: ${Constants.sizes.tablet}px) {
+ width: 50%;
+ }
+
+ @media (max-width: ${Constants.sizes.mobile}px) {
+ width: 100%;
+ }
+`;
+
+const STYLES_SLATES = css`
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ overflow: hidden;
+ padding-bottom: 48px;
+ justify-content: space-between;
+
+ @media (max-width: ${Constants.sizes.mobile}px) {
+ display: block;
+ }
+`;
+
+export default class SlatePreviewBlocksExternal extends React.Component {
+ state = {
+ imageSize: 56,
+ };
+
+ componentDidMount = () => {
+ this.calculateWidth();
+ this.debounceInstance = this.debounce(this.calculateWidth, 350);
+ window.addEventListener("resize", this.debounceInstance);
+ };
+
+ componentWillUnmount = () => {
+ window.removeEventListener("resize", this.debounceInstance);
+ };
+
+ debounce = (func, wait) => {
+ Window.debounce(func, wait);
+ };
+
+ calculateWidth = () => {
+ let windowWidth = window.innerWidth;
+ if (windowWidth > Constants.sizes.mobile) {
+ if (this.props.external) {
+ windowWidth -= 48;
+ } else {
+ windowWidth -= Constants.sizes.navigation + 96;
+ }
+ windowWidth = Math.min(windowWidth, Constants.sizes.desktop);
+ windowWidth -= 80; //NOTE(martina): 48px padding on scene page, 40px padding on block
+ for (let i = this.props.numItems || 5; i > 0; i--) {
+ let width = (windowWidth - MARGIN * 2 * (i - 1)) / i;
+ if (width < MIN_WIDTH) {
+ continue;
+ }
+ this.setState({ imageSize: width });
+ return;
+ }
+ }
+ this.setState({ imageSize: windowWidth - 48 - 32 }); //NOTE(martina): 24px padding on scene page, 16px padding on block on mobile
+ };
+
+ render() {
+ return (
+
+ {this.props.slates.map((slate) => (
+
+
+
+ ))}
+
+ );
+ }
+}
diff --git a/components/core/ViewAll.js b/components/core/ViewAll.js
index 5a4862c9..46f7082a 100644
--- a/components/core/ViewAll.js
+++ b/components/core/ViewAll.js
@@ -10,9 +10,8 @@ const STYLES_VIEW_BUTTON = css`
font-size: 14px;
margin-top: 4px;
color: ${Constants.system.grayBlack};
- text-decoration: underline;
cursor: pointer;
- width: 64px;
+ width: 120px;
`;
export const ViewAllButton = (props) => {
@@ -21,6 +20,7 @@ export const ViewAllButton = (props) => {
const maxCharacter = props.maxCharacter;
const displayText = isTruncated ? text.slice(0, maxCharacter) : text;
const textCount = text.length;
+ const noButton = props.noButton;
return (
@@ -28,9 +28,11 @@ export const ViewAllButton = (props) => {
{textCount > maxCharacter ? (
{isTruncated ? "..." : ""}
- setTruncated(!isTruncated)}>
- {isTruncated ? "view all" : "view less"}
-
+ {noButton ? null : (
+ setTruncated(!isTruncated)}>
+ {isTruncated ? "+ View all" : "- View less"}
+
+ )}
) : (
""
diff --git a/pages/_/profile.js b/pages/_/profile.js
index 4818696f..fa29cec0 100644
--- a/pages/_/profile.js
+++ b/pages/_/profile.js
@@ -37,11 +37,11 @@ export default class ProfilePage extends React.Component {
url={url}
image={this.props.creator.data.photo}
>
+
+
);
}