feat(syllabus): make is responsive to mobile and tablet

src/assets/base.css

@@ -194,6 +194,27 @@ html {
     margin-bottom: 1rem;
     margin-bottom: 1rem;
     font-weight: 600;
-    nt-weight: 600;
+    font-weight: 600;
+  }
+
+  @media screen and (max-width: 1280px) {
+    h1 {
+      font-size: 1.75rem;
+      margin-bottom: 1rem;
+      font-weight: 600;
+    }
+    h2 {
+      font-size: 1.5rem;
+      margin-top: 1.5rem;
+      margin-bottom: 1rem;
+      font-weight: 600;
+    }
+
+    h3 {
+      font-size: 1.25rem;
+      margin-top: 1.5rem;
+      margin-bottom: 1rem;
+      font-weight: 600;
+    }
   }
 }

src/components/ModalWrapper.vue

@@ -33,4 +33,10 @@ const handleModalClose = () => {
 .modal {
   --bulma-modal-content-width: 50%;
 }
+
+@media screen and (max-width: 1024px) {
+  .modal {
+    --bulma-modal-content-width: 90%;
+  }
+}
 </style>

src/components/tutor/CursusInfo.vue

@@ -94,8 +94,8 @@ const appendNewInputFile = () => {
 
 <template>
   <div id="target-1" class="wrapper">
-    <h1 class="title is-4">1 - {{ $t('tutor.firstStep.title') }}</h1>
-    <p class="subtitle is-6">{{ $t('tutor.firstStep.description') }}</p>
+    <h1 class="title is-4 is-size-5-mobile">1 - {{ $t('tutor.firstStep.title') }}</h1>
+    <p class="subtitle is-6 is-size-6-mobile">{{ $t('tutor.firstStep.description') }}</p>
 
     <!-- File Input Section -->
     <div class="is-flex is-flex-direction-column">
@@ -136,12 +136,14 @@ const appendNewInputFile = () => {
     </p>
 
     <!-- Course Description Section -->
-    <h2 class="title is-6 mt-4">
+    <h2 class="title is-6 mt-4 is-size-6-mobile">
       {{ $t('tutor.firstStep.cursusDescriptionTitle') }}
     </h2>
-    <p class="subtitle is-6">{{ $t('tutor.firstStep.cursusDescriptionDescription') }}</p>
+    <p class="subtitle is-6 is-size-6-mobile">
+      {{ $t('tutor.firstStep.cursusDescriptionDescription') }}
+    </p>
 
-    <div class="is-flex is-flex-wrap-wrap is-justify-content-space-between descriptions">
+    <div class="cursus-details">
       <div class="description">
         <label for="cursus-title">{{ $t('tutor.firstStep.cursusTitleLabel') }}</label>
         <input
@@ -248,8 +250,25 @@ const appendNewInputFile = () => {
   pointer-events: none;
 }
 
-.descriptions {
+.cursus-details {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
   gap: 0.5rem;
   margin-bottom: 1rem;
 }
+
+@media screen and (max-width: 768px) {
+  .cursus-details {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+  }
+
+  .description {
+    width: 100%;
+    max-height: none;
+  }
+}
 </style>

src/components/tutor/SecondStep.vue

@@ -18,7 +18,7 @@ defineProps<{
 <template>
   <div id="target-3" class="wrapper" :class="{ disabled: disabled, visible: visible }">
     <div class="sources-wrapper" v-if="sources && sources.length">
-      <h1 data-testId="documents-list-title" class="title is-4">
+      <h1 data-testId="documents-list-title" class="title is-4 is-size-5-mobile mt-4">
         3 - {{ $t('tutor.secondStep.title') }}
       </h1>
       <p class="subtitle is-6">{{ $t('tutor.secondStep.description') }}</p>

src/components/tutor/StatusModal.vue

@@ -0,0 +1,56 @@
+<template>
+  <ModalWrapper v-if="isLoading" :isOpen="isLoading" :onClose="stopAction">
+    <div v-if="shouldRetryAction" class="box">
+      <div class="is-flex is-flex-direction-column is-align-items-center is-justify-content-center">
+        <h1 class="title is-size-4 is-size-5-mobile has-text-centered">
+          <span class="mr-4"><ErrorDocumentIcon /></span>
+          {{ $t('tutor.retry.title') }}
+        </h1>
+
+        <p class="loader-text is-title is-size-4 is-size-5-mobile mx-6 px-6">
+          {{ $t('tutor.retry.description') }}
+        </p>
+        <div class="is-flex is-gap-4">
+          <button data-testid="tutor-back-button" class="button mt-6" @click="action">
+            {{ $t('tutor.retry.button') }}
+          </button>
+          <button data-testid="tutor-back-button" class="button mt-6" @click="stopAction()">
+            {{ $t('tutor.retry.stop') }}
+          </button>
+        </div>
+      </div>
+    </div>
+    <div v-else class="box loading-modal has-text-centered">
+      <h1 class="title is-size-4 is-size-5-mobile">
+        {{ title }}
+      </h1>
+      <progress class="progress is-large is-primary mb-6" max="100">60%</progress>
+      <p class="is-title is-size-5 is-size-6-mobile">{{ $t('tutor.loading.wait') }}</p>
+      <p class="is-title is-size-5 is-size-6-mobile">
+        {{ description }}
+      </p>
+    </div>
+  </ModalWrapper>
+</template>
+
+<script setup lang="ts">
+import ModalWrapper from '@/components/ModalWrapper.vue';
+import ErrorDocumentIcon from '@/components/icons/ErrorDocumentIcon.vue';
+
+defineProps<{
+  isLoading: boolean;
+  shouldRetryAction: boolean;
+  action: () => Promise<void>;
+  stopAction: () => void;
+  title: string;
+  description: string;
+}>();
+</script>
+
+<style scoped>
+.loading-modal {
+  padding: 2rem;
+  width: 100%;
+  height: 100%;
+}
+</style>

src/components/tutor/StepsIndicator.vue

@@ -10,7 +10,7 @@ const props = defineProps<{
 const stepsLengthArray = Array.from({ length: props.stepsLength }, (_, i) => i + 1);
 </script>
 <template>
-  <div class="is-flex">
+  <div class="wrapper">
     <a
       href="#"
       class="step-indicator"
@@ -24,6 +24,16 @@ const stepsLengthArray = Array.from({ length: props.stepsLength }, (_, i) => i +
   </div>
 </template>
 <style scoped>
+.wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 2rem;
+  background-color: var(--neutral-10);
+  padding: 0.5rem;
+  border-radius: 1rem;
+}
+
 .step-indicator {
   margin: 0 0.5rem;
   padding: 0 0.5rem;
@@ -45,10 +55,10 @@ const stepsLengthArray = Array.from({ length: props.stepsLength }, (_, i) => i +
   color: var(--neutral-50);
 }
 
-.is-flex {
-  gap: 5rem;
-  background-color: var(--neutral-10);
-  padding: 0.5rem;
-  border-radius: 1rem;
+@media screen and (max-width: 768px) {
+  .wrapper {
+    gap: 0.5rem;
+    padding: 0.2rem;
+  }
 }
 </style>

src/components/tutor/SummariesStep.vue

@@ -56,7 +56,7 @@ const handleTextEdit = (event, index) => {
 </script>
 <template>
   <div id="target-2" class="summaries-section" :class="{ disabled: disabled }">
-    <h2 data-testid="tutor-summaries-title" class="title is-4 mt-4">
+    <h2 data-testid="tutor-summaries-title" class="title is-4 is-size-5-mobile mt-4">
       2 - {{ $t('tutor.summaries.title') }}
     </h2>
     <p class="subtitle is-6">
@@ -66,20 +66,9 @@ const handleTextEdit = (event, index) => {
       <h2 class="title is-6 mt-4">
         {{ Object.values(files)[index]?.name || $t('tutor.summaries.noFileName') }}
       </h2>
-      <div class="is-flex">
-        <p
-          :id="`summary_${index}`"
-          class="input summary"
-          :contenteditable="editableParagraphs[index]"
-          @keydown="preventLineBreaks"
-          @paste="sanitizePaste"
-          @blur="handleTextEdit($event, index)"
-          :class="{ validated: !editableParagraphs[index] }"
-        >
-          {{ summary }}
-        </p>
-        <div class="mt-2 ml-2">
-          <button class="button is-white mt-2" @click="toggleEdit(index, true)">
+      <div class="is-flex is-flex-wrap-wrap">
+        <div class="mt-2 ml-auto is-flex is-align-items-center">
+          <button class="button is-white" @click="toggleEdit(index, true)">
             <span class="icon is-small">
               <EditIcon />
             </span>
@@ -97,6 +86,17 @@ const handleTextEdit = (event, index) => {
             <span>{{ editableParagraphs[index] ? $t('validate') : $t('validated') }}</span>
           </button>
         </div>
+        <p
+          :id="`summary_${index}`"
+          class="input summary"
+          :contenteditable="editableParagraphs[index]"
+          @keydown="preventLineBreaks"
+          @paste="sanitizePaste"
+          @blur="handleTextEdit($event, index)"
+          :class="{ validated: !editableParagraphs[index] }"
+        >
+          {{ summary }}
+        </p>
       </div>
     </div>
     <div class="is-flex is-justify-content-end mt-4">

src/components/tutor/ThirdStep.vue

@@ -33,7 +33,9 @@ const handleTextEdit = (event, index) => {
 </script>
 <template>
   <div id="target-4" class="wrapper" :class="{ disabled: disabled }">
-    <h1 data-testid="thirdStepTitle" class="title is-4">4 - {{ $t('tutor.thirdStep.title') }}</h1>
+    <h1 data-testid="thirdStepTitle" class="title is-4 is-size-5-mobile">
+      4 - {{ $t('tutor.thirdStep.title') }}
+    </h1>
     <p class="subtitle is-6">{{ $t('tutor.thirdStep.description') }}</p>
     <!-- syllabus -->
 
@@ -60,25 +62,38 @@ const handleTextEdit = (event, index) => {
 
     <textarea class="textarea" v-if="enableFeedback" v-model="feedback"></textarea>
 
-    <div class="is-flex is-justify-content-end mt-4 pb-6">
-      <button class="button mr-auto" @click="restart">
-        {{ $t('tutor.restartSyllabusCreation') }}
-      </button>
-      <button class="button" @click="toggleFeedback">
+    <div class="actions">
+      <button class="button feedback" @click="toggleFeedback">
         {{
           enableFeedback ? $t('tutor.thirdStep.sendFeedback') : $t('tutor.thirdStep.giveFeedback')
         }}
       </button>
-      <button class="button is-primary ml-2" @click="action()">{{ $t('download') }}</button>
+      <button class="button is-primary" @click="action()">{{ $t('download') }}</button>
+      <button class="button" @click="restart">
+        {{ $t('tutor.restartSyllabusCreation') }}
+      </button>
     </div>
   </div>
 </template>
 
 <style scoped>
+.actions {
+  margin-top: 1rem;
+  display: flex;
+  justify-content: end;
+  padding-bottom: 3rem;
+  gap: 1rem;
+}
+
+.button.feedback {
+  margin-right: auto;
+}
+
 .button > svg {
   height: 1rem;
   padding-right: 1rem;
 }
+
 .wrapper {
   display: flex;
   height: 100%;
@@ -120,4 +135,25 @@ details:not([open]) {
   border: 2px solid var(--primary);
   background-color: var(--neutral-0);
 }
+
+@media screen and (max-width: 1280px) {
+  .actions {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.25rem;
+  }
+  .button.feedback {
+    margin-right: 0;
+  }
+
+  .syllabus {
+    padding: 1rem;
+  }
+
+  .content h2 {
+    font-size: 1.25rem;
+    margin-bottom: 0.75rem;
+    font-weight: 600;
+  }
+}
 </style>

src/router/index.ts

@@ -6,7 +6,7 @@ import Tutor from '@/views/TutorPage.vue';
 import NotFound from '@/views/NotFound.vue';
 import MicroLearning from '@/views/MicroLearning.vue';
 
-const isDevEnvironment = import.meta.env.VITE_ENVIRONMENT === 'dev';
+const isDevEnvironment = (import.meta.env.VITE_ENVIRONMENT || '').trim().includes('dev');
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),