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

Copy, tooltip, and some mobile style changes

Browse Source
This commit is contained in:
austinkelsay 2025-01-03 15:03:16 -06:00
parent 103286d8a9
commit b8a2ddb4bd
No known key found for this signature in database
GPG Key ID: 44CB4EC6D9F2FA02
4 changed files with 71 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,5 @@
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 useWindowWidth from '@/hooks/useWindowWidth'; import useWindowWidth from '@/hooks/useWindowWidth';
const ActivityContributionChart = ({ session }) => { const ActivityContributionChart = ({ session }) => {
@ -159,7 +158,7 @@ const ActivityContributionChart = ({ session }) => {
const weekDays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; const weekDays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
const getScaleClass = (width) => { const getScaleClass = (width) => {
if (width <= 800) return 'scale-75 origin-top-left'; if (width <= 800) return 'overflow-x-auto';
if (width <= 1000) return 'scale-95 origin-top-left'; if (width <= 1000) return 'scale-95 origin-top-left';
return ''; return '';
}; };
@ -172,68 +171,70 @@ 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 ${getScaleClass(windowWidth)}`}> <div className={`${getScaleClass(windowWidth)}`}>
<div className="flex justify-between items-center mb-3"> <div className="min-w-[910px] p-4">
<h4 className="text-base font-semibold text-gray-200"> <div className="flex justify-between items-center mb-3">
{totalActivities} learning activities in the last year <h4 className="text-base font-semibold text-gray-200">
</h4> {totalActivities} learning activities in the last year
</div> </h4>
<div className="flex"> </div>
{/* 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-[14px] leading-[14px]"> {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].count > 0
? `${row[weekIndex].count} activit${row[weekIndex].count !== 1 ? 'ies' : 'y'}`
: 'No activities'
}`}
></div>
)
))}
</div>
))}
</div> </div>
))} {/* Month labels */}
<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"> {/* Legend */}
{/* 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]"> <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].count > 0
? `${row[weekIndex].count} activit${row[weekIndex].count !== 1 ? 'ies' : 'y'}`
: 'No activities'
}`}
></div>
)
))}
</div>
))}
</div>
{/* Month labels */}
<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>
{/* Legend */}
<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>
); );

2
src/components/profile/UserBadges.js
View File

@ -105,7 +105,7 @@ const UserBadges = ({ visible, onHide }) => {
</div> </div>
) : badges.length === 0 ? ( ) : badges.length === 0 ? (
<div className="text-center text-gray-400"> <div className="text-center text-gray-400">
No badges earned yet. Complete courses to earn badges! No badges earned yet. Get started on the Dev Journey to earn badges!
</div> </div>
) : ( ) : (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">

17
src/components/profile/progress/UserProgress.js
View File

@ -193,9 +193,8 @@ const UserProgress = () => {
<div className="bg-gray-800 rounded-lg p-4 pb-0 m-2 w-full border border-gray-700 shadow-md max-lap:mx-0"> <div className="bg-gray-800 rounded-lg p-4 pb-0 m-2 w-full border border-gray-700 shadow-md max-lap:mx-0">
<div className="flex flex-row justify-between items-center"> <div className="flex flex-row justify-between items-center">
<h1 className="text-3xl font-bold text-white mb-2">Dev Journey</h1> <h1 className="text-3xl font-bold text-white mb-2">Dev Journey</h1>
<i className="pi pi-question-circle text-2xl cursor-pointer text-gray-200" <i className="pi pi-question-circle journey-tooltip text-2xl cursor-pointer text-gray-200" />
data-pr-tooltip="Track your progress through the courses, showcase your GitHub contributions, submit projects, and earn badges!" /> <Tooltip target=".journey-tooltip" position="left" className="w-[300px]" content="This is an optional Dev Journey that will walk you through the primary course materials and help you learn how to code, gain the required experience to Build Bitcoin/Lightning/Nostr Apps, and set you up to go through the rest of the free workshops and other content on the platform." />
<Tooltip target=".pi-question-circle" position="left" />
</div> </div>
<p className="text-gray-400 mb-4">Track your progress through the courses, showcase your GitHub contributions, submit projects, and earn badges!</p> <p className="text-gray-400 mb-4">Track your progress through the courses, showcase your GitHub contributions, submit projects, and earn badges!</p>
@ -280,6 +279,13 @@ const UserProgress = () => {
<span className={`${subTask.completed ? 'text-white' : 'text-gray-400'}`}> <span className={`${subTask.completed ? 'text-white' : 'text-gray-400'}`}>
{subTask.status} {subTask.status}
</span> </span>
{subTask.status === 'Connect your GitHub account' && (
<>
<i className="pi pi-question-circle github-tooltip ml-2 text-sm cursor-pointer text-gray-200"
data-pr-tooltip="Connect your GitHub account to track your progress and submit projects" />
<Tooltip target=".github-tooltip" position="right" />
</>
)}
</div> </div>
{subTask.status.includes('repository') && !subTask.completed && ( {subTask.status.includes('repository') && !subTask.completed && (
<RepoSelector <RepoSelector
@ -310,11 +316,8 @@ const UserProgress = () => {
<div className="mt-2 flex justify-end"> <div className="mt-2 flex justify-end">
<GenericButton <GenericButton
icon="pi pi-external-link" icon="pi pi-external-link"
label="View Course"
onClick={() => router.push(`/course/${task.courseNAddress}`)} onClick={() => router.push(`/course/${task.courseNAddress}`)}
tooltip="View Course"
tooltipOptions={{
position: "top"
}}
outlined outlined
size="small" size="small"
/> />

2
src/hooks/tracking/useTrackVideoLesson.js
View File

@ -103,7 +103,7 @@ const useTrackVideoLesson = ({lessonId, videoDuration, courseId, videoPlayed, pa
if (isAdmin) return; if (isAdmin) return;
if (videoDuration && timeSpent >= Math.round(videoDuration * 0.8) && !completedRef.current) { if (videoDuration && timeSpent >= Math.round(videoDuration * 0.8) && !completedRef.current) {
console.log('🎯 Video reached 90% threshold - Marking as completed'); console.log('🎯 Video reached 80% threshold - Marking as completed');
markLessonAsCompleted(); markLessonAsCompleted();
} }
}, [timeSpent, videoDuration, markLessonAsCompleted, isAdmin]); }, [timeSpent, videoDuration, markLessonAsCompleted, isAdmin]);