mirror of
https://github.com/AustinKelsay/plebdevs.git
synced 2025-04-19 19:01:19 +00:00
Copy, tooltip, and some mobile style changes
This commit is contained in:
austinkelsay
parent
103286d8a9
commit
b8a2ddb4bd
@ -1,6 +1,5 @@
|
||||
import React, { useState, useCallback } from 'react';
|
||||
import { Tooltip } from 'primereact/tooltip';
|
||||
import { formatDateTime } from "@/utils/time";
|
||||
import useWindowWidth from '@/hooks/useWindowWidth';
|
||||
|
||||
const ActivityContributionChart = ({ session }) => {
|
||||
@ -159,7 +158,7 @@ const ActivityContributionChart = ({ session }) => {
|
||||
const weekDays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
|
||||
|
||||
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';
|
||||
return '';
|
||||
};
|
||||
@ -172,68 +171,70 @@ 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 ${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
|
||||
</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-[14px] leading-[14px]">
|
||||
{index % 2 === 0 && day}
|
||||
<div className={`${getScaleClass(windowWidth)}`}>
|
||||
<div className="min-w-[910px] p-4">
|
||||
<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
|
||||
</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].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 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 */}
|
||||
{/* Legend */}
|
||||
<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].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 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>
|
||||
{/* 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>
|
||||
);
|
||||
|
||||
@ -105,7 +105,7 @@ const UserBadges = ({ visible, onHide }) => {
|
||||
</div>
|
||||
) : badges.length === 0 ? (
|
||||
<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 className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
|
||||
@ -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="flex flex-row justify-between items-center">
|
||||
<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"
|
||||
data-pr-tooltip="Track your progress through the courses, showcase your GitHub contributions, submit projects, and earn badges!" />
|
||||
<Tooltip target=".pi-question-circle" position="left" />
|
||||
<i className="pi pi-question-circle journey-tooltip text-2xl cursor-pointer text-gray-200" />
|
||||
<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." />
|
||||
</div>
|
||||
<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'}`}>
|
||||
{subTask.status}
|
||||
</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>
|
||||
{subTask.status.includes('repository') && !subTask.completed && (
|
||||
<RepoSelector
|
||||
@ -310,11 +316,8 @@ const UserProgress = () => {
|
||||
<div className="mt-2 flex justify-end">
|
||||
<GenericButton
|
||||
icon="pi pi-external-link"
|
||||
label="View Course"
|
||||
onClick={() => router.push(`/course/${task.courseNAddress}`)}
|
||||
tooltip="View Course"
|
||||
tooltipOptions={{
|
||||
position: "top"
|
||||
}}
|
||||
outlined
|
||||
size="small"
|
||||
/>
|
||||
|
||||
@ -103,7 +103,7 @@ const useTrackVideoLesson = ({lessonId, videoDuration, courseId, videoPlayed, pa
|
||||
if (isAdmin) return;
|
||||
|
||||
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();
|
||||
}
|
||||
}, [timeSpent, videoDuration, markLessonAsCompleted, isAdmin]);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user