initial commit

This commit is contained in:
equippedcoding-master
2025-09-17 09:37:06 -05:00
parent 86108ca47e
commit e2c98790b2
55389 changed files with 6206730 additions and 0 deletions

View File

@@ -0,0 +1,93 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>SurveyJS Test</title>
<!-- Boxiocns CDN Link -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.6/underscore-min.js" integrity="sha512-2V49R8ndaagCOnwmj8QnbT1Gz/rie17UouD9Re5WxbzRVUGoftCu5IuqqtAM9+UC3fwfHCSJR1hkzNQh/2wdtg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.4.1/backbone-min.js" integrity="sha512-TztyCWDNoN0YKl30gDCMKsiWs35juID+W7ZM2uvPeLLmiNvZg789SglgB/QeUbewqIF2Z4mVq3PyIEa+YXXADQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
<script src="/portal/admin/core/api/js/libs/appfactory/appfactory3.js"></script>
<script src="/portal/admin/core/api/js/libs/appfactory/afssponsorship.js"></script>
<script src="/portal/admin/core/api/js/libs/appfactory/afssubscriber.js"></script>
<script src="/portal/admin/core/api/js/libs/appfactory/afsnotifications.js"></script>
<script src="/portal/admin/core/api/js/libs/appfactory/afspayments.js"></script>
<script src="/portal/admin/core/api/js/libs/appfactory/afsform.js"></script>
<script src="/portal/admin/core/api/js/libs/appfactory/afsextras.js"></script>
<script src="/portal/admin/core/api/js/libs/appfactory/afsevents.js"></script>
<script src="/portal/admin/core/api/js/libs/appfactory/afsdocuments.js"></script>
<script src="/portal/admin/core/api/js/libs/appfactory/afsaccount.js"></script>
<script src="/portal/admin/core/api/js/libs/appfactory/afsemail.js"></script>
<script src="/portal/admin/core/api/js/libs/appfactory/afsanalytics.js"></script>
<script src="/portal/admin/core/api/js/libs/appfactory/afsdonations.js"></script>
<script src="/portal/admin/core/api/js/libs/appfactory/afsspinner.js"></script>
<link href="/portal/admin/core/api/styles/tabler/tabler.min.css" rel="stylesheet"/>
<script src="/portal/admin/core/api/js/libs/tabler/tabler.js"></script>
<link href="https://unpkg.com/survey-jquery/defaultV2.min.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/survey-core/survey.core.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/survey-jquery/survey.jquery.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/survey-core/themes/layered-dark-panelless.min.js"></script>
<!-- <script type="text/javascript" src="https://unpkg.com/survey-core/themes/contrast-dark.min.js"></script> -->
<!-- <script type="text/javascript" src="https://unpkg.com/survey-core/themes/contrast-light.min.js"></script> -->
</head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container-fluid">
<div class="row d-flex justify-content-center">
<div class="col-12 col-md-6">
<div id="surveyContainer"></div>
<div id="resultsContainer" style="display:none;">
<p>Result JSON:</p>
<code id="surveyResults" style="white-space:pre;"></code>
</div>
</div>
</div>
<!-- <div class="row d-flex justify-content-center">
<div class="col-4">
<div id="surveyContainer"></div>
</div>
</div> -->
</div>
<script data-main="main" src="/portal/admin/core/api/js/libs/require.js"></script>
</body>
</html>

View File

