Make responsive

client/src/components/circle/LearningContent.vue

@@ -21,9 +21,9 @@ const block = computed(() => {
   <div>
     <nav
       class="
-        px-8
+        px-4 lg:px-8
         py-4
-        lg:flex lg:justify-between lg:items-center
+        flex justify-between items-center
         border-b border-gray-500
       "
     >
@@ -33,10 +33,10 @@ const block = computed(() => {
         @click="circleStore.closeLearningContent()"
       >
         <it-icon-arrow-left class="-ml-1 mr-1 h-5 w-5"></it-icon-arrow-left>
-        <span class="">zurück zum Circle</span>
+        <span class="hidden lg:inline">zurück zum Circle</span>
       </button>
 
-      <h1 class="text-xl">{{ learningContent.title }}</h1>
+      <h1 class="text-xl hidden lg:block">{{ learningContent.title }}</h1>
 
       <button
         type="button"
@@ -48,7 +48,7 @@ const block = computed(() => {
     </nav>
 
 
-    <div class="mx-auto max-w-5xl px-8 py-4">
+    <div class="mx-auto max-w-5xl px-4 lg:px-8 py-4">
       <p>{{ block.value.description }}</p>
 
       <div v-if="block.type === 'video'">

client/src/components/circle/SelfEvaluation.vue

@@ -31,9 +31,9 @@ function handleContinue() {
   <div>
     <nav
       class="
-        px-8
+        px-4 lg:px-8
         py-4
-        lg:flex lg:justify-between lg:items-center
+        flex justify-between items-center
         border-b border-gray-500
       "
     >
@@ -43,10 +43,10 @@ function handleContinue() {
         @click="circleStore.closeSelfEvaluation()"
       >
         <it-icon-arrow-left class="-ml-1 mr-1 h-5 w-5"></it-icon-arrow-left>
-        <span class="">zurück zum Circle</span>
+        <span class="hidden lg:inline">zurück zum Circle</span>
       </button>
 
-      <h1 class="text-xl">{{ circleStore.currentSelfEvaluation.title }}</h1>
+      <h1 class="text-xl hidden lg:block">{{ circleStore.currentSelfEvaluation.title }}</h1>
 
       <button
         type="button"
@@ -58,19 +58,19 @@ function handleContinue() {
     </nav>
 
 
-    <div class="mx-auto max-w-6xl px-8 py-4">
+    <div class="mx-auto max-w-6xl px-4 lg:px-8 py-4">
 
-      <div class="mt-8 text-gray-700">Schritt {{ state.questionIndex + 1 }} von {{ questions.length }}</div>
+      <div class="mt-2 lg:mt-8 text-gray-700">Schritt {{ state.questionIndex + 1 }} von {{ questions.length }}</div>
 
       <p class="text-xl mt-4">
         Überprüfe, ob du in der Lernheinheit <span class="font-bold">"{{ circleStore.currentSelfEvaluation.title }}"</span> alles verstanden hast.<br>
         Lies die folgende Aussage und bewerte sie:
       </p>
 
-      <div class="mt-8 p-12 border border-gray-500">
+      <div class="mt-4 lg:mt-8 p-6 lg:p-12 border border-gray-500">
         <h2 class="heading-2">{{ currentQuestion.title }}</h2>
 
-        <div class="mt-12 flex justify-between gap-6">
+        <div class="mt-4 lg:mt-8 flex flex-col lg:flex-row justify-between gap-6">
           <button
             @click="circleStore.markCompletion(currentQuestion, true)"
             class="flex-1 inline-flex items-center text-left p-4 border"
@@ -101,7 +101,7 @@ function handleContinue() {
           </button>
         </div>
 
-        <div class="mt-12">Schau dein Fortschritt in deinem Kompetenzprofil: Kompetenzprofil öffnen</div>
+        <div class="mt-6 lg:mt-12">Schau dein Fortschritt in deinem Kompetenzprofil: Kompetenzprofil öffnen</div>
       </div>
 
     </div>

client/src/views/CircleView.vue

@@ -39,7 +39,7 @@ onMounted(async () => {
 
       <div class="circle">
         <div class="flex flex-col lg:flex-row">
-          <div class="flex-initial lg:w-128 px-4 py-8 lg:px-8">
+          <div class="flex-initial lg:w-128 px-4 py-4 lg:px-8 lg:py-8">
             <h1 class="text-blue-dark text-7xl">
               {{ circleStore.circleData.title }}
             </h1>
@@ -48,7 +48,22 @@ onMounted(async () => {
               <img src="@/assets/circle-analyse.svg" alt="">
             </div>
 
-            <div class="outcome border border-gray-500 mt-8 p-6">
+            <div class="border-t-2 border-gray-500 mt-4 lg:hidden">
+              <div
+                class="mt-4 inline-flex items-center"
+                @click="circleStore.page = 'OVERVIEW'"
+              >
+                <it-icon-info class="mr-2"/>
+                Das lernst du in diesem Circle
+              </div>
+              <div class="inline-flex items-center">
+                <it-icon-message class="mr-2"/>
+                Fachexpertin kontaktieren
+              </div>
+            </div>
+
+            <div class="hidden lg:block">
+              <div class="block border border-gray-500 mt-8 p-6">
                 <h3 class="text-blue-dark">Das lernst du in diesem Circle.</h3>
                 <div class="prose mt-4">
                   {{ circleStore.circleData.description }}
@@ -65,6 +80,7 @@ onMounted(async () => {
                 </button>
               </div>
             </div>
+          </div>
 
           <div class="flex-auto bg-gray-100 px-4 py-8 lg:px-24">
             <div

server/vbv_lernwelt/learnpath/tests/create_default_learning_path.py

@@ -207,6 +207,78 @@ Fachspezialisten bei.
         contents=[('exercise', ExerciseBlockFactory())]
     )
 
+    lu = LearningUnitFactory(title='Pensionierung', parent=circe_analyse)
+    LearningUnitQuestionFactory(
+        title='Passende Frage zu "Pensionierung"',
+        parent=lu
+    )
+    LearningContentFactory(
+        title='3-Säulen-Prinzip',
+        parent=circe_analyse,
+        minutes=240,
+        contents=[('competence', CompetenceBlockFactory())]
+    )
+    LearningContentFactory(
+        title='Altersvorsorge',
+        parent=circe_analyse,
+        minutes=240,
+        contents=[('competence', CompetenceBlockFactory())]
+    )
+    LearningContentFactory(
+        title='AHV',
+        parent=circe_analyse,
+        minutes=120,
+        contents=[('document', DocumentBlockFactory())]
+    )
+    LearningContentFactory(
+        title='Altersvorsorge planen',
+        parent=circe_analyse,
+        minutes=120,
+        contents=[('exercise', ExerciseBlockFactory())]
+    )
+
+    lu = LearningUnitFactory(title='Reisen', parent=circe_analyse)
+    LearningUnitQuestionFactory(
+        title='Passende Frage zu "Reisen"',
+        parent=lu
+    )
+    LearningContentFactory(
+        title='Reiseversicherung',
+        parent=circe_analyse,
+        minutes=240,
+        contents=[('competence', CompetenceBlockFactory())]
+    )
+    LearningContentFactory(
+        title='Sorgenfrei reisen',
+        parent=circe_analyse,
+        minutes=120,
+        contents=[('exercise', ExerciseBlockFactory())]
+    )
+
+    lu = LearningUnitFactory(title='Haushalt', parent=circe_analyse)
+    LearningUnitQuestionFactory(
+        title='Passende Frage zu "Haushalt"',
+        parent=lu
+    )
+    LearningContentFactory(
+        title='Privathaftpflicht',
+        parent=circe_analyse,
+        minutes=240,
+        contents=[('competence', CompetenceBlockFactory())]
+    )
+    LearningContentFactory(
+        title='Zusatzversicherung',
+        parent=circe_analyse,
+        minutes=120,
+        contents=[('document', DocumentBlockFactory())]
+    )
+    LearningContentFactory(
+        title='Einen eigenen Haushalt führen',
+        parent=circe_analyse,
+        minutes=120,
+        contents=[('exercise', ExerciseBlockFactory())]
+    )
+
     LearningSequenceFactory(title='Üben', parent=circe_analyse, icon='it-icon-ls-practice')
     lu = LearningUnitFactory(title='Kind zieht von zu Hause aus', parent=circe_analyse)
     LearningUnitQuestionFactory(
@@ -232,6 +304,43 @@ Fachspezialisten bei.
         contents=[('competence', CompetenceBlockFactory())]
     )
 
+    LearningSequenceFactory(title='Testen', parent=circe_analyse, icon='it-icon-ls-test')
+    lu = LearningUnitFactory(title='Kind zieht von zu Hause aus "Testen"', parent=circe_analyse)
+    LearningContentFactory(
+        title='Das erwartet dich im Test',
+        parent=circe_analyse,
+        minutes=30,
+        contents=[('document', CompetenceBlockFactory())]
+    )
+    LearningContentFactory(
+        title='Test durchführen',
+        parent=circe_analyse,
+        minutes=30,
+        contents=[('document', CompetenceBlockFactory())]
+    )
+
+    LearningSequenceFactory(title='Vernetzen', parent=circe_analyse, icon='it-icon-ls-network')
+    LearningContentFactory(
+        title='Online Training',
+        parent=circe_analyse,
+        minutes=60,
+        contents=[('document', CompetenceBlockFactory())]
+    )
+
+    LearningSequenceFactory(title='Beenden', parent=circe_analyse, icon='it-icon-ls-end')
+    LearningContentFactory(
+        title='Kompetenzprofil anschauen',
+        parent=circe_analyse,
+        minutes=30,
+        contents=[('document', CompetenceBlockFactory())]
+    )
+    LearningContentFactory(
+        title='Circle "Analyse" abschliessen',
+        parent=circe_analyse,
+        minutes=30,
+        contents=[('document', CompetenceBlockFactory())]
+    )
+
     # learning_unit = LearningUnitFactory.create(title='** Einstieg Video"', parent=circle_4)
     # video_url = "https://www.vbv.ch/fileadmin/vbv/Videos/Statements_Externe/Janos_M/Testimonial_Janos_Mischler_PositiveEffekte.mp4"
     # video_title = "Ausbildung ist pflicht"