saulteafarmer/plebdevs
1
0
Fork 0
mirror of https://github.com/AustinKelsay/plebdevs.git synced 2025-06-06 18:31:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

Mobile styling fixes for profile components

Browse Source
This commit is contained in:
austinkelsay 2024-12-23 14:30:07 -06:00
parent 2920fd4f19
commit e92a7fa73c
No known key found for this signature in database
GPG Key ID: 44CB4EC6D9F2FA02
5 changed files with 91 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/charts/ActivityContributionChart.js
View File

@ -1,10 +1,12 @@
import React, { useState, useCallback } from 'react'; import React, { useState, useCallback } from 'react';
import { Tooltip } from 'primereact/tooltip'; import { Tooltip } from 'primereact/tooltip';
import { formatDateTime } from "@/utils/time"; import { formatDateTime } from "@/utils/time";
import useWindowWidth from '@/hooks/useWindowWidth';
const ActivityContributionChart = ({ session }) => { const ActivityContributionChart = ({ session }) => {
const [contributionData, setContributionData] = useState({}); const [contributionData, setContributionData] = useState({});
const [totalActivities, setTotalActivities] = useState(0); const [totalActivities, setTotalActivities] = useState(0);
const windowWidth = useWindowWidth();
// Prepare activity data // Prepare activity data
const prepareActivityData = useCallback(() => { const prepareActivityData = useCallback(() => {
@ -156,6 +158,12 @@ const ActivityContributionChart = ({ session }) => {
const calendar = generateCalendar(); const calendar = generateCalendar();
const weekDays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; 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 ( 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="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"> <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" /> data-pr-tooltip="Total number of learning activities on the platform" />
<Tooltip target=".pi-question-circle" position="left" /> <Tooltip target=".pi-question-circle" position="left" />
</div> </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"> <div className="flex justify-between items-center mb-3">
<h4 className="text-base font-semibold text-gray-200"> <h4 className="text-base font-semibold text-gray-200">
{totalActivities} learning activities in the last year {totalActivities} learning activities in the last year

126
src/components/charts/CombinedContributionChart.js
View File

@ -2,10 +2,12 @@ import React, { useState, useCallback, useEffect } from 'react';
import { useFetchGithubCommits } from '@/hooks/githubQueries/useFetchGithubCommits'; import { useFetchGithubCommits } from '@/hooks/githubQueries/useFetchGithubCommits';
import { Tooltip } from 'primereact/tooltip'; import { Tooltip } from 'primereact/tooltip';
import { formatDateTime } from "@/utils/time"; import { formatDateTime } from "@/utils/time";
import useWindowWidth from '@/hooks/useWindowWidth';
const CombinedContributionChart = ({ session }) => { const CombinedContributionChart = ({ session }) => {
const [contributionData, setContributionData] = useState({}); const [contributionData, setContributionData] = useState({});
const [totalContributions, setTotalContributions] = useState(0); const [totalContributions, setTotalContributions] = useState(0);
const windowWidth = useWindowWidth();
const prepareProgressData = useCallback(() => { const prepareProgressData = useCallback(() => {
if (!session?.user?.userCourses) return {}; if (!session?.user?.userCourses) return {};
@ -180,6 +182,12 @@ const CombinedContributionChart = ({ session }) => {
return months; return months;
}, [calendar]); }, [calendar]);
const getScaleClass = (width) => {
if (width <= 800) return 'overflow-x-auto';
if (width <= 1000) return 'scale-95 origin-top-left';
return '';
};
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="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"> <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)" /> data-pr-tooltip="Combined total of GitHub commits and learning activities (starting/completing courses and lessons)" />
<Tooltip target=".pi-question-circle" position="left" /> <Tooltip target=".pi-question-circle" position="left" />
</div> </div>
<div className="max-w-[910px] p-4"> <div className={`${getScaleClass(windowWidth)}`}>
{(isLoading || isFetching) && <h4 className="text-base font-semibold text-gray-200 mb-3">Loading contribution data... ({totalContributions} total contributions / activities fetched)</h4>} <div className="min-w-[910px] p-4">
{!isLoading && !isFetching && {(isLoading || isFetching) && <h4 className="text-base font-semibold text-gray-200 mb-3">Loading contribution data... ({totalContributions} total contributions / activities fetched)</h4>}
<div className="flex justify-between items-center mb-3"> {!isLoading && !isFetching &&
<h4 className="text-base font-semibold text-gray-200"> <div className="flex justify-between items-center mb-3">
{totalContributions} total contributions / activities in the last year <h4 className="text-base font-semibold text-gray-200">
</h4> {totalContributions} total contributions / activities in the last year
</div> </h4>
} </div>
<div className="flex"> }
{/* Days of week labels */} <div className="flex">
<div className="flex flex-col gap-[3px] text-[11px] text-gray-400 pr-3"> {/* Days of week labels */}
{weekDays.map((day, index) => ( <div className={`flex flex-col gap-[3px] text-[11px] text-gray-400 pr-3`}>
<div key={day} className="h-[13px] leading-[13px]"> {weekDays.map((day, index) => (
{index % 2 === 0 && day} <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> </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>
<div className="flex flex-col"> <div className="text-[11px] text-gray-400 flex items-center justify-start pt-4">
{/* Calendar grid */} <span className="mr-2">Less</span>
<div className="flex gap-[3px]"> <div className="flex gap-[3px]">
{calendar[0].map((_, weekIndex) => ( <div className="w-[14px] h-[14px] bg-gray-100 rounded-[2px]"></div>
<div key={weekIndex} className="flex flex-col gap-[3px]"> <div className="w-[14px] h-[14px] bg-green-300 rounded-[2px]"></div>
{calendar.map((row, dayIndex) => ( <div className="w-[14px] h-[14px] bg-green-400 rounded-[2px]"></div>
row[weekIndex] && ( <div className="w-[14px] h-[14px] bg-green-600 rounded-[2px]"></div>
<div <div className="w-[14px] h-[14px] bg-green-700 rounded-[2px]"></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> </div>
<span className="ml-2">More</span>
</div> </div>
</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>
</div> </div>
); );

4
src/components/profile/UserProfile.js
View File

@ -38,11 +38,11 @@ const UserProfile = () => {
) )
} }
<div className="w-full flex flex-row max-lap:flex-col"> <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} />} {user && <UserProfileCard user={user} />}
</div> </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" ? ( {account && account?.provider === "github" ? (
<CombinedContributionChart session={session} /> <CombinedContributionChart session={session} />
) : ( ) : (

18
src/components/profile/UserProfileCard.js
View File

@ -71,15 +71,17 @@ const UserProfileCard = ({ user }) => {
<h3 className="text-center"> <h3 className="text-center">
{user.username || user?.name || user?.email || "Anon"} {user.username || user?.name || user?.email || "Anon"}
</h3> </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 && ( user?.pubkey && (
<div className="flex flex-row gap-2 justify-center"> <div className="flex flex-row gap-2 items-center w-full overflow-hidden">
<p className="truncate"> <div className="overflow-hidden">
{nip19.npubEncode(user.pubkey)} <p className="text-ellipsis overflow-hidden whitespace-nowrap">
</p> {nip19.npubEncode(user.pubkey)}
</p>
</div>
<Tooltip target=".pubkey-tooltip" content={"this is your account pubkey"} /> <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> </div>
) )
} }
@ -134,7 +136,7 @@ const UserProfileCard = ({ user }) => {
const DesktopProfileCard = () => ( 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="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 <Image
alt="user's avatar" alt="user's avatar"
src={returnImageProxy(user.avatar, user?.pubkey || "")} src={returnImageProxy(user.avatar, user?.pubkey || "")}
@ -143,7 +145,7 @@ const UserProfileCard = ({ user }) => {
className="rounded-full my-4" className="rounded-full my-4"
/> />
<div className="flex flex-col gap-2 pt-4 w-fit relative"> <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 <i
className="pi pi-ellipsis-h text-2xl cursor-pointer" className="pi pi-ellipsis-h text-2xl cursor-pointer"
onClick={(e) => menu.current.toggle(e)} onClick={(e) => menu.current.toggle(e)}

4
src/components/profile/UserSettings.js
View File

@ -32,7 +32,7 @@ const UserSettings = () => {
<h1 className="text-3xl font-bold mb-6">Settings</h1> <h1 className="text-3xl font-bold mb-6">Settings</h1>
)} )}
<div className="w-full flex flex-row max-lap:flex-col"> <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} /> <UserProfileCard user={user} />
{/* Lightning Info Card */} {/* Lightning Info Card */}
@ -51,7 +51,7 @@ const UserSettings = () => {
{user && <SubscribeModal user={user} />} {user && <SubscribeModal user={user} />}
</div> </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 <UserRelaysTable
ndk={ndk} ndk={ndk}
userRelays={userRelays} userRelays={userRelays}