Merge pull request #383 from filecoin-project/@tarafanlin/slate

creating view all component and rearrange external slate view header
This commit is contained in:
CAKE 2020-10-23 15:35:58 -07:00 committed by GitHub
commit bb22875d7f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 85 additions and 79 deletions

View File

@ -0,0 +1,30 @@
import * as React from "react";
import * as Constants from "~/common/constants";
import { css } from "@emotion/react";
import { useState } from "react";
const STYLES_VIEW_BUTTON = css`
color: ${Constants.system.grayBlack};
text-decoration: underline;
cursor: pointer;
`;
export const ViewAllButton = (props) => {
const [isTruncated, setTruncated] = useState(true);
const text = props.fullText;
const maxCharacter = props.maxCharacter;
const displayText = isTruncated ? text.slice(0, maxCharacter) : text;
return (
<div>
{displayText}
<span>{isTruncated ? "... " : ""}</span>
<span css={STYLES_VIEW_BUTTON} onClick={() => setTruncated(!isTruncated)}>
{isTruncated ? "View All" : "View Less"}
</span>
</div>
);
};
export default ViewAllButton;

View File

@ -4,41 +4,42 @@ import * as SVGLogo from "~/common/logo";
import { css } from "@emotion/react";
const STYLES_CONTAINER = css`
font-family: ${Constants.font.code};
font-size: 12px;
const STYLES_ROOT = css`
padding: 24px 88px 24px 64px;
width: 100%;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 16px 24px 16px 24px;
margin: 0 auto;
z-index: ${Constants.zindex.header};
@media (max-width: ${Constants.sizes.mobile}px) {
display: block;
padding: 16px 24px;
}
`;
const STYLES_CONTAINER = css`
max-width: 1440px;
margin: 0 auto;
font-family: ${Constants.font.text};
font-weight: 400;
font-size: ${Constants.typescale.lvl1};
width: 100%;
`;
const STYLES_NAV_CONTAINER = css`
display: flex;
justify-content: space-between;
margin-bottom: 8px;
`;
const STYLES_LINK = css`
font-family: ${Constants.font.medium};
color: ${Constants.system.pitchBlack};
color: ${Constants.system.grayBlack};
text-decoration: none;
transition: 200ms ease color;
overflow-wrap: break-word;
text-align: left;
:visited {
color: ${Constants.system.black};
}
display: block;
:hover {
color: ${Constants.system.brand};
}
@media (max-width: ${Constants.sizes.mobile}px) {
display: block;
padding: 16px 0 0 0;
max-width: auto;
}
`;
const STYLES_PARAGRAPH = css`
@ -47,38 +48,21 @@ const STYLES_PARAGRAPH = css`
text-decoration: none;
transition: 200ms ease color;
overflow-wrap: break-word;
width: 100%;
max-width: 50%;
min-width: 10%;
text-align: left;
:visited {
color: ${Constants.system.black};
}
:hover {
color: ${Constants.system.brand};
}
margin-left: 30px;
display: block;
@media (max-width: ${Constants.sizes.mobile}px) {
display: block;
padding: 16px 0 0 0;
max-width: auto;
max-width: 100%;
}
`;
const STYLES_LEFT = css`
flex-shrink: 0;
padding: 0 8px 0 8px;
display: flex;
align-items: flex-start;
justify-content: flex-start;
width: 100%;
max-width: 588px;
@media (max-width: ${Constants.sizes.mobile}px) {
display: block;
max-width: auto;
}
max-width: 70%;
`;
const STYLES_RIGHT = css`
@ -86,44 +70,32 @@ const STYLES_RIGHT = css`
width: 100%;
display: flex;
justify-content: flex-end;
padding: 0 8px 0 8px;
@media (max-width: ${Constants.sizes.mobile}px) {
display: block;
text-align: left;
}
`;
const WebsitePrototypeHeaderGeneric = (props) => {
return (
<div css={STYLES_CONTAINER} style={props.style}>
<div css={STYLES_ROOT}>
<div css={STYLES_CONTAINER}>
<div css={STYLES_NAV_CONTAINER} style={props.style}>
<div css={STYLES_LEFT}>
<a css={STYLES_LINK} href={props.href} style={{ marginRight: 16 }}>
<SVGLogo.Symbol
height={`20px`}
style={{ transform: "translateY(-2px)" }}
/>
<a css={STYLES_LINK} href={props.href} style={{ marginRight: 12 }}>
<SVGLogo.Symbol height={`20px`} style={{ transform: "translateY(-1px)" }} />
</a>
<a
css={STYLES_LINK}
href={props.href}
style={{ flexShrink: 0, maxWidth: 212, marginRight: 16 }}
>
<a css={STYLES_LINK} href={props.href}>
{props.title}
</a>
<span css={STYLES_PARAGRAPH}>{props.children}</span>
</div>
<div css={STYLES_RIGHT}>
<a
css={STYLES_LINK}
style={{
fontFamily: Constants.font.code,
textTransform: "uppercase",
}}
href="https://github.com/filecoin-project/slate"
>
View Source
<a css={STYLES_LINK} href="/_" style={{ marginRight: 24 }}>
Sign up
</a>
<a css={STYLES_LINK} href="/_">
Sign in
</a>
</div>
</div>
<div css={STYLES_PARAGRAPH}>{props.children}</div>
</div>
</div>
);

View File

@ -7,6 +7,7 @@ import * as Actions from "~/common/actions";
import { css } from "@emotion/react";
import { ProcessedText } from "~/components/system/components/Typography";
import { Alert } from "~/components/core/Alert";
import { ViewAllButton } from "~/components/core/ViewAll";
import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
import WebsitePrototypeHeaderGeneric from "~/components/core/WebsitePrototypeHeaderGeneric";
@ -25,10 +26,11 @@ const STYLES_ROOT = css`
min-height: 100vh;
text-align: center;
font-size: 1rem;
background-color: ${Constants.system.white};
`;
const STYLES_SLATE = css`
padding: 0 88px 0 88px;
padding: 0 64px 0 64px;
${"" /* max-width: 1660px; */}
display: block;
width: 100%;
@ -152,7 +154,9 @@ export default class SlatePage extends React.Component {
<WebsitePrototypeWrapper title={title} description={body} url={url} image={image}>
<div css={STYLES_ROOT}>
<WebsitePrototypeHeaderGeneric href={headerURL} title={headerTitle}>
<ViewAllButton fullText={this.props.slate.data.body} maxCharacter={208}>
<ProcessedText text={this.props.slate.data.body} />
</ViewAllButton>
</WebsitePrototypeHeaderGeneric>
<div css={STYLES_SLATE}>
<SlateLayout