From 0db11a08191935bca9c76cd95fa629a1ba2c4ac5 Mon Sep 17 00:00:00 2001 From: moT01 <20648924+moT01@users.noreply.github.com> Date: Fri, 19 Nov 2021 12:16:01 -0600 Subject: [PATCH] fix: remove margin, padding, and line-height for preview of finished projects --- .../components/project-preview-modal.css | 7 ++++--- .../templates/Challenges/rechallenge/builders.js | 16 ++++++++++++++-- .../Challenges/redux/execute-challenge-saga.js | 4 +++- client/src/templates/Challenges/utils/build.js | 11 +++++++++-- 4 files changed, 30 insertions(+), 8 deletions(-) diff --git a/client/src/templates/Challenges/components/project-preview-modal.css b/client/src/templates/Challenges/components/project-preview-modal.css index dc04fb08c4..d0c985462b 100644 --- a/client/src/templates/Challenges/components/project-preview-modal.css +++ b/client/src/templates/Challenges/components/project-preview-modal.css @@ -1,3 +1,4 @@ -/* .project-preview-modal { - min-width: 70%; -} */ +.project-preview-modal-body { + line-height: 0; + padding: 0; +} diff --git a/client/src/templates/Challenges/rechallenge/builders.js b/client/src/templates/Challenges/rechallenge/builders.js index 41895326b2..57f3ca80bc 100644 --- a/client/src/templates/Challenges/rechallenge/builders.js +++ b/client/src/templates/Challenges/rechallenge/builders.js @@ -27,6 +27,16 @@ const defaultTemplate = ({ source }) => { `; }; +// for demo/preview modal of a finished project +const demoTemplate = ({ source }) => { + return ` + + + ${source} + + `; +}; + const wrapInScript = partial( transformContents, content => `${htmlCatch}` @@ -73,9 +83,11 @@ function wasHtmlFile(challengeFile) { export function concatHtml({ required = [], template, - challengeFiles = [] + challengeFiles = [], + useDemoTemplate = false } = {}) { - const createBody = template ? _template(template) : defaultTemplate; + const templateToUse = useDemoTemplate ? demoTemplate : defaultTemplate; + const createBody = template ? _template(template) : templateToUse; const head = required .map(({ link, src }) => { if (link && src) { diff --git a/client/src/templates/Challenges/redux/execute-challenge-saga.js b/client/src/templates/Challenges/redux/execute-challenge-saga.js index 7f248355a5..9c47d5b49f 100644 --- a/client/src/templates/Challenges/redux/execute-challenge-saga.js +++ b/client/src/templates/Challenges/redux/execute-challenge-saga.js @@ -244,7 +244,9 @@ function* previewProjectSolutionSaga({ payload }) { try { if (canBuildChallenge(challengeData)) { - const buildData = yield buildChallengeData(challengeData); + const buildData = yield buildChallengeData(challengeData, { + useDemoTemplate: true + }); if (challengeHasPreview(challengeData)) { const document = yield getContext('document'); yield call(updateProjectPreview, buildData, document); diff --git a/client/src/templates/Challenges/utils/build.js b/client/src/templates/Challenges/utils/build.js index 9a792f3b14..30e723253f 100644 --- a/client/src/templates/Challenges/utils/build.js +++ b/client/src/templates/Challenges/utils/build.js @@ -99,6 +99,7 @@ export async function buildChallenge(challengeData, options) { const { challengeType } = challengeData; let build = buildFunctions[challengeType]; if (build) { + if (options?.useDemoTemplate) challengeData.useDemoTemplate = true; return build(challengeData, options); } throw new Error(`Cannot build challenge of type ${challengeType}`); @@ -148,7 +149,8 @@ async function getDOMTestRunner(buildData, { proxyLogger }, document) { export function buildDOMChallenge({ challengeFiles, required = [], - template = '' + template = '', + useDemoTemplate = false }) { const finalRequires = [...globalRequires, ...required, ...frameRunner]; const loadEnzyme = challengeFiles.some( @@ -161,7 +163,12 @@ export function buildDOMChallenge({ .then(checkFilesErrors) .then(challengeFiles => ({ challengeType: challengeTypes.html, - build: concatHtml({ required: finalRequires, template, challengeFiles }), + build: concatHtml({ + required: finalRequires, + template, + challengeFiles, + useDemoTemplate + }), sources: buildSourceMap(challengeFiles), loadEnzyme }));