Fix learning content header
This commit is contained in:
parent
2313587f6a
commit
87a89e564c
|
|
@ -34,6 +34,7 @@ const block = computed(() => {
|
||||||
@exit="circleStore.closeLearningContent(props.learningContent)"
|
@exit="circleStore.closeLearningContent(props.learningContent)"
|
||||||
@next="circleStore.continueFromLearningContent(props.learningContent)"
|
@next="circleStore.continueFromLearningContent(props.learningContent)"
|
||||||
>
|
>
|
||||||
|
<div class="content">
|
||||||
<div
|
<div
|
||||||
v-if="
|
v-if="
|
||||||
block.type === 'exercise' ||
|
block.type === 'exercise' ||
|
||||||
|
|
@ -85,18 +86,16 @@ const block = computed(() => {
|
||||||
|
|
||||||
<div v-else class="text-large my-4">{{ block.value.description }}</div>
|
<div v-else class="text-large my-4">{{ block.value.description }}</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</LearningContentContainer>
|
</LearningContentContainer>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<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