gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix: remove margin, padding, and line-height for preview of finished projects

Browse Source
This commit is contained in:
moT01
2021-11-19 12:16:01 -06:00
parent fbcd160a49
commit 0db11a0819
4 changed files with 30 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
client/src/templates/Challenges/components/project-preview-modal.css
View File

@ -1,3 +1,4 @@
/* .project-preview-modal { .project-preview-modal-body {
min-width: 70%; line-height: 0;
} */ padding: 0;
}

16
client/src/templates/Challenges/rechallenge/builders.js
View File

@ -27,6 +27,16 @@ const defaultTemplate = ({ source }) => {
</body>`; </body>`;
}; };
// for demo/preview modal of a finished project
const demoTemplate = ({ source }) => {
return `
<body id='display-body'>
<!-- fcc-start-source -->
${source}
<!-- fcc-end-source -->
</body>`;
};
const wrapInScript = partial( const wrapInScript = partial(
transformContents, transformContents,
content => `${htmlCatch}<script>${content}${jsCatch}</script>` content => `${htmlCatch}<script>${content}${jsCatch}</script>`
@ -73,9 +83,11 @@ function wasHtmlFile(challengeFile) {
export function concatHtml({ export function concatHtml({
required = [], required = [],
template, 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 const head = required
.map(({ link, src }) => { .map(({ link, src }) => {
if (link && src) { if (link && src) {

4
client/src/templates/Challenges/redux/execute-challenge-saga.js
View File

@ -244,7 +244,9 @@ function* previewProjectSolutionSaga({ payload }) {
try { try {
if (canBuildChallenge(challengeData)) { if (canBuildChallenge(challengeData)) {
const buildData = yield buildChallengeData(challengeData); const buildData = yield buildChallengeData(challengeData, {
useDemoTemplate: true
});
if (challengeHasPreview(challengeData)) { if (challengeHasPreview(challengeData)) {
const document = yield getContext('document'); const document = yield getContext('document');
yield call(updateProjectPreview, buildData, document); yield call(updateProjectPreview, buildData, document);

11
client/src/templates/Challenges/utils/build.js
View File

@ -99,6 +99,7 @@ export async function buildChallenge(challengeData, options) {
const { challengeType } = challengeData; const { challengeType } = challengeData;
let build = buildFunctions[challengeType]; let build = buildFunctions[challengeType];
if (build) { if (build) {
if (options?.useDemoTemplate) challengeData.useDemoTemplate = true;
return build(challengeData, options); return build(challengeData, options);
} }
throw new Error(`Cannot build challenge of type ${challengeType}`); throw new Error(`Cannot build challenge of type ${challengeType}`);
@ -148,7 +149,8 @@ async function getDOMTestRunner(buildData, { proxyLogger }, document) {
export function buildDOMChallenge({ export function buildDOMChallenge({
challengeFiles, challengeFiles,
required = [], required = [],
template = '' template = '',
useDemoTemplate = false
}) { }) {
const finalRequires = [...globalRequires, ...required, ...frameRunner]; const finalRequires = [...globalRequires, ...required, ...frameRunner];
const loadEnzyme = challengeFiles.some( const loadEnzyme = challengeFiles.some(
@ -161,7 +163,12 @@ export function buildDOMChallenge({
.then(checkFilesErrors) .then(checkFilesErrors)
.then(challengeFiles => ({ .then(challengeFiles => ({
challengeType: challengeTypes.html, challengeType: challengeTypes.html,
build: concatHtml({ required: finalRequires, template, challengeFiles }), build: concatHtml({
required: finalRequires,
template,
challengeFiles,
useDemoTemplate
}),
sources: buildSourceMap(challengeFiles), sources: buildSourceMap(challengeFiles),
loadEnzyme loadEnzyme
})); }));