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

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

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));
}
`;
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;
}
`;

View File

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

View File

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

View File

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

View File

@ -173,22 +173,13 @@ function Dismiss({ css, ...props }) {
* 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 }) {
const { results } = useSearchStore();
const { files, slates } = results;
if (results.files.length === 0 && results.slates.length === 0) {
return (
<div css={STYLES_SEARCH_CONTENT}>
<div css={Styles.PAGE_CONTENT_WRAPPER}>
<EmptyState>
<FileTypeGroup />
<div style={{ marginTop: 24 }}>Sorry we couldn&apos;t find any results.</div>
@ -198,7 +189,7 @@ function Content({ onAction, viewer, page }) {
}
return (
<div css={STYLES_SEARCH_CONTENT}>
<div css={Styles.PAGE_CONTENT_WRAPPER}>
<DataView
key="scene-files-folder"
isOwner={true}

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 }) {
const [index, setIndex] = React.useState(-1);
@ -49,7 +40,7 @@ export default function SceneFilesFolder({ viewer, page, onAction, isMobile }) {
index={index}
onChange={(index) => setIndex(index)}
/>
<div css={STYLES_DATAVIEW_WRAPPER}>
<div css={Styles.PAGE_CONTENT_WRAPPER}>
{objects.length ? (
<DataView
key="scene-files-folder"

View File

@ -23,15 +23,6 @@ const STYLES_LOADER = css`
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 {
state = {
notFound: false,
@ -169,10 +160,12 @@ export default class SceneProfile extends React.Component {
url={`${Constants.hostname}${this.props.page.pathname}`}
>
<ScenePage>
<div css={Styles.PAGE_CONTENT_WRAPPER}>
<EmptyState>
<SVG.Users height="24px" style={{ marginBottom: 24 }} />
<div>This user doesn't have any public content</div>
</EmptyState>
</div>
</ScenePage>
</WebsitePrototypeWrapper>
);
@ -199,7 +192,7 @@ export default class SceneProfile extends React.Component {
url={`${Constants.hostname}${this.props.page.pathname}`}
image={image}
>
<div css={STYLES_DATAVIEW_WRAPPER}>
<div css={Styles.PAGE_CONTENT_WRAPPER}>
{user.library?.length ? (
<DataView
key="scene-files-folder"

View File

@ -204,10 +204,12 @@ export default class SceneSlate extends React.Component {
url={`${Constants.hostname}${this.props.page.pathname}`}
>
<ScenePage>
<div css={Styles.PAGE_CONTENT_WRAPPER}>
<EmptyState>
<SVG.Layers height="24px" style={{ marginBottom: 24 }} />
<div>We were unable to locate that collection</div>
</EmptyState>
</div>
</ScenePage>
</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 {
_copy = null;
_timeout = null;
@ -452,7 +445,7 @@ class SlatePage extends React.Component {
index={this.state.index}
onChange={(index) => this.setState({ index })}
/>
<div css={STYLES_DATAVIEW_WRAPPER}>
<div css={Styles.PAGE_CONTENT_WRAPPER}>
<DataView
key="scene-files-folder"
type="collection"
@ -467,7 +460,7 @@ class SlatePage extends React.Component {
</div>
</>
) : isOwner ? (
<div>
<div css={Styles.PAGE_CONTENT_WRAPPER}>
<EmptyState>
<FileTypeGroup />
<div style={{ marginTop: 24 }}>
@ -476,7 +469,7 @@ class SlatePage extends React.Component {
</EmptyState>
</div>
) : (
<div>
<div css={Styles.PAGE_CONTENT_WRAPPER}>
<EmptyState>There's nothing here :)</EmptyState>
</div>
)}

View File

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