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

VBV-232: WIP - Rearrange learning content navigation

This commit is contained in:
Christian Cueni 2023-01-12 09:25:53 +01:00
parent 1aaf0810bd
commit 38b7454fd1
1 changed files with 45 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,7 +4,6 @@ import * as log from "loglevel";
log.debug("LeariningContentContainer.vue setup");
defineProps<{
exitText: string;
title: string;
nextButtonText: string;
showBackButton?: boolean;
@ -14,51 +13,62 @@ defineEmits(["back", "next", "exit"]);
</script>
<template>
<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"
data-cy="close-learning-content"
@click="$emit('exit')"
<div>
<div class="h-full"></div> <!-- just here to not make the footer jump during the transition -->
<div class="overflow-y-scroll absolute w-full top-0 bottom-0 bg-white">
<div class="h-content">
<header
class="px-4 lg:px-8 py-4 flex justify-between items-center bg-white absolute w-full"
>
<it-icon-arrow-left class="-ml-1 mr-1 h-5 w-5"></it-icon-arrow-left>
<span class="hidden lg:inline">{{ exitText }}</span>
</button>
<h1 class="text-large hidden lg:block" data-cy="ln-title">
{{ title }}
</h1>
<div>
<button
v-if="showBackButton"
type="button"
class="btn-secondary mr-4"
data-cy="cancel-and-back"
@click="$emit('back')"
>
{{ $t("general.backCapitalized") }}
</button>
<button
type="button"
class="btn-blue"
data-cy="complete-and-continue"
@click="$emit('next')"
class="w-8 h-8 absolute right-4 top-4 cursor-pointer"
data-cy="close-learning-content"
@click="$emit('exit')"
>
{{ nextButtonText }}
<it-icon-close></it-icon-close>
</button>
</header>
<slot></slot>
</div>
</nav>
<slot></slot>
<nav class="nav border-t flex justify-between px-4 items-center">
<div>
<h1 class="text-large hidden lg:block" data-cy="ln-title">
{{ title }}
</h1>
</div>
<div>
<button
v-if="showBackButton"
type="button"
class="btn-secondary mr-4"
data-cy="cancel-and-back"
@click="$emit('back')"
>
{{ $t("general.backCapitalized") }}
</button>
<button
type="button"
class="btn-blue"
data-cy="complete-and-continue"
@click="$emit('next')"
>
{{ nextButtonText }}
</button>
</div>
</nav>
</div>
</div>
</template>
<style lang="scss" scoped>
$footer-height: 57px;
$nav-height: 86px;
.h-content {
height: calc(100vh - $footer-height);
height: calc(100vh - $nav-height);
}
.nav {
height: $nav-height;
}
</style>