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