From 80539188ef6814b4202d677d62b761bd5b670574 Mon Sep 17 00:00:00 2001 From: Max Nanis Date: Tue, 24 Jun 2025 19:04:01 +0700 Subject: Dynamic height adjustment for widget size. CSS inject by JS for single file --- src/Widget.tsx | 52 ++++++++++++++++------- src/components/app-sidebar.tsx | 82 ++++++++++++++++++++++++++++++++---- src/components/nav-main.tsx | 94 ------------------------------------------ src/components/site-header.tsx | 9 +--- src/index.css | 19 ++++++--- src/main.tsx | 8 ++-- src/pages/Demographics.tsx | 2 +- 7 files changed, 131 insertions(+), 135 deletions(-) delete mode 100644 src/components/nav-main.tsx (limited to 'src') diff --git a/src/Widget.tsx b/src/Widget.tsx index 192e4e0..4f4556b 100644 --- a/src/Widget.tsx +++ b/src/Widget.tsx @@ -1,5 +1,5 @@ -import {useEffect} from 'react' -import {AppSidebar} from "@/components/app-sidebar" +import { useEffect, useState, useRef } from "react" + import {SiteHeader} from "@/components/site-header" import {SidebarInset, SidebarProvider} from "@/components/ui/sidebar" import {Offerwall} from "@/pages/Offerwall.tsx" @@ -8,6 +8,7 @@ import {Demographics} from "@/pages/Demographics.tsx" import {CashoutMethodsPage} from "@/pages/CashoutMethods.tsx"; import {TransactionHistoryPage} from "@/pages/TransactionHistory.tsx" import {TaskAttemptHistoryPage} from "@/pages/TaskAttemptHistory.tsx"; +import {AppSidebar} from "@/components/app-sidebar" import {useAppDispatch, useAppSelector} from "@/hooks.ts"; import { @@ -33,11 +34,34 @@ import {setMarketplaceAnswers} from "@/models/userMarketplaceAnswerSlice.ts"; import {setUserProfile} from "@/models/userProfileSlice.ts"; import {setTaskStatuses} from "@/models/taskStatusSlice.ts" import {App} from "@/models/app.ts" +import {ScrollArea} from "@/components/ui/scroll-area" import './index.css'; +export function useParentHeight() { + const ref = useRef(null) + const [height, setHeight] = useState(null) + + useEffect(() => { + if (!ref.current) return + + const observer = new ResizeObserver(() => { + if (ref.current?.parentElement) { + const h = ref.current.parentElement.getBoundingClientRect().height + setHeight(h) + } + }) + + observer.observe(ref.current.parentElement!) + + return () => observer.disconnect() + }, []) + + return { ref, height } +} const Widget = () => { + const { ref, height } = useParentHeight() const dispatch = useAppDispatch() const app: App = useAppSelector(state => state.app) @@ -103,31 +127,29 @@ const Widget = () => { }, []); // ← empty array means "run once" - return ( - - - - +
+ + -
-
+ + +
-
+
{app.currentPage === 'offerwall' && } {app.currentPage === 'questions' && } {app.currentPage === 'cashout_methods' && } {app.currentPage === 'task_attempts' && } - {app.currentPage === 'demographics' && } {app.currentPage === 'transaction_history' && }
-
-
+ - - + + +
) } diff --git a/src/components/app-sidebar.tsx b/src/components/app-sidebar.tsx index c60bf17..b61a716 100644 --- a/src/components/app-sidebar.tsx +++ b/src/components/app-sidebar.tsx @@ -1,9 +1,7 @@ "use client" import React from "react" -import {CircleDollarSign, SquareStack} from "lucide-react" - -import {NavMain} from "@/components/nav-main" +import {Activity, CircleDollarSign, ListIcon, NotebookText, SquareStack, User} from "lucide-react" import { Sidebar, SidebarContent, @@ -22,6 +20,8 @@ import {Badge} from "@/components/ui/badge.tsx"; import {useSelector} from "react-redux"; import {selectCashoutMethods} from "@/models/cashoutMethodSlice.ts"; import {selectTransactionHistory} from "@/models/transactionHistorySlice.ts"; +import {selectQuestions} from "../models/questionSlice"; +import {selectUserUpkAnswers} from "../models/userUpkAnswerSlice"; export function AppSidebar({...props}: React.ComponentProps) { const app: App = useAppSelector(state => state.app) @@ -29,8 +29,12 @@ export function AppSidebar({...props}: React.ComponentProps) { const cashoutMethods = useSelector(selectCashoutMethods) const transactionHistory = useSelector(selectTransactionHistory) + const questions = useSelector(selectQuestions) + const upkAnswers = useSelector(selectUserUpkAnswers) + const taskAttempts = useAppSelector(state => state.taskStatus) + return ( - + @@ -38,7 +42,6 @@ export function AppSidebar({...props}: React.ComponentProps) { asChild className="data-[slot=sidebar-menu-button]:!p-1.5" > - {app.panelName} @@ -46,10 +49,73 @@ export function AppSidebar({...props}: React.ComponentProps) { - - + + + + + dispatch(setPage("offerwall"))} + > + + + + Surveys {(app.availability_count ?? 0).toLocaleString()} + + + + + + dispatch(setPage("questions"))} + > + + + + Questions {questions.length.toLocaleString()} + + + + + dispatch(setPage("demographics"))} + > + + + + Demographics {upkAnswers.length.toLocaleString()} + + + + + dispatch(setPage("task_attempts"))} + > + + + + Survey History {taskAttempts.length.toLocaleString()} + + + + + + + - Redemption diff --git a/src/components/nav-main.tsx b/src/components/nav-main.tsx deleted file mode 100644 index 9ed1b24..0000000 --- a/src/components/nav-main.tsx +++ /dev/null @@ -1,94 +0,0 @@ -"use client" - -import {ListIcon, NotebookText, Users, User, Activity} from "lucide-react" -import { - SidebarGroup, - SidebarGroupContent, - SidebarMenu, - SidebarMenuButton, - SidebarMenuItem, -} from "@/components/ui/sidebar" -import {setPage} from "@/models/appSlice.ts"; -import {useAppDispatch, useAppSelector} from "@/hooks.ts"; -import {useSelector} from "react-redux"; -import {selectQuestions} from "@/models/questionSlice.ts"; -import {Badge} from "@/components/ui/badge" -import {selectUserUpkAnswers} from "@/models/userUpkAnswerSlice.ts"; - -export function NavMain() { - const dispatch = useAppDispatch() - - const app = useAppSelector(state => state.app) - const questions = useSelector(selectQuestions) - const upkAnswers = useSelector(selectUserUpkAnswers) - const taskAttempts = useAppSelector(state => state.taskStatus) - - return ( - - - - - dispatch(setPage("offerwall"))} - > - - - - Surveys {(app.availability_count ?? 0).toLocaleString()} - - - - - - dispatch(setPage("questions"))} - > - - - - Questions {questions.length.toLocaleString()} - - - - - dispatch(setPage("demographics"))} - > - - - - Demographics {upkAnswers.length.toLocaleString()} - - - - - dispatch(setPage("task_attempts"))} - > - - - - Survey History {taskAttempts.length.toLocaleString()} - - - - - - - - ) -} diff --git a/src/components/site-header.tsx b/src/components/site-header.tsx index dca4996..70a2068 100644 --- a/src/components/site-header.tsx +++ b/src/components/site-header.tsx @@ -1,8 +1,6 @@ import {Separator} from "@/components/ui/separator" -import {SidebarTrigger} from "@/components/ui/sidebar" import {useAppSelector} from "@/hooks.ts"; import {App} from "@/models/app.ts" -import {Offerwall} from "@/pages/Offerwall.tsx"; const SiteHeader = () => { const app: App = useAppSelector(state => state.app) @@ -10,13 +8,8 @@ const SiteHeader = () => { return (
-
- +
-

{app.currentPage === 'offerwall' && "Offerwall"} {app.currentPage === 'questions' && "Profiling Questions"} diff --git a/src/index.css b/src/index.css index e3beb23..39f436b 100644 --- a/src/index.css +++ b/src/index.css @@ -4,11 +4,6 @@ @tailwind components; @tailwind utilities; -#testD4rN { - max-width: 800px; - max-height: 400px !important; -} - @custom-variant dark (&:is(.dark *)); @theme inline { @@ -145,4 +140,16 @@ body { @apply bg-background text-foreground; } -} \ No newline at end of file +} + +#testD4rN { + /*max-width: 800px;*/ + /*max-height: 400px !important;*/ + + height: 500px; + width: 800px; + border: 1px solid red; + position: absolute; + top: 80px; + left: 80px; +} diff --git a/src/main.tsx b/src/main.tsx index 3dfd07a..c944cdd 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -6,6 +6,8 @@ import {Provider} from 'react-redux' import {store} from './store' import {setApp} from "@/models/appSlice.ts"; +import "@/index.css" + (function () { // Finding the script tag on the page.. @@ -42,9 +44,9 @@ import {setApp} from "@/models/appSlice.ts"; const root = createRoot(container) root.render( // - - - + + + // ); diff --git a/src/pages/Demographics.tsx b/src/pages/Demographics.tsx index 2031511..f7f6efa 100644 --- a/src/pages/Demographics.tsx +++ b/src/pages/Demographics.tsx @@ -101,7 +101,7 @@ export const ContactCard = () => {
- {titleCase(gender as string) ?? " - "} + {titleCase(gender ?? " - " as string)}
-- cgit v1.2.3