survey list and editor mobile tweaks

This commit is contained in:
Johannes
2023-08-14 10:43:30 +02:00
parent 9c8141abb2
commit a3162150a6
10 changed files with 22 additions and 23 deletions

View File

@@ -1,14 +1,14 @@
import SurveyDropDownMenu from "@/app/(app)/environments/[environmentId]/surveys/SurveyDropDownMenu";
import SurveyStarter from "@/app/(app)/environments/[environmentId]/surveys/SurveyStarter";
import SurveyStatusIndicator from "@/components/shared/SurveyStatusIndicator";
import { getEnvironment, getEnvironments } from "@formbricks/lib/services/environment";
import { getProductByEnvironmentId } from "@formbricks/lib/services/product";
import { getSurveysWithAnalytics } from "@formbricks/lib/services/survey";
import type { TEnvironment } from "@formbricks/types/v1/environment";
import type { TSurveyWithAnalytics } from "@formbricks/types/v1/surveys";
import { Badge } from "@formbricks/ui";
import { ComputerDesktopIcon, LinkIcon, PlusIcon } from "@heroicons/react/24/solid";
import Link from "next/link";
import SurveyDropDownMenu from "@/app/(app)/environments/[environmentId]/surveys/SurveyDropDownMenu";
import SurveyStarter from "@/app/(app)/environments/[environmentId]/surveys/SurveyStarter";
import { getProductByEnvironmentId } from "@formbricks/lib/services/product";
import { getEnvironment, getEnvironments } from "@formbricks/lib/services/environment";
import { getSurveysWithAnalytics } from "@formbricks/lib/services/survey";
import type { TSurveyWithAnalytics } from "@formbricks/types/v1/surveys";
import type { TEnvironment } from "@formbricks/types/v1/environment";
export default async function SurveysList({ environmentId }: { environmentId: string }) {
const product = await getProductByEnvironmentId(environmentId);
@@ -23,7 +23,7 @@ export default async function SurveysList({ environmentId }: { environmentId: st
return (
<>
<ul className="grid grid-cols-2 place-content-stretch gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-5 ">
<ul className="grid place-content-stretch gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-5 ">
<Link href={`/environments/${environmentId}/surveys/templates`}>
<li className="col-span-1 h-56">
<div className="delay-50 flex h-full items-center justify-center overflow-hidden rounded-md bg-gradient-to-br from-slate-900 to-slate-800 font-light text-white shadow transition ease-in-out hover:scale-105 hover:from-slate-800 hover:to-slate-700">

View File

@@ -38,7 +38,7 @@ export default function AddQuestionButton({ addQuestion, environmentId }: AddQue
</div>
<div className="px-4 py-3">
<p className="font-semibold">Add Question</p>
<p className="mt-1 truncate text-sm text-slate-500">Add a new question to your survey</p>
<p className="mt-1 text-sm text-slate-500">Add a new question to your survey</p>
</div>
</div>
</Collapsible.CollapsibleTrigger>

View File

@@ -94,7 +94,7 @@ export default function HowToSendCard({ localSurvey, setLocalSurvey, environment
</div>
<div>
<p className="font-semibold text-slate-800">How to ask</p>
<p className="mt-1 truncate text-sm text-slate-500">
<p className="mt-1 text-sm text-slate-500">
In-app survey, link survey or email survey.
</p>
</div>

View File

@@ -1,5 +1,5 @@
import { cn } from "@formbricks/lib/cn";
import { QueueListIcon, Cog8ToothIcon } from "@heroicons/react/24/solid";
import { Cog8ToothIcon, QueueListIcon } from "@heroicons/react/24/solid";
interface Tab {
id: "questions" | "settings";
@@ -27,7 +27,7 @@ interface QuestionsAudienceTabsProps {
export default function QuestionsAudienceTabs({ activeId, setActiveId }: QuestionsAudienceTabsProps) {
return (
<div className="fixed z-10 flex h-14 w-1/2 items-center justify-center border bg-white">
<div className="fixed z-10 flex h-14 md:w-1/2 w-full items-center justify-center border bg-white">
<nav className="flex h-full items-center space-x-4" aria-label="Tabs">
{tabs.map((tab) => (
<button

View File

@@ -100,7 +100,7 @@ export default function RecontactOptionsCard({
</div>
<div>
<p className="font-semibold text-slate-800">Recontact Options</p>
<p className="mt-1 truncate text-sm text-slate-500">
<p className="mt-1 text-sm text-slate-500">
Decide how often people can answer this survey.
</p>
</div>

View File

@@ -151,7 +151,7 @@ export default function ResponseOptionsCard({ localSurvey, setLocalSurvey }: Res
</div>
<div>
<p className="font-semibold text-slate-800">Response Options</p>
<p className="mt-1 truncate text-sm text-slate-500">
<p className="mt-1 text-sm text-slate-500">
Decide how and how long people can respond.
</p>
</div>

View File

@@ -1,17 +1,17 @@
"use client";
import LoadingSpinner from "@/components/shared/LoadingSpinner";
import { useEnvironment } from "@/lib/environments/environments";
import { useProduct } from "@/lib/products/products";
import { useSurvey } from "@/lib/surveys/surveys";
import type { Survey } from "@formbricks/types/surveys";
import { ErrorComponent } from "@formbricks/ui";
import { useEffect, useState } from "react";
import PreviewSurvey from "../../PreviewSurvey";
import SettingsView from "./SettingsView";
import QuestionsAudienceTabs from "./QuestionsAudienceTabs";
import QuestionsAudienceTabs from "./QuestionsSettingsTabs";
import QuestionsView from "./QuestionsView";
import SettingsView from "./SettingsView";
import SurveyMenuBar from "./SurveyMenuBar";
import { useEnvironment } from "@/lib/environments/environments";
interface SurveyEditorProps {
environmentId: string;

View File

@@ -9,10 +9,10 @@ import { deleteSurvey } from "@/lib/surveys/surveys";
import type { Survey } from "@formbricks/types/surveys";
import { Button, Input } from "@formbricks/ui";
import { ArrowLeftIcon, Cog8ToothIcon, ExclamationTriangleIcon } from "@heroicons/react/24/solid";
import { isEqual } from "lodash";
import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import toast from "react-hot-toast";
import { isEqual } from "lodash";
import { validateQuestion } from "./Validation";
interface SurveyMenuBarProps {
@@ -169,7 +169,7 @@ export default function SurveyMenuBar({
}}>
Back
</Button>
<p className="pl-4 font-semibold">{product.name} / </p>
<p className="pl-4 font-semibold hidden md:block">{product.name} / </p>
<Input
defaultValue={localSurvey.name}
onChange={(e) => {

View File

@@ -142,7 +142,7 @@ export default function WhenToSendCard({ environmentId, localSurvey, setLocalSur
<div>
<p className="font-semibold text-slate-800">Survey Trigger</p>
<p className="mt-1 truncate text-sm text-slate-500">
<p className="mt-1 text-sm text-slate-500">
Choose the actions which trigger the survey.
</p>
</div>

View File

@@ -14,10 +14,9 @@ import {
SelectTrigger,
SelectValue,
} from "@formbricks/ui";
import { CheckCircleIcon, PlusIcon, TrashIcon } from "@heroicons/react/24/solid";
import { CheckCircleIcon, FunnelIcon, PlusIcon, TrashIcon, UserGroupIcon } from "@heroicons/react/24/solid";
import * as Collapsible from "@radix-ui/react-collapsible";
import { useEffect, useState } from "react"; /* */
import { UserGroupIcon, FunnelIcon } from "@heroicons/react/24/solid";
const filterConditions = [
{ id: "equals", name: "equals" },
@@ -107,7 +106,7 @@ export default function WhoToSendCard({ environmentId, localSurvey, setLocalSurv
</div>
<div>
<p className="font-semibold text-slate-800">Target Audience</p>
<p className="mt-1 truncate text-sm text-slate-500">
<p className="mt-1 text-sm text-slate-500">
Pre-segment your users with attributes filters.
</p>
</div>