filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-09-19 18:28:03 +03:00
Code Issues Packages Projects Releases Wiki Activity

PR: Updates

Browse Source
This commit is contained in:
William Felker 2020-09-13 13:21:52 +08:00
parent ea8153c111
commit 7eda8605bd
6 changed files with 87 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
components/core/ApplicationUserControls.js
View File

@ -5,7 +5,7 @@ import * as SVG from "~/common/svg";
import {
TooltipWrapper,
dispatchCustomEvent,
PopoverNavigation,
PopoverNavigation
} from "~/components/system";
import { css } from "@emotion/react";
@ -116,19 +116,18 @@ const STYLES_ITEM_BOX = css`
export default class ApplicationUserControls extends React.Component {
state = { visible: false };
_handleClick = (e) => {
_handleClick = e => {
e.stopPropagation();
if (this.state.visible) {
this._handleHide();
return;
}
this.setState({ visible: true });
dispatchCustomEvent({
name: "show-tooltip",
detail: {
id: APPLICATION_CONTROL_MENU_ID,
},
id: APPLICATION_CONTROL_MENU_ID
}
});
};
@ -137,17 +136,17 @@ export default class ApplicationUserControls extends React.Component {
return dispatchCustomEvent({
name: "hide-tooltip",
detail: {
id: APPLICATION_CONTROL_MENU_ID,
},
id: APPLICATION_CONTROL_MENU_ID
}
});
};
_handleAction = (data) => {
_handleAction = data => {
this._handleHide();
return this.props.onAction(data);
};
_handleSignOut = (data) => {
_handleSignOut = data => {
this._handleHide();
return this.props.onSignOut(data);
};
@ -176,10 +175,10 @@ export default class ApplicationUserControls extends React.Component {
onClick: () =>
this._handleAction({
type: "NAVIGATE",
value: "V1_NAVIGATION_PROFILE_EDIT",
}),
value: "V1_NAVIGATION_PROFILE_EDIT"
})
},
{ text: "Sign out", onClick: this._handleSignOut },
{ text: "Sign out", onClick: this._handleSignOut }
]}
/>
</Boundary>
@ -191,14 +190,14 @@ export default class ApplicationUserControls extends React.Component {
this.props.onAction({
type: "NAVIGATE",
value: "V1_NAVIGATION_PROFILE",
data: this.props.viewer,
data: this.props.viewer
})
}
>
<span
css={STYLES_PROFILE_IMAGE}
style={{
backgroundImage: `url('${this.props.viewer.data.photo}')`,
backgroundImage: `url('${this.props.viewer.data.photo}')`
}}
/>
<span css={STYLES_PROFILE_USERNAME}>

39
components/core/marketing/CodeTerminal.js
View File

@ -1,42 +1,49 @@
import React, { useState, useEffect } from "react";
import * as React from "react";
import * as Constants from "~/common/constants";
import * as System from "~/components/system";
import { css, keyframes } from "@emotion/react";
const blinkCursor = keyframes`
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
`;
const typewriter = keyframes`
0%,100% {
0% {
width: 0;
}
20%, 80% {
50% {
width: 10.2em;
}
100% {
width: 0;
}
`;
const STYLES_ROOT = css`
height: 300px;
width: 500px;
background-color: ${Constants.system.black};
border-radius: 5px;
@media (${Constants.sizes.tablet}px) {
height: 230px;
width: 345px;
}
@media (${Constants.sizes.mobile}px) {
height: 200px;
width: 300px;
}
`;
const STYLES_WINDOW = css`
box-sizing: border-box;
font-family: ${Constants.font.mono};
@ -60,15 +67,18 @@ const STYLES_WINDOW = css`
display: none;
}
`;
const STYLES_WINDOW_HEADER = css`
height: 34px;
display: flex;
align-items: center;
text-align: center;
@media (${Constants.sizes.mobile}px) {
height: 28px;
}
`;
const STYLES_ICON = css`
border-radius: 50%;
display: inline-block;
@ -86,8 +96,9 @@ const STYLES_ICON = css`
background: rgb(39, 201, 63);
}
`;
const STYLES_WINDOW_BODY = css`
padding: 25px;
padding: 24px;
overflow: hidden;
white-space: nowrap;
color: ${Constants.system.white};
@ -98,6 +109,7 @@ const STYLES_WINDOW_BODY = css`
animation-timing-function: steps(45, end);
animation-iteration-count: infinite;
`;
const CodeTerminal = () => {
return (
<div css={STYLES_ROOT}>
@ -110,4 +122,5 @@ const CodeTerminal = () => {
</div>
);
};
export default CodeTerminal;

74
components/core/marketing/Issue.js
View File

@ -1,15 +1,18 @@
import React, { Component } from "react";
import * as React from "react";
import * as Constants from "~/common/constants";
import * as System from "~/components/system";
import { css } from "@emotion/react";
const STYLES_SLATE_CARD_GROUP = css`
const STYLES_ISSUE_CARD_GROUP = css`
display: flex;
flex-wrap: wrap;
width: 100%;
margin-top: 48px;
`;
const STYLES_SLATE_CARD = css`
const STYLES_ISSUE_CARD = css`
width: 33.33%;
height: calc(100vh / 4);
margin: -1px 0 0 -1px;
@ -20,19 +23,8 @@ const STYLES_SLATE_CARD = css`
box-shadow: 0px 10px 40px 20px rgba(0, 0, 0, 0.1);
}
`;
const STYLES_SLATE_CARD_CTA = css`
width: 100%;
height: calc(100vh / 2);
margin-left: -1px;
box-shadow: 0px 4px 80px 4px rgba(0, 0, 0, 0.1);
text-decoration: none;
transition: 200ms ease all;
:hover {
box-shadow: 0px 4px 120px 4px rgba(0, 0, 0, 0.1);
transform: scale(1.01);
}
`;
const STYLES_SLATE_CARD_TEXT = css`
const STYLES_ISSUE_CARD_TEXT = css`
display: flex;
flex-direction: column;
flex-wrap: wrap;
@ -42,42 +34,31 @@ const STYLES_SLATE_CARD_TEXT = css`
height: 100%;
padding: 12px;
`;
const STYLES_SLATE_CARD_TITLE = css`
const STYLES_ISSUE_CARD_TITLE = css`
padding: 12px;
font-size: ${Constants.typescale.lvl1};
text-align: left;
width: 100%;
@media (max-width: ${Constants.sizes.mobile}px) {
padding: 0px;
font-size: 1rem;
}
`;
const STYLES_SLATE_CARD_CTA_TITLE = css`
font-size: ${Constants.typescale.lvl5};
text-align: left;
line-height: 1.25;
padding: 12px;
overflow-wrap: break-word;
width: 100%;
color: ${Constants.system.darkGray};
@media (max-width: ${Constants.sizes.tablet}px) {
font-size: ${Constants.typescale.lvl4};
}
@media (max-width: ${Constants.sizes.mobile}px) {
font-size: ${Constants.typescale.lvl3};
padding: 0px 0px 8px 0px;
}
`;
const STYLES_SLATE_CARD_EXPLAINER = css`
const STYLES_ISSUE_CARD_EXPLAINER = css`
display: flex;
justify-content: space-between;
width: 100%;
padding: 12px;
@media (max-width: ${Constants.sizes.mobile}px) {
padding: 0px;
}
`;
const STYLES_SLATE_CARD_PARAGRAPH = css`
const STYLES_ISSUE_CARD_PARAGRAPH = css`
font-size: ${Constants.typescale.lvl0};
text-align: left;
text-decoration: none;
@ -88,26 +69,21 @@ const STYLES_SLATE_CARD_PARAGRAPH = css`
color: ${Constants.system.pitchBlack};
background-color: transparent;
}
@media (max-width: ${Constants.sizes.mobile}px) {
font-size: 0.78rem;
}
`;
const STYLES_SLATE_CARD_CTA_PARAGRAPH = css`
font-size: ${Constants.typescale.lvl2};
text-align: left;
@media (max-width: ${Constants.sizes.mobile}px) {
font-size: 1rem;
}
`;
export default class Issue extends Component {
export default class Issue extends React.Component {
render() {
const { title, id, labels, userName, url } = this.props;
const { title, id, url } = this.props;
return (
<div css={STYLES_SLATE_CARD}>
<a css={STYLES_SLATE_CARD_PARAGRAPH} href={url} target="_blank">
<div css={STYLES_SLATE_CARD_TEXT}>
<div css={STYLES_SLATE_CARD_TITLE}>{title}</div>
<div css={STYLES_SLATE_CARD_EXPLAINER}>
<div css={STYLES_ISSUE_CARD}>
<a css={STYLES_ISSUE_CARD_PARAGRAPH} href={url} target="_blank">
<div css={STYLES_ISSUE_CARD_TEXT}>
<div css={STYLES_ISSUE_CARD_TITLE}>{title}</div>
<div css={STYLES_ISSUE_CARD_EXPLAINER}>
<div>View Issue</div>
<div>-&gt;</div>
</div>

9
components/core/marketing/IssuesList.js
View File

@ -1,22 +1,23 @@
import React, { Component } from "react";
import * as React from "react";
import * as Constants from "~/common/constants";
import { css, keyframes } from "@emotion/react";
import Issue from "~/components/core/marketing/Issue";
const STYLES_SLATE_CARD_GROUP = css`
const STYLES_ISSUE_CARD_GROUP = css`
display: flex;
flex-wrap: wrap;
width: 100%;
margin-top: 48px;
`;
export default class IssueList extends Component {
export default class IssueList extends React.Component {
render() {
const { issues } = this.props;
return (
<div css={STYLES_SLATE_CARD_GROUP}>
<div css={STYLES_ISSUE_CARD_GROUP}>
{issues.map(issue => {
return (
<Issue

4
components/core/marketing/Label.js
View File

@ -1,6 +1,6 @@
import React, { Component } from "react";
import * as React from "react";
export default class Label extends Component {
export default class Label extends React.Component {
render() {
const { labels } = this.props;
return (

18
pages/_/marketing-candidate/community.js
View File

@ -1,4 +1,4 @@
import React, { useState, useEffect } from "react";
import * as React from "react";
import * as Constants from "~/common/constants";
import * as System from "~/components/system";
@ -6,7 +6,6 @@ import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
import WebsitePrototypeHeader from "~/components/core/NewWebsitePrototypeHeader";
import WebsitePrototypeFooter from "~/components/core/NewWebsitePrototypeFooter";
import IssuesList from "~/components/core/marketing/IssuesList";
import CodeTerminal from "~/components/core/marketing/CodeTerminal";
import { css, keyframes } from "@emotion/react";
@ -26,10 +25,12 @@ const STYLES_H1 = css`
line-height: 1.25;
width: 100%;
color: ${Constants.system.slate};
@media (max-width: ${Constants.sizes.tablet}px) {
font-size: ${Constants.typescale.lvl6};
padding: 0px 0px 16px 0px;
}
@media (max-width: ${Constants.sizes.mobile}px) {
font-size: ${Constants.typescale.lvl5};
padding: 0px 0px 8px 0px;
@ -42,10 +43,12 @@ const STYLES_H2 = css`
padding: 16px 0px 0 0px;
width: 100%;
color: ${Constants.system.black};
@media (max-width: ${Constants.sizes.tablet}px) {
font-size: ${Constants.typescale.lvl4};
padding: 8px 0px 0px 0px;
}
@media (max-width: ${Constants.sizes.mobile}px) {
font-size: ${Constants.typescale.lvl3};
padding: 8px 0px 0 0px;
@ -58,10 +61,12 @@ const STYLES_H3 = css`
line-height: 1.5;
padding: 16px 0px 0px 0px;
color: ${Constants.system.slate};
@media (max-width: ${Constants.sizes.tablet}px) {
font-size: ${Constants.typescale.lvl2};
padding: 8px 0px 0px 0px;
}
@media (max-width: ${Constants.sizes.mobile}px) {
font-size: ${Constants.typescale.lvl1};
padding: 8px 0px 0px 0px;
@ -74,6 +79,7 @@ const STYLES_SECTION_HERO = css`
display: flex;
flex-direction: column;
justify-content: center;
@media (max-width: ${Constants.sizes.mobile}px) {
padding: 16vh 24px 48px 24px;
display: block;
@ -86,6 +92,7 @@ const STYLES_TEXT_BLOCK = css`
justify-content: center;
width: 56vw;
align-self: center;
@media (max-width: ${Constants.sizes.mobile}px) {
width: 88vw;
right: 24px;
@ -96,6 +103,7 @@ const STYLES_HEROIMG = css`
width: 24vw;
margin-left: auto;
margin-right: auto;
@media (max-width: ${Constants.sizes.tablet}px) {
width: 32vw;
}
@ -148,6 +156,7 @@ const STYLES_SECTION_WRAPPER = css`
flex-direction: column;
padding: 88px;
width: 100vw;
@media (max-width: ${Constants.sizes.mobile}px) {
padding: 88px 24px;
display: block;
@ -157,6 +166,7 @@ const STYLES_SECTION_CHILD_FULL = css`
margin: 80px 0 0 0;
display: flex;
justify-content: space-between;
@media (max-width: ${Constants.sizes.mobile}px) {
flex-direction: column;
}
@ -164,6 +174,7 @@ const STYLES_SECTION_CHILD_FULL = css`
const STYLES_SECTION_CHILD_SPLIT = css`
width: 64%;
height: 40vh;
@media (max-width: ${Constants.sizes.mobile}px) {
height: 24vh;
width: 100%;
@ -175,6 +186,7 @@ const STYLES_CARD_GROUP = css`
display: flex;
margin-top: 48px;
flex-flow: row wrap;
@media (max-width: ${Constants.sizes.tablet}px) {
align-items: left;
4margin-top: 16px;
@ -355,11 +367,13 @@ const SLATE_CONTRIBUTOR_TEAM = [
"https://slate.textile.io/ipfs/bafkreigbjyxbmc2cirha3g4y2rmlrntau2l2gjy4ft3y6ii3kyh4ifw5li"
}
];
export const getServerSideProps = async context => {
return {
props: { ...context.query }
};
};
const SlateTeamCards = props => {
return (
<div key={props.id} css={STYLES_CARD_WRAPPER}>