mirror of
https://github.com/filecoin-project/slate.git
synced 2024-08-17 17:50:50 +03:00
fixed scrolling of pages that are empty and removed filter from 404 and signin pages
This commit is contained in:
parent
42eda96cdb
commit
c18d49f365
@ -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;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
@ -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}
|
||||||
|
@ -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;
|
||||||
|
@ -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]);
|
||||||
|
|
||||||
|
@ -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't find any results.</div>
|
<div style={{ marginTop: 24 }}>Sorry we couldn'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}
|
||||||
|
@ -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"
|
||||||
|
@ -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"
|
||||||
|
@ -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>
|
||||||
)}
|
)}
|
||||||
|
Loading…
Reference in New Issue
Block a user