ramon
/
vbv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix learning content header

This commit is contained in:
Christian Cueni 2022-11-10 09:35:58 +01:00
parent 2313587f6a
commit 87a89e564c
2 changed files with 60 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
client/src/components/learningPath/LearningContent.vue
View File

@ -34,56 +34,58 @@ const block = computed(() => {
@exit="circleStore.closeLearningContent(props.learningContent)"
@next="circleStore.continueFromLearningContent(props.learningContent)"
>
<div
v-if="
block.type === 'exercise' ||
block.type === 'test' ||
block.type === 'learningmodule'
"
class="h-screen"
>
<iframe width="100%" height="100%" scrolling="no" :src="block.value.url" />
</div>
<div v-else class="container-medium">
<div v-if="block.type === 'video'">
<iframe
class="mt-8 w-full aspect-video"
:src="block.value.url"
:title="learningContent.title"
frameborder="0"
allow="accelerometer; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
>
</iframe>
</div>
<div v-else-if="block.type === 'media_library'" class="mt-4 lg:mt-12">
<h1>{{ learningContent.title }}</h1>
<p class="text-large my-4 lg:my-8">{{ block.value.description }}</p>
<router-link
:to="`${block.value.url}?back=${route.path}`"
class="button btn-primary"
>
Mediathek öffnen
</router-link>
</div>
<div class="content">
<div
v-else-if="block.type === 'resource' || block.type === 'assignment'"
class="mt-4 lg:mt-12"
v-if="
block.type === 'exercise' ||
block.type === 'test' ||
block.type === 'learningmodule'
"
class="h-screen"
>
<p class="text-large my-4">{{ block.value.description }}</p>
<div class="resource-text" v-html="block.value.text"></div>
<iframe width="100%" height="100%" scrolling="no" :src="block.value.url" />
</div>
<div v-else-if="block.type === 'placeholder'" class="mt-4 lg:mt-12">
<p class="text-large my-4">{{ block.value.description }}</p>
<h1>{{ learningContent.title }}</h1>
</div>
<div v-else class="container-medium">
<div v-if="block.type === 'video'">
<iframe
class="mt-8 w-full aspect-video"
:src="block.value.url"
:title="learningContent.title"
frameborder="0"
allow="accelerometer; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
>
</iframe>
</div>
<div v-else class="text-large my-4">{{ block.value.description }}</div>
<div v-else-if="block.type === 'media_library'" class="mt-4 lg:mt-12">
<h1>{{ learningContent.title }}</h1>
<p class="text-large my-4 lg:my-8">{{ block.value.description }}</p>
<router-link
:to="`${block.value.url}?back=${route.path}`"
class="button btn-primary"
>
Mediathek öffnen
</router-link>
</div>
<div
v-else-if="block.type === 'resource' || block.type === 'assignment'"
class="mt-4 lg:mt-12"
>
<p class="text-large my-4">{{ block.value.description }}</p>
<div class="resource-text" v-html="block.value.text"></div>
</div>
<div v-else-if="block.type === 'placeholder'" class="mt-4 lg:mt-12">
<p class="text-large my-4">{{ block.value.description }}</p>
<h1>{{ learningContent.title }}</h1>
</div>
<div v-else class="text-large my-4">{{ block.value.description }}</div>
</div>
</div>
</LearningContentContainer>
</div>
@ -91,12 +93,9 @@ const block = computed(() => {
<style lang="scss" scoped>
$header-height: 77px;
$footer-height: 57px;
$content-height: $header-height + $footer-height;
.h-screen {
height: calc(100vh - $content-height);
.content {
padding-top: $header-height;
}
.resource-text {
@ -108,9 +107,7 @@ $content-height: $header-height + $footer-height;
margin-bottom: 48px;
}
}
</style>
<style lang="scss">
.resource-text {
p {
margin-bottom: 1.5rem;

14
client/src/components/learningPath/LearningContentContainer.vue
View File

@ -14,8 +14,10 @@ const emit = defineEmits(["back", "next", "exit"]);
</script>
<template>
<div>
<nav class="px-4 lg:px-8 py-4 flex justify-between items-center border-b">
<div class="overflow-y-scroll h-content">
<nav
class="px-4 lg:px-8 py-4 flex justify-between items-center border-b bg-white absolute w-full"
>
<button
type="button"
class="btn-text inline-flex items-center px-3 py-2"
@ -53,4 +55,10 @@ const emit = defineEmits(["back", "next", "exit"]);
</div>
</template>
<style scoped></style>
<style lang="scss" scoped>
$footer-height: 57px;
.h-content {
height: calc(100vh - $footer-height);
}
</style>