From c2bd3e41c6270e042f31af14bd606734c69d30da Mon Sep 17 00:00:00 2001 From: Yanbing Zhao Date: Mon, 5 Feb 2018 00:10:10 +0800 Subject: [PATCH] Add responsive layout support --- src/component/Main.js | 12 ++++++++++++ src/index.css | 40 ++++++++++++++++++++++++++++++++++++---- src/index.html | 11 +++++++++++ src/index.js | 28 ++++++++++++---------------- webpack.config.js | 2 +- webpack.development.js | 3 +-- 6 files changed, 73 insertions(+), 23 deletions(-) create mode 100644 src/index.html diff --git a/src/component/Main.js b/src/component/Main.js index 904e50b..2e31b98 100644 --- a/src/component/Main.js +++ b/src/component/Main.js @@ -26,6 +26,16 @@ class Main extends React.Component { localStorage.markdownInput = text } + handleChangeToOutput = () => { + document.getElementsByClassName('main-left')[0].classList.add('show-output') + document.getElementsByClassName('main-right')[0].classList.add('show-output') + } + + handleChangeToInput = () => { + document.getElementsByClassName('main-left')[0].classList.remove('show-output') + document.getElementsByClassName('main-right')[0].classList.remove('show-output') + } + render () { return ( @@ -33,6 +43,7 @@ class Main extends React.Component { this.setState({leftDepth: 1})} onMouseOver={() => this.setState({leftDepth: 2})}> @@ -40,6 +51,7 @@ class Main extends React.Component { this.setState({rightDepth: 1})} onMouseOver={() => this.setState({rightDepth: 2})}> diff --git a/src/index.css b/src/index.css index 93cf238..e8ac1a9 100644 --- a/src/index.css +++ b/src/index.css @@ -1,14 +1,14 @@ html, body { + overflow-x: hidden; height: 100%; + width: 100%; margin: 0; } .main-left { position: absolute; top: 96px; - left: 32px; bottom: 96px; - width: calc(50% - 50px); padding: 4px 16px; overflow-y: auto; word-spacing: 0px; @@ -17,10 +17,42 @@ html, body { .main-right { position: absolute; top: 96px; - right: 32px; bottom: 96px; - width: calc(50% - 50px); padding: 0 16px; overflow-y: auto; word-spacing: 0px; +} + +@media (min-width: 768px) { + .main-left { + left: 32px; + width: calc(50% - 50px); + } + + .main-right { + right: 32px; + width: calc(50% - 50px); + } +} + +@media (max-width: 768px) { + .main-left { + left: 32px; + width: calc(100% - 98px); + } + + .main-right { + right: calc(-100% + 128px); + width: calc(100% - 98px); + } + + .main-left.show-output { + left: calc(-100% + 128px); + width: calc(100% - 98px); + } + + .main-right.show-output { + right: 32px; + width: calc(100% - 98px); + } } \ No newline at end of file diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..165d436 --- /dev/null +++ b/src/index.html @@ -0,0 +1,11 @@ + + + + + + + + MCBBS Markdown To BBCode Converter + +
+ \ No newline at end of file diff --git a/src/index.js b/src/index.js index 9d37930..ee78688 100644 --- a/src/index.js +++ b/src/index.js @@ -11,15 +11,15 @@ import Marked from 'marked' const renderer = new Marked.Renderer() const rendererConfig = { - markdown: {prefix: '(markdown) => ', suffix: '${markdown.split(\'[br]\').join(\' \')}'}, + markdown: {prefix: '(markdown) => ', suffix: "${markdown.split('[br]').join(' ')}"}, code: {prefix: '(code, language) => ', suffix: '[code]${code}[/code]'}, - blockquote: {prefix: '(quote) => ', suffix: '[quote]${quote.split(\'[br]\').join(\'\\n\')}[/quote]'}, + blockquote: {prefix: '(quote) => ', suffix: "[quote]${quote.split('[br]').join('\\n')}[/quote]"}, html: {prefix: '(html) => ', suffix: '${html}'}, heading: {prefix: '(text, level) => ', suffix: '[size=${7-level}][b]${text}[/b][/size]\\n\\n'}, hr: {prefix: '() => ', suffix: '[hr]\\n'}, - list: {prefix: '(body, ordered) => ', suffix: '[list${ordered?\'=1\':\'\'}]\\n${body}[/list]\\n'}, + list: {prefix: '(body, ordered) => ', suffix: "[list${ordered?'=1':''}]\\n${body}[/list]\\n"}, listitem: {prefix: '(text) => ', suffix: '[*]${text}\\n'}, - paragraph: {prefix: '(text) => ', suffix: '[size=3]${text.split(\'\\n\').join(\'[br]\').split(\'[br][br]\').join(\'\\n\')}[/size]\\n\\n'}, + paragraph: {prefix: '(text) => ', suffix: "[size=3]${text.split('\\n').join('[br]').split('[br][br]').join('\\n')}[/size]\\n\\n"}, table: {prefix: '(header, body) => ', suffix: '[align=center][table=98%]${header}\\n${body}[/table][/align]'}, tablerow: {prefix: '(content) => ', suffix: '[tr]${content}[/tr]'}, tablecell: {prefix: '(content, header, align) => ', suffix: '[td]${content}[/td]'}, @@ -33,12 +33,6 @@ const rendererConfig = { text: {prefix: '(text) => ', suffix: '${text}'} } -function create (tag) { - let element = document.createElement(tag) - document.body.appendChild(element) - return element -} - function setRenderer () { for (let key in rendererConfig) { let {prefix, suffix} = rendererConfig[key] @@ -53,10 +47,12 @@ function setRenderer () { setRenderer() -const transformer = markdownText => renderer.markdown(Marked(markdownText, { - renderer: renderer, gfm: true, tables: true, xhtml: false, breaks: false, - pedantic: false, sanitize: false, smartLists: true, smartypants: false -})) +function onTransform (markdownText) { + return renderer.markdown(Marked(markdownText, { + renderer: renderer, breaks: false, gfm: true, tables: true, xhtml: false, + pedantic: false, sanitize: false, smartLists: true, smartypants: false + })) +} -ReactDOM.render(
, create('header')) -ReactDOM.render(
, create('main')) +ReactDOM.render(
, document.getElementsByTagName('header')[0]) +ReactDOM.render(
, document.getElementsByTagName('main')[0]) diff --git a/webpack.config.js b/webpack.config.js index 32b62aa..b39cf40 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -23,7 +23,7 @@ module.exports = { }] }, plugins: [new HtmlWebpackPlugin({ - title: 'MCBBS Markdown To BBCode Converter', + template: './src/index.html', minify: {collapseWhitespace: true} }), new DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('production') diff --git a/webpack.development.js b/webpack.development.js index bf44075..4f3a063 100644 --- a/webpack.development.js +++ b/webpack.development.js @@ -21,7 +21,6 @@ module.exports = { }] }, plugins: [new HtmlWebpackPlugin({ - title: 'MCBBS Markdown To BBCode Converter', - minify: {collapseWhitespace: true} + template: './src/index.html' })] }