From 9c75404d0ce06f01d01a387477601ede824dcbaf Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Sun, 3 Sep 2023 23:12:27 +0100
Subject: [PATCH] feat: responsiveness of questions

---
 src/components/Questions/QuestionCard.tsx     | 20 +++++++--------
 src/components/Questions/QuestionFinished.tsx | 20 ++++++++-------
 src/components/Questions/QuestionsList.tsx    | 14 ++++++-----
 .../Questions/QuestionsProgress.tsx           | 17 +++++++++----
 src/pages/questions/[questionGroupId].astro   | 25 ++++++++++++++++---
 tailwind.config.cjs                           |  3 +++
 6 files changed, 65 insertions(+), 34 deletions(-)

diff --git a/src/components/Questions/QuestionCard.tsx b/src/components/Questions/QuestionCard.tsx
index 253178c93..d42ab3120 100644
--- a/src/components/Questions/QuestionCard.tsx
+++ b/src/components/Questions/QuestionCard.tsx
@@ -51,9 +51,9 @@ export function QuestionCard(props: QuestionCardProps) {
     <>
       <div
         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) => {
             const totalTopics = question.topics?.length || 0;
 
@@ -68,8 +68,8 @@ export function QuestionCard(props: QuestionCardProps) {
           })}
         </div>
 
-        <div className="mx-auto flex max-w-[550px] flex-1 items-center justify-center py-8">
-          <p className="text-3xl font-semibold leading-normal text-black">
+        <div className="mx-auto flex max-w-[550px] flex-1 items-center justify-center py-3 sm:py-8">
+          <p className="px-4 text-xl font-semibold !leading-snug text-black sm:text-3xl">
             {question.question}
           </p>
         </div>
