github
/
developer-roadmap
mirror of https://github.com/kamranahmedse/developer-roadmap.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

chore: current user header

Browse Source
chore/update-progress
Arik Chakma 1 year ago
parent 081e16eb9b
commit ff96644751
1 changed files with 86 additions and 74 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 160
      src/components/TeamProgress/MemberProgressModal.tsx

160
src/components/TeamProgress/MemberProgressModal.tsx
Unescape View File

@ -18,6 +18,7 @@ import { useAuth } from '../../hooks/use-auth';
import { pageProgressMessage } from '../../stores/page'; import { pageProgressMessage } from '../../stores/page';
import { ProgressHint } from './ProgressHint'; import { ProgressHint } from './ProgressHint';
import QuestionIcon from '../../icons/question.svg'; import QuestionIcon from '../../icons/question.svg';
import { InfoIcon } from '../ReactIcons/InfoIcon';
export type ProgressMapProps = { export type ProgressMapProps = {
member: TeamMember; member: TeamMember;
@ -278,83 +279,94 @@ export function MemberProgressModal(props: ProgressMapProps) {
/> />
)} )}
<div className="p-4"> <div className="p-4">
<div className="mb-5 mt-0 text-left md:mt-4 md:text-center"> {isCurrentUser ? (
<h2 className={'mb-1 text-lg font-bold md:text-2xl'}> <div className="mb-5 mt-0 text-left md:mt-4 md:text-center">
{member.name}'s Progress <h2 className={'mb-1 text-lg font-bold md:text-2xl'}>
</h2> Your Progress
<p </h2>
className={ <p className={'text-gray-500'}>
'hidden text-xs text-gray-500 sm:text-sm md:block md:text-base' You can{' '}
} <button
> className="inline-flex items-center text-blue-600 underline"
You are looking at {member.name}'s progress.{' '} onClick={() => {
<a setShowProgressHint(true);
target={'_blank'} }}
href={`/${resourceId}?t=${teamId}`} >
className="text-blue-600 underline" follow these instructions
> </button>{' '}
View your progress to update your progress below.
</a> </p>
.
</p>
<p className={'block text-gray-500 md:hidden'}>
View your progress&nbsp;
<a
target={'_blank'}
href={`/${resourceId}?t=${teamId}`}
className="text-blue-600 underline"
>
on the roadmap page.
</a>
</p>
</div>
<div class="-mx-4 mb-3 flex items-center justify-between border-b border-t py-2 text-sm">
<div className="flex items-center pl-4 sm:hidden">
<span>
<span>{memberDone}</span> of <span>{memberTotal}</span> done
</span>
</div>
<div className="hidden items-center pl-4 sm:flex">
<span class="mr-2.5 block rounded-sm bg-yellow-200 px-1 py-0.5 text-xs font-medium uppercase text-yellow-900">
<span>{progressPercentage}</span>% Done
</span>
<span>
<span>{memberDone}</span> completed
</span>
<span class="mx-1.5 text-gray-400">·</span>
<span>
<span data-progress-learning="">{memberLearning}</span> in
progress
</span>
{memberSkipped > 0 && (
<>
<span class="mx-1.5 text-gray-400">·</span>
<span>
<span data-progress-skipped="">{memberSkipped}</span>{' '}
skipped
</span>
</>
)}
<span class="mx-1.5 text-gray-400">·</span>
<span>
<span data-progress-total="">{memberTotal}</span> Total
</span>
</div> </div>
{isCurrentUser && ( ) : (
<button <div className="mb-5 mt-0 text-left md:mt-4 md:text-center">
onClick={() => { <h2 className={'mb-1 text-lg font-bold md:text-2xl'}>
setShowProgressHint(true); {member.name}'s Progress
}} </h2>
class="mr-4 flex items-center gap-1 text-sm font-medium text-black opacity-60 transition-opacity hover:opacity-100" <p
className={
'hidden text-xs text-gray-500 sm:text-sm md:block md:text-base'
}
> >
<img src={QuestionIcon} className="h-4 w-4" /> You are looking at {member.name}'s progress.{' '}
Track Progress <a
</button> target={'_blank'}
href={`/${resourceId}?t=${teamId}`}
className="text-blue-600 underline"
>
View your progress
</a>
.
</p>
<p className={'block text-gray-500 md:hidden'}>
View your progress&nbsp;
<a
target={'_blank'}
href={`/${resourceId}?t=${teamId}`}
className="text-blue-600 underline"
>
on the roadmap page.
</a>
</p>
</div>
)}
<p class="-mx-4 mb-3 flex items-center justify-start border-b border-t px-4 py-2 text-sm sm:hidden">
<span class="mr-2.5 block rounded-sm bg-yellow-200 px-1 py-0.5 text-xs font-medium uppercase text-yellow-900">
<span>{progressPercentage}</span>% Done
</span>
<span>
<span>{memberDone}</span> of <span>{memberTotal}</span> done
</span>
</p>
<p class="-mx-4 mb-3 hidden items-center justify-center border-b border-t py-2 text-sm sm:flex">
<span class="mr-2.5 block rounded-sm bg-yellow-200 px-1 py-0.5 text-xs font-medium uppercase text-yellow-900">
<span>{progressPercentage}</span>% Done
</span>
<span>
<span>{memberDone}</span> completed
</span>
<span class="mx-1.5 text-gray-400">·</span>
<span>
<span data-progress-learning="">{memberLearning}</span> in
progress
</span>
{memberSkipped > 0 && (
<>
<span class="mx-1.5 text-gray-400">·</span>
<span>
<span data-progress-skipped="">{memberSkipped}</span>{' '}
skipped
</span>
</>
)} )}
</div>
<span class="mx-1.5 text-gray-400">·</span>
<span>
<span data-progress-total="">{memberTotal}</span> Total
</span>
</p>
</div> </div>
<div ref={containerEl} className="px-4 pb-2"></div> <div ref={containerEl} className="px-4 pb-2"></div>

Write Preview
Loading…
Cancel
Save