Update circle view

client/src/components/MainNavigationBar.vue

@@ -5,7 +5,7 @@ export default {
 </script>
 
 <template>
-  <nav class="bg-blue-dark flex flex-row gap-x-8 items-center text-white px-8 py-4">
+  <nav class="bg-blue-900 flex flex-row gap-x-8 items-center text-white px-8 py-4">
     <a href="" class="text-xl">myVBV</a>
     <a href="" class="">Lernpfad</a>
     <a href="" class="">Kompetenzprofil</a>

client/src/components/circle/LearningSequence.vue

@@ -5,7 +5,7 @@ defineProps(['learningSequence'])
 
 <template>
   <div class="mb-8 learning-sequence">
-    <h3 class="mb-2">{{ learningSequence.title }}</h3>
+    <h3 class="mb-2 text-xl">{{ learningSequence.title }}</h3>
 
     <div class="bg-white p-4 border border-slate-300 border-l-4 border-l-blue-500">
       <div v-for="learningPackage in learningSequence.learning_packages">

client/src/views/Circle.vue

@@ -16,7 +16,7 @@ export default {
     console.log('CircleAnalyseExampleView mounted', this.circleSlug);
     axios({
       method: 'get',
-      url: `http://localhost:8000/wagtailapi/v2/pages/?type=learnpath.Circle&slug=${this.circleSlug}&fields=title,description,learning_sequences`
+      url: `/wagtailapi/v2/pages/?type=learnpath.Circle&slug=${this.circleSlug}&fields=title,description,learning_sequences(title,learning_packages(title,my_title,learning_units(title)))`,
     }).then((response) => {
       this.circleData = response.data.items[0];
     });
@@ -29,33 +29,35 @@ export default {
   <MainNavigationBar/>
 
   <div class="circle">
-    <div class="flex">
+    <div class="flex flex-col lg:flex-row">
-      <div class="flex-initial w-128 p-8">
+      <div class="flex-initial lg:w-128 px-8 py-8">
         <h1 class="text-blue-dark text-7xl">
           {{ circleData.title }}
         </h1>
 
-        <div class="circle-image mt-8"></div>
+        <div class="mt-8">
+          <img src="@/assets/circle-analyse.svg" alt="">
+        </div>
 
-        <div class="outcome border border-slate-300 mt-8 p-6">
+        <div class="outcome 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">
             {{ circleData.description }}
           </div>
 
-          <button class="px-4 py-3 bg-blue-dark text-white text-xl mt-4">Erfahre mehr dazu</button>
+          <button class="btn-primary mt-4">Erfahre mehr dazu</button>
         </div>
 
-        <div class="expert border border-slate-300 mt-8 p-6">
+        <div class="expert border border-gray-500 mt-8 p-6">
           <h3 class="text-blue-dark">Hast du Fragen?</h3>
           <div class="prose mt-4">Tausche dich mit der Fachexpertin aus für den Circle Analyse aus.</div>
-          <button class="px-4 py-3 border-2 border-blue-dark bg-white text-blue-dark text-xl mt-4">
+          <button class="btn-secondary mt-4">
             Fachexpertin kontaktieren
           </button>
         </div>
       </div>
 
-      <div class="flex-auto bg-blue-100 p-8 pl-24">
+      <div class="flex-auto bg-gray-100 px-4 py-8">
         <div v-for="learningSequence in circleData.learning_sequences">
           <LearningSequence :learning-sequence="learningSequence"></LearningSequence>
         </div>
@@ -67,11 +69,4 @@ export default {
 </template>
 
 <style scoped>
-.circle-image {
-  width: 440px;
-  height: 440px;
-  background: url('@/assets/circle-analyse.svg');
-  background-size: contain;
-  background-repeat: no-repeat;
-}
 </style>

client/src/views/StyelGuideView.vue

@@ -25,14 +25,14 @@ export default defineComponent({
       <h2 class="heading-1">Colors</h2>
     </div>
     <table class="text-gray-700">
-      <tr class="h-12 md:h-18 xl:h-24">
+      <tr class="h-12 md:h-18 lg:h-24">
       <td></td>
         <td class="text-center" v-for="value in colorValues">{{value}}</td>
       </tr>
-      <tr v-for="color in colors" class="h-12 md:h-18 xl:h-24">
+      <tr v-for="color in colors" class="h-12 md:h-18 lg:h-24">
         <td>{{color}}</td>
         <td v-for="value in colorValues" class="px-2">
-          <div class="w-8 h-8 md:w-12 md:h-12 xl:w-16 xl:h-16 rounded-full" :class="[colorBgClass(color, value)]"></div>
+          <div class="w-8 h-8 md:w-12 md:h-12 lg:w-16 lg:h-16 rounded-full" :class="[colorBgClass(color, value)]"></div>
         </td>
       </tr>
     </table>

server/vbv_lernwelt/learnpath/models.py

@@ -97,11 +97,15 @@ class Circle(Page, Orderable):
         APIField('title'),
         APIField('description'),
         APIField('topic'),
+        APIField('learning_sequences'),
         # APIField('content_structure'),
     ]
 
     @property
     def content_structure(self):
+        # FIXME: not needed!?
+        # you can access nested content with the following url scheme (look a the nested parentheses!):
+        # /wagtailapi/v2/pages/?type=learnpath.Circle&slug=analyse&fields=title,description,learning_sequences(title,learning_packages(title,my_title,learning_units(title)))
         learning_sequences = LearningSequence.objects.filter(circle_id=self.id).values()
         learning_packages = LearningPackage.objects.filter(learning_sequence__circle_id=self.id).values()
         learning_units = LearningUnit.objects.filter(learning_package__learning_sequence__circle_id=self.id).values('learning_package_id', 'title')
@@ -123,9 +127,6 @@ class Circle(Page, Orderable):
 
         return content
 
-
-
-
     def full_clean(self, *args, **kwargs):
         self.slug = find_available_slug(Circle, slugify(self.title, allow_unicode=True))
         super(Circle, self).full_clean(*args, **kwargs)
@@ -163,15 +164,12 @@ class LearningSequence(Orderable):
 
     panels = [FieldPanel('title'), FieldPanel('category'), FieldPanel('circle')]
 
-
     api_fields = [
         APIField('title'),
         APIField('category'),
         APIField('learning_packages'),
     ]
 
-
-
     class Meta:
         verbose_name = "Learning Sequence"
 
@@ -183,7 +181,6 @@ class LearningSequence(Orderable):
         super(LearningSequence, self).full_clean(*args, **kwargs)
 
 
-
 class LearningPackage(Orderable):
     title = models.CharField(max_length=256, default='')
 
@@ -199,13 +196,13 @@ class LearningPackage(Orderable):
     api_fields = [
         APIField('title'),
         APIField('my_title'),
+        APIField('learning_units'),
     ]
 
     @property
     def my_title(self):
         return self.title
 
-
     def full_clean(self, *args, **kwargs):
         self.slug = find_available_slug(LearningPackage, slugify(self.title, allow_unicode=True))
         super(LearningPackage, self).full_clean(*args, **kwargs)