@@ -79,7 +79,7 @@ export function QuestionCard(props: QuestionCardProps) {
             onClick={() => {
               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
           </button>
@@ -88,13 +88,13 @@ export function QuestionCard(props: QuestionCardProps) {
 
       <div
         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 ${
-          isAnswerVisible ? 'top-0 min-h-[398px]' : 'top-full'
+        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-[248px] sm:min-h-[398px]' : 'top-full'
         }`}
       >
         {!question.isLongAnswer && (
           <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={{
               __html: markdownToHtml(question.answer, false),
             }}
@@ -103,7 +103,7 @@ export function QuestionCard(props: QuestionCardProps) {
 
         {question.isLongAnswer && (
           <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={{
               __html: markdownToHtml(question.answer, false),
             }}
@@ -114,7 +114,7 @@ export function QuestionCard(props: QuestionCardProps) {
             onClick={() => {
               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
           </button>
diff --git a/src/components/Questions/QuestionFinished.tsx b/src/components/Questions/QuestionFinished.tsx
index 10ab35e81..445e0d5f4 100644
--- a/src/components/Questions/QuestionFinished.tsx
+++ b/src/components/Questions/QuestionFinished.tsx
@@ -23,7 +23,7 @@ function ProgressStatButton(props: ProgressStatButtonProps) {
     <button
       disabled={isDisabled}
       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}
       <span className="flex flex-grow justify-between">
@@ -51,16 +51,18 @@ export function QuestionFinished(props: QuestionFinishedProps) {
     props;
 
   return (
-    <div className="relative flex flex-grow flex-col items-center justify-center">
-      <PartyPopper className="mb-4 h-24 w-24 text-gray-300" />
-      <h1 className="text-2xl font-semibold text-gray-700">
+    <div className="relative flex flex-grow flex-col items-center justify-center px-4 sm:px-0">
+      <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-lg font-semibold text-gray-700 sm:text-2xl">
         Questions Finished
       </h1>
-      <p className="mt-2 text-gray-500">
-        Click below revisit specific or all questions
+      <p className="mt-0 text-sm text-gray-500 sm:mt-2 sm:text-base">
+        Click below revisit{' '}
+        <span className="hidden sm:inline">specific or all questions</span>{' '}
+        <span className="inline sm:hidden">questions</span>
       </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
           icon={<ThumbsUp className="mr-1 h-4" />}
           label="Knew"
@@ -83,10 +85,10 @@ export function QuestionFinished(props: QuestionFinishedProps) {
           onClick={() => onReset('skip')}
         />
       </div>
-      <div className="mt-2 text-sm">
+      <div className="mt-2 mb-4 sm:mb-0 text-sm">
         <button
           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" />
           Restart Asking
diff --git a/src/components/Questions/QuestionsList.tsx b/src/components/Questions/QuestionsList.tsx
index 69c3ab101..1585dc42f 100644
--- a/src/components/Questions/QuestionsList.tsx
+++ b/src/components/Questions/QuestionsList.tsx
@@ -198,7 +198,7 @@ export function QuestionsList(props: QuestionsListProps) {
   const hasFinished = !isLoading && hasProgress && !currQuestion;
 
   return (
-    <div className="mb-40 gap-3 text-center">
+    <div className="mb-0 sm:mb-40 gap-3 text-center">
       <QuestionsProgress
         knowCount={knowCount}
         didNotKnowCount={dontKnowCount}
@@ -223,7 +223,7 @@ export function QuestionsList(props: QuestionsListProps) {
 
       <div
         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 && (
           <QuestionFinished
@@ -241,16 +241,18 @@ export function QuestionsList(props: QuestionsListProps) {
       </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'
         }`}
       >
         <button
           disabled={isLoading || !currQuestion}
           onClick={(e) => {
+            e.stopPropagation();
+            e.preventDefault()
             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" />
           Already Know that
@@ -262,7 +264,7 @@ export function QuestionsList(props: QuestionsListProps) {
             );
           }}
           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" />
           Didn't Know that
@@ -273,7 +275,7 @@ export function QuestionsList(props: QuestionsListProps) {
           }}
           disabled={isLoading || !currQuestion}
           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" />
           Skip Question
diff --git a/src/components/Questions/QuestionsProgress.tsx b/src/components/Questions/QuestionsProgress.tsx
index b98bef71f..a42f1b1d7 100644
--- a/src/components/Questions/QuestionsProgress.tsx
+++ b/src/components/Questions/QuestionsProgress.tsx
@@ -26,11 +26,11 @@ export function QuestionsProgress(props: QuestionsProgressProps) {
   const donePercentage = (totalSolved / totalCount) * 100;
 
   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="relative w-full flex-1 rounded-xl bg-gray-200 p-1">
           <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={{
               width: `${donePercentage}%`,
             }}
@@ -46,7 +46,9 @@ export function QuestionsProgress(props: QuestionsProgressProps) {
           <CheckCircle className="mr-1 h-4" />
           <span>Knew</span>
           <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>
 
@@ -54,7 +56,9 @@ export function QuestionsProgress(props: QuestionsProgressProps) {
           <Sparkles className="mr-1 h-4" />
           <span>Learnt</span>
           <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>
 
@@ -62,7 +66,9 @@ export function QuestionsProgress(props: QuestionsProgressProps) {
           <SkipForward className="mr-1 h-4" />
           <span>Skipped</span>
           <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>
 
@@ -73,6 +79,7 @@ export function QuestionsProgress(props: QuestionsProgressProps) {
         >
           <RotateCcw className="mr-1 h-4" />
           Reset
+          <span className='inline lg:hidden'>Progress</span>
         </button>
       </div>
 
diff --git a/src/pages/questions/[questionGroupId].astro b/src/pages/questions/[questionGroupId].astro
index ba5ba9612..db537cf85 100644
--- a/src/pages/questions/[questionGroupId].astro
+++ b/src/pages/questions/[questionGroupId].astro
@@ -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='container !max-w-[700px]'>
-      <div class='mb-5 mt-2 text-center sm:mb-10 sm:mt-8'>
-        <h1 class='my-2 text-3xl font-bold sm:my-5 sm:text-5xl'>
+      <div class='mb-3 sm:mb-5 mt-2 text-left sm:text-center sm:mt-8'>
+        <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}
         </h1>
-        <p class='text-xl text-gray-500'>
+        <p class='hidden sm:block text-xl text-gray-500'>
           {frontmatter.description}
         </p>
       </div>
 
-      <QuestionsList groupId={questionGroup.id} questions={questionGroup.questions} client:load />
+      <QuestionsList
+        groupId={questionGroup.id}
+        questions={questionGroup.questions}
+        client:load
+      />
     </div>
   </div>
 
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 97d265274..9ed86bcaa 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -1,6 +1,9 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue,svg}'],
+  future: {
+    hoverOnlyWhenSupported: true,
+  },
   theme: {
     extend: {
       typography: {