Fix learning content header
This commit is contained in:
Christian Cueni
parent
2313587f6a
commit
87a89e564c
|
|
@ -34,56 +34,58 @@ const block = computed(() => {
|
||||||
@exit="circleStore.closeLearningContent(props.learningContent)"
|
@exit="circleStore.closeLearningContent(props.learningContent)"
|
||||||
@next="circleStore.continueFromLearningContent(props.learningContent)"
|
@next="circleStore.continueFromLearningContent(props.learningContent)"
|
||||||
>
|
>
|
||||||
<div
|
<div class="content">
|
||||||
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
|
<div
|
||||||
v-else-if="block.type === 'resource' || block.type === 'assignment'"
|
v-if="
|
||||||
class="mt-4 lg:mt-12"
|
block.type === 'exercise' ||
|
||||||
|
block.type === 'test' ||
|
||||||
|
block.type === 'learningmodule'
|
||||||
|
"
|
||||||
|
class="h-screen"
|
||||||
>
|
>
|
||||||
<p class="text-large my-4">{{ block.value.description }}</p>
|
<iframe width="100%" height="100%" scrolling="no" :src="block.value.url" />
|
||||||
<div class="resource-text" v-html="block.value.text"></div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-else-if="block.type === 'placeholder'" class="mt-4 lg:mt-12">
|
<div v-else class="container-medium">
|
||||||
<p class="text-large my-4">{{ block.value.description }}</p>
|
<div v-if="block.type === 'video'">
|
||||||
<h1>{{ learningContent.title }}</h1>
|
<iframe
|
||||||
</div>
|
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>
|
</div>
|
||||||
</LearningContentContainer>
|
</LearningContentContainer>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -91,12 +93,9 @@ const block = computed(() => {
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
$header-height: 77px;
|
$header-height: 77px;
|
||||||
$footer-height: 57px;
|
|
||||||
|
|
||||||
$content-height: $header-height + $footer-height;
|
.content {
|
||||||
|
padding-top: $header-height;
|
||||||
.h-screen {
|
|
||||||
height: calc(100vh - $content-height);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.resource-text {
|
.resource-text {
|
||||||
|
|
@ -108,9 +107,7 @@ $content-height: $header-height + $footer-height;
|
||||||
margin-bottom: 48px;
|
margin-bottom: 48px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.resource-text {
|
.resource-text {
|
||||||
p {
|
p {
|
||||||
margin-bottom: 1.5rem;
|
margin-bottom: 1.5rem;
|
||||||
|
|
|
||||||
|
|
@ -14,8 +14,10 @@ const emit = defineEmits(["back", "next", "exit"]);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div class="overflow-y-scroll h-content">
|
||||||
<nav class="px-4 lg:px-8 py-4 flex justify-between items-center border-b">
|
<nav
|
||||||
|
class="px-4 lg:px-8 py-4 flex justify-between items-center border-b bg-white absolute w-full"
|
||||||
|
>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
class="btn-text inline-flex items-center px-3 py-2"
|
class="btn-text inline-flex items-center px-3 py-2"
|
||||||
|
|
@ -53,4 +55,10 @@ const emit = defineEmits(["back", "next", "exit"]);
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped></style>
|
<style lang="scss" scoped>
|
||||||
|
$footer-height: 57px;
|
||||||
|
|
||||||
|
.h-content {
|
||||||
|
height: calc(100vh - $footer-height);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue