filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-11-22 12:24:02 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix(Upload/Botton): add a bottom offset on mobile when the carousel is open

Browse Source
This commit is contained in:
Aminejv 2022-02-07 11:19:28 +01:00
parent f4caae60ad
commit 3267b42d1c
5 changed files with 15 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
common/constants.js
View File

@ -9,6 +9,7 @@ export const sizes = {
intercomWidget: 60,
sidebar: 416,
filterNavbar: 42,
carouselMobileFooterHeight: 52,
topOffset: 0, //NOTE(martina): Pushes UI down. 16 when there is a persistent announcement banner, 0 otherwise
mobile: 768,

2
components/core/ApplicationHeader.js
View File

@ -160,7 +160,7 @@ export default function ApplicationHeader({ viewer, page, data, onAction, isMobi
) : (
<UploadOnboarding onAction={onAction} viewer={viewer} isMobile={isMobile}>
<Upload.Provider page={page} data={data} viewer={viewer}>
<Upload.Root data={data} isMobile={isMobile}>
<Upload.Root page={page} data={data} isMobile={isMobile}>
<div css={STYLES_RIGHT}>
<UserActions viewer={viewer} />
</div>

11
components/core/Upload/Popup.js
View File

@ -32,6 +32,12 @@ const STYLES_POPUP_WRAPPER = (theme) => css`
box-shadow: ${theme.shadow.lightLarge};
`;
const STYLES_POPUP_CAROUSEL_POSITION = (theme) => css`
@media (max-width: ${theme.sizes.mobile}px) {
bottom: ${Constants.sizes.carouselMobileFooterHeight + 16}px;
}
`;
const STYLES_DISMISS_BUTTON = (theme) => css`
${Styles.BUTTON_RESET};
position: absolute;
@ -161,7 +167,7 @@ const useUploadSummary = ({ fileLoading }) =>
};
}, [fileLoading]);
export function Popup({ isMobile }) {
export function Popup({ page, isMobile }) {
const {
state: { isFinished, fileLoading },
handlers: { resetUploadState },
@ -176,11 +182,12 @@ export function Popup({ isMobile }) {
{ hideUploadPopup, expandUploadSummary, collapseUploadSummary, cancelAutoCollapseOnMouseEnter },
] = useUploadPopup({ totalFilesSummary });
const isGlobalCarouselOpen = !!page.params.id;
return (
<AnimatePresence>
{popupState.isVisible ? (
<motion.div
css={STYLES_POPUP_WRAPPER}
css={[STYLES_POPUP_WRAPPER, isGlobalCarouselOpen && STYLES_POPUP_CAROUSEL_POSITION]}
initial={{ opacity: 0, y: 0 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: 10 }}

4
components/core/Upload/index.js
View File

@ -14,13 +14,13 @@ import DropIndicator from "~/components/core/Upload/DropIndicator";
/* -------------------------------------------------------------------------------------------------
* Root
* -----------------------------------------------------------------------------------------------*/
const Root = ({ children, data, isMobile }) => {
const Root = ({ children, page, data, isMobile }) => {
return (
<>
{children}
{isMobile ? <MobileUploadJumper data={data} /> : <UploadJumper data={data} />}
<ModalPortal>
<Popup isMobile={isMobile} />
<Popup page={page} isMobile={isMobile} />
<DropIndicator data={data} />
</ModalPortal>
</>

6
components/system/components/GlobalCarousel/index.js
View File

@ -559,8 +559,6 @@ function CarouselHeaderMobile({
);
}
const MOBILE_FOOTER_HEIGHT = 52;
const STYLES_CAROUSEL_MOBILE_FOOTER = (theme) => css`
${Styles.HORIZONTAL_CONTAINER_CENTERED};
position: fixed;
@ -571,7 +569,7 @@ const STYLES_CAROUSEL_MOBILE_FOOTER = (theme) => css`
padding: 8px 16px;
border-top: 1px solid ${theme.semantic.borderGrayLight};
color: ${theme.semantic.textGrayDark};
height: ${MOBILE_FOOTER_HEIGHT}px;
height: ${Constants.sizes.carouselMobileFooterHeight}px;
background-color: ${theme.semantic.bgWhite};
@supports ((-webkit-backdrop-filter: blur(15px)) or (backdrop-filter: blur(15px))) {
@ -623,7 +621,7 @@ function CarouselFooterMobile({ file, onAction, external, isOwner, data, viewer
<AnimatePresence>
{isEditInfoVisible && (
<Jumpers.EditInfoMobile
footerStyle={{ bottom: MOBILE_FOOTER_HEIGHT }}
footerStyle={{ bottom: Constants.sizes.carouselMobileFooterHeight }}
file={file}
onClose={hideEditInfo}
/>