From 47dbdd5fb79293fc632e5e0c626f5362dffc306c Mon Sep 17 00:00:00 2001 From: Niedziolka Michal Date: Mon, 20 Jun 2022 21:56:40 +0200 Subject: [PATCH 1/4] Minimum top margin in tabbed examples --- editor/js/editor-libs/template-utils.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/editor/js/editor-libs/template-utils.js b/editor/js/editor-libs/template-utils.js index 5d456de7f..2cdfc9478 100644 --- a/editor/js/editor-libs/template-utils.js +++ b/editor/js/editor-libs/template-utils.js @@ -4,7 +4,7 @@ module.exports = { * @returns base style rules for the output class */ getOutputBaseStyle: function () { - return ".output{background-color:#fff;color:#15141aff;font-size:0.9rem;line-height:1.5;overflow:scroll;padding:1rem;height:100%;}"; + return ".output{background-color:#fff;color:#15141aff;font-size:0.9rem;line-height:1.5;overflow:scroll;padding:1rem;height:100%;}.output-top-margin{margin-bottom:13px;}"; }, /** * Return the base script to inject into the shadowDOM @@ -20,6 +20,12 @@ module.exports = { getTemplateOutput: function () { return document.getElementById("code_tmpl").content; }, + /** + * @returns HTML element meant to be added as a first child of "output", to provide minimum margin on the top, pushing down rest of the content so it doesn't overlay with "output-label". + */ + getOutputTopMarginElement: function () { + return '
'; + }, /** * Create a template element and populate it with the content of * the editor panes. If native shadowDOM is not supported, it uses @@ -40,6 +46,7 @@ module.exports = { var outputStyleElem = document.createElement("style"); var styleElem = document.createElement("style"); var tmpl = document.createElement("template"); + var topMarginElement = this.getOutputTopMarginElement(); /* First remove the existing template if it exists. This ensures that prepareTemplate will process @@ -54,7 +61,7 @@ module.exports = { outputStyleElem.textContent = this.getOutputBaseStyle(); styleElem.textContent = contents.cssContent; html.classList.add("output"); - html.innerHTML = contents.htmlContent; + html.innerHTML = topMarginElement + contents.htmlContent; tmpl.content.appendChild(outputStyleElem); tmpl.content.appendChild(styleElem); From d2daffbf3c3091096ae7a68f2cb649c404f19e50 Mon Sep 17 00:00:00 2001 From: Niedziolka Michal Date: Mon, 20 Jun 2022 22:17:40 +0200 Subject: [PATCH 2/4] Changed test --- __tests__/puppeteer-tabbed-editor.test.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/__tests__/puppeteer-tabbed-editor.test.js b/__tests__/puppeteer-tabbed-editor.test.js index 8323f4a90..a96eeff90 100644 --- a/__tests__/puppeteer-tabbed-editor.test.js +++ b/__tests__/puppeteer-tabbed-editor.test.js @@ -9,11 +9,11 @@ describe("Tabbed Editor", () => { "" + "
' + + '
' + "
James Rockford
2354 Pacific Coast Highway
" + "California
USA
+311-555-2368
Email: " + 'j.rockford@example.com
' + From e4665a3c2a46416bdee245fa95b593e4ba5c447b Mon Sep 17 00:00:00 2001 From: Niedziolka Michal Date: Thu, 29 Sep 2022 12:26:25 +0200 Subject: [PATCH 3/4] padding-top instead of collapsed margin --- __tests__/puppeteer-tabbed-editor.test.js | 4 ++-- editor/js/editor-libs/template-utils.js | 11 ++--------- 2 files changed, 4 insertions(+), 11 deletions(-) diff --git a/__tests__/puppeteer-tabbed-editor.test.js b/__tests__/puppeteer-tabbed-editor.test.js index a96eeff90..11de59afc 100644 --- a/__tests__/puppeteer-tabbed-editor.test.js +++ b/__tests__/puppeteer-tabbed-editor.test.js @@ -9,11 +9,11 @@ describe("Tabbed Editor", () => { "" + "
' + + '
' + "
James Rockford
2354 Pacific Coast Highway
" + "California
USA
+311-555-2368
Email: " + 'j.rockford@example.com
' + diff --git a/editor/js/editor-libs/template-utils.js b/editor/js/editor-libs/template-utils.js index 2cdfc9478..b1ee5296b 100644 --- a/editor/js/editor-libs/template-utils.js +++ b/editor/js/editor-libs/template-utils.js @@ -4,7 +4,7 @@ module.exports = { * @returns base style rules for the output class */ getOutputBaseStyle: function () { - return ".output{background-color:#fff;color:#15141aff;font-size:0.9rem;line-height:1.5;overflow:scroll;padding:1rem;height:100%;}.output-top-margin{margin-bottom:13px;}"; + return ".output{background-color:#fff;color:#15141aff;font-size:0.9rem;line-height:1.5;overflow:scroll;padding:2rem 1rem 1rem;height:100%;}"; }, /** * Return the base script to inject into the shadowDOM @@ -20,12 +20,6 @@ module.exports = { getTemplateOutput: function () { return document.getElementById("code_tmpl").content; }, - /** - * @returns HTML element meant to be added as a first child of "output", to provide minimum margin on the top, pushing down rest of the content so it doesn't overlay with "output-label". - */ - getOutputTopMarginElement: function () { - return '
'; - }, /** * Create a template element and populate it with the content of * the editor panes. If native shadowDOM is not supported, it uses @@ -46,7 +40,6 @@ module.exports = { var outputStyleElem = document.createElement("style"); var styleElem = document.createElement("style"); var tmpl = document.createElement("template"); - var topMarginElement = this.getOutputTopMarginElement(); /* First remove the existing template if it exists. This ensures that prepareTemplate will process @@ -61,7 +54,7 @@ module.exports = { outputStyleElem.textContent = this.getOutputBaseStyle(); styleElem.textContent = contents.cssContent; html.classList.add("output"); - html.innerHTML = topMarginElement + contents.htmlContent; + html.innerHTML = contents.htmlContent; tmpl.content.appendChild(outputStyleElem); tmpl.content.appendChild(styleElem); From ef88937233f331d565927137c9b197f3843e42b1 Mon Sep 17 00:00:00 2001 From: Niedziolka Michal Date: Thu, 29 Sep 2022 12:38:26 +0200 Subject: [PATCH 4/4] prettier fix --- webpack.config.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/webpack.config.js b/webpack.config.js index acc35c938..a6af3cb9e 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -66,10 +66,7 @@ export default { }, }, optimization: { - minimizer: [ - `...`, - new CssMinimizerPlugin(), - ], + minimizer: [`...`, new CssMinimizerPlugin()], splitChunks: { chunks: "async", },