mirror/formbricks
1
0
Fork 0
mirror of https://github.com/formbricks/formbricks.git synced 2026-04-23 21:59:28 -05:00
Code Issues Packages Projects Releases 164 Wiki Activity

Prevent smartphone view + responsiveness settings for dashboards (#202)

Browse Source 
* responsiveness PMF & FB dashboards

* prevent smartphone view

---------

Co-authored-by: Matthias Nannt <mail@matthiasnannt.com>
This commit is contained in:
Johannes
2023-02-14 11:14:34 +01:00
committed by GitHub
parent afdc4f1ee9
commit 8f24f21b87
5 changed files with 38 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/forms/feedback/FeedbackResults.tsx
+2 -2
View File
@@ -102,11 +102,11 @@ export default function FeedbackResults() {
</Transition.Root>
<div>
<section aria-labelledby="products-heading" className="max-w-8xl mx-auto py-8 pt-6 pb-24">
<div className="grid grid-cols-1 gap-x-8 gap-y-10 lg:grid-cols-4">
<div className="grid grid-cols-1 gap-x-8 gap-y-10 md:grid-cols-4">
<FilterNavigation submissions={submissions} setFilteredSubmissions={setFilteredSubmissions} />
{/* Product grid */}
<div className="lg:col-span-3">
<div className="md:col-span-3">
{submissions.length === 0 ? (
<EmptyPageFiller
alertText="You haven't received any submissions yet."
apps/web/src/components/forms/pmf/OverviewResults.tsx
+3 -4
View File
@@ -60,7 +60,7 @@ export default function OverviewResults() {
<div>
<div>
<section aria-labelledby="filters" className="max-w-8xl mx-auto py-8 pt-6 pb-24 ">
<div className="grid grid-cols-1 gap-x-16 gap-y-10 lg:grid-cols-4">
<div className="grid grid-cols-1 gap-x-16 gap-y-10 md:grid-cols-4">
<div>
<SubmissionCounter
numFilteredSubmissions={filteredSubmissions.length}
@@ -71,7 +71,7 @@ export default function OverviewResults() {
{/* Submission grid */}
<div className="max-w-7xl lg:col-span-3">
<div className="max-w-7xl md:col-span-3">
{submissions.length === 0 ? (
<EmptyPageFiller
alertText="You haven't received any submissions yet."
@@ -81,7 +81,7 @@ export default function OverviewResults() {
</EmptyPageFiller>
) : (
<>
<div className="grid grid-cols-1 gap-4 xl:grid-cols-2">
<div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
<div className="flex flex-col items-center justify-center rounded-lg bg-white p-2">
<h3 className="text-sm font-medium text-slate-800">Disappointment Level</h3>
<Pie
@@ -105,7 +105,6 @@ export default function OverviewResults() {
<div>Disappointment Level</div>
<div>Job</div>
</div>
{console.log(JSON.stringify(question, null, 2))}
{filteredSubmissions
.filter((s) => question.name in s.data)
.map((submission) => (
apps/web/src/components/forms/pmf/PMFResults.tsx
+1 -1
View File
@@ -34,7 +34,7 @@ export default function PMFResults() {
<div>
<div>
<section aria-labelledby="filters" className="max-w-8xl mx-auto py-8 pt-6 pb-24">
<div className="grid grid-cols-1 gap-x-16 gap-y-10 lg:grid-cols-4">
<div className="grid grid-cols-1 gap-x-16 gap-y-10 md:grid-cols-4">
<div>
<SubmissionCounter
numFilteredSubmissions={filteredSubmissions.length}
apps/web/src/components/forms/pmf/SuperhumanApproach.tsx
+3 -3
View File
@@ -57,7 +57,7 @@ export default function SegmentResults() {
<div>
<div>
<section aria-labelledby="filters" className="max-w-8xl mx-auto py-8 pt-6">
<div className="grid grid-cols-1 gap-x-16 gap-y-10 lg:grid-cols-4">
<div className="grid grid-cols-1 gap-x-16 gap-y-10 md:grid-cols-4">
<div>
<div>
<SubmissionCounter
@@ -103,7 +103,7 @@ export default function SegmentResults() {
{/* Double down on what they love*/}
<div className=" lg:col-span-3">
<div className=" md:col-span-3">
{submissions.length === 0 ? (
<EmptyPageFiller
alertText="You haven't received any submissions yet."
@@ -113,7 +113,7 @@ export default function SegmentResults() {
</EmptyPageFiller>
) : (
<>
<div className="grid grid-cols-1 gap-4 xl:grid-cols-2">
<div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
<div className="flex flex-col items-center justify-center rounded-lg bg-white p-2">
<h3 className="text-sm font-medium text-slate-800">All</h3>
<h3 className="text-xs font-light text-slate-800">
apps/web/src/pages/_app.tsx
+29 -6
View File
@@ -2,18 +2,41 @@ import { Analytics } from "@vercel/analytics/react";
import { SessionProvider } from "next-auth/react";
import { ToastContainer } from "react-toastify";
import { FeedbackButton } from "@/components/FeedbackButton";
import { useEffect, useState } from "react";
import "@/styles/globals.css";
import "@/styles/toastify.css";
import "@/styles/prism.css";
function FormbricksApp({ Component, pageProps: { session, ...pageProps } }) {
const [isMobile, setIsMobile] = useState(false);
useEffect(() => {
const handleResize = () => setIsMobile(window.innerWidth <= 768);
handleResize();
window.addEventListener("resize", handleResize);
return () => window.removeEventListener("resize", handleResize);
}, []);
return (
<SessionProvider session={session}>
<Component {...pageProps} />
<ToastContainer />
<Analytics />
<FeedbackButton />
</SessionProvider>
<>
<div className={isMobile ? "hidden" : "block"}>
<SessionProvider session={session}>
<Component {...pageProps} />
<ToastContainer />
<Analytics />
<FeedbackButton />
</SessionProvider>
</div>
<div
className={
isMobile
? "flex h-screen flex-col items-center justify-center bg-slate-100 text-slate-700"
: "hidden"
}>
<p>Formbricks is not yet fully responsive.</p>
<p className="font-bold">Please resize window to use.</p>
</div>
</>
);
}