fix: Mobile style fixes and improvements (#1459)
* fixes #1457 – check for matchMedia function before using it * fixes: Depth issues closes #1458 * fixes: Long breadcrumbs cause horizontal overflow * fix: Improve tabs and overflow on mobile
This commit is contained in:
parent
df9b0bcf91
commit
d885252fb0
|
@ -9,6 +9,7 @@ type Props = {
|
|||
|
||||
const Container = styled.div`
|
||||
width: 100%;
|
||||
max-width: 100vw;
|
||||
padding: 60px 20px;
|
||||
|
||||
${breakpoint("tablet")`
|
||||
|
|
|
@ -169,6 +169,7 @@ const DocumentLink = styled(Link)`
|
|||
border-radius: 8px;
|
||||
max-height: 50vh;
|
||||
min-width: 100%;
|
||||
max-width: calc(100vw - 40px);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
|
|
|
@ -232,7 +232,7 @@ const Label = styled(Flex).attrs({
|
|||
justify: "center",
|
||||
align: "center",
|
||||
})`
|
||||
z-index: 1000;
|
||||
z-index: ${(props) => props.theme.depths.menu};
|
||||
cursor: pointer;
|
||||
`;
|
||||
|
||||
|
@ -244,7 +244,7 @@ const Position = styled.div`
|
|||
${({ top }) => (top !== undefined ? `top: ${top}px` : "")};
|
||||
${({ bottom }) => (bottom !== undefined ? `bottom: ${bottom}px` : "")};
|
||||
max-height: 75%;
|
||||
z-index: 1000;
|
||||
z-index: ${(props) => props.theme.depths.menu};
|
||||
transform: ${(props) =>
|
||||
props.position === "center" ? "translateX(-50%)" : "initial"};
|
||||
pointer-events: none;
|
||||
|
|
|
@ -18,7 +18,7 @@ const loadingFrame = keyframes`
|
|||
const Container = styled.div`
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 9999;
|
||||
z-index: ${(props) => props.theme.depths.loadingIndicatorBar};
|
||||
|
||||
background-color: #03a9f4;
|
||||
width: 100%;
|
||||
|
|
|
@ -23,7 +23,7 @@ const GlobalStyles = createGlobalStyle`
|
|||
.ReactModal__Overlay {
|
||||
background-color: ${(props) =>
|
||||
transparentize(0.25, props.theme.background)} !important;
|
||||
z-index: 100;
|
||||
z-index: ${(props) => props.theme.depths.modalOverlay};
|
||||
}
|
||||
|
||||
${breakpoint("tablet")`
|
||||
|
@ -103,7 +103,7 @@ const StyledModal = styled(ReactModal)`
|
|||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
z-index: ${(props) => props.theme.depths.modal};
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
|
|
|
@ -22,7 +22,7 @@ const StyledPopover = styled(BoundlessPopover)`
|
|||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 9999;
|
||||
z-index: ${(props) => props.theme.depths.popover};
|
||||
|
||||
svg {
|
||||
height: 16px;
|
||||
|
|
|
@ -71,7 +71,7 @@ const Container = styled(Flex)`
|
|||
transition: left 100ms ease-out,
|
||||
${(props) => props.theme.backgroundTransition};
|
||||
margin-left: ${(props) => (props.mobileSidebarVisible ? 0 : "-100%")};
|
||||
z-index: 1000;
|
||||
z-index: ${(props) => props.theme.depths.sidebar};
|
||||
|
||||
@media print {
|
||||
display: none;
|
||||
|
|
|
@ -6,6 +6,8 @@ const Tabs = styled.nav`
|
|||
border-bottom: 1px solid ${(props) => props.theme.divider};
|
||||
margin-top: 22px;
|
||||
margin-bottom: 12px;
|
||||
overflow-y: auto;
|
||||
white-space: nowrap;
|
||||
`;
|
||||
|
||||
export const Separator = styled.span`
|
||||
|
|
|
@ -34,7 +34,7 @@ const List = styled.ol`
|
|||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
z-index: 1000;
|
||||
z-index: ${(props) => props.theme.depths.toasts};
|
||||
`;
|
||||
|
||||
export default inject("ui")(Toasts);
|
||||
|
|
|
@ -12,6 +12,7 @@ import { withRouter, Link } from "react-router-dom";
|
|||
import type { RouterHistory, Match } from "react-router-dom";
|
||||
import { Waypoint } from "react-waypoint";
|
||||
import styled from "styled-components";
|
||||
import breakpoint from "styled-components-breakpoint";
|
||||
|
||||
import { DEFAULT_PAGINATION_LIMIT } from "stores/BaseStore";
|
||||
import DocumentsStore from "stores/DocumentsStore";
|
||||
|
@ -387,6 +388,12 @@ const Filters = styled(Flex)`
|
|||
margin-bottom: 12px;
|
||||
opacity: 0.85;
|
||||
transition: opacity 100ms ease-in-out;
|
||||
overflow-y: auto;
|
||||
padding: 8px 0;
|
||||
|
||||
${breakpoint("tablet")`
|
||||
padding: 0;
|
||||
`};
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
|
|
|
@ -32,16 +32,18 @@ class UiStore {
|
|||
}
|
||||
|
||||
// system theme listeners
|
||||
const colorSchemeQueryList = window.matchMedia(
|
||||
"(prefers-color-scheme: dark)"
|
||||
);
|
||||
if (window.matchMedia) {
|
||||
const colorSchemeQueryList = window.matchMedia(
|
||||
"(prefers-color-scheme: dark)"
|
||||
);
|
||||
|
||||
const setSystemTheme = (event) => {
|
||||
this.systemTheme = event.matches ? "dark" : "light";
|
||||
};
|
||||
setSystemTheme(colorSchemeQueryList);
|
||||
if (colorSchemeQueryList.addListener) {
|
||||
colorSchemeQueryList.addListener(setSystemTheme);
|
||||
const setSystemTheme = (event) => {
|
||||
this.systemTheme = event.matches ? "dark" : "light";
|
||||
};
|
||||
setSystemTheme(colorSchemeQueryList);
|
||||
if (colorSchemeQueryList.addListener) {
|
||||
colorSchemeQueryList.addListener(setSystemTheme);
|
||||
}
|
||||
}
|
||||
|
||||
// persisted keys
|
||||
|
|
|
@ -101,6 +101,16 @@ export const base = {
|
|||
desktop: 1025, // targeting devices that are larger than the iPad (which is 1024px in landscape mode)
|
||||
desktopLarge: 1600,
|
||||
},
|
||||
|
||||
depths: {
|
||||
sidebar: 1000,
|
||||
modalOverlay: 2000,
|
||||
modal: 3000,
|
||||
menu: 4000,
|
||||
toasts: 5000,
|
||||
loadingIndicatorBar: 6000,
|
||||
popover: 9000,
|
||||
},
|
||||
};
|
||||
|
||||
export const light = {
|
||||
|
|
Reference in New Issue