@@ -0,0 +1,624 @@
// In modular applications:
// import { Model } from "survey-core";
// import { ContrastDark } from "survey-core/themes/contrast-dark";
// import { ContrastLight } from "survey-core/themes/contrast-light";
function SurveyComponent(survey) {
// const survey = new Model(json);
// const survey = new Survey.Model(surveyJson);
survey.onComplete.add((sender, options) => {
console.log(JSON.stringify(sender.data, null, 3));
});
survey.onUploadFiles.add((_, options) => {
const formData = new FormData();
options.files.forEach((file) => {
formData.append(file.name, file);
});
fetch("https://api.surveyjs.io/private/Surveys/uploadTempFiles", {
method: "POST",
body: formData
})
.then((response) => response.json())
.then((data) => {
options.callback(
options.files.map((file) => {
return {
file: file,
content: "https://api.surveyjs.io/private/Surveys/getTempFile?name=" + data[file.name]
};
})
);
})
.catch((error) => {
console.error("Error: ", error);
options.callback([], [ 'An error occurred during file upload.' ]);
});
});
async function deleteFile(fileURL, options) {
try {
const name = fileURL.split("=")[1];
const apiUrl = `https://api.surveyjs.io/private/Surveys/deleteTempFile?name=${name}`;
const response = await fetch(apiUrl, {
method: "DELETE"
});
if (response.status === 200) {
console.log(`File ${name} was deleted successfully`);
options.callback("success");
} else {
console.error(`Failed to delete file: ${name}`);
options.callback("error");
}
} catch (error) {
console.error("Error while deleting file: ", error);
options.callback("error");
}
}
survey.onClearFiles.add(async (_, options) => {
if (!options.value || options.value.length === 0)
return options.callback("success");
if (!options.fileName && !!options.value) {
for (const item of options.value) {
await deleteFile(item.content, options);
}
} else {
const fileToRemove = options.value.find(
(item) => item.name === options.fileName
);
if (fileToRemove) {
await deleteFile(fileToRemove.content, options);
} else {
console.error(`File with name ${options.fileName} is not found`);
}
}
});
}
function getStyle1(){
return {
"backgroundImage": "",
"backgroundImageFit": "cover",
"backgroundImageAttachment": "scroll",
"backgroundOpacity": 1,
"themeName": "default",
"isPanelless": true,
"colorPalette": "light",
"cssVariables": {
"--sjs-general-backcolor": "rgba(255, 255, 255, 1)",
"--sjs-general-backcolor-dark": "rgba(248, 248, 248, 1)",
"--sjs-general-backcolor-dim": "rgba(255, 255, 255, 1)",
"--sjs-general-backcolor-dim-light": "rgba(249, 249, 249, 1)",
"--sjs-general-backcolor-dim-dark": "rgba(243, 243, 243, 1)",
"--sjs-general-forecolor": "rgba(0, 0, 0, 0.91)",
"--sjs-general-forecolor-light": "rgba(0, 0, 0, 0.45)",
"--sjs-general-dim-forecolor": "rgba(0, 0, 0, 0.91)",
"--sjs-general-dim-forecolor-light": "rgba(0, 0, 0, 0.45)",
"--sjs-primary-backcolor": "rgba(0, 176, 82, 1)",
"--sjs-primary-backcolor-light": "rgba(0, 176, 82, 0.1)",
"--sjs-primary-backcolor-dark": "rgba(0, 161, 75, 1)",
"--sjs-primary-forecolor": "rgba(255, 255, 255, 1)",
"--sjs-primary-forecolor-light": "rgba(255, 255, 255, 0.25)",
"--sjs-base-unit": "8px",
"--sjs-corner-radius": "4px",
"--sjs-secondary-backcolor": "rgba(255, 152, 20, 1)",
"--sjs-secondary-backcolor-light": "rgba(255, 152, 20, 0.1)",
"--sjs-secondary-backcolor-semi-light": "rgba(255, 152, 20, 0.25)",
"--sjs-secondary-forecolor": "rgba(255, 255, 255, 1)",
"--sjs-secondary-forecolor-light": "rgba(255, 255, 255, 0.25)",
"--sjs-shadow-small": "0px 1px 2px 0px rgba(0, 0, 0, 0.15)",
"--sjs-shadow-small-reset": "0px 0px 0px 0px rgba(0, 0, 0, 0.15)",
"--sjs-shadow-medium": "0px 2px 6px 0px rgba(0, 0, 0, 0.1)",
"--sjs-shadow-large": "0px 8px 16px 0px rgba(0, 0, 0, 0.1)",
"--sjs-shadow-inner": "inset 0px 1px 2px 0px rgba(0, 0, 0, 0.15)",
"--sjs-shadow-inner-reset": "inset 0px 0px 0px 0px rgba(0, 0, 0, 0.15)",
"--sjs-border-light": "rgba(0, 0, 0, 0.09)",
"--sjs-border-default": "rgba(0, 0, 0, 0.16)",
"--sjs-border-inside": "rgba(0, 0, 0, 0.16)",
"--sjs-special-red": "rgba(229, 10, 62, 1)",
"--sjs-special-red-light": "rgba(229, 10, 62, 0.1)",
"--sjs-special-red-forecolor": "rgba(255, 255, 255, 1)",
"--sjs-special-green": "rgba(25, 179, 148, 1)",
"--sjs-special-green-light": "rgba(25, 179, 148, 0.1)",
"--sjs-special-green-forecolor": "rgba(255, 255, 255, 1)",
"--sjs-special-blue": "rgba(67, 127, 217, 1)",
"--sjs-special-blue-light": "rgba(67, 127, 217, 0.1)",
"--sjs-special-blue-forecolor": "rgba(255, 255, 255, 1)",
"--sjs-special-yellow": "rgba(255, 152, 20, 1)",
"--sjs-special-yellow-light": "rgba(255, 152, 20, 0.1)",
"--sjs-special-yellow-forecolor": "rgba(255, 255, 255, 1)",
"--sjs-article-font-xx-large-textDecoration": "none",
"--sjs-article-font-xx-large-fontWeight": "700",
"--sjs-article-font-xx-large-fontStyle": "normal",
"--sjs-article-font-xx-large-fontStretch": "normal",
"--sjs-article-font-xx-large-letterSpacing": "0",
"--sjs-article-font-xx-large-lineHeight": "64px",
"--sjs-article-font-xx-large-paragraphIndent": "0px",
"--sjs-article-font-xx-large-textCase": "none",
"--sjs-article-font-x-large-textDecoration": "none",
"--sjs-article-font-x-large-fontWeight": "700",
"--sjs-article-font-x-large-fontStyle": "normal",
"--sjs-article-font-x-large-fontStretch": "normal",
"--sjs-article-font-x-large-letterSpacing": "0",
"--sjs-article-font-x-large-lineHeight": "56px",
"--sjs-article-font-x-large-paragraphIndent": "0px",
"--sjs-article-font-x-large-textCase": "none",
"--sjs-article-font-large-textDecoration": "none",
"--sjs-article-font-large-fontWeight": "700",
"--sjs-article-font-large-fontStyle": "normal",
"--sjs-article-font-large-fontStretch": "normal",
"--sjs-article-font-large-letterSpacing": "0",
"--sjs-article-font-large-lineHeight": "40px",
"--sjs-article-font-large-paragraphIndent": "0px",
"--sjs-article-font-large-textCase": "none",
"--sjs-article-font-medium-textDecoration": "none",
"--sjs-article-font-medium-fontWeight": "700",
"--sjs-article-font-medium-fontStyle": "normal",
"--sjs-article-font-medium-fontStretch": "normal",
"--sjs-article-font-medium-letterSpacing": "0",
"--sjs-article-font-medium-lineHeight": "32px",
"--sjs-article-font-medium-paragraphIndent": "0px",
"--sjs-article-font-medium-textCase": "none",
"--sjs-article-font-default-textDecoration": "none",
"--sjs-article-font-default-fontWeight": "400",
"--sjs-article-font-default-fontStyle": "normal",
"--sjs-article-font-default-fontStretch": "normal",
"--sjs-article-font-default-letterSpacing": "0",
"--sjs-article-font-default-lineHeight": "28px",
"--sjs-article-font-default-paragraphIndent": "0px",
"--sjs-article-font-default-textCase": "none"
}
}
}
function _constructSurvey(surveyJson){
const survey = new Survey.Model(surveyJson);
function displayResults (sender) {
const results = JSON.stringify(sender.data, null, 4);
document.querySelector("#surveyResults").textContent = results;
document.querySelector("#resultsContainer").style.display = "block"
}
survey.onComplete.add(displayResults);
$(function() {
$("#surveyContainer").Survey({ model: survey });
});
}
function MultiForm(){
const surveyJson = {
triggers: [
{
type: "complete",
expression: "{gave_birth_before} = 3"
},
{
type: "complete",
expression: "{documented} = 4"
},
{
type: "complete",
expression: "{age} = 3"
},
{
type: "complete",
expression: "{age} = 2"
}
],
completedHtmlOnCondition: [
{
expression: "{gave_birth_before} = 3",
html:"Feel free to check out our Resource Directory at <a href='/pages/resources'>Resource Directory</a> for a list of other local agencies that may be able to help! If you have any questions, feel free to give us a call at 832-987-2076)."
},
{
expression: "{documented} = 4",
html:"Feel free to check out our Resource Directory at <a href='/pages/resources'>Resource Directory</a> for a list of other local agencies that may be able to help! If you have any questions, feel free to give us a call at 832-987-2076)."
},
{
expression: "{age} = 3",
html:"Feel free to check out our Resource Directory at <a href='/pages/resources'>Resource Directory</a> for a list of other local agencies that may be able to help! If you have any questions, feel free to give us a call at 832-987-2076)."
},
{
expression: "{age} = 2",
html:"Feel free to check out our Resource Directory at <a href='/pages/resources'>Resource Directory</a> for a list of other local agencies that may be able to help! If you have any questions, feel free to give us a call at 832-987-2076)."
}
],
pages: [
{
elements: [{
type: "html",
html: "<h4>Press start when your ready to begin application.</h4>"
}]
},
// page1
{
"name": "page3",
elements: [
{
name: "age",
title: "What is your age?",
type: "radiogroup",
choices: [
{ value: 5, text: "13-17" },
{ value: 4, text: "18-20" },
{ value: 3, text: "I'm 21 or older" },
{ value: 2, text: "I'm under the age of 13" }
],
isRequired: true
}
]
},
// page2
{
"name": "page2",
elements: [
{
name: "gave_birth_before",
title: "I gave birth to my first child BEFORE I turned 20?",
type: "radiogroup",
choices: [
{ value: 5, text: "Yes, this is correct" },
{ value: 4, text: "No, I was 20 or older when my first child was born" },
{ value: 3, text: "I'm currently pregnant with my first child" }
],
isRequired: true
}
]
},
// page3
{
"name": "page3",
elements: [
{
name: "documented",
title: "I am a documented US Citizen or have a lawful status",
type: "radiogroup",
choices: [
{ value: 5, text: "Yes" },
{ value: 4, text: "No" },
{ value: 3, text: "I'm not sure" }
],
isRequired: true
}
]
},
// page4
{
title: "Cradle2Career - Youth Parent intake form",
name: "page4",
elements: [
// fullname
{
name: "fullname",
title: "What is your first and last name?",
type: "text",
isRequired: true
},
// email
{
name: "email",
title: "Email Address",
type: "text",
isRequired: true
},
// phone_number
{
name: "phone_number",
title: "What is your phone number?",
type: "text",
isRequired: true
},
// children_count
{
name: "children_count",
title: "How many children do you have?",
type: "radiogroup",
choices: [
{ value: 4, text: "1" },
{ value: 3, text: "2" },
{ value: 2, text: "3" },
{ value: 1, text: "Currently pregnant" }
],
isRequired: true
},
// gender
{
name: "gender",
title: "What is the sex of your child/children?",
type: "radiogroup",
choices: [
{ value: 3, text: "Boy" },
{ value: 2, text: "Girl" },
{ value: 1, text: "Unknown" }
],
isRequired: true
},
//hear_about
{
name: "hear_about",
title: "How did you hear about Cradle2Career?",
type: "radiogroup",
showOtherItem: true,
choices: [
{ value: 7, text: "TV" },
{ value: 6, text: "Google" },
{ value: 5, text: "Instagram" },
{ value: 4, text: "X (Twitter)" },
{ value: 3, text: "Facebook" },
{ value: 2, text: "Friend/Family" }
],
isRequired: true
},
// file
{
"type": "file",
"title": "You can upload any additional files here.",
"name": "files",
"storeDataAsText": false,
"waitForUpload": true,
"allowMultiple": true,
"maxSize": 102400,
"hideNumber": true
},
// confirm_consent
{
"type": "boolean",
"name": "confirm_consent",
"title": "I understand if younger than 13 need parent or legal guardian consent.",
"defaultValue": "false",
"renderAs": "checkbox",
"validators": [
{
"type": "expression",
"text": "Please confirm consent",
"expression": "{confirm_consent} = true"
}
],
"titleLocation": "left",
"label": "",
"showTitle": true
}
]
}
],
showQuestionNumbers: "off",
pageNextText: "Next",
completeText: "Submit",
showPrevButton: true,
firstPageIsStarted: true,
startSurveyText: "Start",
completedHtml: "Thank you for your feedback!",
showPreviewBeforeComplete: "showAnsweredQuestions",
showProgressBar: "top",
completedHtml: "Thank you for your submission. Someone from our staff will be in touch with you soon!",
};
_constructSurvey(surveyJson);
}
function MultiForm1(){
const surveyJson = {
pages: [{
elements: [{
type: "html",
html: "<h4>In this survey, we will ask you a couple questions about your impressions of our product.</h4>"
}]
}, {
elements: [{
name: "satisfaction-score",
title: "How would you describe your experience with our product?",
type: "radiogroup",
choices: [
{ value: 5, text: "Fully satisfying" },
{ value: 4, text: "Generally satisfying" },
{ value: 3, text: "Neutral" },
{ value: 2, text: "Rather unsatisfying" },
{ value: 1, text: "Not satisfying at all" }
],
isRequired: true
}]
}, {
elements: [{
name: "what-would-make-you-more-satisfied",
title: "What can we do to make your experience more satisfying?",
type: "comment",
visibleIf: "{satisfaction-score} = 4"
}, {
name: "nps-score",
title: "On a scale of zero to ten, how likely are you to recommend our product to a friend or colleague?",
type: "rating",
rateMin: 0,
rateMax: 10,
}],
visibleIf: "{satisfaction-score} >= 4"
}, {
elements: [{
name: "how-can-we-improve",
title: "In your opinion, how could we improve our product?",
type: "comment"
}],
visibleIf: "{satisfaction-score} = 3"
}, {
elements: [{
name: "disappointing-experience",
title: "Please let us know why you had such a disappointing experience with our product",
type: "comment"
}],
visibleIf: "{satisfaction-score} =< 2"
}],
showQuestionNumbers: "off",
pageNextText: "Forward",
completeText: "Submit",
showPrevButton: false,
firstPageIsStarted: true,
startSurveyText: "Press start when your ready to begin application",
completedHtml: "Thank you for your feedback!",
showPreviewBeforeComplete: "showAnsweredQuestions"
};
const survey = new Survey.Model(surveyJson);
function displayResults (sender) {
const results = JSON.stringify(sender.data, null, 4);
document.querySelector("#surveyResults").textContent = results;
document.querySelector("#resultsContainer").style.display = "block"
}
survey.onComplete.add(displayResults);
$(function() {
$("#surveyContainer").Survey({ model: survey });
});
}
function SingleForm(){
function saveSurveyResults(url, json) {
console.log(url);
console.log(json);
// fetch(url, {
// method: 'POST',
// headers: {
// 'Content-Type': 'application/json;charset=UTF-8'
// },
// body: JSON.stringify(json)
// })
// .then(response => {
// if (response.ok) {
// // Handle success
// console.log(response)
// } else {
// // Handle error
// }
// })
// .catch(error => {
// // Handle error
// });
}
function surveyComplete (survey) {
const userId = "hjghg";/* ... Getting the user ID ... */
survey.setValue("userId", userId);
saveSurveyResults(
"https://your-web-service.com/" + SURVEY_ID,
survey.data
)
}
const surveyJson = {
elements: [{
name: "FirstName",
title: "Enter your first name:",
type: "text"
}, {
name: "LastName",
title: "Enter your last name:",
type: "text"
}]
};
const SURVEY_ID = 1;
const survey = new Survey.Model(surveyJson);
survey.completedHtml = "<h4>Thank you for filling out form</h4>";
$("#surveyContainer").Survey({ model: survey });
survey.applyTheme(getStyle1());
survey.onComplete.add(surveyComplete);
}
function Other1(){
const surveyJson = {
"elements": [{
name: "FirstName",
title: "Enter your first name:",
type: "text"
}, {
name: "LastName",
title: "Enter your last name:",
type: "text"
},{
name: "disappointing-experience",
title: "Please let us know why you had such a disappointing experience with our product",
type: "comment"
},{
name: "satisfaction-score",
title: "How would you describe your experience with our product?",
type: "radiogroup",
choices: [
{ value: 5, text: "Fully satisfying" },
{ value: 4, text: "Generally satisfying" },
{ value: 3, text: "Neutral" },
{ value: 2, text: "Rather unsatisfying" },
{ value: 1, text: "Not satisfying at all" }
],
isRequired: true
},{
"type": "tagbox",
"isRequired": true,
"choicesByUrl": {
"url": "https://surveyjs.io/api/CountriesExample"
},
"name": "countries",
"title": "Which countries have you visited within the last three years?",
"description": "Please select all that apply."
},{
"type": "file",
"title": "Please upload your files",
"name": "files",
"storeDataAsText": false,
"waitForUpload": true,
"allowMultiple": true,
"maxSize": 102400,
"hideNumber": true
},{
"type": "signaturepad",
"name": "signature",
"title": "Please sign here",
"isRequired": true,
"signatureWidth": 600
},{
"name": "subscribed",
"type": "boolean",
"renderAs": "checkbox",
"title": "I agree to receive weekly newsletters"
}]
}
const survey = new Survey.Model(surveyJson);
const subscribedQuestion = survey.getQuestionByName("subscribed");
subscribedQuestion.value = true;
$("#surveyContainer").Survey({ model: survey });
SurveyComponent(survey);
}
// SingleForm();
// Other1();
MultiForm()

View File

@@ -0,0 +1,14 @@
<?php
date_default_timezone_set('America/Chicago');
require dirname( __DIR__, 4 ) . "/includes/init.php";
require dirname( __DIR__, 4 ) . "/includes/functions.php";
if(Input::get("init")){
init();
}
function init(){
echo json_encode(array("success" => true));
}
?>

View File

@@ -0,0 +1,70 @@
/* styles */
#maincontainer {
/* height: 100vh; */
}
/* Let's highlight canvas boundaries */
#gjs {
border: 3px solid #444;
}
/* Reset some default styling */
.gjs-cv-canvas {
top: 0;
width: 100%;
height: 100%;
}
.gjs-block {
width: auto;
height: auto;
min-height: auto;
}
.panel__top {
padding: 0;
width: 100%;
display: flex;
position: initial;
justify-content: center;
justify-content: space-between;
}
.panel__basic-actions {
position: initial;
}
.editor-row {
display: flex;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
height: 300px;
}
.editor-canvas {
flex-grow: 1;
}
.panel__right {
flex-basis: 230px;
position: relative;
overflow-y: auto;
}
.panel__switcher {
position: initial;
}