WIP: Add mobile modal, refactor modal
This commit is contained in:
Christian Cueni
parent
03cd0fd32b
commit
1e2bc078cd
|
|
@ -1,8 +1,9 @@
|
||||||
<script setup>
|
<script setup lang="ts">
|
||||||
import * as log from 'loglevel';
|
import * as log from 'loglevel';
|
||||||
|
|
||||||
import { onMounted, reactive} from 'vue';
|
import { onMounted, reactive} from 'vue';
|
||||||
import { useUserStore } from '@/stores/user';
|
import { useUserStore } from '@/stores/user';
|
||||||
|
import { useLearningPathStore } from '@/stores/learningPath';
|
||||||
import { useRoute, useRouter } from 'vue-router';
|
import { useRoute, useRouter } from 'vue-router';
|
||||||
import { useAppStore } from '@/stores/app';
|
import { useAppStore } from '@/stores/app';
|
||||||
import IconLogout from "@/components/icons/IconLogout.vue";
|
import IconLogout from "@/components/icons/IconLogout.vue";
|
||||||
|
|
@ -16,16 +17,13 @@ const route = useRoute()
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const userStore = useUserStore();
|
const userStore = useUserStore();
|
||||||
const appStore = useAppStore();
|
const appStore = useAppStore();
|
||||||
|
const learningPathStore = useLearningPathStore();
|
||||||
const state = reactive({showMenu: false});
|
const state = reactive({showMenu: false});
|
||||||
|
|
||||||
function toggleNav() {
|
function toggleNav() {
|
||||||
state.showMenu = !state.showMenu;
|
state.showMenu = !state.showMenu;
|
||||||
}
|
}
|
||||||
|
|
||||||
function calcNavigationMobileOpenClasses() {
|
|
||||||
return state.showMenu ? ['fixed', 'w-full', 'h-screen'] : [];
|
|
||||||
}
|
|
||||||
|
|
||||||
function menuActive(checkPath) {
|
function menuActive(checkPath) {
|
||||||
return route.path.startsWith(checkPath);
|
return route.path.startsWith(checkPath);
|
||||||
}
|
}
|
||||||
|
|
@ -34,6 +32,10 @@ function inLearningPath() {
|
||||||
return route.path.startsWith('/learningpath/') || route.path.startsWith('/circle/');
|
return route.path.startsWith('/learningpath/') || route.path.startsWith('/circle/');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function learningPathName (): string {
|
||||||
|
return inLearningPath() && learningPathStore.learningPath ? learningPathStore.learningPath.title : '';
|
||||||
|
}
|
||||||
|
|
||||||
function backButtonUrl() {
|
function backButtonUrl() {
|
||||||
if (route.path.startsWith('/circle/')) {
|
if (route.path.startsWith('/circle/')) {
|
||||||
return '/learningpath/versicherungsvermittlerin';
|
return '/learningpath/versicherungsvermittlerin';
|
||||||
|
|
@ -83,139 +85,147 @@ const profileDropdownData = [
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<Teleport to="body">
|
<div>
|
||||||
<MobileMenu
|
<Teleport to="body">
|
||||||
:show="state.showMenu"
|
<MobileMenu
|
||||||
/>
|
v-if="learningPathName()"
|
||||||
</Teleport>
|
:user="userStore"
|
||||||
<Transition name="nav">
|
:show="state.showMenu"
|
||||||
<div v-if="appStore.showMainNavigationBar" class="navigation bg-blue-900" :class="calcNavigationMobileOpenClasses()">
|
:learning-path-name="learningPathName()"
|
||||||
<nav
|
@closemodal="state.showMenu = false"
|
||||||
class="
|
/>
|
||||||
px-8
|
</Teleport>
|
||||||
py-2
|
<Transition name="nav">
|
||||||
mx-auto
|
<div v-if="appStore.showMainNavigationBar" class="navigation bg-blue-900">
|
||||||
lg:flex lg:justify-start lg:items-center lg:py-4
|
<nav
|
||||||
"
|
class="
|
||||||
>
|
px-8
|
||||||
<div class="flex items-center justify-between">
|
py-2
|
||||||
<div class="flex items-center">
|
mx-auto
|
||||||
<a
|
lg:flex lg:justify-start lg:items-center lg:py-4
|
||||||
href="https://www.vbv.ch"
|
"
|
||||||
class="flex">
|
>
|
||||||
<it-icon-vbv class="h-8 w-16 mr-3 -mt-6 -ml-3"/>
|
<div class="flex items-center justify-between">
|
||||||
</a>
|
<div class="flex items-center">
|
||||||
<router-link
|
<a
|
||||||
to="/"
|
href="https://www.vbv.ch"
|
||||||
class="flex">
|
class="flex">
|
||||||
<div class="
|
<it-icon-vbv class="h-8 w-16 mr-3 -mt-6 -ml-3"/>
|
||||||
text-white
|
</a>
|
||||||
text-2xl
|
<router-link
|
||||||
pr-10
|
to="/"
|
||||||
pl-3
|
class="flex">
|
||||||
ml-1
|
<div class="
|
||||||
border-l border-white
|
text-white
|
||||||
"
|
text-2xl
|
||||||
|
pr-10
|
||||||
|
pl-3
|
||||||
|
ml-1
|
||||||
|
border-l border-white
|
||||||
|
"
|
||||||
|
>
|
||||||
|
myVBV
|
||||||
|
</div>
|
||||||
|
</router-link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center lg:hidden">
|
||||||
|
<router-link
|
||||||
|
to="/messages"
|
||||||
|
class="nav-item flex flex-row items-center"
|
||||||
>
|
>
|
||||||
myVBV
|
<it-icon-message class="w-8 h-8 mr-6"/>
|
||||||
|
</router-link>
|
||||||
|
<!-- Mobile menu button -->
|
||||||
|
<div @click="toggleNav" class="flex">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="
|
||||||
|
w-8
|
||||||
|
h-8
|
||||||
|
text-white
|
||||||
|
hover:text-sky-500
|
||||||
|
focus:outline-none focus:text-sky-500
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<it-icon-menu class="h-8 w-8"/>
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</router-link>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex items-center">
|
<!-- Mobile Menu open: "block", Menu closed: "hidden" -->
|
||||||
|
<div
|
||||||
|
v-if="appStore.userLoaded && appStore.routingFinished && userStore.loggedIn "
|
||||||
|
:class="state.showMenu ? 'flex' : 'hidden'"
|
||||||
|
class="
|
||||||
|
flex-auto
|
||||||
|
mt-8
|
||||||
|
lg:flex lg:space-y-0 lg:flex-row lg:items-center lg:space-x-10 lg:mt-0
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<router-link
|
||||||
|
v-if="inLearningPath()"
|
||||||
|
to="/learningpath/versicherungsvermittlerin"
|
||||||
|
class="nav-item"
|
||||||
|
:class="{'nav-item--active': menuActive('/learningpath/')}"
|
||||||
|
>
|
||||||
|
Lernpfad
|
||||||
|
</router-link>
|
||||||
|
|
||||||
|
<router-link
|
||||||
|
v-if="inLearningPath()"
|
||||||
|
to="/competences/"
|
||||||
|
class="nav-item"
|
||||||
|
:class="{'nav-item--active': menuActive('/competences/')}"
|
||||||
|
>
|
||||||
|
Kompetenzprofil
|
||||||
|
</router-link>
|
||||||
|
|
||||||
|
<div class="hidden lg:block flex-auto"></div>
|
||||||
|
<router-link
|
||||||
|
to="/shop"
|
||||||
|
class="nav-item"
|
||||||
|
:class="{'nav-item--active': menuActive('/shop')}"
|
||||||
|
>
|
||||||
|
Shop
|
||||||
|
</router-link>
|
||||||
|
<router-link
|
||||||
|
to="/mediacenter"
|
||||||
|
class="nav-item"
|
||||||
|
:class="{'nav-item--active': menuActive('/mediacenter')}"
|
||||||
|
>
|
||||||
|
Mediathek
|
||||||
|
</router-link>
|
||||||
<router-link
|
<router-link
|
||||||
to="/messages"
|
to="/messages"
|
||||||
class="nav-item flex flex-row items-center"
|
class="nav-item flex flex-row items-center"
|
||||||
>
|
>
|
||||||
<it-icon-message class="w-8 h-8 mr-6"/>
|
<it-icon-message class="w-8 h-8 mr-6"/>
|
||||||
</router-link>
|
</router-link>
|
||||||
<!-- Mobile menu button -->
|
<div class="nav-item flex items-center" v-if="userStore.loggedIn">
|
||||||
<div @click="toggleNav" class="flex lg:hidden">
|
<ItDropdown
|
||||||
<button
|
:button-classes="[]"
|
||||||
type="button"
|
:list-items="profileDropdownData"
|
||||||
class="
|
:align="'right'"
|
||||||
w-8
|
@select="handleDropdownSelect"
|
||||||
h-8
|
|
||||||
text-white
|
|
||||||
hover:text-sky-500
|
|
||||||
focus:outline-none focus:text-sky-500
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<it-icon-menu class="h-8 w-8"/>
|
<div v-if="userStore.avatar_url">
|
||||||
</button>
|
<img class="inline-block h-8 w-8 rounded-full"
|
||||||
|
:src="userStore.avatar_url"
|
||||||
|
alt=""/>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
{{ userStore.getFullName }}
|
||||||
|
</div>
|
||||||
|
</ItDropdown>
|
||||||
</div>
|
</div>
|
||||||
|
<div v-else><a class="" href="/login">Login</a></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</nav>
|
||||||
|
</div>
|
||||||
<!-- Mobile Menu open: "block", Menu closed: "hidden" -->
|
</Transition>
|
||||||
<div
|
</div>
|
||||||
v-if="appStore.userLoaded && appStore.routingFinished && userStore.loggedIn "
|
|
||||||
:class="state.showMenu ? 'flex' : 'hidden'"
|
|
||||||
class="
|
|
||||||
flex-auto
|
|
||||||
flex-col
|
|
||||||
mt-8
|
|
||||||
space-y-8
|
|
||||||
lg:flex lg:space-y-0 lg:flex-row lg:items-center lg:space-x-10 lg:mt-0
|
|
||||||
"
|
|
||||||
>
|
|
||||||
|
|
||||||
|
|
||||||
<router-link
|
|
||||||
v-if="inLearningPath()"
|
|
||||||
to="/learningpath/versicherungsvermittlerin"
|
|
||||||
class="nav-item"
|
|
||||||
:class="{'nav-item--active': menuActive('/learningpath/')}"
|
|
||||||
>
|
|
||||||
Lernpfad
|
|
||||||
</router-link>
|
|
||||||
|
|
||||||
<router-link
|
|
||||||
v-if="inLearningPath()"
|
|
||||||
to="/competences/"
|
|
||||||
class="nav-item"
|
|
||||||
:class="{'nav-item--active': menuActive('/competences/')}"
|
|
||||||
>
|
|
||||||
Kompetenzprofil
|
|
||||||
</router-link>
|
|
||||||
|
|
||||||
<div class="hidden lg:block flex-auto"></div>
|
|
||||||
<router-link
|
|
||||||
to="/shop"
|
|
||||||
class="nav-item"
|
|
||||||
:class="{'nav-item--active': menuActive('/shop')}"
|
|
||||||
>
|
|
||||||
Shop
|
|
||||||
</router-link>
|
|
||||||
<router-link
|
|
||||||
to="/mediacenter"
|
|
||||||
class="nav-item"
|
|
||||||
:class="{'nav-item--active': menuActive('/mediacenter')}"
|
|
||||||
>
|
|
||||||
Mediathek
|
|
||||||
</router-link>
|
|
||||||
<div class="nav-item flex items-center" v-if="userStore.loggedIn">
|
|
||||||
<ItDropdown
|
|
||||||
:button-classes="[]"
|
|
||||||
:list-items="profileDropdownData"
|
|
||||||
:align="'right'"
|
|
||||||
@select="handleDropdownSelect"
|
|
||||||
>
|
|
||||||
<div v-if="userStore.avatar_url">
|
|
||||||
<img class="inline-block h-8 w-8 rounded-full"
|
|
||||||
:src="userStore.avatar_url"
|
|
||||||
alt=""/>
|
|
||||||
</div>
|
|
||||||
<div v-else>
|
|
||||||
{{ userStore.getFullName }}
|
|
||||||
</div>
|
|
||||||
</ItDropdown>
|
|
||||||
</div>
|
|
||||||
<div v-else><a class="" href="/login">Login</a></div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</Transition>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="postcss" scoped>
|
<style lang="postcss" scoped>
|
||||||
|
|
|
||||||
|
|
@ -1,34 +1,51 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
import ItFullScreenModal from '@/components/ui/ItFullScreenModal.vue'
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
show: boolean,
|
||||||
|
user: object,
|
||||||
|
learningPathName: string
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const emits = defineEmits(['closemodal'])
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<ItFullScreenModal
|
||||||
|
:show="show"
|
||||||
|
@closemodal="$emit('closemodal')"
|
||||||
|
>
|
||||||
<div>
|
<div>
|
||||||
<div>
|
<div>
|
||||||
<img>
|
|
||||||
<div>
|
<div>
|
||||||
<h3>Jan</h3>
|
<div v-if="user.avatar_url">
|
||||||
link
|
<img class="inline-block h-8 w-8 rounded-full"
|
||||||
|
:src="user.avatar_url"
|
||||||
|
alt=""/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3>{{user.first_name}} {{user.last_name}}</h3>
|
||||||
|
<a>Kontoeinstellungen</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="learningPathName">
|
||||||
|
<h4>Kurs: {{learningPathName}}</h4>
|
||||||
|
<ul>
|
||||||
|
<li>Lernpfad</li>
|
||||||
|
<li>Komp</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<ul>
|
||||||
|
<li>Shop</li>
|
||||||
|
<li>Mediathek</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
Abmelden
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
|
||||||
<h4>Kurs:</h4>
|
|
||||||
<ul>
|
|
||||||
<li>Lernpfad</li>
|
|
||||||
<li>Komp</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<ul>
|
|
||||||
<li>Shop</li>
|
|
||||||
<li>Mediathek</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
Abmelden
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</ItFullScreenModal>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
// inspiration https://vuejs.org/examples/#modal
|
|
||||||
import {Circle} from '@/services/circle';
|
import {Circle} from '@/services/circle';
|
||||||
|
import ItFullScreenModal from '@/components/ui/ItFullScreenModal.vue'
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
circle: Circle,
|
circle: Circle,
|
||||||
|
|
@ -12,50 +12,39 @@ const emits = defineEmits(['closemodal'])
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<Transition mode="in-out">
|
<ItFullScreenModal
|
||||||
<div
|
:show="show"
|
||||||
v-if="show"
|
@closemodal="$emit('closemodal')"
|
||||||
class="circle-overview px-4 py-16 lg:px-16 lg:py-24 fixed top-0 overflow-y-scroll bg-white h-full w-full">
|
>
|
||||||
<button
|
<h1 class="">Überblick: Circle "{{ circle.title }}"</h1>
|
||||||
type="button"
|
|
||||||
class="w-8 h-8 absolute right-4 top-4 cursor-pointer"
|
|
||||||
@click="$emit('closemodal')"
|
|
||||||
>
|
|
||||||
<it-icon-close></it-icon-close>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
|
<p class="mt-8 text-xl">Hier zeigen wir dir, was du in diesem Circle lernen wirst.</p>
|
||||||
|
|
||||||
<h1 class="">Überblick: Circle "{{ circle.title }}"</h1>
|
<div class="mt-8 p-4 border border-gray-500">
|
||||||
|
<h3>Du wirst in der Lage sein, ... </h3>
|
||||||
|
|
||||||
<p class="mt-8 text-xl">Hier zeigen wir dir, was du in diesem Circle lernen wirst.</p>
|
<ul class="mt-4">
|
||||||
|
<li class="text-xl flex items-center" v-for="goal in circle.goals" :key="goal.id">
|
||||||
<div class="mt-8 p-4 border border-gray-500">
|
<it-icon-check class="mt-4 hidden lg:block w-12 h-12 text-sky-500 flex-none"></it-icon-check>
|
||||||
<h3>Du wirst in der Lage sein, ... </h3>
|
<div class="mt-4">{{ goal.value }}</div>
|
||||||
|
|
||||||
<ul class="mt-4">
|
|
||||||
<li class="text-xl flex items-center" v-for="goal in circle.goals" :key="goal.id">
|
|
||||||
<it-icon-check class="mt-4 hidden lg:block w-12 h-12 text-sky-500 flex-none"></it-icon-check>
|
|
||||||
<div class="mt-4">{{ goal.value }}</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h3 class="mt-16">
|
|
||||||
Du wirst dein neu erworbenes Wissen auf folgenden berufstypischen Situation anwenden können:
|
|
||||||
</h3>
|
|
||||||
|
|
||||||
<ul class="grid grid-cols-1 lg:grid-cols-3 auto-rows-fr gap-6 mt-8">
|
|
||||||
<li
|
|
||||||
v-for="jobSituation in circle.job_situations"
|
|
||||||
:key="jobSituation.id"
|
|
||||||
class="job-situation border border-gray-500 p-4 text-xl flex items-center"
|
|
||||||
>
|
|
||||||
{{jobSituation.value}}
|
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</Transition>
|
|
||||||
|
<h3 class="mt-16">
|
||||||
|
Du wirst dein neu erworbenes Wissen auf folgenden berufstypischen Situation anwenden können:
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<ul class="grid grid-cols-1 lg:grid-cols-3 auto-rows-fr gap-6 mt-8">
|
||||||
|
<li
|
||||||
|
v-for="jobSituation in circle.job_situations"
|
||||||
|
:key="jobSituation.id"
|
||||||
|
class="job-situation border border-gray-500 p-4 text-xl flex items-center"
|
||||||
|
>
|
||||||
|
{{jobSituation.value}}
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</ItFullScreenModal>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
// inspiration https://vuejs.org/examples/#modal
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
show: boolean
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const emits = defineEmits(['closemodal'])
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Transition mode="in-out">
|
||||||
|
<div
|
||||||
|
v-if="show"
|
||||||
|
class="circle-overview px-4 py-16 lg:px-16 lg:py-24 fixed top-0 overflow-y-scroll bg-white h-full w-full">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="w-8 h-8 absolute right-4 top-4 cursor-pointer"
|
||||||
|
@click="$emit('closemodal')"
|
||||||
|
>
|
||||||
|
<it-icon-close></it-icon-close>
|
||||||
|
</button>
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
</Transition>
|
||||||
|
</template>
|
||||||
Loading…
Reference in New Issue