Style tweeks
This commit is contained in:
Daniel Lautzenheiser
parent
0c5efd19d6
commit
6aaf16594b
1
.gitignore
vendored
1
.gitignore
vendored
@ -20,3 +20,4 @@ coverage/
|
||||
.env
|
||||
.temp/
|
||||
storybook-static/
|
||||
*.tgz
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
"allowBranch": ["master", "release/*"],
|
||||
"conventionalCommits": true,
|
||||
"preid": "beta",
|
||||
"gitRemote": "upstream",
|
||||
"gitRemote": "origin",
|
||||
"message": "chore(release): publish"
|
||||
}
|
||||
},
|
||||
|
||||
11
package.json
11
package.json
@ -61,7 +61,13 @@
|
||||
"publish:graduate:dry-run": "run-s \"publish:version --conventional-graduate --no-git-tag-version\"",
|
||||
"storybook": "start-storybook -p 6006",
|
||||
"build-storybook": "build-storybook",
|
||||
"prepare": "husky install"
|
||||
"prepare": "husky install",
|
||||
"pack:core": "cd packages/netlify-cms-core && npm pack",
|
||||
"pack:app": "cd packages/netlify-cms-app && npm pack",
|
||||
"pack:ui-default": "cd packages/netlify-cms-ui-default && npm pack",
|
||||
"pack-copy": "mv packages/**/*.tgz ./packs",
|
||||
"pack-all": "run-p pack:* && npm run pack-copy",
|
||||
"build:pack": "run-s build publish:version pack-all"
|
||||
},
|
||||
"browserslist": [
|
||||
"last 2 Chrome versions",
|
||||
@ -192,5 +198,6 @@
|
||||
},
|
||||
"resolutions": {
|
||||
"react-redux": "^7.2.0"
|
||||
}
|
||||
},
|
||||
"version": "0.0.0"
|
||||
}
|
||||
|
||||
@ -3,6 +3,14 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
## [2.15.76](https://github.com/netlify/netlify-cms/compare/netlify-cms-app@2.15.72...netlify-cms-app@2.15.76) (2022-09-07)
|
||||
|
||||
**Note:** Version bump only for package netlify-cms-app
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [2.15.72](https://github.com/netlify/netlify-cms/compare/netlify-cms-app@2.15.71...netlify-cms-app@2.15.72) (2022-04-13)
|
||||
|
||||
**Note:** Version bump only for package netlify-cms-app
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "netlify-cms-app",
|
||||
"description": "An extensible, open source, Git-based, React CMS for static sites. Reusable congiuration with React as peer.",
|
||||
"version": "2.15.72",
|
||||
"version": "2.15.76",
|
||||
"homepage": "https://www.netlifycms.org",
|
||||
"repository": "https://github.com/netlify/netlify-cms/tree/master/packages/netlify-cms-app",
|
||||
"bugs": "https://github.com/netlify/netlify-cms/issues",
|
||||
@ -40,13 +40,13 @@
|
||||
"netlify-cms-backend-gitlab": "^2.13.0",
|
||||
"netlify-cms-backend-proxy": "^1.2.3",
|
||||
"netlify-cms-backend-test": "^2.11.3",
|
||||
"netlify-cms-core": "^2.55.2",
|
||||
"netlify-cms-core": "^2.55.6",
|
||||
"netlify-cms-editor-component-image": "^2.7.0",
|
||||
"netlify-cms-lib-auth": "^2.4.2",
|
||||
"netlify-cms-lib-util": "^2.15.1",
|
||||
"netlify-cms-lib-widgets": "^1.8.1",
|
||||
"netlify-cms-locales": "^1.39.0",
|
||||
"netlify-cms-ui-default": "^2.15.5",
|
||||
"netlify-cms-ui-default": "^2.15.9",
|
||||
"netlify-cms-widget-boolean": "^2.4.1",
|
||||
"netlify-cms-widget-code": "^1.3.4",
|
||||
"netlify-cms-widget-colorstring": "^1.1.2",
|
||||
|
||||
@ -3,6 +3,14 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
## [2.55.6](https://github.com/netlify/netlify-cms/compare/netlify-cms-core@2.55.2...netlify-cms-core@2.55.6) (2022-09-07)
|
||||
|
||||
**Note:** Version bump only for package netlify-cms-core
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [2.55.2](https://github.com/netlify/netlify-cms/compare/netlify-cms-core@2.55.1...netlify-cms-core@2.55.2) (2022-04-13)
|
||||
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "netlify-cms-core",
|
||||
"description": "Netlify CMS core application, see netlify-cms package for the main distribution.",
|
||||
"version": "2.55.2",
|
||||
"version": "2.55.6",
|
||||
"repository": "https://github.com/netlify/netlify-cms/tree/master/packages/netlify-cms-core",
|
||||
"bugs": "https://github.com/netlify/netlify-cms/issues",
|
||||
"module": "dist/esm/index.js",
|
||||
@ -66,7 +66,7 @@
|
||||
"redux-devtools-extension": "^2.13.8",
|
||||
"redux-notifications": "^4.0.1",
|
||||
"redux-thunk": "^2.3.0",
|
||||
"remark-gfm": "1.0.0",
|
||||
"remark-gfm": "3.0.1",
|
||||
"sanitize-filename": "^1.6.1",
|
||||
"semaphore": "^1.0.5",
|
||||
"tomlify-j0.4": "^3.0.0-alpha.0",
|
||||
|
||||
2
packages/netlify-cms-core/src/bootstrap.js
vendored
2
packages/netlify-cms-core/src/bootstrap.js
vendored
@ -2,7 +2,6 @@ import React from 'react';
|
||||
import { render } from 'react-dom';
|
||||
import { Provider, connect } from 'react-redux';
|
||||
import { Route, Router } from 'react-router-dom';
|
||||
import { GlobalStyles } from 'netlify-cms-ui-default';
|
||||
import { I18n } from 'react-polyglot';
|
||||
|
||||
import { store } from './redux';
|
||||
@ -85,7 +84,6 @@ function bootstrap(opts = {}) {
|
||||
function Root() {
|
||||
return (
|
||||
<>
|
||||
<GlobalStyles />
|
||||
<Provider store={store}>
|
||||
<ConnectedTranslatedApp />
|
||||
</Provider>
|
||||
|
||||
@ -34,7 +34,7 @@ TopBarProgress.config({
|
||||
});
|
||||
|
||||
const AppMainContainer = styled.div`
|
||||
min-width: 800px;
|
||||
min-width: 1200px;
|
||||
max-width: 1440px;
|
||||
margin: 0 auto;
|
||||
`;
|
||||
|
||||
@ -47,7 +47,7 @@ function AppHeader(props) {
|
||||
const AppHeaderContent = styled.div`
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
min-width: 800px;
|
||||
min-width: 1200px;
|
||||
max-width: 1440px;
|
||||
padding: 0 12px;
|
||||
margin: 0 auto;
|
||||
|
||||
@ -15,6 +15,7 @@ const CardsGrid = styled.ul`
|
||||
margin-left: -12px;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 16px;
|
||||
padding-left: 0;
|
||||
`;
|
||||
|
||||
export default class EntryListing extends React.Component {
|
||||
|
||||
@ -39,6 +39,7 @@ const SidebarHeading = styled.h2`
|
||||
|
||||
const SidebarNavList = styled.ul`
|
||||
margin: 16px 0 0;
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
overflow: auto;
|
||||
`;
|
||||
|
||||
@ -23,7 +23,7 @@ import {
|
||||
} from '../../../lib/i18n';
|
||||
|
||||
const ControlPaneContainer = styled.div`
|
||||
max-width: 800px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding-bottom: 16px;
|
||||
font-size: 16px;
|
||||
|
||||
@ -89,7 +89,7 @@ const NoPreviewContainer = styled.div`
|
||||
|
||||
const EditorContainer = styled.div`
|
||||
width: 100%;
|
||||
min-width: 800px;
|
||||
min-width: 1200px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@ -252,7 +252,7 @@ class EditorInterface extends Component {
|
||||
|
||||
const leftPanelLocale = this.state.leftPanelLocale || locales?.[0];
|
||||
const editor = (
|
||||
<ControlPaneContainer overFlow blockEntry={showEventBlocker}>
|
||||
<ControlPaneContainer id="control-pane" overFlow blockEntry={showEventBlocker}>
|
||||
<EditorControlPane
|
||||
{...editorProps}
|
||||
ref={c => (this.controlPaneRef = c)}
|
||||
|
||||
@ -1,8 +1,6 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import { isElement } from 'react-is';
|
||||
import { ScrollSyncPane } from 'react-scroll-sync';
|
||||
import { FrameContextConsumer } from 'react-frame-component';
|
||||
|
||||
/**
|
||||
* We need to create a lightweight component here so that we can access the
|
||||
@ -12,17 +10,9 @@ import { FrameContextConsumer } from 'react-frame-component';
|
||||
class PreviewContent extends React.Component {
|
||||
render() {
|
||||
const { previewComponent, previewProps } = this.props;
|
||||
return (
|
||||
<FrameContextConsumer>
|
||||
{context => (
|
||||
<ScrollSyncPane attachTo={context.document.scrollingElement}>
|
||||
{isElement(previewComponent)
|
||||
? React.cloneElement(previewComponent, previewProps)
|
||||
: React.createElement(previewComponent, previewProps)}
|
||||
</ScrollSyncPane>
|
||||
)}
|
||||
</FrameContextConsumer>
|
||||
);
|
||||
return isElement(previewComponent)
|
||||
? React.cloneElement(previewComponent, previewProps)
|
||||
: React.createElement(previewComponent, previewProps);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -3,9 +3,9 @@ import React from 'react';
|
||||
import styled from '@emotion/styled';
|
||||
import { List, Map } from 'immutable';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import Frame, { FrameContextConsumer } from 'react-frame-component';
|
||||
import { lengths } from 'netlify-cms-ui-default';
|
||||
import { connect } from 'react-redux';
|
||||
import { ScrollSyncPane } from 'react-scroll-sync';
|
||||
|
||||
import {
|
||||
resolveWidget,
|
||||
@ -22,12 +22,13 @@ import EditorPreviewContent from './EditorPreviewContent.js';
|
||||
import PreviewHOC from './PreviewHOC';
|
||||
import EditorPreview from './EditorPreview';
|
||||
|
||||
const PreviewPaneFrame = styled(Frame)`
|
||||
const PreviewPaneFrame = styled.div`
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
background: #fff;
|
||||
border-radius: ${lengths.borderRadius};
|
||||
overflow: auto;
|
||||
`;
|
||||
|
||||
export class PreviewPane extends React.Component {
|
||||
@ -231,17 +232,13 @@ export class PreviewPane extends React.Component {
|
||||
|
||||
return (
|
||||
<ErrorBoundary config={config}>
|
||||
<PreviewPaneFrame id="preview-pane" head={styleEls} initialContent={initialContent}>
|
||||
<FrameContextConsumer>
|
||||
{({ document, window }) => {
|
||||
return (
|
||||
<EditorPreviewContent
|
||||
{...{ previewComponent, previewProps: { ...previewProps, document, window } }}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
</FrameContextConsumer>
|
||||
</PreviewPaneFrame>
|
||||
<ScrollSyncPane>{/* attachTo={document.getElementById('control-pane')}>*/}
|
||||
<PreviewPaneFrame id="preview-pane" head={styleEls} initialContent={initialContent}>
|
||||
<EditorPreviewContent
|
||||
{...{ previewComponent, previewProps: { ...previewProps, document, window } }}
|
||||
/>
|
||||
</PreviewPaneFrame>
|
||||
</ScrollSyncPane>
|
||||
</ErrorBoundary>
|
||||
);
|
||||
}
|
||||
|
||||
@ -89,7 +89,7 @@ const ToolbarContainer = styled.div`
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
min-width: 800px;
|
||||
min-width: 1200px;
|
||||
z-index: ${zIndex.zIndex300};
|
||||
background-color: #fff;
|
||||
height: 66px;
|
||||
|
||||
@ -3,6 +3,14 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
## [2.15.9](https://github.com/netlify/netlify-cms/compare/netlify-cms-ui-default@2.15.5...netlify-cms-ui-default@2.15.9) (2022-09-07)
|
||||
|
||||
**Note:** Version bump only for package netlify-cms-ui-default
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [2.15.5](https://github.com/netlify/netlify-cms/compare/netlify-cms-ui-default@2.15.4...netlify-cms-ui-default@2.15.5) (2022-03-08)
|
||||
|
||||
**Note:** Version bump only for package netlify-cms-ui-default
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "netlify-cms-ui-default",
|
||||
"description": "Default UI components for Netlify CMS.",
|
||||
"version": "2.15.5",
|
||||
"version": "2.15.9",
|
||||
"repository": "https://github.com/netlify/netlify-cms/tree/master/packages/netlify-cms-ui-default",
|
||||
"bugs": "https://github.com/netlify/netlify-cms/issues",
|
||||
"license": "MIT",
|
||||
|
||||
@ -28,7 +28,6 @@ import {
|
||||
effects,
|
||||
zIndex,
|
||||
reactSelectStyles,
|
||||
GlobalStyles,
|
||||
} from './styles';
|
||||
|
||||
export const NetlifyCmsUiDefault = {
|
||||
@ -62,7 +61,6 @@ export const NetlifyCmsUiDefault = {
|
||||
effects,
|
||||
zIndex,
|
||||
reactSelectStyles,
|
||||
GlobalStyles,
|
||||
};
|
||||
export {
|
||||
Dropdown,
|
||||
@ -95,6 +93,5 @@ export {
|
||||
effects,
|
||||
zIndex,
|
||||
reactSelectStyles,
|
||||
GlobalStyles,
|
||||
GoBackButton,
|
||||
};
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import React from 'react';
|
||||
import { css, Global } from '@emotion/core';
|
||||
import { css } from '@emotion/core';
|
||||
|
||||
/**
|
||||
* Font Stacks
|
||||
@ -89,7 +88,7 @@ const lengths = {
|
||||
borderRadius: '5px',
|
||||
richTextEditorMinHeight: '300px',
|
||||
borderWidth: '2px',
|
||||
topCardWidth: '682px',
|
||||
topCardWidth: '722px',
|
||||
pageMargin: '28px 18px',
|
||||
objectWidgetTopBarContainerPadding: '0 14px 14px',
|
||||
};
|
||||
@ -424,100 +423,6 @@ const zIndex = {
|
||||
zIndex99999: 99999,
|
||||
};
|
||||
|
||||
function GlobalStyles() {
|
||||
return (
|
||||
<Global
|
||||
styles={css`
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:focus {
|
||||
outline: -webkit-focus-ring-color auto ${lengths.borderRadius};
|
||||
}
|
||||
|
||||
/**
|
||||
* Don't show outlines if the user is utilizing mouse rather than keyboard.
|
||||
*/
|
||||
[data-whatintent='mouse'] *:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: ${fonts.primary};
|
||||
font-weight: normal;
|
||||
background-color: ${colors.background};
|
||||
color: ${colors.text};
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p {
|
||||
font-family: ${fonts.primary};
|
||||
color: ${colors.textLead};
|
||||
font-size: 15px;
|
||||
line-height: 1.5;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 24px;
|
||||
letter-spacing: 0.4px;
|
||||
color: ${colors.textLead};
|
||||
}
|
||||
|
||||
a,
|
||||
button {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
a {
|
||||
color: ${colors.text};
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
button {
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: none;
|
||||
}
|
||||
`}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export {
|
||||
fonts,
|
||||
colorsRaw,
|
||||
@ -532,5 +437,4 @@ export {
|
||||
effects,
|
||||
zIndex,
|
||||
reactSelectStyles,
|
||||
GlobalStyles,
|
||||
};
|
||||
|
||||
@ -3,6 +3,14 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
## [2.10.193](https://github.com/netlify/netlify-cms/compare/netlify-cms@2.10.192...netlify-cms@2.10.193) (2022-09-07)
|
||||
|
||||
**Note:** Version bump only for package netlify-cms
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [2.10.192](https://github.com/netlify/netlify-cms/compare/netlify-cms@2.10.191...netlify-cms@2.10.192) (2022-04-13)
|
||||
|
||||
**Note:** Version bump only for package netlify-cms
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "netlify-cms",
|
||||
"description": "An extensible, open source, Git-based, React CMS for static sites.",
|
||||
"version": "2.10.192",
|
||||
"version": "2.10.193",
|
||||
"homepage": "https://www.netlifycms.org",
|
||||
"repository": "https://github.com/netlify/netlify-cms",
|
||||
"bugs": "https://github.com/netlify/netlify-cms/issues",
|
||||
@ -23,7 +23,7 @@
|
||||
"dependencies": {
|
||||
"codemirror": "^5.46.0",
|
||||
"create-react-class": "^15.7.0",
|
||||
"netlify-cms-app": "^2.15.72",
|
||||
"netlify-cms-app": "^2.15.76",
|
||||
"netlify-cms-media-library-cloudinary": "^1.3.10",
|
||||
"netlify-cms-media-library-uploadcare": "^0.5.10",
|
||||
"react": "^16.8.4",
|
||||
|
||||
@ -5,7 +5,6 @@ import { ThemeProvider } from 'emotion-theming';
|
||||
|
||||
import Header from './header';
|
||||
import Footer from './footer';
|
||||
import GlobalStyles from '../global-styles';
|
||||
import theme from '../theme';
|
||||
|
||||
const LAYOUT_QUERY = graphql`
|
||||
@ -32,7 +31,6 @@ const LAYOUT_QUERY = graphql`
|
||||
export function LayoutTemplate({ children }) {
|
||||
return (
|
||||
<ThemeProvider theme={theme}>
|
||||
<GlobalStyles />
|
||||
{children}
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
@ -1,98 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Global, css } from '@emotion/core';
|
||||
|
||||
import theme from './theme';
|
||||
|
||||
const globalStyles = css`
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
color: ${theme.colors.gray};
|
||||
font-family: ${theme.fontFamily};
|
||||
line-height: ${theme.lineHeight[2]};
|
||||
font-size: ${theme.fontsize[3]};
|
||||
background: ${theme.colors.shadeBlue};
|
||||
margin: 0;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
line-height: ${theme.lineHeight[1]};
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: ${theme.colors.darkGreen};
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.gitter-open-chat-button {
|
||||
&,
|
||||
&:visited {
|
||||
padding: ${theme.space[3]} ${theme.space[4]};
|
||||
font-family: ${theme.fontFamily};
|
||||
font-size: ${theme.fontsize[3]};
|
||||
letter-spacing: 0.5px;
|
||||
line-height: 1;
|
||||
color: ${theme.colors.gray};
|
||||
background-color: ${theme.colors.green};
|
||||
box-shadow: 0 2px 16px 0 rgba(68, 74, 87, 0.15), 0 1px 4px 0 rgba(68, 74, 87, 0.3);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: ${theme.colors.lightGreen};
|
||||
box-shadow: 0 2px 16px 0 rgba(68, 74, 87, 0.25), 0 1px 4px 0 rgba(68, 74, 87, 0.5);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 6px 3px rgba(62, 160, 127, 0.6);
|
||||
transition: none;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: ${theme.colors.lightGray};
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
function GlobalStyles() {
|
||||
return <Global styles={globalStyles} />;
|
||||
}
|
||||
|
||||
export default GlobalStyles;
|
||||
Loading…
x
Reference in New Issue
Block a user