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

feat: responsiveness of questions

Browse Source
pull/4459/head
Kamran Ahmed 1 year ago
parent 61c3c88fb6
commit 9c75404d0c
6 changed files with 65 additions and 34 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. 20
      src/components/Questions/QuestionCard.tsx
  2. 20
      src/components/Questions/QuestionFinished.tsx
  3. 14
      src/components/Questions/QuestionsList.tsx
  4. 17
      src/components/Questions/QuestionsProgress.tsx
  5. 25
      src/pages/questions/[questionGroupId].astro
  6. 3
      tailwind.config.cjs

20
src/components/Questions/QuestionCard.tsx
Unescape View File

@ -51,9 +51,9 @@ export function QuestionCard(props: QuestionCardProps) {
<> <>
<div <div
ref={questionRef} ref={questionRef}
className={`flex flex-grow flex-col items-center justify-center py-8`} className={`flex flex-grow flex-col items-center justify-center py-5 sm:py-8`}
> >
<div className="text-gray-400"> <div className="hidden text-gray-400 sm:block">
{question.topics?.map((topic, counter) => { {question.topics?.map((topic, counter) => {
const totalTopics = question.topics?.length || 0; const totalTopics = question.topics?.length || 0;
@ -68,8 +68,8 @@ export function QuestionCard(props: QuestionCardProps) {
})} })}
</div> </div>
<div className="mx-auto flex max-w-[550px] flex-1 items-center justify-center py-8"> <div className="mx-auto flex max-w-[550px] flex-1 items-center justify-center py-3 sm:py-8">
<p className="text-3xl font-semibold leading-normal text-black"> <p className="px-4 text-xl font-semibold !leading-snug text-black sm:text-3xl">
{question.question} {question.question}
</p> </p>
</div> </div>
@ -79,7 +79,7 @@ export function QuestionCard(props: QuestionCardProps) {
onClick={() => { onClick={() => {
setIsAnswerVisible(true); setIsAnswerVisible(true);
}} }}
className="cursor-pointer text-gray-500 underline underline-offset-4 transition-colors hover:text-black" className="cursor-pointer text-sm text-gray-500 underline underline-offset-4 transition-colors hover:text-black sm:text-base"
> >
Click to Reveal the Answer Click to Reveal the Answer
</button> </button>
@ -88,13 +88,13 @@ export function QuestionCard(props: QuestionCardProps) {
<div <div
ref={answerRef} ref={answerRef}
className={`absolute left-0 right-0 flex flex-col items-center justify-center rounded-[7px] bg-neutral-100 py-8 text-xl leading-normal text-black transition-all duration-300 ${ className={`absolute left-0 right-0 flex flex-col items-center justify-center rounded-[7px] bg-neutral-100 py-4 text-sm leading-normal text-black transition-all duration-300 sm:py-8 sm:text-xl ${
isAnswerVisible ? 'top-0 min-h-[398px]' : 'top-full' isAnswerVisible ? 'top-0 min-h-[248px] sm:min-h-[398px]' : 'top-full'
}`} }`}
> >
{!question.isLongAnswer && ( {!question.isLongAnswer && (
<div <div
className={`mx-auto flex max-w-[600px] flex-grow flex-col items-center justify-center py-0 px-5 text-center text-xl leading-normal`} className={`mx-auto flex max-w-[600px] flex-grow flex-col items-center justify-center py-0 px-5 text-center text-base leading-normal sm:text-xl`}
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
__html: markdownToHtml(question.answer, false), __html: markdownToHtml(question.answer, false),
}} }}
@ -103,7 +103,7 @@ export function QuestionCard(props: QuestionCardProps) {
{question.isLongAnswer && ( {question.isLongAnswer && (
<div <div
className={`qa-answer prose prose-sm prose-quoteless mx-auto flex w-full max-w-[600px] flex-grow flex-col items-start justify-center py-0 px-5 text-left text-lg prose-h1:mb-2.5 prose-h1:mt-7 prose-h2:mb-3 prose-h2:mt-0 prose-h3:mb-[5px] prose-h3:mt-[10px] prose-p:mb-4 prose-p:mt-0 prose-blockquote:font-normal prose-blockquote:not-italic prose-blockquote:text-gray-700 prose-pre:w-full prose-pre:!mb-6 prose-li:m-0 prose-li:mb-0.5`} className={`qa-answer prose prose-sm prose-quoteless mx-auto flex w-full max-w-[600px] flex-grow flex-col items-start justify-center py-0 px-4 text-left text-sm prose-h1:mb-2.5 prose-h1:mt-7 prose-h2:mb-3 prose-h2:mt-0 prose-h3:mb-[5px] prose-h3:mt-[10px] prose-p:mb-2 prose-p:mt-0 prose-blockquote:font-normal prose-blockquote:not-italic prose-blockquote:text-gray-700 prose-pre:!mb-6 prose-pre:w-full prose-ul:my-2 prose-li:m-0 prose-li:mb-0.5 sm:px-5 sm:text-lg sm:prose-p:mb-4`}
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
__html: markdownToHtml(question.answer, false), __html: markdownToHtml(question.answer, false),
}} }}
@ -114,7 +114,7 @@ export function QuestionCard(props: QuestionCardProps) {
onClick={() => { onClick={() => {
setIsAnswerVisible(false); setIsAnswerVisible(false);
}} }}
className="cursor-pointer text-base text-gray-500 underline underline-offset-4 transition-colors hover:text-black" className="cursor-pointer text-sm text-gray-500 underline underline-offset-4 transition-colors hover:text-black sm:text-base"
> >
Hide the Answer Hide the Answer
</button> </button>

20
src/components/Questions/QuestionFinished.tsx
Unescape View File

@ -23,7 +23,7 @@ function ProgressStatButton(props: ProgressStatButtonProps) {
<button <button
disabled={isDisabled} disabled={isDisabled}
onClick={onClick} onClick={onClick}
className="group relative flex flex-1 items-center overflow-hidden rounded-xl border border-gray-300 bg-white py-3 px-4 text-black disabled:pointer-events-none disabled:opacity-50 hover:border-black transition-colors" className="group relative text-sm sm:text-base flex flex-1 items-center overflow-hidden rounded-md sm:rounded-xl border border-gray-300 bg-white py-2 px-2 sm:py-3 sm:px-4 text-black transition-colors hover:border-black disabled:pointer-events-none disabled:opacity-50"
> >
{icon} {icon}
<span className="flex flex-grow justify-between"> <span className="flex flex-grow justify-between">
@ -51,16 +51,18 @@ export function QuestionFinished(props: QuestionFinishedProps) {
props; props;
return ( return (
<div className="relative flex flex-grow flex-col items-center justify-center"> <div className="relative flex flex-grow flex-col items-center justify-center px-4 sm:px-0">
<PartyPopper className="mb-4 h-24 w-24 text-gray-300" /> <PartyPopper className="mb-4 mt-10 h-14 w-14 text-gray-300 sm:mt-0 sm:h-24 sm:w-24" />
<h1 className="text-2xl font-semibold text-gray-700"> <h1 className="text-lg font-semibold text-gray-700 sm:text-2xl">
Questions Finished Questions Finished
</h1> </h1>
<p className="mt-2 text-gray-500"> <p className="mt-0 text-sm text-gray-500 sm:mt-2 sm:text-base">
Click below revisit specific or all questions Click below revisit{' '}
<span className="hidden sm:inline">specific or all questions</span>{' '}
<span className="inline sm:hidden">questions</span>
</p> </p>
<div className="mt-5 mb-5 flex w-full flex-col gap-3 px-2 sm:flex-row sm:px-16"> <div className="mt-5 mb-5 flex w-full flex-col gap-1.5 sm:gap-3 px-2 sm:flex-row sm:px-16">
<ProgressStatButton <ProgressStatButton
icon={<ThumbsUp className="mr-1 h-4" />} icon={<ThumbsUp className="mr-1 h-4" />}
label="Knew" label="Knew"
@ -83,10 +85,10 @@ export function QuestionFinished(props: QuestionFinishedProps) {
onClick={() => onReset('skip')} onClick={() => onReset('skip')}
/> />
</div> </div>
<div className="mt-2 text-sm"> <div className="mt-2 mb-4 sm:mb-0 text-sm">
<button <button
onClick={() => onReset('reset')} onClick={() => onReset('reset')}
className="flex items-center gap-0.5 text-red-700 hover:text-black" className="flex items-center gap-0.5 text-red-700 hover:text-black text-sm sm:text-base"
> >
<RefreshCcw className="mr-1 h-4" /> <RefreshCcw className="mr-1 h-4" />
Restart Asking Restart Asking

14
src/components/Questions/QuestionsList.tsx
Unescape View File

@ -198,7 +198,7 @@ export function QuestionsList(props: QuestionsListProps) {
const hasFinished = !isLoading && hasProgress && !currQuestion; const hasFinished = !isLoading && hasProgress && !currQuestion;
return ( return (
<div className="mb-40 gap-3 text-center"> <div className="mb-0 sm:mb-40 gap-3 text-center">
<QuestionsProgress <QuestionsProgress
knowCount={knowCount} knowCount={knowCount}
didNotKnowCount={dontKnowCount} didNotKnowCount={dontKnowCount}
@ -223,7 +223,7 @@ export function QuestionsList(props: QuestionsListProps) {
<div <div
ref={containerRef} ref={containerRef}
className="relative mb-4 flex min-h-[400px] w-full overflow-hidden rounded-lg border border-gray-300 bg-white" className="relative mb-4 flex min-h-[250px] w-full overflow-hidden rounded-lg border border-gray-300 bg-white sm:min-h-[400px]"
> >
{hasFinished && ( {hasFinished && (
<QuestionFinished <QuestionFinished
@ -241,16 +241,18 @@ export function QuestionsList(props: QuestionsListProps) {
</div> </div>
<div <div
className={`flex flex-col gap-3 transition-opacity duration-300 sm:flex-row ${ className={`flex flex-col gap-1 sm:gap-3 transition-opacity duration-300 sm:flex-row ${
hasFinished ? 'opacity-0' : 'opacity-100' hasFinished ? 'opacity-0' : 'opacity-100'
}`} }`}
> >
<button <button
disabled={isLoading || !currQuestion} disabled={isLoading || !currQuestion}
onClick={(e) => { onClick={(e) => {
e.stopPropagation();
e.preventDefault()
updateQuestionStatus('know', currQuestion.id).finally(() => null); updateQuestionStatus('know', currQuestion.id).finally(() => null);
}} }}
className="flex flex-1 items-center rounded-xl border border-gray-300 bg-white py-3 px-4 text-black transition-colors hover:border-black hover:bg-black hover:text-white disabled:pointer-events-none disabled:opacity-50" className="flex flex-1 items-center rounded-md sm:rounded-lg border border-gray-300 bg-white text-sm sm:text-base py-2 px-2 sm:py-3 sm:px-4 text-black transition-colors hover:border-black hover:bg-black hover:text-white disabled:pointer-events-none disabled:opacity-50"
> >
<CheckCircle className="mr-1 h-4 text-current" /> <CheckCircle className="mr-1 h-4 text-current" />
Already Know that Already Know that
@ -262,7 +264,7 @@ export function QuestionsList(props: QuestionsListProps) {
); );
}} }}
disabled={isLoading || !currQuestion} disabled={isLoading || !currQuestion}
className="flex flex-1 items-center rounded-xl border border-gray-300 bg-white py-3 px-4 text-black transition-colors hover:border-black hover:bg-black hover:text-white disabled:pointer-events-none disabled:opacity-50" className="flex flex-1 items-center rounded-md sm:rounded-lg border border-gray-300 bg-white text-sm sm:text-base py-2 px-2 sm:py-3 sm:px-4 text-black transition-colors hover:border-black hover:bg-black hover:text-white disabled:pointer-events-none disabled:opacity-50"
> >
<Sparkles className="mr-1 h-4 text-current" /> <Sparkles className="mr-1 h-4 text-current" />
Didn't Know that Didn't Know that
@ -273,7 +275,7 @@ export function QuestionsList(props: QuestionsListProps) {
}} }}
disabled={isLoading || !currQuestion} disabled={isLoading || !currQuestion}
data-next-question="skip" data-next-question="skip"
className="flex flex-1 items-center rounded-xl border border-red-600 p-3 text-red-600 hover:bg-red-600 hover:text-white disabled:pointer-events-none disabled:opacity-50" className="flex flex-1 items-center rounded-md sm:rounded-lg border border-red-600 text-sm sm:text-base py-2 px-2 sm:py-3 sm:px-4 text-red-600 hover:bg-red-600 hover:text-white disabled:pointer-events-none disabled:opacity-50"
> >
<SkipForward className="mr-1 h-4" /> <SkipForward className="mr-1 h-4" />
Skip Question Skip Question

17
src/components/Questions/QuestionsProgress.tsx
Unescape View File

@ -26,11 +26,11 @@ export function QuestionsProgress(props: QuestionsProgressProps) {
const donePercentage = (totalSolved / totalCount) * 100; const donePercentage = (totalSolved / totalCount) * 100;
return ( return (
<div className="mb-5 overflow-hidden rounded-lg border border-gray-300 bg-white p-6"> <div className="mb-3 sm:mb-5 overflow-hidden rounded-lg border border-gray-300 bg-white p-4 sm:p-6">
<div className="mb-3 flex items-center text-gray-600"> <div className="mb-3 flex items-center text-gray-600">
<div className="relative w-full flex-1 rounded-xl bg-gray-200 p-1"> <div className="relative w-full flex-1 rounded-xl bg-gray-200 p-1">
<div <div
className="absolute bottom-0 left-0 top-0 rounded-xl bg-slate-800 transition-[width] duration-400" className="duration-400 absolute bottom-0 left-0 top-0 rounded-xl bg-slate-800 transition-[width]"
style={{ style={{
width: `${donePercentage}%`, width: `${donePercentage}%`,
}} }}
@ -46,7 +46,9 @@ export function QuestionsProgress(props: QuestionsProgressProps) {
<CheckCircle className="mr-1 h-4" /> <CheckCircle className="mr-1 h-4" />
<span>Knew</span> <span>Knew</span>
<span className="ml-2 rounded-md bg-gray-200/80 px-1.5 font-medium text-black"> <span className="ml-2 rounded-md bg-gray-200/80 px-1.5 font-medium text-black">
<span className='tabular-nums'>{knowCount}</span> Questions <span className="tabular-nums">{knowCount}</span>{' '}
<span className="hidden lg:inline">Questions</span>
<span className="inline sm:hidden">Questions</span>
</span> </span>
</span> </span>
@ -54,7 +56,9 @@ export function QuestionsProgress(props: QuestionsProgressProps) {
<Sparkles className="mr-1 h-4" /> <Sparkles className="mr-1 h-4" />
<span>Learnt</span> <span>Learnt</span>
<span className="ml-2 rounded-md bg-gray-200/80 px-1.5 font-medium text-black"> <span className="ml-2 rounded-md bg-gray-200/80 px-1.5 font-medium text-black">
<span className='tabular-nums'>{didNotKnowCount}</span> Questions <span className="tabular-nums">{didNotKnowCount}</span>{' '}
<span className="hidden lg:inline">Questions</span>
<span className="inline sm:hidden">Questions</span>
</span> </span>
</span> </span>
@ -62,7 +66,9 @@ export function QuestionsProgress(props: QuestionsProgressProps) {
<SkipForward className="mr-1 h-4" /> <SkipForward className="mr-1 h-4" />
<span>Skipped</span> <span>Skipped</span>
<span className="ml-2 rounded-md bg-gray-200/80 px-1.5 font-medium text-black"> <span className="ml-2 rounded-md bg-gray-200/80 px-1.5 font-medium text-black">
<span className='tabular-nums'>{skippedCount}</span> Questions <span className="tabular-nums">{skippedCount}</span>{' '}
<span className="hidden lg:inline">Questions</span>
<span className="inline sm:hidden">Questions</span>
</span> </span>
</span> </span>
@ -73,6 +79,7 @@ export function QuestionsProgress(props: QuestionsProgressProps) {
> >
<RotateCcw className="mr-1 h-4" /> <RotateCcw className="mr-1 h-4" />
Reset Reset
<span className='inline lg:hidden'>Progress</span>
</button> </button>
</div> </div>

25
src/pages/questions/[questionGroupId].astro
Unescape View File

@ -39,16 +39,33 @@ const { frontmatter } = questionGroup;
> >
<div class='flex bg-gray-50 pb-14 pt-4 sm:pb-16 sm:pt-8'> <div class='flex bg-gray-50 pb-14 pt-4 sm:pb-16 sm:pt-8'>
<div class='container !max-w-[700px]'> <div class='container !max-w-[700px]'>
<div class='mb-5 mt-2 text-center sm:mb-10 sm:mt-8'> <div class='mb-3 sm:mb-5 mt-2 text-left sm:text-center sm:mt-8'>
<h1 class='my-2 text-3xl font-bold sm:my-5 sm:text-5xl'> <div class='mb-2 md:mb-6'>
<a
href='/questions'
class='group rounded-md text-sm font-medium text-gray-400 hover:text-gray-800 transition-colors duration-200'
>
<span
class='inline-block transform transition-transform group-hover:translate-x-[-2px]'
>
&larr;
</span>
Back to all Questions
</a>
</div>
<h1 class='mb-1 text-2xl font-bold sm:mb-5 sm:text-5xl'>
{frontmatter.title} {frontmatter.title}
</h1> </h1>
<p class='text-xl text-gray-500'> <p class='hidden sm:block text-xl text-gray-500'>
{frontmatter.description} {frontmatter.description}
</p> </p>
</div> </div>
<QuestionsList groupId={questionGroup.id} questions={questionGroup.questions} client:load /> <QuestionsList
groupId={questionGroup.id}
questions={questionGroup.questions}
client:load
/>
</div> </div>
</div> </div>

3
tailwind.config.cjs
Unescape View File

@ -1,6 +1,9 @@
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
module.exports = { module.exports = {
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue,svg}'], content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue,svg}'],
future: {
hoverOnlyWhenSupported: true,
},
theme: { theme: {
extend: { extend: {
typography: { typography: {

Write Preview
Loading…
Cancel
Save