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';
const styles = {
noOverflow: css`
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
`,
buttonMargin: css`
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`
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);
@ -133,7 +145,12 @@ const ToolbarButton = styled.button`
${buttons.button};
${buttons.default};
${styles.buttonMargin};
${styles.noOverflow};
display: block;
@media (max-width: 1200px) {
padding: 0 10px;
}
`;
const DeleteButton = styled(ToolbarButton)`
@ -144,7 +161,7 @@ const SaveButton = styled(ToolbarButton)`
${buttons.lightBlue};
`;
const PublishedToolbarButton = styled(StyledDropdownButton)`
const PublishedToolbarButton = styled(DropdownButton)`
${styles.publishedButton}
`;
@ -152,11 +169,11 @@ const PublishedButton = styled(ToolbarButton)`
${styles.publishedButton}
`;
const PublishButton = styled(StyledDropdownButton)`
const PublishButton = styled(DropdownButton)`
background-color: ${colorsRaw.teal};
`;
const StatusButton = styled(StyledDropdownButton)`
const StatusButton = styled(DropdownButton)`
background-color: ${colorsRaw.tealLight};
color: ${colorsRaw.teal};
`;