Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2025-02-12 07:50:34 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix: remove excessive whitespace between md sections on small screens

Browse Source 
fixes #874
This commit is contained in:
Roman Hotsiy 2019-09-30 13:10:32 +03:00
parent faa74d6002
commit e318fb3381
No known key found for this signature in database
GPG Key ID: 5CB7B3ACABA57CB0
2 changed files with 8 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/common-elements/panels.ts
View File

@ -1,14 +1,16 @@
import { SECTION_ATTR } from '../services/MenuStore'; import { SECTION_ATTR } from '../services/MenuStore';
import styled, { media } from '../styled-components'; import styled, { media } from '../styled-components';
export const MiddlePanel = styled.div` export const MiddlePanel = styled.div<{ compact?: boolean }>`
width: calc(100% - ${props => props.theme.rightPanel.width}); width: calc(100% - ${props => props.theme.rightPanel.width});
padding: 0 ${props => props.theme.spacing.sectionHorizontal}px; padding: 0 ${props => props.theme.spacing.sectionHorizontal}px;
${media.lessThan('medium', true)` ${({ compact, theme }) =>
media.lessThan('medium', true)`
width: 100%; width: 100%;
padding: ${props => padding: ${`${compact ? 0 : theme.spacing.sectionVertical}px ${
`${props.theme.spacing.sectionVertical}px ${props.theme.spacing.sectionHorizontal}px`}; theme.spacing.sectionHorizontal
}px`};
`}; `};
`; `;

4
src/components/ContentItems/ContentItems.tsx
View File

@ -60,7 +60,7 @@ export class ContentItem extends React.Component<ContentItemProps> {
} }
} }
const middlePanelWrap = component => <MiddlePanel>{component}</MiddlePanel>; const middlePanelWrap = component => <MiddlePanel compact={true}>{component}</MiddlePanel>;
@observer @observer
export class SectionItem extends React.Component<ContentItemProps> { export class SectionItem extends React.Component<ContentItemProps> {
@ -71,7 +71,7 @@ export class SectionItem extends React.Component<ContentItemProps> {
return ( return (
<> <>
<Row> <Row>
<MiddlePanel> <MiddlePanel compact={level !== 1}>
<Header> <Header>
<ShareLink to={this.props.item.id} /> <ShareLink to={this.props.item.id} />
{name} {name}