Style tweeks

This commit is contained in:
Daniel Lautzenheiser 2022-09-07 12:15:43 -04:00
parent 0c5efd19d6
commit 6aaf16594b
25 changed files with 74 additions and 246 deletions

1
.gitignore vendored
View File

@ -20,3 +20,4 @@ coverage/
.env
.temp/
storybook-static/
*.tgz

View File

@ -10,7 +10,7 @@
"allowBranch": ["master", "release/*"],
"conventionalCommits": true,
"preid": "beta",
"gitRemote": "upstream",
"gitRemote": "origin",
"message": "chore(release): publish"
}
},

View File

@ -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"
}

View File

@ -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

View File

@ -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",

View File

@ -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)

View File

@ -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",

View File

@ -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>

View File

@ -34,7 +34,7 @@ TopBarProgress.config({
});
const AppMainContainer = styled.div`
min-width: 800px;
min-width: 1200px;
max-width: 1440px;
margin: 0 auto;
`;

View File

@ -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;

View File

@ -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 {

View File

@ -39,6 +39,7 @@ const SidebarHeading = styled.h2`
const SidebarNavList = styled.ul`
margin: 16px 0 0;
padding-left: 0;
list-style: none;
overflow: auto;
`;

View File

@ -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;

View File

@ -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)}

View File

@ -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)
return isElement(previewComponent)
? React.cloneElement(previewComponent, previewProps)
: React.createElement(previewComponent, previewProps)}
</ScrollSyncPane>
)}
</FrameContextConsumer>
);
: React.createElement(previewComponent, previewProps);
}
}

View File

@ -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}>
<ScrollSyncPane>{/* attachTo={document.getElementById('control-pane')}>*/}
<PreviewPaneFrame id="preview-pane" head={styleEls} initialContent={initialContent}>
<FrameContextConsumer>
{({ document, window }) => {
return (
<EditorPreviewContent
{...{ previewComponent, previewProps: { ...previewProps, document, window } }}
/>
);
}}
</FrameContextConsumer>
</PreviewPaneFrame>
</ScrollSyncPane>
</ErrorBoundary>
);
}

View File

@ -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;

View File

@ -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

View File

@ -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",

View File

@ -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,
};

View File

@ -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,
};

View File

@ -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

View File

@ -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",

View File

@ -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>
);

View File

@ -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;