Fix margins after and before titles
Resolves MS-713 #complete
This commit is contained in:
parent
433f10629a
commit
6e409fa0f0
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -81,7 +81,6 @@ export default {
|
|||
|
||||
.objective-group {
|
||||
position: relative;
|
||||
margin-top: $large-spacing;
|
||||
|
||||
&__actions {
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -60,6 +60,8 @@ export default {
|
|||
@import 'styles/helpers';
|
||||
|
||||
.instrument {
|
||||
padding-top: 2 * $large-spacing;
|
||||
|
||||
&__title {
|
||||
font-size: toRem(35px);
|
||||
margin-bottom: $large-spacing;
|
||||
|
|
|
|||
Loading…
Reference in New Issue