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

View File

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

View File

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