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 { onMounted, reactive} from 'vue';
|
||||
import { useUserStore } from '@/stores/user';
|
||||
import { useLearningPathStore } from '@/stores/learningPath';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { useAppStore } from '@/stores/app';
|
||||
import IconLogout from "@/components/icons/IconLogout.vue";
|
||||
|
|
@ -16,16 +17,13 @@ const route = useRoute()
|
|||
const router = useRouter()
|
||||
const userStore = useUserStore();
|
||||
const appStore = useAppStore();
|
||||
const learningPathStore = useLearningPathStore();
|
||||
const state = reactive({showMenu: false});
|
||||
|
||||
function toggleNav() {
|
||||
state.showMenu = !state.showMenu;
|
||||
}
|
||||
|
||||
function calcNavigationMobileOpenClasses() {
|
||||
return state.showMenu ? ['fixed', 'w-full', 'h-screen'] : [];
|
||||
}
|
||||
|
||||
function menuActive(checkPath) {
|
||||
return route.path.startsWith(checkPath);
|
||||
}
|
||||
|
|
@ -34,6 +32,10 @@ function inLearningPath() {
|
|||
return route.path.startsWith('/learningpath/') || route.path.startsWith('/circle/');
|
||||
}
|
||||
|
||||
function learningPathName (): string {
|
||||
return inLearningPath() && learningPathStore.learningPath ? learningPathStore.learningPath.title : '';
|
||||
}
|
||||
|
||||
function backButtonUrl() {
|
||||
if (route.path.startsWith('/circle/')) {
|
||||
return '/learningpath/versicherungsvermittlerin';
|
||||
|
|
@ -83,139 +85,147 @@ const profileDropdownData = [
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<MobileMenu
|
||||
:show="state.showMenu"
|
||||
/>
|
||||
</Teleport>
|
||||
<Transition name="nav">
|
||||
<div v-if="appStore.showMainNavigationBar" class="navigation bg-blue-900" :class="calcNavigationMobileOpenClasses()">
|
||||
<nav
|
||||
class="
|
||||
px-8
|
||||
py-2
|
||||
mx-auto
|
||||
lg:flex lg:justify-start lg:items-center lg:py-4
|
||||
"
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<a
|
||||
href="https://www.vbv.ch"
|
||||
class="flex">
|
||||
<it-icon-vbv class="h-8 w-16 mr-3 -mt-6 -ml-3"/>
|
||||
</a>
|
||||
<router-link
|
||||
to="/"
|
||||
class="flex">
|
||||
<div class="
|
||||
text-white
|
||||
text-2xl
|
||||
pr-10
|
||||
pl-3
|
||||
ml-1
|
||||
border-l border-white
|
||||
"
|
||||
<div>
|
||||
<Teleport to="body">
|
||||
<MobileMenu
|
||||
v-if="learningPathName()"
|
||||
:user="userStore"
|
||||
:show="state.showMenu"
|
||||
:learning-path-name="learningPathName()"
|
||||
@closemodal="state.showMenu = false"
|
||||
/>
|
||||
</Teleport>
|
||||
<Transition name="nav">
|
||||
<div v-if="appStore.showMainNavigationBar" class="navigation bg-blue-900">
|
||||
<nav
|
||||
class="
|
||||
px-8
|
||||
py-2
|
||||
mx-auto
|
||||
lg:flex lg:justify-start lg:items-center lg:py-4
|
||||
"
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<a
|
||||
href="https://www.vbv.ch"
|
||||
class="flex">
|
||||
<it-icon-vbv class="h-8 w-16 mr-3 -mt-6 -ml-3"/>
|
||||
</a>
|
||||
<router-link
|
||||
to="/"
|
||||
class="flex">
|
||||
<div class="
|
||||
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>
|
||||
</router-link>
|
||||
</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
|
||||
to="/messages"
|
||||
class="nav-item flex flex-row items-center"
|
||||
>
|
||||
<it-icon-message class="w-8 h-8 mr-6"/>
|
||||
</router-link>
|
||||
<!-- Mobile menu button -->
|
||||
<div @click="toggleNav" class="flex lg:hidden">
|
||||
<button
|
||||
type="button"
|
||||
class="
|
||||
w-8
|
||||
h-8
|
||||
text-white
|
||||
hover:text-sky-500
|
||||
focus:outline-none focus:text-sky-500
|
||||
"
|
||||
<div class="nav-item flex items-center" v-if="userStore.loggedIn">
|
||||
<ItDropdown
|
||||
:button-classes="[]"
|
||||
:list-items="profileDropdownData"
|
||||
:align="'right'"
|
||||
@select="handleDropdownSelect"
|
||||
>
|
||||
<it-icon-menu class="h-8 w-8"/>
|
||||
</button>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Menu open: "block", Menu closed: "hidden" -->
|
||||
<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>
|
||||
</nav>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="postcss" scoped>
|
||||
|
|
|
|||
|
|
@ -1,34 +1,51 @@
|
|||
<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>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<ItFullScreenModal
|
||||
:show="show"
|
||||
@closemodal="$emit('closemodal')"
|
||||
>
|
||||
<div>
|
||||
<div>
|
||||
<img>
|
||||
<div>
|
||||
<h3>Jan</h3>
|
||||
link
|
||||
<div v-if="user.avatar_url">
|
||||
<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>
|
||||
<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>
|
||||
</ItFullScreenModal>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
// inspiration https://vuejs.org/examples/#modal
|
||||
import {Circle} from '@/services/circle';
|
||||
import ItFullScreenModal from '@/components/ui/ItFullScreenModal.vue'
|
||||
|
||||
const props = defineProps<{
|
||||
circle: Circle,
|
||||
|
|
@ -12,50 +12,39 @@ 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>
|
||||
<ItFullScreenModal
|
||||
:show="show"
|
||||
@closemodal="$emit('closemodal')"
|
||||
>
|
||||
<h1 class="">Überblick: Circle "{{ circle.title }}"</h1>
|
||||
|
||||
<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>
|
||||
|
||||
<div class="mt-8 p-4 border border-gray-500">
|
||||
<h3>Du wirst in der Lage sein, ... </h3>
|
||||
|
||||
<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}}
|
||||
<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>
|
||||
</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>
|
||||
|
||||
<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