fix: Various mobile fixes (#2295)
* fix: Input placeholder ellipsis * fix: Hide scrollbar on nav tabs on mobile * fix: Header actions should be fixed on mobile * fix: Add fade when content in tabs does not fit in available horizontal width
This commit is contained in:
parent
e41f17c701
commit
b5e4e4fe82
|
@ -72,6 +72,12 @@ const Actions = styled(Flex)`
|
|||
flex-basis: 0;
|
||||
min-width: auto;
|
||||
padding-left: 8px;
|
||||
position: fixed;
|
||||
right: 12px;
|
||||
|
||||
${breakpoint("tablet")`
|
||||
position: unset;
|
||||
`};
|
||||
`;
|
||||
|
||||
const Wrapper = styled(Flex)`
|
||||
|
@ -84,12 +90,12 @@ const Wrapper = styled(Flex)`
|
|||
transform: translate3d(0, 0, 0);
|
||||
backdrop-filter: blur(20px);
|
||||
min-height: 56px;
|
||||
justify-content: flex-start;
|
||||
|
||||
@media print {
|
||||
display: none;
|
||||
}
|
||||
|
||||
justify-content: flex-start;
|
||||
${breakpoint("tablet")`
|
||||
padding: ${(props) => (props.isCompact ? "12px" : `24px 24px 0`)};
|
||||
justify-content: "center";
|
||||
|
|
|
@ -29,6 +29,10 @@ const RealInput = styled.input`
|
|||
background: none;
|
||||
color: ${(props) => props.theme.text};
|
||||
height: 30px;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap
|
||||
|
||||
&:disabled,
|
||||
&::placeholder {
|
||||
|
|
|
@ -1,13 +1,39 @@
|
|||
// @flow
|
||||
import { transparentize } from "polished";
|
||||
import * as React from "react";
|
||||
import styled from "styled-components";
|
||||
import useWindowSize from "hooks/useWindowSize";
|
||||
|
||||
const Nav = styled.nav`
|
||||
border-bottom: 1px solid ${(props) => props.theme.divider};
|
||||
margin: 12px 0;
|
||||
overflow-y: auto;
|
||||
white-space: nowrap;
|
||||
transition: opacity 250ms ease-out;
|
||||
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 50px;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
background: ${(props) =>
|
||||
props.$shadowVisible
|
||||
? `linear-gradient(
|
||||
90deg,
|
||||
${transparentize(1, props.theme.background)} 0%,
|
||||
${props.theme.background} 100%
|
||||
)`
|
||||
: `transparent`};
|
||||
}
|
||||
`;
|
||||
|
||||
// When sticky we need extra background coverage around the sides otherwise
|
||||
|
@ -30,10 +56,33 @@ export const Separator = styled.span`
|
|||
margin-top: 6px;
|
||||
`;
|
||||
|
||||
const Tabs = (props: {}) => {
|
||||
const Tabs = ({ children }: {| children: React.Node |}) => {
|
||||
const ref = React.useRef<?HTMLDivElement>();
|
||||
const [shadowVisible, setShadow] = React.useState(false);
|
||||
const { width } = useWindowSize();
|
||||
|
||||
const updateShadows = React.useCallback(() => {
|
||||
const c = ref.current;
|
||||
if (!c) return;
|
||||
|
||||
const scrollLeft = c.scrollLeft;
|
||||
const wrapperWidth = c.scrollWidth - c.clientWidth;
|
||||
const fade = !!(wrapperWidth - scrollLeft !== 0);
|
||||
|
||||
if (fade !== shadowVisible) {
|
||||
setShadow(fade);
|
||||
}
|
||||
}, [shadowVisible]);
|
||||
|
||||
React.useEffect(() => {
|
||||
updateShadows();
|
||||
}, [width, updateShadows]);
|
||||
|
||||
return (
|
||||
<Sticky>
|
||||
<Nav {...props}></Nav>
|
||||
<Nav ref={ref} onScroll={updateShadows} $shadowVisible={shadowVisible}>
|
||||
{children}
|
||||
</Nav>
|
||||
</Sticky>
|
||||
);
|
||||
};
|
||||
|
|
Reference in New Issue