From 6e409fa0f0a3322864a03209ae076bda15922cc1 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Wed, 10 May 2023 16:27:03 +0200
Subject: [PATCH] Fix margins after and before titles

Resolves MS-713 #complete
---
 .../content-blocks/ContentComponent.vue       | 84 +++++--------------
 client/src/components/modules/Module.vue      | 17 +++-
 .../objective-groups/ObjectiveGroup.vue       |  1 -
 .../objective-groups/ObjectiveGroups.vue      | 16 ++--
 client/src/layouts/SimpleLayout.vue           |  1 -
 client/src/pages/instrument.vue               |  2 +
 6 files changed, 48 insertions(+), 73 deletions(-)

diff --git a/client/src/components/content-blocks/ContentComponent.vue b/client/src/components/content-blocks/ContentComponent.vue
index 51aa6ea4..d80a04b9 100644
--- a/client/src/components/content-blocks/ContentComponent.vue
+++ b/client/src/components/content-blocks/ContentComponent.vue
@@ -25,66 +25,26 @@
 import { constructContentComponentBookmarkMutation } from '@/helpers/update-content-bookmark-mutation';
 import { defineAsyncComponent } from 'vue';
 
-const TextBlock = defineAsyncComponent(() =>
-  import('@/components/content-blocks/TextBlock.vue')
-);
-const InstrumentWidget = defineAsyncComponent(() =>
-  import('@/components/content-blocks/InstrumentWidget.vue')
-);
-const ImageBlock = defineAsyncComponent(() =>
-  import('@/components/content-blocks/ImageBlock.vue')
-);
-const ImageUrlBlock = defineAsyncComponent(() =>
-  import('@/components/content-blocks/ImageUrlBlock.vue')
-);
-const VideoBlock = defineAsyncComponent(() =>
-  import('@/components/content-blocks/VideoBlock.vue')
-);
-const LinkBlock = defineAsyncComponent(() =>
-  import('@/components/content-blocks/LinkBlock.vue')
-);
-const DocumentBlock = defineAsyncComponent(() =>
-  import('@/components/content-blocks/DocumentBlock.vue')
-);
-const CmsDocumentBlock = defineAsyncComponent(() =>
-  import('@/components/content-blocks/CmsDocumentBlock.vue')
-);
-const InfogramBlock = defineAsyncComponent(() =>
-  import('@/components/content-blocks/InfogramBlock.vue')
-);
-const ThinglinkBlock = defineAsyncComponent(() =>
-  import('@/components/content-blocks/ThinglinkBlock.vue')
-);
-const GeniallyBlock = defineAsyncComponent(() =>
-  import('@/components/content-blocks/GeniallyBlock.vue')
-);
-const SubtitleBlock = defineAsyncComponent(() =>
-  import('@/components/content-blocks/SubtitleBlock.vue')
-);
-const SectionTitleBlock = defineAsyncComponent(() =>
-  import('@/components/content-blocks/SectionTitleBlock.vue')
-);
-const ContentListBlock = defineAsyncComponent(() =>
-  import('@/components/content-blocks/ContentListBlock.vue')
-);
-const ModuleRoomSlug = defineAsyncComponent(() =>
-  import('@/components/content-blocks/ModuleRoomSlug.vue')
-);
-const Assignment = defineAsyncComponent(() =>
-  import('@/components/content-blocks/assignment/Assignment.vue')
-);
-const Survey = defineAsyncComponent(() =>
-  import('@/components/content-blocks/SurveyBlock.vue')
-);
-const Solution = defineAsyncComponent(() =>
-  import('@/components/content-blocks/Solution.vue')
-);
-const Instruction = defineAsyncComponent(() =>
-  import('@/components/content-blocks/Instruction.vue')
-);
-const BookmarkActions = defineAsyncComponent(() =>
-  import('@/components/notes/BookmarkActions.vue')
-);
+const TextBlock = defineAsyncComponent(() => import('@/components/content-blocks/TextBlock.vue'));
+const InstrumentWidget = defineAsyncComponent(() => import('@/components/content-blocks/InstrumentWidget.vue'));
+const ImageBlock = defineAsyncComponent(() => import('@/components/content-blocks/ImageBlock.vue'));
+const ImageUrlBlock = defineAsyncComponent(() => import('@/components/content-blocks/ImageUrlBlock.vue'));
+const VideoBlock = defineAsyncComponent(() => import('@/components/content-blocks/VideoBlock.vue'));
+const LinkBlock = defineAsyncComponent(() => import('@/components/content-blocks/LinkBlock.vue'));
+const DocumentBlock = defineAsyncComponent(() => import('@/components/content-blocks/DocumentBlock.vue'));
+const CmsDocumentBlock = defineAsyncComponent(() => import('@/components/content-blocks/CmsDocumentBlock.vue'));
+const InfogramBlock = defineAsyncComponent(() => import('@/components/content-blocks/InfogramBlock.vue'));
+const ThinglinkBlock = defineAsyncComponent(() => import('@/components/content-blocks/ThinglinkBlock.vue'));
+const GeniallyBlock = defineAsyncComponent(() => import('@/components/content-blocks/GeniallyBlock.vue'));
+const SubtitleBlock = defineAsyncComponent(() => import('@/components/content-blocks/SubtitleBlock.vue'));
+const SectionTitleBlock = defineAsyncComponent(() => import('@/components/content-blocks/SectionTitleBlock.vue'));
+const ContentListBlock = defineAsyncComponent(() => import('@/components/content-blocks/ContentListBlock.vue'));
+const ModuleRoomSlug = defineAsyncComponent(() => import('@/components/content-blocks/ModuleRoomSlug.vue'));
+const Assignment = defineAsyncComponent(() => import('@/components/content-blocks/assignment/Assignment.vue'));
+const Survey = defineAsyncComponent(() => import('@/components/content-blocks/SurveyBlock.vue'));
+const Solution = defineAsyncComponent(() => import('@/components/content-blocks/Solution.vue'));
+const Instruction = defineAsyncComponent(() => import('@/components/content-blocks/Instruction.vue'));
+const BookmarkActions = defineAsyncComponent(() => import('@/components/notes/BookmarkActions.vue'));
 
 export default {
   props: {
@@ -190,8 +150,8 @@ export default {
   }
 
   &--subtitle {
-    margin-top: $section-spacing;
-    margin-bottom: $large-spacing;
+    margin-top: 2 * $medium-spacing;
+    margin-bottom: $medium-spacing;
   }
 
   &--section_title {
diff --git a/client/src/components/modules/Module.vue b/client/src/components/modules/Module.vue
index 6e9a7ed9..a8bb9277 100644
--- a/client/src/components/modules/Module.vue
+++ b/client/src/components/modules/Module.vue
@@ -58,11 +58,20 @@
       class="module__objective-groups"
       v-if="module.objectiveGroups.length"
     >
-      <objective-groups :groups="languageCommunicationObjectiveGroups" />
+      <objective-groups
+        :groups="languageCommunicationObjectiveGroups"
+        v-if="languageCommunicationObjectiveGroups.length"
+      />
 
-      <objective-groups :groups="societyObjectiveGroups" />
+      <objective-groups
+        :groups="societyObjectiveGroups"
+        v-if="societyObjectiveGroups.length"
+      />
 
-      <objective-groups :groups="interdisciplinaryObjectiveGroups" />
+      <objective-groups
+        :groups="interdisciplinaryObjectiveGroups"
+        v-if="interdisciplinaryObjectiveGroups.length"
+      />
     </div>
 
     <chapter
@@ -185,7 +194,7 @@ export default {
   }
 
   &__objective-groups {
-    margin-bottom: $large-spacing;
+    margin-bottom: 2 * $large-spacing;
   }
 }
 </style>
diff --git a/client/src/components/objective-groups/ObjectiveGroup.vue b/client/src/components/objective-groups/ObjectiveGroup.vue
index 67118229..05c81019 100644
--- a/client/src/components/objective-groups/ObjectiveGroup.vue
+++ b/client/src/components/objective-groups/ObjectiveGroup.vue
@@ -81,7 +81,6 @@ export default {
 
 .objective-group {
   position: relative;
-  margin-top: $large-spacing;
 
   &__actions {
     position: absolute;
diff --git a/client/src/components/objective-groups/ObjectiveGroups.vue b/client/src/components/objective-groups/ObjectiveGroups.vue
index 7d3551af..2131fed3 100644
--- a/client/src/components/objective-groups/ObjectiveGroups.vue
+++ b/client/src/components/objective-groups/ObjectiveGroups.vue
@@ -1,10 +1,12 @@
 <template>
   <div class="objective-groups">
-    <objective-group
-      :group="group"
-      v-for="group in filteredObjectiveGroups"
-      :key="group.id"
-    />
+    <template v-for="group in filteredObjectiveGroups">
+      <objective-group
+        :group="group"
+        v-if="group.objectives.length"
+        :key="group.id"
+      />
+    </template>
   </div>
 </template>
 
@@ -65,5 +67,9 @@ export default {
   margin-bottom: $large-spacing;
   display: flex;
   flex-direction: column;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
 }
 </style>
diff --git a/client/src/layouts/SimpleLayout.vue b/client/src/layouts/SimpleLayout.vue
index 6547790d..1370e40e 100644
--- a/client/src/layouts/SimpleLayout.vue
+++ b/client/src/layouts/SimpleLayout.vue
@@ -20,7 +20,6 @@
 
 <script lang="ts" setup>
 import DynamicFooter from '@/layouts/DynamicFooter.vue';
-import MyKvFooter from '@/layouts/MyKVFooter.vue';
 import { defineAsyncComponent, computed } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import flavor from '@/helpers/app-flavor';
diff --git a/client/src/pages/instrument.vue b/client/src/pages/instrument.vue
index 16a648f4..b907f4d5 100644
--- a/client/src/pages/instrument.vue
+++ b/client/src/pages/instrument.vue
@@ -60,6 +60,8 @@ export default {
 @import 'styles/helpers';
 
 .instrument {
+  padding-top: 2 * $large-spacing;
+
   &__title {
     font-size: toRem(35px);
     margin-bottom: $large-spacing;