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;
|
flex-basis: 0;
|
||||||
min-width: auto;
|
min-width: auto;
|
||||||
padding-left: 8px;
|
padding-left: 8px;
|
||||||
|
position: fixed;
|
||||||
|
right: 12px;
|
||||||
|
|
||||||
|
${breakpoint("tablet")`
|
||||||
|
position: unset;
|
||||||
|
`};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const Wrapper = styled(Flex)`
|
const Wrapper = styled(Flex)`
|
||||||
|
@ -84,12 +90,12 @@ const Wrapper = styled(Flex)`
|
||||||
transform: translate3d(0, 0, 0);
|
transform: translate3d(0, 0, 0);
|
||||||
backdrop-filter: blur(20px);
|
backdrop-filter: blur(20px);
|
||||||
min-height: 56px;
|
min-height: 56px;
|
||||||
|
justify-content: flex-start;
|
||||||
|
|
||||||
@media print {
|
@media print {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
justify-content: flex-start;
|
|
||||||
${breakpoint("tablet")`
|
${breakpoint("tablet")`
|
||||||
padding: ${(props) => (props.isCompact ? "12px" : `24px 24px 0`)};
|
padding: ${(props) => (props.isCompact ? "12px" : `24px 24px 0`)};
|
||||||
justify-content: "center";
|
justify-content: "center";
|
||||||
|
|
|
@ -29,6 +29,10 @@ const RealInput = styled.input`
|
||||||
background: none;
|
background: none;
|
||||||
color: ${(props) => props.theme.text};
|
color: ${(props) => props.theme.text};
|
||||||
height: 30px;
|
height: 30px;
|
||||||
|
min-width: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap
|
||||||
|
|
||||||
&:disabled,
|
&:disabled,
|
||||||
&::placeholder {
|
&::placeholder {
|
||||||
|
|
|
@ -1,13 +1,39 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
import { transparentize } from "polished";
|
||||||
import * as React from "react";
|
import * as React from "react";
|
||||||
import styled from "styled-components";
|
import styled from "styled-components";
|
||||||
|
import useWindowSize from "hooks/useWindowSize";
|
||||||
|
|
||||||
const Nav = styled.nav`
|
const Nav = styled.nav`
|
||||||
border-bottom: 1px solid ${(props) => props.theme.divider};
|
border-bottom: 1px solid ${(props) => props.theme.divider};
|
||||||
margin: 12px 0;
|
margin: 12px 0;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
white-space: nowrap;
|
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
|
// When sticky we need extra background coverage around the sides otherwise
|
||||||
|
@ -30,10 +56,33 @@ export const Separator = styled.span`
|
||||||
margin-top: 6px;
|
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 (
|
return (
|
||||||
<Sticky>
|
<Sticky>
|
||||||
<Nav {...props}></Nav>
|
<Nav ref={ref} onScroll={updateShadows} $shadowVisible={shadowVisible}>
|
||||||
|
{children}
|
||||||
|
</Nav>
|
||||||
</Sticky>
|
</Sticky>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
Reference in New Issue