mirror of
https://github.com/AustinKelsay/plebdevs.git
synced 2025-06-05 00:32:03 +00:00
Mobile styling fixes for profile components
This commit is contained in:
austinkelsay
parent
2920fd4f19
commit
e92a7fa73c
@ -1,10 +1,12 @@
|
||||
import React, { useState, useCallback } from 'react';
|
||||
import { Tooltip } from 'primereact/tooltip';
|
||||
import { formatDateTime } from "@/utils/time";
|
||||
import useWindowWidth from '@/hooks/useWindowWidth';
|
||||
|
||||
const ActivityContributionChart = ({ session }) => {
|
||||
const [contributionData, setContributionData] = useState({});
|
||||
const [totalActivities, setTotalActivities] = useState(0);
|
||||
const windowWidth = useWindowWidth();
|
||||
|
||||
// Prepare activity data
|
||||
const prepareActivityData = useCallback(() => {
|
||||
@ -156,6 +158,12 @@ const ActivityContributionChart = ({ session }) => {
|
||||
const calendar = generateCalendar();
|
||||
const weekDays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
|
||||
|
||||
const getScaleClass = (width) => {
|
||||
if (width <= 800) return 'scale-75 origin-top-left';
|
||||
if (width <= 1000) return 'scale-95 origin-top-left';
|
||||
return '';
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full mx-2 bg-gray-800 rounded-lg border border-gray-700 shadow-md h-[330px] max-lap:mx-0 max-lap:mt-2">
|
||||
<div className="flex flex-row justify-between items-center p-4">
|
||||
@ -164,7 +172,7 @@ const ActivityContributionChart = ({ session }) => {
|
||||
data-pr-tooltip="Total number of learning activities on the platform" />
|
||||
<Tooltip target=".pi-question-circle" position="left" />
|
||||
</div>
|
||||
<div className="max-w-[910px] p-4">
|
||||
<div className={`max-w-[910px] p-4 ${getScaleClass(windowWidth)}`}>
|
||||
<div className="flex justify-between items-center mb-3">
|
||||
<h4 className="text-base font-semibold text-gray-200">
|
||||
{totalActivities} learning activities in the last year
|
||||
|
||||
@ -2,10 +2,12 @@ import React, { useState, useCallback, useEffect } from 'react';
|
||||
import { useFetchGithubCommits } from '@/hooks/githubQueries/useFetchGithubCommits';
|
||||
import { Tooltip } from 'primereact/tooltip';
|
||||
import { formatDateTime } from "@/utils/time";
|
||||
import useWindowWidth from '@/hooks/useWindowWidth';
|
||||
|
||||
const CombinedContributionChart = ({ session }) => {
|
||||
const [contributionData, setContributionData] = useState({});
|
||||
const [totalContributions, setTotalContributions] = useState(0);
|
||||
const windowWidth = useWindowWidth();
|
||||
|
||||
const prepareProgressData = useCallback(() => {
|
||||
if (!session?.user?.userCourses) return {};
|
||||
@ -180,6 +182,12 @@ const CombinedContributionChart = ({ session }) => {
|
||||
return months;
|
||||
}, [calendar]);
|
||||
|
||||
const getScaleClass = (width) => {
|
||||
if (width <= 800) return 'overflow-x-auto';
|
||||
if (width <= 1000) return 'scale-95 origin-top-left';
|
||||
return '';
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full mx-2 bg-gray-800 rounded-lg border border-gray-700 shadow-md h-[330px] max-lap:mx-0 max-lap:mt-2">
|
||||
<div className="flex flex-row justify-between items-center p-4">
|
||||
@ -188,70 +196,72 @@ const CombinedContributionChart = ({ session }) => {
|
||||
data-pr-tooltip="Combined total of GitHub commits and learning activities (starting/completing courses and lessons)" />
|
||||
<Tooltip target=".pi-question-circle" position="left" />
|
||||
</div>
|
||||
<div className="max-w-[910px] p-4">
|
||||
{(isLoading || isFetching) && <h4 className="text-base font-semibold text-gray-200 mb-3">Loading contribution data... ({totalContributions} total contributions / activities fetched)</h4>}
|
||||
{!isLoading && !isFetching &&
|
||||
<div className="flex justify-between items-center mb-3">
|
||||
<h4 className="text-base font-semibold text-gray-200">
|
||||
{totalContributions} total contributions / activities in the last year
|
||||
</h4>
|
||||
</div>
|
||||
}
|
||||
<div className="flex">
|
||||
{/* Days of week labels */}
|
||||
<div className="flex flex-col gap-[3px] text-[11px] text-gray-400 pr-3">
|
||||
{weekDays.map((day, index) => (
|
||||
<div key={day} className="h-[13px] leading-[13px]">
|
||||
{index % 2 === 0 && day}
|
||||
<div className={`${getScaleClass(windowWidth)}`}>
|
||||
<div className="min-w-[910px] p-4">
|
||||
{(isLoading || isFetching) && <h4 className="text-base font-semibold text-gray-200 mb-3">Loading contribution data... ({totalContributions} total contributions / activities fetched)</h4>}
|
||||
{!isLoading && !isFetching &&
|
||||
<div className="flex justify-between items-center mb-3">
|
||||
<h4 className="text-base font-semibold text-gray-200">
|
||||
{totalContributions} total contributions / activities in the last year
|
||||
</h4>
|
||||
</div>
|
||||
}
|
||||
<div className="flex">
|
||||
{/* Days of week labels */}
|
||||
<div className={`flex flex-col gap-[3px] text-[11px] text-gray-400 pr-3`}>
|
||||
{weekDays.map((day, index) => (
|
||||
<div key={day} className="h-[13px] leading-[13px]">
|
||||
{index % 2 === 0 && day}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
{/* Calendar grid */}
|
||||
<div className="flex gap-[3px]">
|
||||
{calendar[0].map((_, weekIndex) => (
|
||||
<div key={weekIndex} className="flex flex-col gap-[3px]">
|
||||
{calendar.map((row, dayIndex) => (
|
||||
row[weekIndex] && (
|
||||
<div
|
||||
key={`${weekIndex}-${dayIndex}`}
|
||||
className={`w-[14px] h-[14px] ${getColor(row[weekIndex].count)} rounded-[2px] cursor-pointer transition-colors duration-100`}
|
||||
title={`${row[weekIndex].date.toDateString()}: ${[
|
||||
row[weekIndex].githubCount > 0 ? `${row[weekIndex].githubCount} contribution${row[weekIndex].githubCount !== 1 ? 's' : ''}` : '',
|
||||
row[weekIndex].activityCount > 0 ? `${row[weekIndex].activityCount} activit${row[weekIndex].activityCount !== 1 ? 'ies' : 'y'}` : ''
|
||||
].filter(Boolean).join(' & ') || 'No contributions or activities'
|
||||
}`}
|
||||
></div>
|
||||
)
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
{/* Month labels moved to bottom */}
|
||||
<div className="flex text-[11px] text-gray-400 h-[20px] mt-1 relative">
|
||||
{getMonthLabels().map((month, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="absolute"
|
||||
style={{ left: `${month.index * 15}px` }}
|
||||
>
|
||||
{month.name}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
{/* Calendar grid */}
|
||||
<div className="text-[11px] text-gray-400 flex items-center justify-start pt-4">
|
||||
<span className="mr-2">Less</span>
|
||||
<div className="flex gap-[3px]">
|
||||
{calendar[0].map((_, weekIndex) => (
|
||||
<div key={weekIndex} className="flex flex-col gap-[3px]">
|
||||
{calendar.map((row, dayIndex) => (
|
||||
row[weekIndex] && (
|
||||
<div
|
||||
key={`${weekIndex}-${dayIndex}`}
|
||||
className={`w-[14px] h-[14px] ${getColor(row[weekIndex].count)} rounded-[2px] cursor-pointer transition-colors duration-100`}
|
||||
title={`${row[weekIndex].date.toDateString()}: ${[
|
||||
row[weekIndex].githubCount > 0 ? `${row[weekIndex].githubCount} contribution${row[weekIndex].githubCount !== 1 ? 's' : ''}` : '',
|
||||
row[weekIndex].activityCount > 0 ? `${row[weekIndex].activityCount} activit${row[weekIndex].activityCount !== 1 ? 'ies' : 'y'}` : ''
|
||||
].filter(Boolean).join(' & ') || 'No contributions or activities'
|
||||
}`}
|
||||
></div>
|
||||
)
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{/* Month labels moved to bottom */}
|
||||
<div className="flex text-[11px] text-gray-400 h-[20px] mt-1">
|
||||
{getMonthLabels().map((month, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="absolute"
|
||||
style={{ marginLeft: `${month.index * 15}px` }}
|
||||
>
|
||||
{month.name}
|
||||
</div>
|
||||
))}
|
||||
<div className="w-[14px] h-[14px] bg-gray-100 rounded-[2px]"></div>
|
||||
<div className="w-[14px] h-[14px] bg-green-300 rounded-[2px]"></div>
|
||||
<div className="w-[14px] h-[14px] bg-green-400 rounded-[2px]"></div>
|
||||
<div className="w-[14px] h-[14px] bg-green-600 rounded-[2px]"></div>
|
||||
<div className="w-[14px] h-[14px] bg-green-700 rounded-[2px]"></div>
|
||||
</div>
|
||||
<span className="ml-2">More</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-[11px] text-gray-400 flex items-center justify-end">
|
||||
<span className="mr-2">Less</span>
|
||||
<div className="flex gap-[3px]">
|
||||
<div className="w-[14px] h-[14px] bg-gray-100 rounded-[2px]"></div>
|
||||
<div className="w-[14px] h-[14px] bg-green-300 rounded-[2px]"></div>
|
||||
<div className="w-[14px] h-[14px] bg-green-400 rounded-[2px]"></div>
|
||||
<div className="w-[14px] h-[14px] bg-green-600 rounded-[2px]"></div>
|
||||
<div className="w-[14px] h-[14px] bg-green-700 rounded-[2px]"></div>
|
||||
</div>
|
||||
<span className="ml-2">More</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -38,11 +38,11 @@ const UserProfile = () => {
|
||||
)
|
||||
}
|
||||
<div className="w-full flex flex-row max-lap:flex-col">
|
||||
<div className="w-1/4 h-full max-lap:w-full">
|
||||
<div className="w-[22%] h-full max-lap:w-full">
|
||||
{user && <UserProfileCard user={user} />}
|
||||
</div>
|
||||
|
||||
<div className="w-3/4 flex flex-col justify-center mx-auto max-lap:w-full">
|
||||
<div className="w-[78%] flex flex-col justify-center mx-auto max-lap:w-full">
|
||||
{account && account?.provider === "github" ? (
|
||||
<CombinedContributionChart session={session} />
|
||||
) : (
|
||||
|
||||
@ -71,15 +71,17 @@ const UserProfileCard = ({ user }) => {
|
||||
<h3 className="text-center">
|
||||
{user.username || user?.name || user?.email || "Anon"}
|
||||
</h3>
|
||||
<div className="flex flex-col gap-2 justify-center">
|
||||
<div className="flex flex-col gap-2 justify-center w-full overflow-hidden">
|
||||
{
|
||||
user?.pubkey && (
|
||||
<div className="flex flex-row gap-2 justify-center">
|
||||
<p className="truncate">
|
||||
{nip19.npubEncode(user.pubkey)}
|
||||
</p>
|
||||
<div className="flex flex-row gap-2 items-center w-full overflow-hidden">
|
||||
<div className="overflow-hidden">
|
||||
<p className="text-ellipsis overflow-hidden whitespace-nowrap">
|
||||
{nip19.npubEncode(user.pubkey)}
|
||||
</p>
|
||||
</div>
|
||||
<Tooltip target=".pubkey-tooltip" content={"this is your account pubkey"} />
|
||||
<i className="pi pi-question-circle pubkey-tooltip text-xs cursor-pointer" />
|
||||
<i className="pi pi-question-circle pubkey-tooltip text-xs cursor-pointer shrink-0" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -134,7 +136,7 @@ const UserProfileCard = ({ user }) => {
|
||||
|
||||
const DesktopProfileCard = () => (
|
||||
<div className="w-full bg-gray-800 rounded-lg p-2 py-1 border border-gray-700 shadow-md h-[330px]">
|
||||
<div className="flex flex-row w-full justify-around">
|
||||
<div className="flex flex-row w-full justify-evenly">
|
||||
<Image
|
||||
alt="user's avatar"
|
||||
src={returnImageProxy(user.avatar, user?.pubkey || "")}
|
||||
@ -143,7 +145,7 @@ const UserProfileCard = ({ user }) => {
|
||||
className="rounded-full my-4"
|
||||
/>
|
||||
<div className="flex flex-col gap-2 pt-4 w-fit relative">
|
||||
<div className="absolute top-[-4px] right-[-10px]">
|
||||
<div className="absolute top-[-4px] right-[-30px]">
|
||||
<i
|
||||
className="pi pi-ellipsis-h text-2xl cursor-pointer"
|
||||
onClick={(e) => menu.current.toggle(e)}
|
||||
|
||||
@ -32,7 +32,7 @@ const UserSettings = () => {
|
||||
<h1 className="text-3xl font-bold mb-6">Settings</h1>
|
||||
)}
|
||||
<div className="w-full flex flex-row max-lap:flex-col">
|
||||
<div className="w-1/4 h-full max-lap:w-full">
|
||||
<div className="w-[22%] h-full max-lap:w-full">
|
||||
<UserProfileCard user={user} />
|
||||
|
||||
{/* Lightning Info Card */}
|
||||
@ -51,7 +51,7 @@ const UserSettings = () => {
|
||||
{user && <SubscribeModal user={user} />}
|
||||
</div>
|
||||
|
||||
<div className="w-3/4 flex flex-col justify-center mx-auto max-lap:w-full ml-2 max-lap:ml-0">
|
||||
<div className="w-[78%] flex flex-col justify-center mx-auto max-lap:w-full ml-2 max-lap:ml-0">
|
||||
<UserRelaysTable
|
||||
ndk={ndk}
|
||||
userRelays={userRelays}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user