coop-cloud-chaos-patchs/outline
coop-cloud-chaos-patchs/outline
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix: increase left gutter spacing on mobile edit mode (#2720)

Browse Source 
* fix: adds space to the left gutter in edit mode so heading annotations have room on mobile
This commit is contained in:
Nan Yu 2021-11-02 18:30:37 -07:00 committed by GitHub
parent 57fa1305a6
commit ea12ebea0e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 7 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app/scenes/Document/components/Document.js
View File

@ -464,6 +464,7 @@ class DocumentScene extends React.Component<Props> {
<MaxWidth <MaxWidth
archived={document.isArchived} archived={document.isArchived}
showContents={showContents} showContents={showContents}
isEditing={!readOnly}
column column
auto auto
> >
@ -600,11 +601,15 @@ const ReferencesWrapper = styled("div")`
const MaxWidth = styled(Flex)` const MaxWidth = styled(Flex)`
${(props) => ${(props) =>
props.archived && `* { color: ${props.theme.textSecondary} !important; } `}; props.archived && `* { color: ${props.theme.textSecondary} !important; } `};
padding: 0 12px;
// Adds space to the left gutter to make room for heading annotations on mobile
padding: ${(props) => (props.isEditing ? "0 12px 0 32px" : "0 12px")};
transition: padding 100ms;
max-width: 100vw; max-width: 100vw;
width: 100%; width: 100%;
${breakpoint("tablet")` ${breakpoint("tablet")`
padding: 0 24px; padding: 0 24px;
margin: 4px auto 12px; margin: 4px auto 12px;
max-width: calc(48px + ${(props) => max-width: calc(48px + ${(props) =>