Fix margins after and before titles

Resolves MS-713 #complete
This commit is contained in:
Ramon Wenger 2023-05-10 16:27:03 +02:00
parent 433f10629a
commit 6e409fa0f0
6 changed files with 48 additions and 73 deletions

View File

@ -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 {

View File

@ -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>

View File

@ -81,7 +81,6 @@ export default {
.objective-group {
position: relative;
margin-top: $large-spacing;
&__actions {
position: absolute;

View File

@ -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>

View File

@ -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';

View File

@ -60,6 +60,8 @@ export default {
@import 'styles/helpers';
.instrument {
padding-top: 2 * $large-spacing;
&__title {
font-size: toRem(35px);
margin-bottom: $large-spacing;