gcg/static-cms
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(core): improve editor buttons for smaller screens (#3327)

Browse Source
This commit is contained in:
Shawn Erquhart 2020-02-26 02:30:02 -05:00 committed by GitHub
parent e7e497a8ff
commit 53365b7370
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 20 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
packages/netlify-cms-core/src/components/Editor/EditorToolbar.js
View File

@ -20,6 +20,11 @@ import { status } from 'Constants/publishModes';
import SettingsDropdown from 'UI/SettingsDropdown'; import SettingsDropdown from 'UI/SettingsDropdown';
const styles = { const styles = {
noOverflow: css`
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
`,
buttonMargin: css` buttonMargin: css`
margin: 0 10px; margin: 0 10px;
`, `,
@ -35,6 +40,13 @@ const styles = {
`, `,
}; };
const DropdownButton = styled(StyledDropdownButton)`
${styles.noOverflow}
@media (max-width: 1200px) {
padding-left: 10px;
}
`;
const ToolbarContainer = styled.div` const ToolbarContainer = styled.div`
box-shadow: 0 2px 6px 0 rgba(68, 74, 87, 0.05), 0 1px 3px 0 rgba(68, 74, 87, 0.1), box-shadow: 0 2px 6px 0 rgba(68, 74, 87, 0.05), 0 1px 3px 0 rgba(68, 74, 87, 0.1),
0 2px 54px rgba(0, 0, 0, 0.1); 0 2px 54px rgba(0, 0, 0, 0.1);
@ -133,7 +145,12 @@ const ToolbarButton = styled.button`
${buttons.button}; ${buttons.button};
${buttons.default}; ${buttons.default};
${styles.buttonMargin}; ${styles.buttonMargin};
${styles.noOverflow};
display: block; display: block;
@media (max-width: 1200px) {
padding: 0 10px;
}
`; `;
const DeleteButton = styled(ToolbarButton)` const DeleteButton = styled(ToolbarButton)`
@ -144,7 +161,7 @@ const SaveButton = styled(ToolbarButton)`
${buttons.lightBlue}; ${buttons.lightBlue};
`; `;
const PublishedToolbarButton = styled(StyledDropdownButton)` const PublishedToolbarButton = styled(DropdownButton)`
${styles.publishedButton} ${styles.publishedButton}
`; `;
@ -152,11 +169,11 @@ const PublishedButton = styled(ToolbarButton)`
${styles.publishedButton} ${styles.publishedButton}
`; `;
const PublishButton = styled(StyledDropdownButton)` const PublishButton = styled(DropdownButton)`
background-color: ${colorsRaw.teal}; background-color: ${colorsRaw.teal};
`; `;
const StatusButton = styled(StyledDropdownButton)` const StatusButton = styled(DropdownButton)`
background-color: ${colorsRaw.tealLight}; background-color: ${colorsRaw.tealLight};
color: ${colorsRaw.teal}; color: ${colorsRaw.teal};
`; `;