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

fixed scrolling of pages that are empty and removed filter from 404 and signin pages

Browse Source
This commit is contained in:
Martina 2021-12-10 13:26:41 -08:00
parent 42eda96cdb
commit c18d49f365
9 changed files with 39 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
common/styles.js
View File

@ -279,3 +279,12 @@ export const PROFILE_PREVIEW_GRID = (theme) => css`
grid-template-columns: repeat(auto-fill, minmax(${theme.grids.profile.mobile.width}px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(${theme.grids.profile.mobile.width}px, 1fr));
} }
`; `;
export const PAGE_CONTENT_WRAPPER = (theme) => css`
width: 100%;
min-height: calc(100vh - ${theme.sizes.filterNavbar}px) - ${theme.sizes.header}px;
padding: 20px 20px 44px;
@media (max-width: ${theme.sizes.mobile}px) {
padding: 16px 16px 44px;
}
`;

2
components/core/Application.js
View File

@ -520,7 +520,7 @@ export default class ApplicationPage extends React.Component {
> >
<Filter <Filter
isProfilePage={isProfilePage} isProfilePage={isProfilePage}
isActive={true} isActive={page.id !== "NAV_SIGN_IN" && page.id !== "NAV_ERROR"}
viewer={this.state.viewer} viewer={this.state.viewer}
page={page} page={page}
data={this.state.data} data={this.state.data}

3
components/core/EmptyState.js
View File

@ -5,7 +5,8 @@ import { css } from "@emotion/react";
const STYLES_EMPTY_STATE = css` const STYLES_EMPTY_STATE = css`
width: 100%; width: 100%;
height: 50vh; height: 100%;
min-height: 50vh;
color: ${Constants.semantic.textGray}; color: ${Constants.semantic.textGray};
display: flex; display: flex;
align-items: center; align-items: center;

13
components/core/Filter/Filters.js
View File

@ -153,7 +153,7 @@ function Profile({ viewer, data, page, onAction, ...props }) {
const isOwner = viewer?.id === data.id; const isOwner = viewer?.id === data.id;
const [isFollowing, setIsFollowing] = React.useState(() => const [isFollowing, setIsFollowing] = React.useState(() =>
isOwner isOwner || !viewer
? false ? false
: !!viewer?.following.some((entry) => { : !!viewer?.following.some((entry) => {
return entry.id === data.id; return entry.id === data.id;
@ -161,11 +161,12 @@ function Profile({ viewer, data, page, onAction, ...props }) {
); );
React.useEffect(() => { React.useEffect(() => {
let updatedIsFollowing = isOwner let updatedIsFollowing =
? false isOwner || !viewer
: !!viewer?.following.some((entry) => { ? false
return entry.id === data.id; : !!viewer?.following.some((entry) => {
}); return entry.id === data.id;
});
setIsFollowing(updatedIsFollowing); setIsFollowing(updatedIsFollowing);
}, [viewer?.following, data?.id]); }, [viewer?.following, data?.id]);

13
components/core/Search/index.js
View File

@ -173,22 +173,13 @@ function Dismiss({ css, ...props }) {
* Content * Content
* -----------------------------------------------------------------------------------------------*/ * -----------------------------------------------------------------------------------------------*/
const STYLES_SEARCH_CONTENT = (theme) => css`
width: 100%;
min-height: 100vh;
padding: calc(20px + ${theme.sizes.filterNavbar}px) 24px 44px;
@media (max-width: ${theme.sizes.mobile}px) {
padding: calc(31px + ${theme.sizes.filterNavbar}px) 16px 44px;
}
`;
function Content({ onAction, viewer, page }) { function Content({ onAction, viewer, page }) {
const { results } = useSearchStore(); const { results } = useSearchStore();
const { files, slates } = results; const { files, slates } = results;
if (results.files.length === 0 && results.slates.length === 0) { if (results.files.length === 0 && results.slates.length === 0) {
return ( return (
<div css={STYLES_SEARCH_CONTENT}> <div css={Styles.PAGE_CONTENT_WRAPPER}>
<EmptyState> <EmptyState>
<FileTypeGroup /> <FileTypeGroup />
<div style={{ marginTop: 24 }}>Sorry we couldn&apos;t find any results.</div> <div style={{ marginTop: 24 }}>Sorry we couldn&apos;t find any results.</div>
@ -198,7 +189,7 @@ function Content({ onAction, viewer, page }) {
} }
return ( return (
<div css={STYLES_SEARCH_CONTENT}> <div css={Styles.PAGE_CONTENT_WRAPPER}>
<DataView <DataView
key="scene-files-folder" key="scene-files-folder"
isOwner={true} isOwner={true}

11
scenes/SceneFilesFolder.js
View File

@ -18,15 +18,6 @@ const STYLES_SCENE_PAGE = css`
} }
`; `;
const STYLES_DATAVIEW_WRAPPER = (theme) => css`
width: 100%;
min-height: calc(100vh - ${theme.sizes.filterNavbar}px) - ${theme.sizes.header}px;
padding: 20px 20px 44px;
@media (max-width: ${theme.sizes.mobile}px) {
padding: 16px 16px 44px;
}
`;
export default function SceneFilesFolder({ viewer, page, onAction, isMobile }) { export default function SceneFilesFolder({ viewer, page, onAction, isMobile }) {
const [index, setIndex] = React.useState(-1); const [index, setIndex] = React.useState(-1);
@ -49,7 +40,7 @@ export default function SceneFilesFolder({ viewer, page, onAction, isMobile }) {
index={index} index={index}
onChange={(index) => setIndex(index)} onChange={(index) => setIndex(index)}
/> />
<div css={STYLES_DATAVIEW_WRAPPER}> <div css={Styles.PAGE_CONTENT_WRAPPER}>
{objects.length ? ( {objects.length ? (
<DataView <DataView
key="scene-files-folder" key="scene-files-folder"

21
scenes/SceneProfile.js
View File

@ -23,15 +23,6 @@ const STYLES_LOADER = css`
width: 100%; width: 100%;
`; `;
const STYLES_DATAVIEW_WRAPPER = (theme) => css`
width: 100%;
min-height: calc(100vh - ${theme.sizes.filterNavbar}px) - ${theme.sizes.header}px;
padding: 20px 20px 44px;
@media (max-width: ${theme.sizes.mobile}px) {
padding: 16px 16px 44px;
}
`;
export default class SceneProfile extends React.Component { export default class SceneProfile extends React.Component {
state = { state = {
notFound: false, notFound: false,
@ -169,10 +160,12 @@ export default class SceneProfile extends React.Component {
url={`${Constants.hostname}${this.props.page.pathname}`} url={`${Constants.hostname}${this.props.page.pathname}`}
> >
<ScenePage> <ScenePage>
<EmptyState> <div css={Styles.PAGE_CONTENT_WRAPPER}>
<SVG.Users height="24px" style={{ marginBottom: 24 }} /> <EmptyState>
<div>This user doesn't have any public content</div> <SVG.Users height="24px" style={{ marginBottom: 24 }} />
</EmptyState> <div>This user doesn't have any public content</div>
</EmptyState>
</div>
</ScenePage> </ScenePage>
</WebsitePrototypeWrapper> </WebsitePrototypeWrapper>
); );
@ -199,7 +192,7 @@ export default class SceneProfile extends React.Component {
url={`${Constants.hostname}${this.props.page.pathname}`} url={`${Constants.hostname}${this.props.page.pathname}`}
image={image} image={image}
> >
<div css={STYLES_DATAVIEW_WRAPPER}> <div css={Styles.PAGE_CONTENT_WRAPPER}>
{user.library?.length ? ( {user.library?.length ? (
<DataView <DataView
key="scene-files-folder" key="scene-files-folder"

25
scenes/SceneSlate.js
View File

@ -204,10 +204,12 @@ export default class SceneSlate extends React.Component {
url={`${Constants.hostname}${this.props.page.pathname}`} url={`${Constants.hostname}${this.props.page.pathname}`}
> >
<ScenePage> <ScenePage>
<EmptyState> <div css={Styles.PAGE_CONTENT_WRAPPER}>
<SVG.Layers height="24px" style={{ marginBottom: 24 }} /> <EmptyState>
<div>We were unable to locate that collection</div> <SVG.Layers height="24px" style={{ marginBottom: 24 }} />
</EmptyState> <div>We were unable to locate that collection</div>
</EmptyState>
</div>
</ScenePage> </ScenePage>
</WebsitePrototypeWrapper> </WebsitePrototypeWrapper>
); );
@ -268,15 +270,6 @@ const STYLES_RESET_SCENE_PAGE_PADDING = css`
} }
`; `;
const STYLES_DATAVIEW_WRAPPER = (theme) => css`
width: 100%;
min-height: calc(100vh - ${theme.sizes.filterNavbar}px) - ${theme.sizes.header}px;
padding: 20px 20px 44px;
@media (max-width: ${theme.sizes.mobile}px) {
padding: 16px 16px 44px;
}
`;
class SlatePage extends React.Component { class SlatePage extends React.Component {
_copy = null; _copy = null;
_timeout = null; _timeout = null;
@ -452,7 +445,7 @@ class SlatePage extends React.Component {
index={this.state.index} index={this.state.index}
onChange={(index) => this.setState({ index })} onChange={(index) => this.setState({ index })}
/> />
<div css={STYLES_DATAVIEW_WRAPPER}> <div css={Styles.PAGE_CONTENT_WRAPPER}>
<DataView <DataView
key="scene-files-folder" key="scene-files-folder"
type="collection" type="collection"
@ -467,7 +460,7 @@ class SlatePage extends React.Component {
</div> </div>
</> </>
) : isOwner ? ( ) : isOwner ? (
<div> <div css={Styles.PAGE_CONTENT_WRAPPER}>
<EmptyState> <EmptyState>
<FileTypeGroup /> <FileTypeGroup />
<div style={{ marginTop: 24 }}> <div style={{ marginTop: 24 }}>
@ -476,7 +469,7 @@ class SlatePage extends React.Component {
</EmptyState> </EmptyState>
</div> </div>
) : ( ) : (
<div> <div css={Styles.PAGE_CONTENT_WRAPPER}>
<EmptyState>There's nothing here :)</EmptyState> <EmptyState>There's nothing here :)</EmptyState>
</div> </div>
)} )}

2
server.js
View File

@ -295,7 +295,7 @@ app.prepare().then(async () => {
let viewer = null; let viewer = null;
if (id) { if (id) {
viewer = await Data.getUserById({ viewer = await ViewerManager.getById({
id, id,
}); });
} }