mirror/formbricks
1
0
Fork 0
mirror of https://github.com/formbricks/formbricks.git synced 2026-03-04 18:28:54 -06:00
Code Issues Packages Projects Releases 137 Wiki Activity

fix: preview (#1790)

Browse Source
This commit is contained in:
Dhruwang Jariwala
2023-12-18 15:31:34 +05:30
committed by GitHub
parent 89c614fafb
commit 9b34833bdd
5 changed files with 10 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
apps/web/app/(app)/environments/[environmentId]/surveys/components/Modal.tsx
View File

@@ -55,13 +55,13 @@ export default function Modal({
: "";
return (
<div aria-live="assertive" className="relative h-full w-full overflow-visible">
<div aria-live="assertive" className="relative h-full w-full overflow-visible bg-slate-300">
<div
ref={modalRef}
style={highlightBorderColorStyle}
className={cn(
"pointer-events-auto absolute h-auto max-h-[90%] w-full max-w-sm overflow-y-auto rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5 transition-all duration-500 ease-in-out ",
previewMode === "desktop" ? getPlacementStyle(placement) : "max-w-full ",
"no-scrollbar pointer-events-auto absolute h-fit max-h-[90%] w-full max-w-sm overflow-y-auto rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5 transition-all duration-500 ease-in-out ",
previewMode === "desktop" ? getPlacementStyle(placement) : "max-w-full",
slidingAnimationClass
)}>
{children}

2
apps/web/app/(app)/environments/[environmentId]/surveys/components/PreviewSurvey.tsx
View File

@@ -213,8 +213,6 @@ export default function PreviewSurvey({
<ResetProgressButton resetQuestionProgress={resetQuestionProgress} />
</div>
<MediaBackground survey={survey} ContentRef={ContentRef} isMobilePreview>
{/* below element is use to create notch for the mobile device mockup */}
<div className="absolute left-1/2 right-1/2 top-0 z-20 h-4 w-1/2 -translate-x-1/2 transform rounded-b-md bg-slate-500"></div>
{previewType === "modal" ? (
<Modal
isOpen={isModalOpen}

2
apps/web/app/(app)/environments/[environmentId]/surveys/templates/TemplateContainer.tsx
View File

@@ -71,7 +71,7 @@ export default function TemplateContainerWithPreview({
</div>
<aside className="group hidden flex-1 flex-shrink-0 items-center justify-center overflow-hidden border-l border-slate-100 bg-slate-50 md:flex md:flex-col">
{activeTemplate && (
<div className="my-6 flex h-5/6 w-full flex-col items-center justify-center">
<div className="my-6 flex h-[90%] w-full flex-col items-center justify-center">
<PreviewSurvey
survey={{ ...minimalSurvey, ...activeTemplate.preset }}
activeQuestionId={activeQuestionId}

6
apps/web/app/s/[surveyId]/components/MediaBackground.tsx
View File

@@ -61,7 +61,9 @@ export const MediaBackground: React.FC<MediaBackgroundProps> = ({
};
const renderContent = () => (
<div className="absolute flex h-full w-full items-center justify-center overflow-y-auto">{children}</div>
<div className="no-scrollbar absolute flex h-full w-full items-center justify-center overflow-y-auto">
{children}
</div>
);
if (isMobilePreview) {
@@ -69,6 +71,8 @@ export const MediaBackground: React.FC<MediaBackgroundProps> = ({
<div
ref={ContentRef}
className={`relative h-[90%] max-h-[40rem] w-80 overflow-hidden rounded-3xl border-8 border-slate-500 ${getFilterStyle()}`}>
{/* below element is use to create notch for the mobile device mockup */}
<div className="absolute left-1/2 right-1/2 top-0 z-20 h-4 w-1/2 -translate-x-1/2 transform rounded-b-md bg-slate-500"></div>
{renderBackground()}
{renderContent()}
</div>

2
packages/surveys/src/components/general/Survey.tsx
View File

@@ -176,7 +176,7 @@ export function Survey({
return (
<>
<AutoCloseWrapper survey={survey} onClose={onClose}>
<div className="flex h-full w-full flex-col justify-between rounded-lg bg-[--fb-survey-background-color] px-6 pb-3 pt-6">
<div className="no-scrollbar flex h-full w-full flex-col justify-between overflow-y-scroll rounded-lg bg-[--fb-survey-background-color] px-6 pb-3 pt-6">
<div ref={contentRef} className={cn(loadingElement ? "animate-pulse opacity-60" : "", "my-auto")}>
{survey.questions.length === 0 && !survey.welcomeCard.enabled && !survey.thankYouCard.enabled ? (
// Handle the case when there are no questions and both welcome and thank you cards are disabled